/* ============================================================
   part-01.css
   All CSS from 01ru_main.html, scoped under .file-01-container
   ============================================================ */


/* =============================================================
   STYLE BLOCK 1 — Main styles (lines 11-745)
   ============================================================= */

/* ===== Styles from 01_main.html ===== */

.file-01-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.file-01-container {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.file-01-container {
  width: 100%;
  max-width: 100vw;
  margin: 0 !important;
  padding: 0 !important;
}

.file-01-container {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.file-01-container #section-01 {
  margin: 0;
  padding: 0;
  width: 100%;
  background: linear-gradient(180deg, #0f172a 0%, #020617 8%, #0f172a 18%, #1e293b 32%, #1e3a5f 46%, #2a5080 56%, #3b6fa0 66%, #5a8eb8 78%, #8bb8d6 90%, #b8d8eb 100%);
}

.file-01-container .hero.hero--v2 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: clamp(16px, 3vw, 32px) !important;
  padding-right: clamp(16px, 3vw, 32px) !important;
}

.file-01-container .hero.hero--v2 > .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

.file-01-container {
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  color: #0f172a;
  background: transparent !important;
}

.file-01-container .hero {
  background: transparent !important;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.70);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.file-01-container .container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.file-01-container .watermark {
  position: absolute;
  top: calc(50% - 12vh);
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.25);
  font-size: clamp(3rem, 5vw + 1rem, 5rem);
  font-weight: 900;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

.file-01-container .top-quote {
  position: absolute;
  top: 3rem;
  right: clamp(2rem, 8vw, 6rem);
  color: white;
  font-family: 'Caveat', cursive;
  font-weight: 500;
  font-size: clamp(0.9rem, 1vw + 0.3rem, 1.15rem);
  line-height: 1.4;
  letter-spacing: 0.8px;
  z-index: 10;
  text-align: right;
}

.file-01-container .hero-subtitle {
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
  font-weight: 400;
  max-width: 700px;
  margin: 0 auto;
  opacity: 0.9;
  line-height: 1.5;
  text-align: center;
  z-index: 10;
}

.file-01-container .historical-point {
  position: absolute;
  top: 55vh;
  left: 18vw;
  max-width: 30vw;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Inter', sans-serif;
  z-index: 10;
  text-align: left;
}

.file-01-container .historical-text {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.file-01-container .alternative-model {
  position: absolute;
  top: 55vh;
  right: 18vw;
  max-width: 30vw;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Inter', sans-serif;
  z-index: 10;
  text-align: left;
}

.file-01-container .alternative-text {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.file-01-container .details-button,
.file-01-container .alternative-button {
  background: none;
  border: none;
  color: white;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.3s ease;
}

.file-01-container .modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  overflow-y: visible;
  padding: 2rem;
}

.file-01-container .modal-content {
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  max-width: 800px;
  margin: 3rem auto;
  padding: 3rem;
  padding-top: calc(3rem + 3px);
  border-radius: 16px;
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08);
}

.file-01-container .modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4a90e2, #1abce3, #22c55e);
  border-radius: 16px 16px 0 0;
}

.file-01-container .modal-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1e3a5f;
  margin-bottom: 2rem;
  line-height: 1.3;
  text-align: center;
  letter-spacing: -0.01em;
}

.file-01-container .modal-text {
  color: #374151;
  line-height: 1.7;
  font-size: 1rem;
  text-align: left;
}

.file-01-container .modal-text strong {
  font-weight: 600;
  color: #2a5080;
  display: block;
  margin: 1.2rem 0 0.3rem 0;
}

.file-01-container .modal-text ul {
  margin: 0.2rem 0;
  padding-left: 1.5rem;
}

.file-01-container .modal-text li {
  margin-bottom: 0.2rem;
}

.file-01-container .modal-text li strong {
  display: inline;
  color: #1e3a5f;
}

.file-01-container .modal-content::-webkit-scrollbar {
  width: 6px;
}
.file-01-container .modal-content::-webkit-scrollbar-track {
  background: transparent;
}
.file-01-container .modal-content::-webkit-scrollbar-thumb {
  background: rgba(42, 80, 128, 0.2);
  border-radius: 3px;
}
.file-01-container .modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(42, 80, 128, 0.35);
}

.file-01-container .modal-text em {
  font-style: italic;
  color: #0ea5e9;
}

.file-01-container .modal-key-advantage {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1e3a5f;
  text-align: center;
  margin: 2rem 0;
  padding: 1rem 0;
}

.file-01-container .close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #2a5080;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.file-01-container .close-button:hover {
  background-color: rgba(42, 80, 128, 0.1);
}

@media (max-width: 768px) {
  .file-01-container .historical-point,
  .file-01-container .alternative-model {
    position: static;
    margin-top: 3rem;
    padding: 0 2rem;
    text-align: left;
    max-width: 100%;
  }

  .file-01-container .top-quote {
    position: static;
    margin-top: 3rem;
    padding: 0 2rem;
    text-align: center;
    max-width: 100%;
  }

  .file-01-container .modal {
    padding: 1rem;
  }

  .file-01-container .modal-content {
    margin: 1rem auto;
    padding: 1.5rem;
    padding-top: calc(1.5rem + 3px);
    max-width: 95vw;
    max-height: 90vh;
    border-radius: 12px;
  }

  .file-01-container .modal-title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }

  .file-01-container .modal-text {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .file-01-container .modal-text strong {
    font-size: 0.95rem;
  }

  .file-01-container .modal-key-advantage {
    font-size: 1.1rem;
    margin: 1.5rem 0;
    padding: 0.75rem 0;
  }

  .file-01-container .close-button {
    width: 44px;
    height: 44px;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 28px;
  }

  .file-01-container .details-button,
  .file-01-container .alternative-button {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ===== 000: DOCUMENT — PEOPLE EARTHLINGS INTRODUCTION ===== */

.file-01-container #section-000 {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.file-01-container #section-000 .doc-fullwidth {
  width: 100%;
  position: relative;
}

.file-01-container #section-000 .doc-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.file-01-container #section-000 .doc-hero {
  background: linear-gradient(180deg, #b8d8eb 0%, #cde3f0 20%, #dfedf5 40%, #eef5f9 65%, #f4f8fb 85%, #f8fafc 100%);
  padding: clamp(3rem, 6vh, 5rem) 0 clamp(4rem, 8vh, 6rem);
  text-align: center;
  position: relative;
}

.file-01-container #section-000 .doc-hero-subtitle {
  font-size: clamp(1.35rem, 1.8vw + 0.4rem, 1.65rem);
  color: #2a4a60;
  line-height: 1.7;
  max-width: 750px;
  margin: 0 auto;
  font-weight: 400;
}

.file-01-container #section-000 .doc-split {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  min-height: 50vh;
}

.file-01-container #section-000 .doc-split-left {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.file-01-container #section-000 .doc-split-left h2 {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  line-height: 1.3;
  color: #0f172a;
}

.file-01-container #section-000 .doc-split-left p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 1rem;
}

.file-01-container #section-000 .doc-split-left--identity {
  background: linear-gradient(135deg, #e8f0f2 0%, #dfe9ed 50%, #d5e2e8 100%);
}

.file-01-container #section-000 .doc-split-left--freedom {
  background: linear-gradient(135deg, #e8e6f0 0%, #e0dde9 50%, #d8d4e3 100%);
}

.file-01-container #section-000 .doc-split-right {
  background: white;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.file-01-container #section-000 .doc-split-right > p {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.file-01-container #section-000 .doc-highlight {
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.file-01-container #section-000 .doc-highlight p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
  color: #0f172a;
}

.file-01-container #section-000 .doc-highlight--identity {
  background: linear-gradient(135deg, #e0f3f5, #f0fafb);
  border: 2px solid rgba(38, 96, 111, 0.18);
}
.file-01-container #section-000 .doc-highlight--identity strong { color: #1a3d4e; }

.file-01-container #section-000 .doc-highlight--freedom {
  background: linear-gradient(135deg, #e5e4f0, #f0f0f8);
  border: 2px solid rgba(70, 72, 120, 0.18);
}
.file-01-container #section-000 .doc-highlight--freedom strong { color: #2d3352; }

.file-01-container #section-000 .doc-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #cbd5e1 20%, #94a3b8 50%, #cbd5e1 80%, transparent 100%);
}

.file-01-container #section-000 .doc-cards-section {
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  padding: 3rem 0;
}

.file-01-container #section-000 .doc-cards-section h2 {
  font-size: 1.3rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 1rem;
  color: #0f172a;
}

.file-01-container #section-000 .doc-cards-section > .doc-inner > p {
  text-align: center;
  font-size: 1.05rem;
  color: #475569;
  max-width: 700px;
  margin: 0 auto 2.5rem;
}

.file-01-container #section-000 .doc-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.file-01-container #section-000 .doc-card {
  background: white;
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  border: 2px solid rgba(38, 96, 111, 0.08);
  transition: all 300ms ease;
  position: relative;
  overflow: hidden;
}

.file-01-container #section-000 .doc-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #26606f, #464878);
}

.file-01-container #section-000 .doc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(0,0,0,0.12);
}

.file-01-container #section-000 .doc-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a3d4e;
  margin-bottom: 0.75rem;
}

.file-01-container #section-000 .doc-card p {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.7;
}

.file-01-container #section-000 .doc-elements-section {
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  padding: 3rem 0;
}

.file-01-container #section-000 .doc-elements-section h2 {
  font-size: 1.3rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 2.5rem;
  color: #0f172a;
}

.file-01-container #section-000 .doc-elements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.file-01-container #section-000 .doc-element-card {
  background: linear-gradient(135deg, #2a5470, #3a7ca5);
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  transition: all 300ms ease;
}

.file-01-container #section-000 .doc-element-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(0,0,0,0.12);
}

.file-01-container #section-000 .doc-element-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #60a5fa;
  margin-bottom: 0.75rem;
}

.file-01-container #section-000 .doc-element-card p {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
}

.file-01-container #section-000 .fade-in,
.file-01-container #section-intro .fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.file-01-container #section-000 .fade-in.visible,
.file-01-container #section-intro .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1024px) {
  .file-01-container #section-000 .doc-split { grid-template-columns: 1fr; }
  .file-01-container #section-000 .doc-split-left { min-height: auto; padding: 2rem; }
  .file-01-container #section-000 .doc-elements-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .file-01-container #section-000 .doc-cards-grid { grid-template-columns: 1fr; }
  .file-01-container #section-000 .doc-elements-grid { grid-template-columns: 1fr; }
  .file-01-container #section-000 .doc-split-left h2 { font-size: 1.15rem; }
  .file-01-container #section-000 .doc-cards-section h2,
  .file-01-container #section-000 .doc-elements-section h2 { font-size: 1.15rem; }
}


/* ===== Styles from 00_main.html (with .container -> .hero-container) ===== */

.file-01-container .cards-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 32px;
}
@media (min-width: 640px) {
  .file-01-container .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .file-01-container .cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.file-01-container .cards-grid > .card {
  min-width: 0 !important;
}

.file-01-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.file-01-container {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: transparent !important;
  min-height: 100vh;
  position: relative;
}

.file-01-container .cards-section {
  background: linear-gradient(180deg, #b8d8eb 0%, #8bb8d6 10%, #5a8eb8 22%, #3b6fa0 34%, #2a5080 44%, #1e3a5f 54%, #1e293b 68%, #0f172a 82%, #020617 92%, #0f172a 100%) !important;
  padding: 60px 20px;
  min-height: auto;
}

.file-01-container .hero-container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.file-01-container .section-header {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
}

.file-01-container .section-subtitle {
  font-size: 18px;
  color: #64748b;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
  font-weight: 400;
}

.file-01-container .card {
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.08), -6px -6px 12px rgba(255, 255, 255, 0.4), inset 1px 1px 1px rgba(255, 255, 255, 0.5), inset -1px -1px 1px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.8);
  overflow: hidden;
}

.file-01-container .card-visual {
  padding: 0;
  min-height: 320px;
  overflow: hidden;
}

.file-01-container .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0.6;
}

.file-01-container .card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.1), -8px -8px 16px rgba(255, 255, 255, 0.5), inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.04);
}

.file-01-container .card-number {
  position: absolute;
  top: 32px;
  right: 32px;
  font-size: 48px;
  font-weight: 900;
  opacity: 0.03;
  font-family: 'Inter', sans-serif;
  pointer-events: none;
}

.file-01-container .page-preview-full {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 24px;
}

.file-01-container .preview-hero {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px;
}

.file-01-container .preview-title {
  font-size: 18px;
  font-weight: 800;
  color: white;
  letter-spacing: -0.5px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.file-01-container .preview-subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 6px;
  text-align: center;
  max-width: 80%;
}

.file-01-container .preview-content {
  height: 220px;
  overflow: hidden;
  background: #f8fafc;
}

.file-01-container .group-divider {
  text-align: center;
  margin: 80px 0;
  position: relative;
}

.file-01-container .divider-text {
  font-size: 18px;
  color: #cbd5e1;
  font-weight: 500;
  background: transparent;
  padding: 0 24px;
  position: relative;
  display: inline-block;
}

.file-01-container .divider-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
  z-index: -1;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.file-01-container .card {
  animation: fadeInUp 0.6s ease-out backwards;
}

@media (max-width: 768px) {
  .file-01-container .card {
    min-height: 320px;
  }
}

.file-01-container .u01 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 3px !important; }
.file-01-container .u02 { background: linear-gradient(135deg, #fffbeb, #fef3c7) !important; padding: 3px !important; border-radius: 2px !important; text-align: center !important; }
.file-01-container .u03 { font-size: 7px !important; color: #0f172a !important; font-weight: 700 !important; text-align: center !important; margin-bottom: 4px !important; }
.file-01-container .u08 { background: white !important; border-radius: 4px !important; padding: 6px !important; border-top: 3px solid #f59e0b !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }
.file-01-container .u10 { background: linear-gradient(135deg, #fef2f2, #fee2e2) !important; border-left: 3px solid #ef4444 !important; padding: 4px !important; border-radius: 3px !important; }
.file-01-container .u11 { background: linear-gradient(135deg, #e0f2fe, #f0f9ff) !important; border-radius: 4px !important; border-top: 2px solid #3b82f6 !important; padding: 6px !important; }
.file-01-container .u13 { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 2px !important; }
.file-01-container .u14 { background: white !important; border-radius: 2px !important; border-left: 2px solid #8b5cf6 !important; padding: 3px !important; }
.file-01-container .u16 { font-size: 7px !important; color: #1e40af !important; font-weight: 600 !important; text-align: center !important; }
.file-01-container .u17 { font-size: 7px !important; color: #92400e !important; font-weight: 600 !important; text-align: center !important; }
.file-01-container .u19 { flex: 1 !important; padding: 6px !important; display: flex !important; flex-direction: column !important; }
.file-01-container .u27 { background: rgba(255,255,255,0.15) !important; padding: 3px !important; border-radius: 2px !important; text-align: center !important; }
.file-01-container .u28 { background: white !important; border-radius: 3px !important; padding: 5px !important; border-top: 2px solid #ef4444 !important; }
.file-01-container .u29 { font-size: 6px !important; color: #dc2626 !important; font-weight: 600 !important; text-align: center !important; }
.file-01-container .u33 { font-size: 5px !important; opacity: 0.95 !important; text-align: center !important; line-height: 1.3 !important; }
.file-01-container .u34 { flex: 1 !important; display: flex !important; flex-direction: column !important; background: white !important; }

.file-01-container .card[data-variant="1"]::before { background: linear-gradient(135deg, #667eea, #764ba2); }
.file-01-container .card[data-variant="1"] .card-dot { background: #667eea; }
.file-01-container .card[data-variant="7"]::before { background: linear-gradient(135deg, #a8edea, #fed6e3); }
.file-01-container .card[data-variant="7"] .card-dot { background: #a8edea; }

.file-01-container .u35 { background: white !important; border-radius: 3px !important; padding: 4px !important; text-align: center !important; border-top: 2px solid #ef4444 !important; }
.file-01-container .u37 { background: linear-gradient(135deg, #0f172a, #1e293b) !important; color: white !important; padding: 8px !important; margin-top: auto !important; }
.file-01-container .u40 { background: linear-gradient(135deg, #7c2d12, #dc2626) !important; color: white !important; padding: 6px !important; }
.file-01-container .u41 { font-size: 7px !important; font-weight: 700 !important; text-align: center !important; margin-bottom: 3px !important; }
.file-01-container .u43 { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 4px !important; flex: 1 !important; }

.file-01-container {
  --card-height: 360px;
}

.file-01-container .cards-grid > .card {
  height: var(--card-height) !important;
  min-height: var(--card-height) !important;
  max-height: var(--card-height) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.file-01-container .cards-grid > .card > * {
  overflow: hidden;
}

.file-01-container .card-visual {
  padding: 0 !important;
}

.file-01-container .card-visual .page-preview-full {
  position: relative !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: inherit;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 92%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 92%, rgba(0,0,0,0) 100%);
}

.file-01-container .card-visual .page-preview-full *[style*="flex: 1"] {
  flex: 0 0 auto !important;
}

@media (max-width: 768px) {
  .file-01-container {
    --card-height: 400px;
  }
}

.file-01-container .cards-grid > .card {
  grid-column: auto !important;
  width: auto !important;
}

.file-01-container .cards-grid > .card .preview-hero {
  height: auto;
  padding: 10px !important;
}

.file-01-container .cards-grid > .card .preview-content {
  height: 180px !important;
}

.file-01-container .cards-grid > .card .page-preview-full {
  position: relative !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

.file-01-container .cards-grid > .card [style*="grid-column: 1 / -1"] {
  grid-column: auto !important;
}

.file-01-container .cards-grid > .card.card-visual {
  display: flex !important;
  flex-direction: column !important;
}

.file-01-container {
  --cards-cols-base: 1;
  --cards-cols-sm: 2;
  --cards-cols-md: 3;
  --cards-cols-lg: 3;
}

.file-01-container .cards-grid {
  grid-template-columns: repeat(var(--cards-cols-base, 1), 1fr);
}
@media (min-width: 640px) {
  .file-01-container .cards-grid {
    grid-template-columns: repeat(var(--cards-cols-sm, 2), 1fr);
  }
}
@media (min-width: 900px) {
  .file-01-container .cards-grid {
    grid-template-columns: repeat(var(--cards-cols-md, 3), 1fr);
  }
}
@media (min-width: 1280px) {
  .file-01-container .cards-grid {
    grid-template-columns: repeat(var(--cards-cols-lg, 3), 1fr);
  }
}
@media (min-width: 1280px) {
  .file-01-container .cards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.file-01-container .card .page-preview-full {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.file-01-container .card .page-preview-full::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

.file-01-container .card .page-preview-full {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.file-01-container .card .page-preview-full img {
  height: auto !important;
  object-fit: contain !important;
}

.file-01-container .cards-grid .card:nth-child(1) .page-preview-full {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.file-01-container .cards-grid .card:nth-child(1) .preview-hero {
  flex: 0 0 auto;
  height: auto;
  min-height: auto;
}
.file-01-container .cards-grid .card:nth-child(1) .preview-content {
  flex: 1 1 auto;
  height: auto;
  overflow: visible;
}

.file-01-container .bump2 {
  font-size: calc(1em + 2px) !important;
}

.file-01-container .section-subtitle .bump2 {
  font-size: 20px !important;
}
.file-01-container .divider-text .bump2 {
  font-size: 20px !important;
}

.file-01-container .card[data-variant="7"] .page-preview-full {
  position: relative;
}
.file-01-container .card[data-variant="7"] .page-preview-full > div:first-child {
  height: auto !important;
  min-height: 72px;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.file-01-container .card[data-variant="7"] .page-preview-full > div:first-child > div[style*='position: absolute'] {
  display: none !important;
}

.file-01-container .cards-grid .card {
  position: relative;
}
.file-01-container .cards-grid .card .card-hitarea {
  position: absolute;
  inset: 0;
  text-indent: -9999px;
  overflow: hidden;
  background: transparent;
}
.file-01-container .cards-grid .card .card-hitarea:focus-visible {
  outline: 2px solid rgba(59,130,246,0.8);
  outline-offset: 3px;
  text-indent: 0;
}

.file-01-container {
  scroll-behavior: smooth;
}
.file-01-container .mainpage-section {
  scroll-margin-top: 80px;
}

.file-01-container .cards-grid .card {
  cursor: pointer;
  position: relative;
}

.file-01-container .cards-grid .card {
  position: relative;
}
.file-01-container .cards-grid .card .map-link.map-overlay {
  position: absolute;
  inset: 0;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  background: transparent;
  border: 0;
  outline: none;
}
.file-01-container .cards-grid .card .map-link.map-overlay:focus-visible {
  outline: 2px solid rgba(59,130,246,0.8);
  outline-offset: 3px;
  text-indent: 0;
}

.file-01-container .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.file-01-container .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.file-01-container .g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.file-01-container .box-w { background: #fff; border-radius: 6px; padding: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.05); }
.file-01-container .box-d { background: linear-gradient(135deg, #1e293b, #334155); border-radius: 6px; padding: 8px; color: #fff; }
.file-01-container .box-p { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); border-radius: 6px; padding: 6px; }
.file-01-container .box-r { background: linear-gradient(135deg, #fef2f2, #fee2e2); padding: 8px; margin: 0 10px; }
.file-01-container .box-y { background: linear-gradient(135deg, #fffbeb, #fef3c7); padding: 10px; margin: 10px; margin-top: 10px; margin-bottom: 0; flex: 1; display: flex; flex-direction: column; }
.file-01-container .box-g { background: linear-gradient(135deg, #f8fafc, #e2e8f0); padding: 10px; margin: 0 10px; }
.file-01-container .t-blue { font-size: 10px; font-weight: 700; color: #3b82f6; margin-bottom: 4px; }
.file-01-container .t-purple { font-size: 6px; color: #6d28d9; font-weight: 600; }
.file-01-container .t-muted { font-size: 6px; color: #64748b; margin-top: 2px; }
.file-01-container .t-dark { font-size: 9px; font-weight: 700; margin-bottom: 3px; }
.file-01-container .t-sub { font-size: 7px; opacity: .9; line-height: 1.2; }
.file-01-container .t-red { font-size: 8px; color: #dc2626; font-weight: 700; text-align: center; margin-bottom: 5px; }
.file-01-container .t-warn { font-size: 9px; color: #d97706; font-weight: 700; text-align: center; margin-bottom: 8px; }
.file-01-container .t-center { font-size: 9px; font-weight: 700; color: #1e293b; margin-bottom: 6px; text-align: center; }
.file-01-container .t-sm { font-size: 8px; color: #64748b; line-height: 1.3; }
.file-01-container .t-crit { font-size: 6px; color: #991b1b; font-weight: 600; }
.file-01-container .t-num { font-size: 8px; font-weight: 900; color: #ef4444; }
.file-01-container .t-tiny { font-size: 4px; color: #7f1d1d; }
.file-01-container .t-tiny-g { font-size: 4px; color: #64748b; }
.file-01-container .t-big { font-size: 12px; font-weight: 900; color: #ef4444; }
.file-01-container .t-big-y { font-size: 12px; font-weight: 900; color: #f59e0b; }
.file-01-container .t-big-g { font-size: 12px; font-weight: 900; color: #10b981; }
.file-01-container .box-stat { background: #fff; border-radius: 3px; padding: 4px; text-align: center; }
.file-01-container .box-stat-y { background: #fff; border-radius: 3px; padding: 4px; text-align: center; border-top: 2px solid #f59e0b; }
.file-01-container .box-stat-g { background: #fff; border-radius: 3px; padding: 4px; text-align: center; border-top: 2px solid #10b981; }


/* =============================================================
   STYLE BLOCK 2 — Cards section styles (lines 748-786)
   ============================================================= */

.file-01-container section.cards-section .map-title-xxl { color: #e2e8f0 !important; }
.file-01-container section.cards-section .map-subtitle-xl { color: #cbd5e1 !important; }
.file-01-container section.cards-section .cards-divider-boost { color: #f1f5f9 !important; }
.file-01-container .divider-text { color: #cbd5e1 !important; }
.file-01-container section.cards-section { padding-top: clamp(80px, 12vh, 260px); }

.file-01-container section.cards-section .section-header .section-subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-align: center;
}

.file-01-container section.cards-section .map-title-xxl {
  color: #e2e8f0;
  display: block;
  font-weight: 700;
  font-size: clamp(30px, calc(3.2vw + 10px), 54px);
  line-height: 1.15;
}

.file-01-container section.cards-section .map-subtitle-xl {
  display: block;
  font-weight: 600;
  font-size: clamp(23px, calc(2.2vw + 7px), 35px);
  line-height: 1.25;
  margin-top: clamp(12px, 1.8vh, 28px);
}

.file-01-container section.cards-section .cards-divider-boost {
  display: inline-block;
  font-weight: 600;
  font-size: clamp(23px, calc(2.2vw + 7px), 35px);
  line-height: 1.25;
}


/* =============================================================
   STYLE BLOCK 3 — ru-logo-fix (lines 789-806)
   ============================================================= */

.file-01-container #hero-new,
.file-01-container #hero-new .container,
.file-01-container #hero-new .hero-content,
.file-01-container #hero-new .hero-inner {
  position: relative !important;
  z-index: 3 !important;
}

.file-01-container #hero-new img[src*="logo"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 4 !important;
}

.file-01-container #hero-new::before,
.file-01-container #hero-new::after {
  z-index: 0 !important;
}


/* =============================================================
   STYLE BLOCK 4 — Inline in body (lines 812-850)
   ============================================================= */

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.file-01-container #section-01 {
  background: linear-gradient(180deg, #0f172a 0%, #020617 8%, #0f172a 18%, #1e293b 32%, #1e3a5f 46%, #2a5080 56%, #3b6fa0 66%, #5a8eb8 78%, #8bb8d6 90%, #b8d8eb 100%);
}

.file-01-container .cards-section {
  background: linear-gradient(180deg, #b8d8eb 0%, #8bb8d6 10%, #5a8eb8 22%, #3b6fa0 34%, #2a5080 44%, #1e3a5f 54%, #1e293b 68%, #0f172a 82%, #020617 92%, #0f172a 100%) !important;
}

.file-01-container #hero-new div.details-button,
.file-01-container #hero-new div.alternative-button {
  text-decoration: none !important;
}

.file-01-container #hero-new > div:last-child > div:hover {
  background: rgba(255,255,255,0.035) !important;
  border: none !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2), 0 0 20px rgba(74,144,226,0.08) !important;
  transform: translateY(-3px);
}

.file-01-container #hero-new > div:last-child > div:hover button {
  opacity: 1 !important;
  transform: translateX(5px);
}

.file-01-container .modal-content {
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  color: #374151 !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.08) !important;
}

.file-01-container .modal-title { color: #1e3a5f !important; }

.file-01-container .modal-text,
.file-01-container .modal-text p,
.file-01-container .modal-text li { color: #374151 !important; }

.file-01-container .modal-text strong { color: #2a5080 !important; }

.file-01-container .modal-text li strong { color: #1e3a5f !important; font-weight: 700 !important; display: inline !important; }

.file-01-container .modal-text em { color: #0ea5e9 !important; }

.file-01-container .modal-key-advantage { color: #1e3a5f !important; }

.file-01-container .close-button { color: #2a5080 !important; }
.file-01-container .close-button:hover { color: #1e3a5f !important; }

@media (max-width: 768px) {
  .file-01-container #hero-new > div:last-child {
    flex-direction: column !important;
    gap: 2rem !important;
    padding: 0 1rem !important;
    align-items: center !important;
  }
  .file-01-container #hero-new > div:last-child > div {
    max-width: 100% !important;
    text-align: center !important;
  }
  .file-01-container #hero-new > div:last-child > div > button {
    margin: 0 auto !important;
    display: block !important;
  }
  .file-01-container .hero-intro-cards {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
  }
  .file-01-container .hero-intro-cards > div {
    max-width: 100% !important;
  }
  .file-01-container #hero-new > div:first-of-type {
    position: static !important;
    text-align: center !important;
    margin-bottom: 2rem;
  }
}


/* =============================================================
   STYLE BLOCK 5 — Cross-browser fixes (lines 2734-2797)
   ============================================================= */

@media (prefers-reduced-motion: no-preference) {
  .file-01-container {
    scroll-behavior: smooth;
  }
}

.file-01-container {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.file-01-container .card,
.file-01-container .cards-grid > .card {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.file-01-container .hero,
.file-01-container .preview-hero,
.file-01-container .box-d,
.file-01-container .u37,
.file-01-container .u40 {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.file-01-container {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@supports (padding: max(0px)) {
  .file-01-container .hero.hero--v2 {
    padding-left: max(clamp(16px, 3vw, 32px), env(safe-area-inset-left));
    padding-right: max(clamp(16px, 3vw, 32px), env(safe-area-inset-right));
  }
}

@supports not (min-height: 100dvh) {
  .file-01-container .hero.hero--v2 {
    min-height: 100vh;
    min-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 1600px) {
  .file-01-container .container,
  .file-01-container .hero-container {
    max-width: 1440px;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .file-01-container .card {
    border: 0.5px solid rgba(255, 255, 255, 0.8);
  }
}


/* =============================================================
   STYLE BLOCK 6 — hero-v2-patch (lines 2799-2995)
   ============================================================= */

.file-01-container .hero.hero--v2 {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr minmax(32ch, 42ch) minmax(32ch, 42ch) 1fr;
  grid-template-rows: clamp(72px, 14vh, 180px) auto auto clamp(16px, 2.5vh, 28px) auto 1fr;
  grid-template-areas:
    ".      .        slogan   slogan"
    "title  title    title    title"
    "subtl  subtl    subtl    subtl"
    ".      .        .        ."
    ".      left     right    ."
    ".      .        .        .";
  align-items: center;
  column-gap: clamp(16px, 2vw, 28px);
  row-gap: clamp(8px, 2vh, 20px);
  padding: clamp(16px, 3vw, 32px);
  padding-top: var(--header-height, 80px);
  position: relative;
  overflow: hidden;
}

.file-01-container .hero.hero--v2 .hero-part-label {
  position: absolute;
  bottom: clamp(16px, 2vh, 24px);
  right: calc(clamp(16px, 3vw, 32px) + 1.5cm);
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.5px;
  z-index: 10;
}

.file-01-container .hero.hero--v2 .hero-watermark,
.file-01-container .hero.hero--v2 .watermark {
  grid-area: title;
  position: static !important;
  margin: 0;
  text-align: center;
  justify-self: center;
  white-space: nowrap;
  max-width: 92vw;
  font-weight: 800;
  font-size: clamp(28px, 6.2vw, 80px);
  line-height: 1.05;
  color: rgba(255,255,255,0.40);
  text-shadow: 0 2px 6px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
}

.file-01-container .hero.hero--v2 .hero-subtitle {
  grid-area: subtl;
  position: static !important;
  margin: 0;
  margin-top: clamp(-8px, -1vh, -4px);
  text-align: center;
  justify-self: center;
  max-width: 90vw;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  top: auto;
  left: auto;
  transform: none;
  opacity: 1;
}

.file-01-container .hero.hero--v2 .top-quote {
  grid-area: slogan;
  justify-self: end;
  align-self: start;
  margin: 0;
  margin-right: clamp(1rem, 3vw, 3rem);
  text-align: right;
  white-space: nowrap;
  font-size: clamp(14px, 1.1vw + 0.2rem, 20px);
  line-height: 1.45;
}

.file-01-container .hero.hero--v2 .historical-point {
  grid-area: left;
  justify-self: start;
  max-width: 34rem;
  text-align: left;
  transform: translateX(-40%);
  align-self: start;
}

.file-01-container .hero.hero--v2 .alternative-model {
  grid-area: right;
  justify-self: end;
  max-width: 34rem;
  text-align: left;
  transform: translateX(40%);
  align-self: start;
}

.file-01-container .hero.hero--v2 .historical-point,
.file-01-container .hero.hero--v2 .alternative-model {
  position: static !important;
  margin: 0;
  margin-top: clamp(28px, 3vh, 40px);
  color: rgba(255,255,255,0.9);
  line-height: 1.6;
}

@media (max-width: 820px) {
  .file-01-container .hero.hero--v2 {
    min-height: auto;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "title"
      "subtl"
      "left"
      "right";
    row-gap: clamp(12px, 2.8vh, 18px);
    padding-top: calc(var(--header-height, 60px) + 20px);
    padding-bottom: clamp(80px, 15vh, 120px);
    overflow: visible;
  }

  .file-01-container .hero.hero--v2 .top-quote { display: none !important; }

  .file-01-container .hero.hero--v2 .hero-watermark,
  .file-01-container .hero.hero--v2 .watermark,
  .file-01-container .hero.hero--v2 .hero-subtitle {
    text-align: center;
    justify-self: center;
    max-width: 92vw;
    transform: none;
  }

  .file-01-container .hero.hero--v2 .historical-point,
  .file-01-container .hero.hero--v2 .alternative-model {
    text-align: center;
    justify-self: center;
    max-width: 92vw;
    transform: none;
    align-self: auto;
    margin-top: 0;
    overflow: visible;
    padding-bottom: 2rem;
  }

  .file-01-container .hero.hero--v2 .details-button,
  .file-01-container .hero.hero--v2 .alternative-button {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
  }

  .file-01-container .hero.hero--v2 .hero-part-label {
    bottom: 12px;
    right: 16px;
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .file-01-container .hero.hero--v2 {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: clamp(70px, 14vh, 100px);
  }

  .file-01-container .hero.hero--v2 .historical-point,
  .file-01-container .hero.hero--v2 .alternative-model {
    max-width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .file-01-container .hero.hero--v2 .historical-text,
  .file-01-container .hero.hero--v2 .alternative-text {
    font-size: 1rem;
    line-height: 1.5;
  }
}
/* ============================================================
   part-02.css
   All CSS from 02ru_main.html, scoped under .file-02-container
   ============================================================ */

/* --- Variables (scoped to container) --- */
.file-02-container {
    --color-primary: #3b82f6;
    --color-secondary: #8b5cf6;
    --color-accent: #06b6d4;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-border: #e2e8f0;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
    --space-4xl: 3rem;

    --font-size-sm: 0.875rem;
    --font-size-base: 0.95rem;
    --font-size-lg: 1.05rem;
    --font-size-xl: 1.15rem;
    --font-size-2xl: 1.3rem;
    --font-size-3xl: 1.5rem;

    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;

    --shadow-card: 0 15px 35px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 25px 50px rgba(0, 0, 0, 0.12);

    --transition-base: 300ms ease;
}

/* --- Reset (scoped) --- */
.file-02-container {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.file-02-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.7;
    color: var(--color-text-primary);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f8fafc 100%);
    font-size: var(--font-size-base);
}

/* --- Animated background --- */
.file-02-container .animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
        rgba(139, 92, 246, 0.03) 0%,
        rgba(16, 185, 129, 0.03) 50%,
        rgba(6, 182, 212, 0.03) 100%);
    background-size: 300% 300%;
    animation: gradientShift 25s ease infinite;
    z-index: -1;
}

/* --- Keyframes (global, not scoped) --- */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes slidePattern {
    0% { transform: translateX(0); }
    100% { transform: translateX(40px); }
}

/* --- Fullwidth section --- */
.file-02-container .fullwidth-section {
    width: 100%;
    position: relative;
}

.file-02-container .section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

/* --- Hero --- */
.file-02-container .hero-section {
    background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
    padding: var(--space-4xl) 0;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.file-02-container .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 70%, rgba(255,255,255,0.1) 0%, transparent 50%);
}

.file-02-container .hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.file-02-container .hero-title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    margin-bottom: var(--space-lg);
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #ffffff, #d1fae5, #ffffff);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s ease-in-out infinite;
}

.file-02-container .hero-subtitle {
    font-size: var(--font-size-xl);
    opacity: 0.95;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto;
}

/* --- Philosophy Section --- */
.file-02-container .philosophy-section {
    background: white;
    padding: var(--space-4xl) 0;
}

.file-02-container .philosophy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.file-02-container .philosophy-text h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xl);
}

.file-02-container .philosophy-text p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.file-02-container .philosophy-visual {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.file-02-container .philosophy-card {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    border-left: 4px solid var(--color-success);
    transition: all var(--transition-base);
}

.file-02-container .philosophy-card:hover {
    transform: translateX(5px);
}

.file-02-container .philosophy-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #047857;
    margin-bottom: var(--space-sm);
}

.file-02-container .philosophy-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* --- Values Section --- */
.file-02-container .values-section {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: white;
    padding: var(--space-4xl) 0;
    position: relative;
    overflow: hidden;
}

.file-02-container .values-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%);
    background-size: 60px 60px;
    animation: slidePattern 40s linear infinite;
}

.file-02-container .values-section .section-inner {
    position: relative;
    z-index: 2;
}

.file-02-container .values-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.file-02-container .values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.file-02-container .value-item {
    text-align: center;
    padding: var(--space-2xl);
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all var(--transition-base);
}

.file-02-container .value-item:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-5px);
}

.file-02-container .value-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #10b981, #34d399);
    border-radius: 50%;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.file-02-container .value-item h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: #6ee7b7;
}

.file-02-container .value-item p {
    font-size: var(--font-size-base);
    color: rgba(255,255,255,0.8);
    line-height: 1.7;
}

/* --- Trust Section --- */
.file-02-container .trust-section {
    background: linear-gradient(135deg, #fdf4ff, #fae8ff);
    padding: var(--space-4xl) 0;
}

.file-02-container .trust-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
}

.file-02-container .trust-section > .section-inner > p.intro {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
    line-height: 1.7;
}

.file-02-container .trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.file-02-container .trust-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-card);
    border-top: 4px solid #a855f7;
    transition: all var(--transition-base);
}

.file-02-container .trust-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.file-02-container .trust-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #7c3aed;
    margin-bottom: var(--space-md);
}

.file-02-container .trust-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* --- Community Section --- */
.file-02-container .community-section {
    background: white;
    padding: var(--space-4xl) 0;
}

.file-02-container .community-split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.file-02-container .community-content h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xl);
}

.file-02-container .community-content p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.file-02-container .community-visual {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    position: relative;
    overflow: hidden;
}

.file-02-container .community-visual::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    animation: float 6s ease-in-out infinite;
}

.file-02-container .community-stat {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--space-xl);
}

.file-02-container .community-stat h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #1e40af;
    margin-bottom: var(--space-md);
}

.file-02-container .community-stat p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* --- Fade Animation --- */
.file-02-container .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.file-02-container .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .file-02-container .philosophy-grid,
    .file-02-container .community-split {
        grid-template-columns: 1fr;
    }

    .file-02-container .values-grid {
        grid-template-columns: 1fr;
    }

    .file-02-container .trust-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .file-02-container .hero-title {
        font-size: var(--font-size-2xl);
    }

    .file-02-container .philosophy-text h2,
    .file-02-container .values-section h2,
    .file-02-container .trust-section h2,
    .file-02-container .community-content h2 {
        font-size: var(--font-size-xl);
    }
}
.file-03-container {
    --color-primary: #3b82f6;
    --color-secondary: #8b5cf6;
    --color-accent: #06b6d4;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-border: #e2e8f0;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
    --space-4xl: 3rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 0.95rem;
    --font-size-lg: 1.05rem;
    --font-size-xl: 1.15rem;
    --font-size-2xl: 1.3rem;
    --font-size-3xl: 1.5rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --shadow-card: 0 15px 35px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 25px 50px rgba(0, 0, 0, 0.12);
    --transition-base: 300ms ease;
}

.file-03-container {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.file-03-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.7;
    color: var(--color-text-primary);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f8fafc 100%);
    font-size: var(--font-size-base);
}

.file-03-container .animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
        rgba(6, 182, 212, 0.03) 0%,
        rgba(59, 130, 246, 0.03) 50%,
        rgba(139, 92, 246, 0.03) 100%);
    background-size: 300% 300%;
    animation: gradientShift 25s ease infinite;
    z-index: -1;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.file-03-container .fullwidth-section {
    width: 100%;
    position: relative;
}

.file-03-container .section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.file-03-container .hero-section {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 50%, #22d3ee 100%);
    padding: var(--space-4xl) 0;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.file-03-container .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.15) 0%, transparent 50%);
}

.file-03-container .hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.file-03-container .hero-title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    margin-bottom: var(--space-lg);
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #ffffff, #cffafe, #ffffff);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s ease-in-out infinite;
}

.file-03-container .hero-subtitle {
    font-size: var(--font-size-xl);
    opacity: 0.95;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto;
}

.file-03-container .dao-section {
    background: white;
    padding: var(--space-4xl) 0;
}

.file-03-container .dao-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.file-03-container .dao-content h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xl);
}

.file-03-container .dao-content p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.file-03-container .dao-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.file-03-container .dao-feature {
    background: linear-gradient(135deg, #ecfeff, #cffafe);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    border-left: 4px solid var(--color-accent);
    transition: all var(--transition-base);
}

.file-03-container .dao-feature:hover {
    transform: translateX(5px);
}

.file-03-container .dao-feature h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #0e7490;
    margin-bottom: var(--space-sm);
}

.file-03-container .dao-feature p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.file-03-container .cells-section {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: white;
    padding: var(--space-4xl) 0;
    position: relative;
    overflow: hidden;
}

.file-03-container .cells-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(6, 182, 212, 0.1) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 30%);
}

.file-03-container .cells-section .section-inner {
    position: relative;
    z-index: 2;
}

.file-03-container .cells-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-lg);
}

.file-03-container .cells-section > .section-inner > p.intro {
    font-size: var(--font-size-lg);
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
    opacity: 0.9;
}

.file-03-container .cells-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.file-03-container .cell-card {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    transition: all var(--transition-base);
}

.file-03-container .cell-card:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-5px);
}

.file-03-container .cell-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #67e8f9;
    margin-bottom: var(--space-md);
}

.file-03-container .cell-card p {
    font-size: var(--font-size-base);
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
}

.file-03-container .ec-nature-section {
    background: linear-gradient(135deg, #fef3c7, #fef9c3);
    padding: var(--space-4xl) 0;
}

.file-03-container .ec-nature-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.file-03-container .ec-nature-content h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xl);
}

.file-03-container .ec-nature-content p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.file-03-container .ec-nature-content p:last-child {
    margin-bottom: 0;
}

.file-03-container .ec-quote {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-3xl);
    box-shadow: var(--shadow-card);
    border-left: 4px solid var(--color-warning);
}

.file-03-container .ec-quote blockquote {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: #92400e;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: var(--space-xl);
}

.file-03-container .ec-quote-points {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.file-03-container .ec-quote-point {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.file-03-container .ec-quote-point span {
    color: var(--color-warning);
    font-weight: 700;
    flex-shrink: 0;
}

.file-03-container .utility-section {
    background: white;
    padding: var(--space-4xl) 0;
}

.file-03-container .utility-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
}

.file-03-container .utility-section > .section-inner > p.intro {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
}

.file-03-container .utility-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.file-03-container .utility-card {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-card);
    border-top: 4px solid var(--color-warning);
    transition: all var(--transition-base);
}

.file-03-container .utility-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.file-03-container .utility-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    border-radius: 50%;
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.file-03-container .utility-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #92400e;
    margin-bottom: var(--space-md);
}

.file-03-container .utility-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.file-03-container .evolution-section {
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    padding: var(--space-4xl) 0;
}

.file-03-container .evolution-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
}

.file-03-container .evolution-section > .section-inner > p.intro {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
}

.file-03-container .evolution-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: 800px;
    margin: 0 auto;
}

.file-03-container .evolution-step {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-card);
    border-left: 4px solid var(--color-success);
    transition: all var(--transition-base);
}

.file-03-container .evolution-step:hover {
    transform: translateX(5px);
}

.file-03-container .evolution-step h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #065f46;
    margin-bottom: var(--space-sm);
}

.file-03-container .evolution-step p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0;
}

.file-03-container .integration-section {
    background: white;
    padding: var(--space-4xl) 0;
}

.file-03-container .integration-split {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: var(--space-3xl);
    align-items: center;
}

.file-03-container .integration-visual {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    border-radius: var(--radius-2xl);
    padding: var(--space-3xl);
    position: relative;
    overflow: hidden;
}

.file-03-container .integration-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.3) 25%, transparent 25%);
    background-size: 30px 30px;
}

.file-03-container .integration-diagram {
    position: relative;
    z-index: 2;
    text-align: center;
}

.file-03-container .integration-node {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.file-03-container .integration-node h4 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: #4338ca;
}

.file-03-container .integration-node .node-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-xs);
}

.file-03-container .integration-content h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xl);
}

.file-03-container .integration-content p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.file-03-container .principles-section {
    background: var(--color-bg-secondary);
    padding: var(--space-4xl) 0;
}

.file-03-container .principles-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
}

.file-03-container .principles-section > .section-inner > p.intro {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
}

.file-03-container .principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.file-03-container .principle-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-card);
    border-top: 4px solid var(--color-primary);
    transition: all var(--transition-base);
}

.file-03-container .principle-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.file-03-container .principle-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.file-03-container .principle-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.file-03-container .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.file-03-container .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.file-03-container .dao-depth-section {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    padding: var(--space-4xl) 0;
}

.file-03-container .dao-depth-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
}

.file-03-container .dao-depth-section > .section-inner > p.intro {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 750px;
    margin: 0 auto var(--space-3xl);
}

.file-03-container .dao-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
}

.file-03-container .dao-level-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-card);
    border-top: 4px solid var(--color-primary);
    transition: all var(--transition-base);
}

.file-03-container .dao-level-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.file-03-container .dao-level-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.file-03-container .dao-level-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.file-03-container .dao-safeguards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.file-03-container .dao-safeguard-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-card);
    border-left: 4px solid var(--color-accent);
    transition: all var(--transition-base);
}

.file-03-container .dao-safeguard-card:hover {
    transform: translateX(5px);
}

.file-03-container .dao-safeguard-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #0e7490;
    margin-bottom: var(--space-md);
}

.file-03-container .dao-safeguard-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.file-03-container .dao-subsection-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xl);
    text-align: center;
}

.file-03-container .dao-apply-section {
    background: white;
    padding: var(--space-4xl) 0;
}

.file-03-container .cells-lifecycle-section {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    padding: var(--space-4xl) 0;
}

.file-03-container .cells-lifecycle-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
}

.file-03-container .cells-lifecycle-section > .section-inner > p.intro {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
}

.file-03-container .lifecycle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-3xl);
}

.file-03-container .lifecycle-step {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base);
    position: relative;
}

.file-03-container .lifecycle-step:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.file-03-container .lifecycle-number {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: #bbf7d0;
    margin-bottom: var(--space-sm);
    line-height: 1;
}

.file-03-container .lifecycle-step h3 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: #065f46;
    margin-bottom: var(--space-md);
}

.file-03-container .lifecycle-step p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.file-03-container .cells-economy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.file-03-container .cells-economy-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base);
}

.file-03-container .cells-economy-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

.file-03-container .cells-economy-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.file-03-container .cells-economy-ai h3 { color: var(--color-primary); }
.file-03-container .cells-economy-ai { border-top: 4px solid var(--color-primary); }

.file-03-container .cells-economy-fund h3 { color: #b45309; }
.file-03-container .cells-economy-fund { border-top: 4px solid #f59e0b; }

.file-03-container .cells-economy-external h3 { color: #065f46; }
.file-03-container .cells-economy-external { border-top: 4px solid var(--color-success); }

.file-03-container .cells-economy-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.file-03-container .dao-apply-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
}

.file-03-container .dao-apply-section > .section-inner > p.intro {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 750px;
    margin: 0 auto var(--space-3xl);
}

.file-03-container .dao-apply-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
}

.file-03-container .dao-apply-card {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base);
    border-top: 4px solid var(--color-success);
}

.file-03-container .dao-apply-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.file-03-container .dao-apply-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #065f46;
    margin-bottom: var(--space-md);
}

.file-03-container .dao-apply-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.file-03-container .dao-theory-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.file-03-container .dao-theory-card {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-card);
    border-left: 4px solid var(--color-secondary);
}

.file-03-container .dao-theory-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: var(--space-md);
}

.file-03-container .dao-theory-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

@media (max-width: 1024px) {
    .file-03-container .dao-grid,
    .file-03-container .ec-nature-grid,
    .file-03-container .integration-split,
    .file-03-container .dao-theory-split {
        grid-template-columns: 1fr;
    }

    .file-03-container .cells-grid,
    .file-03-container .utility-grid,
    .file-03-container .dao-safeguards-grid,
    .file-03-container .cells-economy-grid {
        grid-template-columns: 1fr;
    }

    .file-03-container .principles-grid,
    .file-03-container .dao-levels-grid,
    .file-03-container .dao-apply-grid,
    .file-03-container .lifecycle-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .file-03-container .hero-title {
        font-size: var(--font-size-2xl);
    }

    .file-03-container .dao-content h2,
    .file-03-container .cells-section h2,
    .file-03-container .ec-nature-content h2,
    .file-03-container .utility-section h2,
    .file-03-container .evolution-section h2,
    .file-03-container .principles-section h2,
    .file-03-container .integration-content h2 {
        font-size: var(--font-size-xl);
    }
}
.file-04-container {
    --color-primary: #3b82f6;
    --color-secondary: #8b5cf6;
    --color-accent: #06b6d4;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-border: #e2e8f0;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
    --space-4xl: 3rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 0.95rem;
    --font-size-lg: 1.05rem;
    --font-size-xl: 1.15rem;
    --font-size-2xl: 1.3rem;
    --font-size-3xl: 1.5rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --shadow-card: 0 15px 35px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 25px 50px rgba(0, 0, 0, 0.12);
    --transition-base: 300ms ease;
}

.file-04-container {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.file-04-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.7;
    color: var(--color-text-primary);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f8fafc 100%);
    font-size: var(--font-size-base);
}

.file-04-container .animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(249, 115, 22, 0.03) 0%, rgba(234, 88, 12, 0.03) 50%, rgba(251, 146, 60, 0.03) 100%);
    background-size: 300% 300%;
    animation: gradientShift 25s ease infinite;
    z-index: -1;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes slidePattern {
    0% { transform: translateX(0); }
    100% { transform: translateX(40px); }
}

.file-04-container .fullwidth-section {
    width: 100%;
    position: relative;
}

.file-04-container .section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.file-04-container .hero-section {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 50%, #fb923c 100%);
    padding: var(--space-4xl) 0;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.file-04-container .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 70%, rgba(255,255,255,0.15) 0%, transparent 50%);
}

.file-04-container .hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.file-04-container .hero-title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    margin-bottom: var(--space-lg);
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #ffffff, #fed7aa, #ffffff);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s ease-in-out infinite;
}

.file-04-container .hero-subtitle {
    font-size: var(--font-size-xl);
    opacity: 0.95;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto;
}

.file-04-container .requirements-section {
    background: white;
    padding: var(--space-4xl) 0;
}

.file-04-container .requirements-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-3xl);
    color: var(--color-text-primary);
}

.file-04-container .requirements-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.file-04-container .requirement-card {
    text-align: center;
    padding: var(--space-2xl);
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border-radius: var(--radius-xl);
    border: 2px solid rgba(249, 115, 22, 0.2);
    transition: all var(--transition-base);
}

.file-04-container .requirement-card:hover {
    transform: translateY(-5px);
    border-color: rgba(249, 115, 22, 0.4);
}

.file-04-container .requirement-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    border-radius: 50%;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.file-04-container .requirement-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #c2410c;
    margin-bottom: var(--space-md);
}

.file-04-container .requirement-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.file-04-container .steps-section {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: white;
    padding: var(--space-4xl) 0;
    position: relative;
    overflow: hidden;
}

.file-04-container .steps-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%);
    background-size: 60px 60px;
    animation: slidePattern 40s linear infinite;
}

.file-04-container .steps-section .section-inner {
    position: relative;
    z-index: 2;
}

.file-04-container .steps-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.file-04-container .steps-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: 800px;
    margin: 0 auto;
}

.file-04-container .step-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: var(--space-xl);
    align-items: start;
}

.file-04-container .step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: 800;
    flex-shrink: 0;
}

.file-04-container .step-content {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
}

.file-04-container .step-content h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #fdba74;
    margin-bottom: var(--space-md);
}

.file-04-container .step-content p {
    font-size: var(--font-size-base);
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
}

.file-04-container .rights-section {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    padding: var(--space-4xl) 0;
}

.file-04-container .rights-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
}

.file-04-container .rights-section > .section-inner > p.intro {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
}

.file-04-container .rights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.file-04-container .right-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-card);
    border-left: 4px solid var(--color-success);
    transition: all var(--transition-base);
}

.file-04-container .right-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.file-04-container .right-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #059669;
    margin-bottom: var(--space-md);
}

.file-04-container .right-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.file-04-container .privacy-section {
    background: white;
    padding: var(--space-4xl) 0;
}

.file-04-container .privacy-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.file-04-container .privacy-content h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xl);
}

.file-04-container .privacy-content p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.file-04-container .privacy-visual {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.file-04-container .privacy-item {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    border-left: 4px solid var(--color-primary);
}

.file-04-container .privacy-item h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #1e40af;
    margin-bottom: var(--space-sm);
}

.file-04-container .privacy-item p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.file-04-container .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.file-04-container .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1024px) {
    .file-04-container .requirements-grid {
        grid-template-columns: 1fr;
    }
    .file-04-container .rights-grid {
        grid-template-columns: 1fr;
    }
    .file-04-container .privacy-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .file-04-container .hero-title {
        font-size: var(--font-size-2xl);
    }
    .file-04-container .step-item {
        grid-template-columns: 50px 1fr;
        gap: var(--space-lg);
    }
    .file-04-container .step-number {
        width: 50px;
        height: 50px;
        font-size: var(--font-size-lg);
    }
}
.file-05-container {
    --color-primary: #3b82f6;
    --color-secondary: #8b5cf6;
    --color-accent: #06b6d4;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-border: #e2e8f0;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
    --space-4xl: 3rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 0.95rem;
    --font-size-lg: 1.05rem;
    --font-size-xl: 1.15rem;
    --font-size-2xl: 1.3rem;
    --font-size-3xl: 1.5rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --shadow-card: 0 15px 35px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 25px 50px rgba(0, 0, 0, 0.12);
    --transition-base: 300ms ease;
}

.file-05-container {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.file-05-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.7;
    color: var(--color-text-primary);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f8fafc 100%);
    font-size: var(--font-size-base);
}

.file-05-container .animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(139, 92, 246, 0.03) 0%, rgba(59, 130, 246, 0.03) 50%, rgba(6, 182, 212, 0.03) 100%);
    background-size: 300% 300%;
    animation: gradientShift 25s ease infinite;
    z-index: -1;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes slidePattern {
    0% { transform: translateX(0); }
    100% { transform: translateX(40px); }
}

.file-05-container .fullwidth-section {
    width: 100%;
    position: relative;
}

.file-05-container .section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.file-05-container .hero-section {
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #a78bfa 100%);
    padding: var(--space-4xl) 0;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.file-05-container .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.15) 0%, transparent 50%);
}

.file-05-container .hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.file-05-container .hero-title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    margin-bottom: var(--space-lg);
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #ffffff, #e9d5ff, #ffffff);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s ease-in-out infinite;
}

.file-05-container .hero-subtitle {
    font-size: var(--font-size-xl);
    opacity: 0.95;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto;
}

.file-05-container .why-section {
    background: white;
    padding: var(--space-4xl) 0;
}

.file-05-container .why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.file-05-container .why-content h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xl);
}

.file-05-container .why-content p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.file-05-container .why-visual {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.file-05-container .why-card {
    background: linear-gradient(135deg, #f3e8ff, #ede9fe);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    border-left: 4px solid var(--color-secondary);
    transition: all var(--transition-base);
}

.file-05-container .why-card:hover {
    transform: translateX(5px);
}

.file-05-container .why-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #6d28d9;
    margin-bottom: var(--space-sm);
}

.file-05-container .why-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.file-05-container .blockchain-section {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: white;
    padding: var(--space-4xl) 0;
    position: relative;
    overflow: hidden;
}

.file-05-container .blockchain-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.1) 0%, transparent 30%),
                radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 30%);
}

.file-05-container .blockchain-section .section-inner {
    position: relative;
    z-index: 2;
}

.file-05-container .blockchain-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-lg);
}

.file-05-container .blockchain-section > .section-inner > p.intro {
    font-size: var(--font-size-lg);
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
    opacity: 0.9;
}

.file-05-container .blockchain-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.file-05-container .blockchain-card {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    text-align: center;
    transition: all var(--transition-base);
}

.file-05-container .blockchain-card:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-5px);
}

.file-05-container .blockchain-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-radius: 50%;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.file-05-container .blockchain-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #c4b5fd;
    margin-bottom: var(--space-md);
}

.file-05-container .blockchain-card p {
    font-size: var(--font-size-base);
    color: rgba(255,255,255,0.8);
    line-height: 1.7;
}

.file-05-container .contracts-section {
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    padding: var(--space-4xl) 0;
}

.file-05-container .contracts-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
}

.file-05-container .contracts-section > .section-inner > p.intro {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
}

.file-05-container .contracts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.file-05-container .contract-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-card);
    border-top: 4px solid var(--color-primary);
    transition: all var(--transition-base);
}

.file-05-container .contract-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.file-05-container .contract-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #1e40af;
    margin-bottom: var(--space-md);
}

.file-05-container .contract-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.file-05-container .opensource-section {
    background: white;
    padding: var(--space-4xl) 0;
}

.file-05-container .opensource-split {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-3xl);
    align-items: center;
}

.file-05-container .opensource-visual {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
}

.file-05-container .opensource-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.file-05-container .opensource-item {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    border-left: 4px solid var(--color-success);
}

.file-05-container .opensource-item h4 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: #047857;
    margin-bottom: var(--space-xs);
}

.file-05-container .opensource-item p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.file-05-container .opensource-content h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xl);
}

.file-05-container .opensource-content p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.file-05-container .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.file-05-container .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1024px) {
    .file-05-container .why-grid,
    .file-05-container .opensource-split {
        grid-template-columns: 1fr;
    }
    .file-05-container .blockchain-grid {
        grid-template-columns: 1fr;
    }
    .file-05-container .contracts-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .file-05-container .hero-title {
        font-size: var(--font-size-2xl);
    }
    .file-05-container .why-content h2,
    .file-05-container .blockchain-section h2,
    .file-05-container .contracts-section h2,
    .file-05-container .opensource-content h2 {
        font-size: var(--font-size-xl);
    }
}
.file-06-container {
    --color-primary: #3b82f6;
    --color-secondary: #8b5cf6;
    --color-accent: #06b6d4;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-border: #e2e8f0;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
    --space-4xl: 3rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 0.95rem;
    --font-size-lg: 1.05rem;
    --font-size-xl: 1.15rem;
    --font-size-2xl: 1.3rem;
    --font-size-3xl: 1.5rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --shadow-card: 0 15px 35px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 25px 50px rgba(0, 0, 0, 0.12);
    --transition-base: 300ms ease;
}

.file-06-container { margin: 0; padding: 0; box-sizing: border-box; }

.file-06-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.7; color: var(--color-text-primary);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f8fafc 100%);
    font-size: var(--font-size-base);
}

.file-06-container .animated-bg {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(45deg, rgba(16, 185, 129, 0.03) 0%, rgba(59, 130, 246, 0.03) 50%, rgba(139, 92, 246, 0.03) 100%);
    background-size: 300% 300%; animation: gradientShift 25s ease infinite; z-index: -1;
}

@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes slidePattern { 0% { transform: translateX(0); } 100% { transform: translateX(40px); } }

.file-06-container .fullwidth-section { width: 100%; position: relative; }
.file-06-container .section-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-xl); }

.file-06-container .hero-section {
    background: linear-gradient(135deg, #047857 0%, #10b981 50%, #34d399 100%);
    padding: var(--space-4xl) 0; color: white; text-align: center; position: relative; overflow: hidden;
}
.file-06-container .hero-section::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.15) 0%, transparent 50%);
}
.file-06-container .hero-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.file-06-container .hero-title {
    font-size: var(--font-size-3xl); font-weight: 800; margin-bottom: var(--space-lg); letter-spacing: -0.5px;
    background: linear-gradient(135deg, #ffffff, #a7f3d0, #ffffff); background-size: 200% 200%;
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: shimmer 4s ease-in-out infinite;
}
.file-06-container .hero-subtitle { font-size: var(--font-size-xl); opacity: 0.95; line-height: 1.6; max-width: 650px; margin: 0 auto; }

.file-06-container .principles-section { background: white; padding: var(--space-4xl) 0; }
.file-06-container .principles-section h2 { font-size: var(--font-size-2xl); font-weight: 800; text-align: center; margin-bottom: var(--space-lg); color: var(--color-text-primary); }
.file-06-container .principles-section > .section-inner > p.intro { font-size: var(--font-size-lg); color: var(--color-text-secondary); text-align: center; max-width: 700px; margin: 0 auto var(--space-3xl); }
.file-06-container .principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.file-06-container .principle-card { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-radius: var(--radius-xl); padding: var(--space-2xl); border-left: 4px solid var(--color-success); transition: all var(--transition-base); }
.file-06-container .principle-card:hover { transform: translateY(-5px); }
.file-06-container .principle-card h3 { font-size: var(--font-size-lg); font-weight: 700; color: #047857; margin-bottom: var(--space-md); }
.file-06-container .principle-card p { font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: 1.7; }

.file-06-container .protection-section { background: linear-gradient(135deg, #1e293b, #334155); color: white; padding: var(--space-4xl) 0; position: relative; overflow: hidden; }
.file-06-container .protection-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.1) 0%, transparent 30%), radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 30%); }
.file-06-container .protection-section .section-inner { position: relative; z-index: 2; }
.file-06-container .protection-section h2 { font-size: var(--font-size-2xl); font-weight: 800; text-align: center; margin-bottom: var(--space-lg); }
.file-06-container .protection-section > .section-inner > p.intro { font-size: var(--font-size-lg); text-align: center; max-width: 700px; margin: 0 auto var(--space-3xl); opacity: 0.9; }
.file-06-container .protection-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
.file-06-container .protection-card { background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-xl); padding: var(--space-2xl); transition: all var(--transition-base); }
.file-06-container .protection-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-5px); }
.file-06-container .protection-card h3 { font-size: var(--font-size-xl); font-weight: 700; color: #6ee7b7; margin-bottom: var(--space-md); }
.file-06-container .protection-card p { font-size: var(--font-size-base); color: rgba(255,255,255,0.85); line-height: 1.7; }

.file-06-container .council-section { background: linear-gradient(135deg, #eff6ff, #dbeafe); padding: var(--space-4xl) 0; }
.file-06-container .council-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }
.file-06-container .council-content h2 { font-size: var(--font-size-2xl); font-weight: 800; color: var(--color-text-primary); margin-bottom: var(--space-xl); }
.file-06-container .council-content p { font-size: var(--font-size-lg); color: var(--color-text-secondary); line-height: 1.8; margin-bottom: var(--space-lg); }
.file-06-container .council-visual { display: flex; flex-direction: column; gap: var(--space-lg); }
.file-06-container .council-item { background: white; border-radius: var(--radius-xl); padding: var(--space-xl); border-left: 4px solid var(--color-primary); box-shadow: var(--shadow-card); }
.file-06-container .council-item h3 { font-size: var(--font-size-lg); font-weight: 700; color: #1e40af; margin-bottom: var(--space-sm); }
.file-06-container .council-item p { font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: 1.6; margin: 0; }

.file-06-container .growth-section { background: white; padding: var(--space-4xl) 0; }
.file-06-container .growth-section h2 { font-size: var(--font-size-2xl); font-weight: 800; text-align: center; margin-bottom: var(--space-lg); color: var(--color-text-primary); }
.file-06-container .growth-section > .section-inner > p.intro { font-size: var(--font-size-lg); color: var(--color-text-secondary); text-align: center; max-width: 700px; margin: 0 auto var(--space-3xl); }
.file-06-container .growth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.file-06-container .growth-card { background: linear-gradient(135deg, #faf5ff, #f3e8ff); border-radius: var(--radius-xl); padding: var(--space-2xl); border-top: 4px solid var(--color-secondary); transition: all var(--transition-base); }
.file-06-container .growth-card:hover { transform: translateY(-5px); }
.file-06-container .growth-card h3 { font-size: var(--font-size-lg); font-weight: 700; color: #6d28d9; margin-bottom: var(--space-md); }
.file-06-container .growth-card p { font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: 1.7; }

.file-06-container .fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.file-06-container .fade-in.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1024px) {
    .file-06-container .principles-grid { grid-template-columns: 1fr; }
    .file-06-container .protection-grid { grid-template-columns: 1fr; }
    .file-06-container .council-split { grid-template-columns: 1fr; }
    .file-06-container .growth-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .file-06-container .hero-title { font-size: var(--font-size-2xl); }
}
/* part-07.css — scoped under .file-07-container */

.file-07-container {
    --font-size-xs: 0.875rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 0.9rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.1rem;
    --font-size-2xl: 1.2rem;
    --font-size-3xl: 1.3rem;
    --font-size-4xl: 1.5rem;
    --font-size-5xl: 1.8rem;
    --font-size-6xl: 2rem;
    --space-xs: 0.2rem;
    --space-sm: 0.4rem;
    --space-md: 0.6rem;
    --space-lg: 0.8rem;
    --space-xl: 1rem;
    --space-2xl: 1.2rem;
    --space-3xl: 1.5rem;
    --space-4xl: 2rem;
    --space-5xl: 2.5rem;
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --primary-50: #eff6ff;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --success-500: #10b981;
    --warning-500: #f59e0b;
    --error-500: #ef4444;
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-600);
    --text-tertiary: var(--gray-500);
    --border-light: var(--gray-200);
    --border-medium: var(--gray-300);
    --bg-surface: var(--white);
    --bg-subtle: var(--gray-50);
    --color-primary: var(--primary-500);
    --color-secondary: #8b5cf6;
    --color-accent: #06b6d4;
    --color-success: var(--success-500);
    --color-warning: var(--warning-500);
    --color-error: var(--error-500);
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --transition-fast: 0.15s ease-out;
    --transition-normal: 0.3s ease-out;
    --transition-slow: 0.5s ease-out;
}

.file-07-container {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
    color: var(--text-primary);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 25%, #f8fafc 50%, #f0f9ff 75%, #e0f2fe 100%);
    min-height: 100vh;
    font-size: var(--font-size-base);
}

.file-07-container .fullwidth-section {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

.file-07-container .content-wrapper {
    width: 100%;
    padding: var(--space-3xl) 0.5cm;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-07-container .section-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.file-07-container .hero-section {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 25%, #312e81 50%, #4c1d95 75%, #581c87 100%);
    min-height: 35vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
    padding: var(--space-3xl) 0;
}

.file-07-container .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cdefs%3E%3Cpattern id="mathGrid" width="20" height="20" patternUnits="userSpaceOnUse"%3E%3Cpath d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/%3E%3C/pattern%3E%3C/defs%3E%3Crect width="100" height="100" fill="url(%23mathGrid)"/%3E%3Ctext x="25" y="25" font-size="8" fill="rgba(255,255,255,0.15)"%3E∑%3C/text%3E%3Ctext x="75" y="75" font-size="6" fill="rgba(255,255,255,0.15)"%3E∫%3C/text%3E%3Ctext x="50" y="10" font-size="7" fill="rgba(255,255,255,0.15)"%3Ef(x)%3C/text%3E%3C/svg%3E') center/150px repeat;
    animation: mathSymbols 40s linear infinite;
    z-index: 1;
}

@keyframes mathSymbols {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(150px) rotate(180deg);
    }
}

.file-07-container .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
    padding: 0 0.5cm;
}

.file-07-container .hero-title {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: var(--space-xl);
    line-height: 1.2;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    letter-spacing: -1px;
    color: white;
}

.file-07-container .hero-subtitle {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-3xl);
    opacity: 0.95;
    font-weight: 500;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    line-height: 1.7;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.file-07-container .hero-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.file-07-container .hero-metric {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    text-align: center;
    transition: all var(--transition-normal);
}

.file-07-container .hero-metric:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

.file-07-container .metric-value {
    font-size: var(--font-size-3xl);
    font-weight: 900;
    margin-bottom: var(--space-sm);
    color: #60a5fa;
}

.file-07-container .metric-label {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    line-height: 1.4;
}

.file-07-container .methodology-section {
    background: white;
    padding: var(--space-5xl) 0;
}

.file-07-container .methodology-intro {
    text-align: center;
    margin-bottom: var(--space-4xl);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.file-07-container .section-title-large {
    font-size: var(--font-size-4xl);
    font-weight: 900;
    margin-bottom: var(--space-xl);
    line-height: 1.2;
    letter-spacing: -1px;
    color: var(--color-primary);
}

.file-07-container .methodology-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
    margin: var(--space-3xl) 0;
}

.file-07-container .method-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
    border: 2px solid rgba(59, 130, 246, 0.1);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

.file-07-container .method-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-xl);
    border-color: rgba(59, 130, 246, 0.3);
}

.file-07-container .method-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.file-07-container .method-header {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.file-07-container .method-icon {
    font-size: var(--font-size-3xl);
    filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.2));
}

.file-07-container .method-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #1e40af;
    line-height: 1.3;
}

.file-07-container .method-content {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: var(--font-size-base);
}

.file-07-container .equation-box {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    margin: var(--space-lg) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.file-07-container .equation {
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    font-weight: 700;
    margin: var(--space-md) 0;
    background: rgba(59, 130, 246, 0.1);
    padding: var(--space-md);
    border-radius: var(--radius-md);
}

.file-07-container .equation-description {
    font-family: 'Inter', sans-serif;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-top: var(--space-md);
    line-height: 1.6;
}

.file-07-container .empirical-section {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    padding: var(--space-5xl) 0;
}

.file-07-container .benchmark-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
    margin: var(--space-3xl) 0;
}

.file-07-container .benchmark-card {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
    border-top: 5px solid var(--color-success);
    transition: all var(--transition-normal);
}

.file-07-container .benchmark-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.file-07-container .benchmark-project {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-success);
    margin-bottom: var(--space-lg);
}

.file-07-container .benchmark-metrics {
    display: grid;
    gap: var(--space-md);
}

.file-07-container .benchmark-metric {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-md);
    background: rgba(16, 185, 129, 0.05);
    border-radius: var(--radius-md);
}

.file-07-container .metric-name {
    font-weight: 600;
    color: var(--text-primary);
}

.file-07-container .metric-value-benchmark {
    font-weight: 500;
    color: var(--text-secondary);
    text-align: right;
    max-width: 60%;
    font-size: var(--font-size-sm);
}

.file-07-container .growth-section {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: white;
    padding: var(--space-5xl) 0;
    position: relative;
    overflow: hidden;
}

.file-07-container .growth-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.2) 0%, transparent 50%);
    animation: analyticalFloat 20s ease-in-out infinite;
    z-index: 1;
}

@keyframes analyticalFloat {
    0%,
    100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
}

.file-07-container .growth-content {
    position: relative;
    z-index: 2;
}

.file-07-container .model-comparison {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
    margin: var(--space-3xl) 0;
}

.file-07-container .model-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    transition: all var(--transition-normal);
}

.file-07-container .model-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-8px);
}

.file-07-container .model-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--space-lg);
    color: #60a5fa;
}

.file-07-container .confidence-interval {
    background: rgba(15, 118, 110, 0.15);
    border: 2px solid rgba(34, 197, 94, 0.4);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
    font-size: var(--font-size-sm);
    line-height: 1.7;
}

.file-07-container .data-viz-section {
    background: white;
    padding: var(--space-5xl) 0;
}

.file-07-container .chart-container {
    background: var(--bg-subtle);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    margin: var(--space-xl) 0;
    border: 2px solid var(--border-light);
    position: relative;
    overflow: hidden;
}

.file-07-container .chart-title {
    text-align: center;
    margin-bottom: var(--space-xl);
    color: var(--text-primary);
    font-size: var(--font-size-2xl);
    font-weight: 700;
}

.file-07-container .scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin: var(--space-2xl) 0;
}

.file-07-container .scenario-card {
    padding: var(--space-xl);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: all var(--transition-normal);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.file-07-container .scenario-optimistic {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 2px solid var(--color-success);
}

.file-07-container .scenario-realistic {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 2px solid var(--color-warning);
}

.file-07-container .scenario-pessimistic {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border: 2px solid var(--color-error);
}

.file-07-container .scenario-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

.file-07-container .scenario-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--space-lg);
}

.file-07-container .scenario-optimistic .scenario-title {
    color: var(--color-success);
}

.file-07-container .scenario-realistic .scenario-title {
    color: var(--color-warning);
}

.file-07-container .scenario-pessimistic .scenario-title {
    color: var(--color-error);
}

.file-07-container .scenario-text {
    font-size: var(--font-size-sm);
    line-height: 1.7;
    color: var(--text-secondary);
}

.file-07-container .limitations-section {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    padding: var(--space-5xl) 0;
}

.file-07-container .limitation-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
    margin: var(--space-3xl) 0;
}

.file-07-container .limitation-card {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
    border-left: 6px solid var(--color-error);
    transition: all var(--transition-normal);
}

.file-07-container .limitation-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.file-07-container .limitation-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-error);
    margin-bottom: var(--space-lg);
}

.file-07-container .interactive-section {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    padding: var(--space-5xl) 0;
}

.file-07-container .calculator-card {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-xl);
    border: 3px solid var(--color-secondary);
    max-width: 800px;
    margin: 0 auto;
}

.file-07-container .calculator-controls {
    display: grid;
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.file-07-container .control-group {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
}

.file-07-container .control-label {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 220px;
}

.file-07-container .control-description {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.7;
}

.file-07-container .result-display {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    margin-top: var(--space-xl);
    text-align: center;
}

.file-07-container .result-value {
    font-size: var(--font-size-4xl);
    font-weight: 900;
    color: var(--color-secondary);
    margin-bottom: var(--space-md);
}

.file-07-container .conclusion-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: var(--space-5xl) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.file-07-container .conclusion-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Ccircle cx="50" cy="50" r="30" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/%3E%3Ccircle cx="50" cy="50" r="20" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/%3E%3Ccircle cx="50" cy="50" r="10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/%3E%3C/svg%3E') center/200px repeat;
    animation: conclusionPattern 30s linear infinite;
    z-index: 1;
}

@keyframes conclusionPattern {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    100% {
        transform: translateX(200px) translateY(100px) rotate(360deg);
    }
}

.file-07-container .conclusion-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 0.5cm;
}

.file-07-container .final-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
    margin: var(--space-3xl) 0;
}

.file-07-container .final-metric {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    text-align: center;
}

.file-07-container .final-metric-value {
    font-size: var(--font-size-5xl);
    font-weight: 900;
    margin-bottom: var(--space-md);
    color: #60a5fa;
}

.file-07-container .final-metric-label {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    line-height: 1.4;
}

.file-07-container .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.file-07-container .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1200px) {
    .file-07-container .methodology-grid {
        grid-template-columns: 1fr;
    }

    .file-07-container .benchmark-grid,
    .file-07-container .model-comparison,
    .file-07-container .limitation-grid {
        grid-template-columns: 1fr;
    }

    .file-07-container .scenario-grid {
        grid-template-columns: 1fr;
    }

    .file-07-container .hero-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .file-07-container .final-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .file-07-container .content-wrapper {
        padding: var(--space-2xl) var(--space-lg);
    }

    .file-07-container .hero-section {
        min-height: 25vh;
        padding: var(--space-2xl) 0;
    }

    .file-07-container .hero-metrics {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .file-07-container .section-title-large {
        font-size: var(--font-size-3xl);
    }

    .file-07-container .control-group {
        flex-direction: column;
        align-items: stretch;
    }

    .file-07-container .control-label {
        min-width: auto;
    }

    .file-07-container .scenario-grid,
    .file-07-container .final-metrics {
        grid-template-columns: 1fr !important;
        gap: var(--space-lg);
    }

    .file-07-container .final-metric,
    .file-07-container .scenario-card {
        padding: var(--space-lg) !important;
    }
}

.file-07-container .animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
        rgba(59, 130, 246, 0.02) 0%,
        rgba(139, 92, 246, 0.02) 25%,
        rgba(16, 185, 129, 0.02) 50%,
        rgba(245, 158, 11, 0.02) 75%,
        rgba(59, 130, 246, 0.02) 100%);
    background-size: 400% 400%;
    animation: gradientAnimation 30s ease infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.file-08-container {
  --nv: #0a1628;
  --db: #1a365d;
  --rl: #2c5282;
  --gd: #c7923e;
  --bz: #b8860b;
  --sv: #94a3b8;
  --pk: #fef6e4;
  --ik: #1e293b;
  --wn: #ffc107;
  --mb: #f8f9fa;
  --fs: 'Playfair Display', serif;
  --fn: 'Inter', sans-serif;
  --s1: .5rem;
  --s2: .75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 3rem;
}

.file-08-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.file-08-container {
  font-family: var(--fn);
  line-height: 1.7;
  color: var(--ik);
  background: linear-gradient(to bottom, #f0f4f8, #fff);
}

.file-08-container .w {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s6) .5cm;
}

.file-08-container .fi {
  opacity: 1;
  transform: translateY(0);
}

.file-08-container .sh {
  text-align: center;
  margin-bottom: var(--s6);
}

.file-08-container .sk {
  display: inline-block;
  background: linear-gradient(90deg, var(--gd), var(--bz));
  color: #fff;
  padding: var(--s1) var(--s4);
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: var(--s3);
}

.file-08-container .st {
  font-family: var(--fs);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--db);
  margin-bottom: var(--s3);
  line-height: 1.2;
}

.file-08-container .ss {
  font-size: 1rem;
  color: var(--sv);
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.8;
}

.file-08-container .ss strong {
  color: var(--rl);
  font-weight: 600;
}

.file-08-container .hero {
  background: linear-gradient(135deg, rgba(10,22,40,.95), rgba(26,54,93,.9));
  min-height: 35vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 4px solid var(--gd);
  text-align: center;
  color: #fff;
  padding: var(--s6) var(--s4);
}

.file-08-container .hero-emb {
  width: 70px;
  height: 70px;
  margin: 0 auto var(--s4);
  background: radial-gradient(circle, var(--gd), var(--bz));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  border: 3px solid rgba(255,255,255,.3);
  box-shadow: 0 10px 40px rgba(199,146,62,.5);
}

.file-08-container .hero h1 {
  font-family: var(--fs);
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: var(--s3);
  text-shadow: 2px 2px 20px rgba(0,0,0,.3);
}

.file-08-container .hero p {
  font-size: 1.2rem;
  opacity: .95;
  max-width: 700px;
  margin: 0 auto;
}

.file-08-container .lf {
  background: #fff;
  border: 3px solid var(--rl);
  border-radius: 12px;
  padding: var(--s5);
  margin: var(--s5) 0;
  box-shadow: 0 10px 40px rgba(0,0,0,.1);
}

.file-08-container .lf-t {
  font-family: var(--fs);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--db);
  margin-bottom: var(--s4);
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--gd);
}

.file-08-container .lp {
  margin: var(--s3) 0;
}

.file-08-container .lp strong {
  color: var(--rl);
  font-weight: 700;
}

.file-08-container .ll {
  list-style: none;
  padding: 0;
  margin-top: var(--s2);
}

.file-08-container .ll li {
  padding: var(--s1) 0 var(--s1) var(--s4);
  position: relative;
  line-height: 1.7;
}

.file-08-container .ll li::before {
  content: '\25CF';
  position: absolute;
  left: 0;
  color: var(--gd);
  font-weight: 700;
}

.file-08-container .wb {
  background: #fff3cd;
  border: 3px solid var(--wn);
  border-radius: 12px;
  padding: var(--s4);
  margin: var(--s5) 0;
}

.file-08-container .wb-t {
  font-family: var(--fs);
  font-size: 1.2rem;
  font-weight: 700;
  color: #856404;
  margin-bottom: var(--s3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.file-08-container .cb {
  background: #e0f2fe;
  border-left: 6px solid var(--rl);
  border-radius: 0 8px 8px 0;
  padding: var(--s4);
  margin: var(--s4) 0;
  font-style: italic;
}

.file-08-container .cb-s {
  font-weight: 700;
  color: var(--db);
  margin-bottom: var(--s2);
  font-style: normal;
}

.file-08-container .gc {
  max-width: 1100px;
  margin: 0 auto;
  background: #fff;
  border: 2px solid var(--gd);
  border-radius: 12px;
  padding: var(--s5);
  box-shadow: 0 15px 50px rgba(0,0,0,.1);
}

.file-08-container .gc-t {
  font-family: var(--fs);
  font-size: 2rem;
  text-align: center;
  color: var(--db);
  margin-bottom: var(--s5);
}

.file-08-container .gg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  margin: var(--s5) 0;
}

.file-08-container .gi {
  background: #f8fafc;
  padding: var(--s4);
  border-radius: 8px;
  border-left: 4px solid var(--rl);
}

.file-08-container .gi-t {
  font-weight: 700;
  color: var(--rl);
  font-size: 1.05rem;
  margin-bottom: var(--s2);
}

.file-08-container .cg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4);
  margin: var(--s5) 0;
}

.file-08-container .cc {
  background: #fff;
  border: 2px solid var(--gd);
  border-radius: 12px;
  padding: var(--s4);
  transition: all .3s;
}

.file-08-container .cc:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(199,146,62,.2);
}

.file-08-container .cc-t {
  font-family: var(--fs);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--db);
  margin-bottom: var(--s2);
  padding-bottom: var(--s1);
  border-bottom: 2px solid var(--gd);
}

.file-08-container .cpg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  margin: var(--s5) 0;
}

.file-08-container .cpb {
  background: #fff;
  border-radius: 12px;
  padding: var(--s5);
  border: 3px solid;
}

.file-08-container .cpb.in {
  border-color: #10b981;
  background: linear-gradient(to bottom, #ecfdf5, #fff);
}

.file-08-container .cpb.out {
  border-color: #ef4444;
  background: linear-gradient(to bottom, #fef2f2, #fff);
}

.file-08-container .cpb-t {
  font-family: var(--fs);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: var(--s3);
  text-align: center;
}

.file-08-container .cpb.in .cpb-t {
  color: #065f46;
}

.file-08-container .cpb.out .cpb-t {
  color: #991b1b;
}

.file-08-container .lvc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  margin: var(--s6) 0;
}

.file-08-container .lv {
  background: #fff;
  border-radius: 12px;
  padding: var(--s5);
  border-top: 6px solid var(--gd);
  box-shadow: 0 10px 40px rgba(0,0,0,.1);
  transition: all .3s;
}

.file-08-container .lv:nth-child(2) {
  border-top-color: var(--bz);
}

.file-08-container .lv:nth-child(3) {
  border-top-color: var(--rl);
}

.file-08-container .lv:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(199,146,62,.3);
}

.file-08-container .lv-n {
  display: inline-block;
  background: linear-gradient(135deg, var(--rl), var(--db));
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  font-family: var(--fs);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--s3);
  box-shadow: 0 5px 20px rgba(0,0,0,.2);
}

.file-08-container .lv-v {
  font-family: var(--fs);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--gd);
  margin-bottom: var(--s2);
}

.file-08-container .lv-tt {
  font-weight: 700;
  color: var(--rl);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: .8rem;
  margin-bottom: var(--s3);
}

.file-08-container .tech {
  background: linear-gradient(135deg, var(--nv), var(--db));
  color: #fff;
  padding: var(--s6) 0;
}

.file-08-container .tech .st {
  color: #fff;
}

.file-08-container .tech .ss {
  color: rgba(255,255,255,.9);
}

.file-08-container .tech .ss strong {
  color: var(--gd);
}

.file-08-container .tg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s5);
  margin-top: var(--s6);
}

.file-08-container .tc {
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(199,146,62,.3);
  border-radius: 16px;
  padding: var(--s5);
  transition: all .4s;
}

.file-08-container .tc:hover {
  transform: translateY(-10px);
  border-color: var(--gd);
  background: rgba(255,255,255,.08);
  box-shadow: 0 20px 60px rgba(199,146,62,.4);
}

.file-08-container .tc-b {
  display: inline-block;
  background: var(--gd);
  color: var(--nv);
  padding: var(--s1) var(--s3);
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--s3);
}

.file-08-container .tc-t {
  font-family: var(--fs);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: var(--s3);
  color: var(--gd);
}

.file-08-container .final {
  background: linear-gradient(135deg, rgba(10,22,40,.98), rgba(26,54,93,.95));
  color: #fff;
  padding: var(--s6) 0;
}

.file-08-container .fc {
  max-width: 1000px;
  margin: 0 auto;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  border: 3px solid rgba(199,146,62,.4);
  border-radius: 16px;
  padding: var(--s6);
  position: relative;
}

.file-08-container .fc::before,
.file-08-container .fc::after {
  content: '\2756';
  position: absolute;
  font-size: 1.5rem;
  color: var(--gd);
}

.file-08-container .fc::before {
  top: var(--s4);
  left: var(--s4);
}

.file-08-container .fc::after {
  bottom: var(--s4);
  right: var(--s4);
}

.file-08-container .fc-t {
  font-family: var(--fs);
  font-size: 2rem;
  text-align: center;
  color: var(--gd);
  margin-bottom: var(--s5);
  text-transform: uppercase;
  letter-spacing: 3px;
}

.file-08-container .fc-tx {
  font-size: 1rem;
  line-height: 1.9;
  margin-bottom: var(--s5);
  text-align: justify;
  opacity: .95;
}

.file-08-container .fc-tx strong {
  color: var(--gd);
}

.file-08-container .fp {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
  margin-top: var(--s5);
}

.file-08-container .fpt {
  background: rgba(255,255,255,.05);
  padding: var(--s3);
  border-radius: 8px;
  border-left: 4px solid var(--gd);
}

.file-08-container .fpt strong {
  color: var(--gd);
  display: block;
  margin-bottom: var(--s1);
}

.file-08-container .seal {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 2px solid rgba(199,146,62,.3);
  text-align: center;
}

.file-08-container .seal-s {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background: radial-gradient(circle, var(--gd), var(--bz));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  border: 4px solid rgba(255,255,255,.2);
  box-shadow: 0 10px 40px rgba(199,146,62,.6);
}

.file-08-container .sec-pk {
  background: var(--pk);
}

.file-08-container .sec-mb {
  background: var(--mb);
}

@media (max-width: 968px) {
  .file-08-container .gg,
  .file-08-container .cg,
  .file-08-container .cpg,
  .file-08-container .lvc,
  .file-08-container .tg,
  .file-08-container .fp {
    grid-template-columns: 1fr;
  }
  .file-08-container .hero h1 {
    font-size: 2rem;
  }
  .file-08-container .st {
    font-size: 1.6rem;
  }
}
.file-09-container {
    --color-primary: #0d9488;
    --color-primary-light: #14b8a6;
    --color-primary-dark: #0f766e;
    --color-secondary: #f59e0b;
    --color-accent: #6366f1;
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-border: #e2e8f0;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
    --space-4xl: 3rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 0.95rem;
    --font-size-lg: 1.05rem;
    --font-size-xl: 1.15rem;
    --font-size-2xl: 1.3rem;
    --font-size-3xl: 1.5rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --shadow-card: 0 15px 35px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 25px 50px rgba(0, 0, 0, 0.12);
    --transition-base: 300ms ease;
}

.file-09-container {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.file-09-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.7;
    color: var(--color-text-primary);
    background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 50%, #f8fafc 100%);
    font-size: var(--font-size-base);
}

.file-09-container .animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(13, 148, 136, 0.03) 0%, rgba(99, 102, 241, 0.03) 50%, rgba(245, 158, 11, 0.03) 100%);
    background-size: 300% 300%;
    animation: gradientShift 25s ease infinite;
    z-index: -1;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.file-09-container .fullwidth-section {
    width: 100%;
    position: relative;
}

.file-09-container .section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.file-09-container .hero-section {
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 40%, #14b8a6 100%);
    padding: var(--space-4xl) 0;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.file-09-container .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.12) 0%, transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(245,158,11,0.08) 0%, transparent 40%);
}

.file-09-container .hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.file-09-container .hero-title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    margin-bottom: var(--space-lg);
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #ffffff, #a7f3d0, #ffffff);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s ease-in-out infinite;
}

.file-09-container .hero-subtitle {
    font-size: var(--font-size-xl);
    opacity: 0.95;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto;
}

.file-09-container .principles-section {
    background: white;
    padding: var(--space-4xl) 0;
}

.file-09-container .principles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.file-09-container .principles-content h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xl);
}

.file-09-container .principles-content p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.file-09-container .principles-visual {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.file-09-container .principle-card {
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    border-left: 4px solid var(--color-primary);
    transition: all var(--transition-base);
}

.file-09-container .principle-card:hover {
    transform: translateX(5px);
}

.file-09-container .principle-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: var(--space-sm);
}

.file-09-container .principle-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.file-09-container .functions-section {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: white;
    padding: var(--space-4xl) 0;
    position: relative;
    overflow: hidden;
}

.file-09-container .functions-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 30%, rgba(13, 148, 136, 0.15) 0%, transparent 30%),
                radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.1) 0%, transparent 30%);
}

.file-09-container .functions-section .section-inner {
    position: relative;
    z-index: 2;
}

.file-09-container .functions-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-lg);
}

.file-09-container .functions-section > .section-inner > p.intro {
    font-size: var(--font-size-lg);
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
    opacity: 0.9;
}

.file-09-container .functions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.file-09-container .function-card {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    text-align: center;
    transition: all var(--transition-base);
}

.file-09-container .function-card:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-5px);
}

.file-09-container .function-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 50%;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.file-09-container .function-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #5eead4;
    margin-bottom: var(--space-md);
}

.file-09-container .function-card p {
    font-size: var(--font-size-base);
    color: rgba(255,255,255,0.8);
    line-height: 1.7;
}

.file-09-container .boundaries-section {
    background: linear-gradient(135deg, #fef3c7, #fffbeb);
    padding: var(--space-4xl) 0;
}

.file-09-container .boundaries-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
}

.file-09-container .boundaries-section > .section-inner > p.intro {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
}

.file-09-container .boundaries-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.file-09-container .boundary-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-card);
    border-top: 4px solid var(--color-secondary);
    transition: all var(--transition-base);
}

.file-09-container .boundary-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.file-09-container .boundary-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #92400e;
    margin-bottom: var(--space-md);
}

.file-09-container .boundary-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.file-09-container .sovereignty-section {
    background: white;
    padding: var(--space-4xl) 0;
}

.file-09-container .sovereignty-split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.file-09-container .sovereignty-content h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xl);
}

.file-09-container .sovereignty-content p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.file-09-container .sovereignty-visual {
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
}

.file-09-container .sovereignty-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.file-09-container .sovereignty-item {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    border-left: 4px solid var(--color-primary);
}

.file-09-container .sovereignty-item h4 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: var(--space-xs);
}

.file-09-container .sovereignty-item p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.file-09-container .evolution-section {
    background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 100%);
    padding: var(--space-4xl) 0;
}

.file-09-container .evolution-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
}

.file-09-container .evolution-section > .section-inner > p.intro {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
}

.file-09-container .evolution-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    position: relative;
}

.file-09-container .evolution-timeline::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: 2px;
}

.file-09-container .evolution-step {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: all var(--transition-base);
    position: relative;
}

.file-09-container .evolution-step:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.file-09-container .step-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: 800;
    margin: 0 auto var(--space-lg);
    position: relative;
    z-index: 2;
}

.file-09-container .evolution-step h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: var(--space-md);
}

.file-09-container .evolution-step p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.file-09-container .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.file-09-container .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1024px) {
    .file-09-container .principles-grid,
    .file-09-container .sovereignty-split {
        grid-template-columns: 1fr;
    }
    .file-09-container .functions-grid {
        grid-template-columns: 1fr;
    }
    .file-09-container .boundaries-grid {
        grid-template-columns: 1fr;
    }
    .file-09-container .evolution-timeline {
        grid-template-columns: 1fr;
    }
    .file-09-container .evolution-timeline::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .file-09-container .hero-title {
        font-size: var(--font-size-2xl);
    }
    .file-09-container .principles-content h2,
    .file-09-container .functions-section h2,
    .file-09-container .boundaries-section h2,
    .file-09-container .sovereignty-content h2,
    .file-09-container .evolution-section h2 {
        font-size: var(--font-size-xl);
    }
}
.file-10-container {
  --c1: #3b82f6;
  --ok: #10b981;
  --warn: #f59e0b;
  --err: #ef4444;
  --txt: #0f172a;
  --mute: #475569;
  --s1: .5rem;
  --s2: .75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --r1: .5rem;
  --r2: 1rem;
  --sh: 0 15px 35px rgba(0,0,0,.08);
  --tr: 300ms ease;
}

.file-10-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.file-10-container {
  font-family: 'Inter', sans-serif;
  line-height: 1.7;
  color: var(--txt);
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe 50%, #f8fafc);
  font-size: .95rem;
}

.file-10-container .s {
  width: 100%;
  padding: var(--s5) var(--s3);
}

.file-10-container .in {
  max-width: 1100px;
  margin: 0 auto;
}

.file-10-container .hero {
  background: #0891b2;
  color: #fff;
  min-height: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.file-10-container .hero h1 {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 900;
  text-shadow: 0 4px 20px rgba(0,0,0,.3);
}

.file-10-container .gi {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
}

.file-10-container .ib {
  background: rgba(255,255,255,.95);
  border-radius: var(--r2);
  padding: var(--s5);
  text-align: center;
  border: 3px solid rgba(239,68,68,.3);
  box-shadow: 0 20px 50px rgba(239,68,68,.2);
  max-width: 900px;
  margin: 0 auto;
}

.file-10-container .ib h2 {
  color: #1e3a8a;
  font-size: 1.8rem;
  margin-bottom: var(--s3);
}

.file-10-container .sc {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 900;
  color: var(--err);
  animation: p 3s infinite;
}

@keyframes p {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.file-10-container .st {
  color: var(--mute);
  font-size: 1.2rem;
  font-weight: 600;
  margin: var(--s3) 0;
}

.file-10-container .sts {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
}

.file-10-container .sg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s3);
}

.file-10-container .sc2 {
  background: #fff;
  padding: var(--s4);
  border-radius: var(--r2);
  text-align: center;
  box-shadow: var(--sh);
  border-top: 5px solid var(--ok);
}

.file-10-container .sn {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: var(--s1);
}

.file-10-container .sn.cr { color: var(--err); }
.file-10-container .sn.wr { color: var(--warn); }
.file-10-container .sn.gd { color: var(--ok); }

.file-10-container .sl {
  font-weight: 600;
  line-height: 1.5;
}

.file-10-container .ms {
  background: #fff;
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.file-10-container .sb {
  background: linear-gradient(135deg, #3730a3, #1e40af);
  color: #fff;
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.file-10-container .sb h2 {
  font-size: 1.6rem;
  margin-bottom: var(--s3);
}

.file-10-container .sbx {
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.3);
  border-radius: var(--r2);
  padding: var(--s3);
  margin: var(--s3) 0;
}

.file-10-container .sbx ul {
  line-height: 1.9;
  margin-left: var(--s3);
}

.file-10-container .ab {
  background: rgba(239,68,68,.2);
  border-left: 6px solid rgba(255,255,255,.8);
  padding: var(--s3);
  margin: var(--s3) 0;
  border-radius: 0 var(--r1) var(--r1) 0;
}

.file-10-container .mm {
  padding: var(--s5);
}

.file-10-container .mg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s3);
}

.file-10-container .mc {
  background: #f8fafc;
  border-radius: var(--r2);
  padding: var(--s3);
  box-shadow: var(--sh);
  border-top: 5px solid var(--cc, #ccc);
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--tr);
}

.file-10-container .mc:hover {
  transform: translateY(-5px);
}

.file-10-container .mc.cr { --cc: #ef4444; }
.file-10-container .mc.wr { --cc: #f59e0b; }
.file-10-container .mc.gd { --cc: #10b981; }

.file-10-container .mh {
  display: flex;
  align-items: center;
  gap: var(--s1);
}

.file-10-container .mi {
  font-size: 1.2rem;
}

.file-10-container .mt {
  font-weight: 600;
}

.file-10-container .mv {
  font-size: 1.6rem;
  font-weight: 900;
  text-align: center;
  color: var(--cc);
}

.file-10-container .ms2 {
  padding: 4px 10px;
  border-radius: var(--r1);
  font-weight: 600;
  font-size: .85rem;
  text-align: center;
}

.file-10-container .ms2.cr { background: rgba(239,68,68,.15); color: var(--err); }
.file-10-container .ms2.wr { background: rgba(245,158,11,.15); color: var(--warn); }
.file-10-container .ms2.gd { background: rgba(16,185,129,.15); color: var(--ok); }

.file-10-container .mch {
  font-size: .85rem;
  color: var(--mute);
  text-align: center;
}

.file-10-container .cn { color: var(--err); }
.file-10-container .cp { color: var(--ok); }

.file-10-container .tbs {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

.file-10-container .tbx {
  background: rgba(255,255,255,.95);
  border-radius: var(--r2);
  overflow: hidden;
  border: 2px solid rgba(59,130,246,.2);
  box-shadow: 0 20px 50px rgba(59,130,246,.1);
}

.file-10-container table {
  width: 100%;
  border-collapse: collapse;
}

.file-10-container th,
.file-10-container td {
  padding: var(--s2);
  text-align: left;
  border-bottom: 1px solid rgba(59,130,246,.1);
}

.file-10-container th {
  background: linear-gradient(135deg, rgba(59,130,246,.2), rgba(29,78,216,.2));
  font-weight: 700;
  color: #1e40af;
  text-transform: uppercase;
  font-size: .85rem;
}

.file-10-container tr:hover {
  background: rgba(59,130,246,.05);
}

.file-10-container .tr {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r1);
  font-size: .85rem;
}

.file-10-container .tr.dn { color: #ef4444; background: rgba(239,68,68,.1); }
.file-10-container .tr.up { color: #10b981; background: rgba(16,185,129,.1); }
.file-10-container .tr.eq { color: #f59e0b; background: rgba(245,158,11,.1); }

.file-10-container .bd {
  padding: 2px 8px;
  border-radius: var(--r1);
  font-size: .75rem;
  font-weight: 600;
}

.file-10-container .bd.cr { background: rgba(239,68,68,.15); color: #ef4444; }
.file-10-container .bd.wr { background: rgba(245,158,11,.15); color: #f59e0b; }
.file-10-container .bd.gd { background: rgba(16,185,129,.15); color: #10b981; }

.file-10-container .rcs {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
}

.file-10-container .rcb {
  background: rgba(255,255,255,.95);
  border-radius: var(--r2);
  padding: var(--s5);
  box-shadow: 0 20px 50px rgba(16,185,129,.1);
  border: 2px solid rgba(16,185,129,.2);
}

.file-10-container .rcb h3 {
  font-size: 1.8rem;
  text-align: center;
  color: #047857;
  margin-bottom: var(--s4);
}

.file-10-container .rcg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s3);
}

.file-10-container .rc {
  background: #f8f9fa;
  padding: var(--s3);
  border-radius: var(--r1);
  border-left: 6px solid #047857;
}

.file-10-container .rc strong {
  color: #047857;
}

.file-10-container .dg {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
}

.file-10-container .ttl {
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: var(--s2);
}

.file-10-container .dsc {
  text-align: center;
  color: var(--mute);
  margin-bottom: var(--s4);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.file-10-container .fi {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1024px) {
  .file-10-container .ms {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .file-10-container table {
    display: none;
  }
  .file-10-container .sg {
    grid-template-columns: 1fr 1fr;
  }
}
.file-11-container {
  --ok: #10b981;
  --warn: #f59e0b;
  --err: #ef4444;
  --txt: #0f172a;
  --m: #475569;
}

.file-11-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  line-height: 1.7;
  color: var(--txt);
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe 50%, #f8fafc);
  font-size: .95rem;
}

.file-11-container .s {
  width: 100%;
  padding: 2rem 1rem;
}

.file-11-container .in {
  max-width: 1000px;
  margin: 0 auto;
}

.file-11-container .hero {
  background: #dc2626;
  color: #fff;
  min-height: 22vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  padding: 1.5rem;
}

.file-11-container .hero h1 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 900;
  text-shadow: 0 4px 20px rgba(0, 0, 0, .3);
}

.file-11-container .hero p {
  margin-top: .5rem;
  opacity: .9;
}

.file-11-container .form {
  background: linear-gradient(135deg, #1e293b, #334155);
  color: #fff;
}

.file-11-container .fbox {
  background: rgba(0, 0, 0, .3);
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
  text-align: center;
}

.file-11-container .fname {
  font-size: .9rem;
  color: #fbbf24;
  margin-bottom: .5rem;
  font-weight: 600;
}

.file-11-container .fml {
  font-family: 'Times New Roman', serif;
  font-size: 1.4rem;
  color: #fcd34d;
  margin-bottom: .5rem;
}

.file-11-container .fdesc {
  color: rgba(255, 255, 255, .85);
  font-size: .9rem;
}

.file-11-container .vg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  margin: 1rem 0;
}

.file-11-container .vi {
  display: flex;
  gap: .5rem;
}

.file-11-container .vs {
  font-family: 'Times New Roman', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fbbf24;
  min-width: 35px;
}

.file-11-container .vd {
  color: rgba(255, 255, 255, .9);
  font-size: .85rem;
}

.file-11-container .src {
  text-align: center;
  color: rgba(255, 255, 255, .7);
  font-size: .8rem;
  font-style: italic;
  margin-top: 1rem;
}

.file-11-container .bnd {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
}

.file-11-container .bg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}

.file-11-container .bi {
  background: #fff;
  border-radius: .5rem;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
  border-top: 4px solid var(--bc);
}

.file-11-container .bi.ex {
  --bc: #ef4444;
}

.file-11-container .bi.sf {
  --bc: #10b981;
}

.file-11-container .bn {
  font-weight: 600;
  margin-bottom: .25rem;
  font-size: .95rem;
}

.file-11-container .bs {
  font-size: .75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: .5rem;
}

.file-11-container .bs.ex {
  background: rgba(239, 68, 68, .15);
  color: #ef4444;
}

.file-11-container .bs.sf {
  background: rgba(16, 185, 129, .15);
  color: #10b981;
}

.file-11-container .tip {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
}

.file-11-container .mc {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
  border-left: 6px solid var(--mc);
  margin: 1rem 0;
}

.file-11-container .mch {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}

.file-11-container .mch span {
  font-size: 2rem;
}

.file-11-container .mch h3 {
  font-weight: 700;
  color: var(--mc);
}

.file-11-container .mf {
  background: #fffbeb;
  padding: 1rem;
  border-radius: .5rem;
  text-align: center;
  margin-bottom: 1rem;
  font-family: 'Times New Roman', serif;
  font-size: 1.1rem;
  color: #92400e;
}

.file-11-container .mc p {
  color: var(--m);
  margin-bottom: .5rem;
}

.file-11-container .srcdk {
  font-size: .8rem;
  color: var(--m);
  font-style: italic;
}

.file-11-container .tc {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
  margin-top: 1.5rem;
}

.file-11-container .tc h3 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.file-11-container .tb {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}

.file-11-container .tl {
  min-width: 180px;
  font-size: .85rem;
  font-weight: 600;
}

.file-11-container .tm {
  flex: 1;
  height: 20px;
  background: linear-gradient(90deg, #dcfce7 33%, #fef3c7 33%, #fef3c7 50%, #fee2e2 50%, #fee2e2 67%, #fecaca 67%);
  border-radius: .5rem;
  position: relative;
}

.file-11-container .tmk {
  position: absolute;
  top: -5px;
  width: 4px;
  height: 30px;
  background: #ef4444;
  border-radius: 2px;
}

.file-11-container .ineq {
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
}

.file-11-container .ineq .mc {
  --mc: #8b5cf6;
}

.file-11-container .ineq .mf {
  background: #f5f3ff;
  color: #5b21b6;
}

.file-11-container .kf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin: 1.5rem 0;
}

.file-11-container .kfi {
  text-align: center;
  padding: 1rem;
  border-radius: .5rem;
  border: 2px solid var(--kc);
}

.file-11-container .kfi.lo {
  --kc: #8b5cf6;
  background: rgba(139, 92, 246, .1);
}

.file-11-container .kfi.mi {
  --kc: #f59e0b;
  background: rgba(245, 158, 11, .1);
}

.file-11-container .kfi.hi {
  --kc: #ef4444;
  background: rgba(239, 68, 68, .1);
}

.file-11-container .kfn {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--kc);
}

.file-11-container .kfl {
  font-size: .85rem;
  color: var(--m);
}

.file-11-container .lor {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
  margin-top: 1.5rem;
}

.file-11-container .lor h3 {
  text-align: center;
  margin-bottom: 1rem;
}

.file-11-container .lor svg {
  max-width: 300px;
  margin: 0 auto;
  display: block;
}

.file-11-container .frag {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

.file-11-container .frag .mc {
  --mc: #3b82f6;
}

.file-11-container .frag .mf {
  background: #eff6ff;
  color: #1e40af;
}

.file-11-container .ig {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin: 1.5rem 0;
}

.file-11-container .ii {
  background: rgba(59, 130, 246, .05);
  border-radius: .5rem;
  padding: .5rem;
  text-align: center;
}

.file-11-container .iico {
  font-size: 1.5rem;
}

.file-11-container .inm {
  font-weight: 600;
  font-size: .85rem;
}

.file-11-container .ids {
  font-size: .75rem;
  color: var(--m);
}

.file-11-container .fs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-top: 1.5rem;
}

.file-11-container .fsi {
  padding: .5rem;
  border-radius: .5rem;
  text-align: center;
}

.file-11-container .fsi.a {
  background: #dbeafe;
}

.file-11-container .fsi.b {
  background: #dcfce7;
}

.file-11-container .fsi.c {
  background: #fef3c7;
}

.file-11-container .fsi.d {
  background: #fee2e2;
}

.file-11-container .fsi strong {
  display: block;
}

.file-11-container .fsi span {
  font-size: .75rem;
}

.file-11-container .conc {
  background: linear-gradient(135deg, #1e3a5f, #1e293b);
  color: #fff;
}

.file-11-container .cc {
  background: rgba(255, 255, 255, .1);
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 1rem;
  padding: 1.5rem;
}

.file-11-container .cc h2 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

.file-11-container .cc h2 span {
  font-size: 2.5rem;
}

.file-11-container .cc ul {
  margin: 1rem 0 1.5rem 1.5rem;
  line-height: 1.9;
}

.file-11-container .ca {
  background: rgba(239, 68, 68, .2);
  padding: 1.5rem;
  border-radius: 1rem;
  border: 2px solid rgba(239, 68, 68, .4);
  text-align: center;
}

.file-11-container .bib {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
}

.file-11-container .bib h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--ok);
  margin-bottom: 1.5rem;
}

.file-11-container .bib h3 span {
  font-size: 2rem;
}

.file-11-container .bibitem {
  background: #fff;
  border-radius: .5rem;
  padding: .5rem 1rem;
  margin-bottom: .25rem;
  font-size: .85rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.file-11-container .bibitem strong {
  color: var(--ok);
}

.file-11-container .ttl {
  font-size: 1.4rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: .5rem;
}

.file-11-container .dsc {
  text-align: center;
  color: var(--m);
  margin-bottom: 1.5rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.file-11-container .fi {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .file-11-container .bg,
  .file-11-container .ig {
    grid-template-columns: repeat(2, 1fr);
  }

  .file-11-container .kf,
  .file-11-container .fs,
  .file-11-container .vg {
    grid-template-columns: 1fr;
  }

  .file-11-container .tl {
    min-width: 120px;
    font-size: .75rem;
  }
}
.file-12-container{--c1:#6366f1;--c2:#06b6d4;--c3:#10b981;--c4:#f59e0b;--c5:#ef4444;--bg:#fff;--tx:#0f172a;--tx2:#475569;--s1:.5rem;--s2:.75rem;--s3:1rem;--s4:1.5rem;--s5:2rem;--f1:.8rem;--f2:.9rem;--f3:1rem;--f4:1.1rem;--f5:1.2rem;--f6:1.3rem;--f7:1.5rem;--f8:1.6rem;--r1:.375rem;--r2:.5rem;--r3:.75rem;--r4:1rem}
.file-12-container{margin:0;padding:0;box-sizing:border-box}
.file-12-container{font-family:'Inter',sans-serif;line-height:1.6;color:var(--tx);background:var(--bg);font-size:var(--f2)}
.file-12-container .si{max-width:1000px;margin:0 auto;padding:var(--s5) .5cm}
.file-12-container .fi{opacity:1;transform:translateY(0)}
.file-12-container h2.st{font-size:var(--f5);font-weight:900;text-align:center;margin-bottom:var(--s3)}
.file-12-container p.ss{font-size:var(--f3);text-align:center;max-width:750px;margin:0 auto var(--s4);opacity:.8;line-height:1.7}
.file-12-container .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s5)}
.file-12-container .g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,220px));gap:var(--s4);margin-top:var(--s5);justify-content:center}
.file-12-container .ib{padding:var(--s4);border-radius:var(--r3);margin-top:var(--s5);text-align:center}
.file-12-container .ib h4{margin-bottom:var(--s2)}
.file-12-container .ib p{font-size:var(--f3);line-height:1.7}
.file-12-container .card{padding:var(--s2);border-radius:var(--r3);transition:all .3s ease;min-height:150px}
.file-12-container .card:hover{transform:translateY(-3px)}
.file-12-container .hero{background:linear-gradient(135deg,#1e293b 0%,#334155 30%,#475569 70%,#64748b 100%);color:#fff;min-height:20vh;display:flex;align-items:center;position:relative;overflow:hidden}
.file-12-container .hero::before{content:'';position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="20" y="25" font-size="6" fill="rgba(255,255,255,0.1)">📡</text><text x="70" y="55" font-size="8" fill="rgba(255,255,255,0.1)">🌐</text><text x="35" y="75" font-size="5" fill="rgba(255,255,255,0.1)">📺</text><text x="80" y="20" font-size="7" fill="rgba(255,255,255,0.1)">💭</text></svg>') center/120px repeat;animation:f 25s linear infinite}
@keyframes f{0%{transform:translate(0,0) rotate(0deg)}100%{transform:translate(-120px,-60px) rotate(360deg)}}
.file-12-container .hero h1{font-size:var(--f8);font-weight:900;margin-bottom:var(--s3);background:linear-gradient(135deg,#fff,#e2e8f0);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.file-12-container .hero p{font-size:var(--f3);opacity:.95;max-width:750px;margin:0 auto var(--s4);line-height:1.7}
.file-12-container .hero .si{position:relative;z-index:2;text-align:center}
.file-12-container .warn{background:linear-gradient(135deg,#7c2d12,#991b1b);color:#fff;padding:var(--s5) 0}
.file-12-container .warn .alert{background:rgba(239,68,68,.2);border:2px solid rgba(239,68,68,.4);padding:var(--s4);border-radius:var(--r3);text-align:center}
.file-12-container .warn .alert h3{color:#fbbf24;font-weight:700;margin-bottom:var(--s1)}
.file-12-container .stat{text-align:center;padding:var(--s2);background:rgba(255,255,255,.1);border-radius:var(--r3);border:1px solid rgba(255,255,255,.2);min-height:120px}
.file-12-container .stat b{display:block;font-size:var(--f6);font-weight:800;color:#fbbf24;margin-bottom:var(--s1)}
.file-12-container .conc{background:linear-gradient(135deg,#1f2937,#374151);color:#fff;padding:var(--s5) 0}
.file-12-container .chart{background:rgba(255,255,255,.05);border-radius:var(--r4);padding:var(--s4);margin:var(--s5) 0;border:1px solid rgba(255,255,255,.1)}
.file-12-container .chart h3{color:#fbbf24;font-size:var(--f4);margin-bottom:var(--s3);text-align:center}
.file-12-container .bars{display:flex;align-items:end;height:200px;gap:var(--s2);margin:var(--s4) 0}
.file-12-container .bar{flex:1;background:linear-gradient(to top,#ef4444,#dc2626);border-radius:var(--r1);position:relative;cursor:pointer;transition:all .3s}
.file-12-container .bar:hover{transform:scale(1.05);box-shadow:0 10px 25px rgba(239,68,68,.3)}
.file-12-container .bar span{position:absolute;font-weight:600;text-align:center;width:100%}
.file-12-container .bar .v{top:-25px;color:#fbbf24}
.file-12-container .bar .l{bottom:-30px}
.file-12-container .algo{background:linear-gradient(135deg,#581c87,#7c3aed);color:#fff;padding:var(--s5) 0}
.file-12-container .acard{background:rgba(255,255,255,.05);padding:var(--s2);border-radius:var(--r3);border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden;min-height:170px}
.file-12-container .acard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#a78bfa,#8b5cf6)}
.file-12-container .acard:hover{transform:translateY(-5px);background:rgba(255,255,255,.08)}
.file-12-container .acard i{font-size:var(--f6);display:block;margin-bottom:var(--s2);font-style:normal}
.file-12-container .acard h3{font-size:var(--f3);font-weight:700;color:#a78bfa;margin-bottom:var(--s2)}
.file-12-container .acard p{line-height:1.6;opacity:.9;margin-bottom:var(--s3)}
.file-12-container .acard .ex{background:rgba(167,139,250,.2);padding:var(--s2);border-radius:var(--r1);border-left:3px solid #a78bfa}
.file-12-container .bub{background:linear-gradient(135deg,#fef3c7,#fde047);padding:var(--s5) 0}
.file-12-container .bub h2{color:#92400e}
.file-12-container .bub p.ss{color:#78350f}
.file-12-container .bwrap{background:#fff;border-radius:var(--r4);padding:var(--s4);margin:var(--s5) 0;box-shadow:0 15px 35px rgba(245,158,11,.1)}
.file-12-container .bcmp{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s5)}
.file-12-container .bside{padding:var(--s4);border-radius:var(--r3)}
.file-12-container .bside.pre{background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:2px solid #10b981}
.file-12-container .bside.post{background:linear-gradient(135deg,#fee2e2,#fecaca);border:2px solid #ef4444}
.file-12-container .bside h3{font-size:var(--f4);font-weight:800;margin-bottom:var(--s3);text-align:center}
.file-12-container .bside.pre h3{color:#059669}
.file-12-container .bside.post h3{color:#dc2626}
.file-12-container .blist{list-style:none}
.file-12-container .blist li{padding:var(--s1) 0;border-bottom:1px solid rgba(0,0,0,.1);display:flex;justify-content:space-between}
.file-12-container .blist li:last-child{border-bottom:none}
.file-12-container .deep{background:linear-gradient(135deg,#450a0a,#7f1d1d);color:#fff;padding:var(--s5) 0}
.file-12-container .dstat{background:rgba(255,255,255,.05);padding:var(--s2);border-radius:var(--r3);border:1px solid rgba(255,255,255,.1);text-align:center;min-height:150px}
.file-12-container .dstat:hover{background:rgba(255,255,255,.08);transform:translateY(-3px)}
.file-12-container .dstat b{font-size:var(--f7);font-weight:900;color:#fca5a5;display:block;margin-bottom:var(--s1)}
.file-12-container .dstat strong{display:block;margin-bottom:var(--s1)}
.file-12-container .dstat p{opacity:.9;line-height:1.5}
.file-12-container .tbox{background:linear-gradient(135deg,#7c2d12,#991b1b);padding:var(--s5);border-radius:var(--r4);margin-top:var(--s5);text-align:center;border:2px solid #ef4444}
.file-12-container .tbox h4{color:#fbbf24;font-size:var(--f4);margin-bottom:var(--s3)}
.file-12-container .tbox p{font-size:var(--f3);line-height:1.7;margin-bottom:var(--s3)}
.file-12-container .tbox .em{font-weight:700;font-size:var(--f4);color:#fef2f2}
.file-12-container .eco{background:linear-gradient(135deg,#0f172a,#1e293b);padding:var(--s5) 0}
.file-12-container .eco h2,
.file-12-container .eco p.ss{color:#fff}
.file-12-container .eco p.ss{opacity:.8}
.file-12-container .ewrap{background:rgba(255,255,255,.95);border-radius:var(--r4);padding:var(--s4);margin:var(--s5) 0}
.file-12-container .ewrap h3{color:var(--tx);font-size:var(--f4);margin-bottom:var(--s3);text-align:center}
.file-12-container .layers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin:var(--s5) 0}
.file-12-container .layer{padding:var(--s3);border-radius:var(--r3);text-align:center;border:2px solid;min-height:200px;color:var(--tx)}
.file-12-container .layer.t{border-color:#06b6d4;background:rgba(6,182,212,.1)}
.file-12-container .layer.c{border-color:#f59e0b;background:rgba(245,158,11,.1)}
.file-12-container .layer.s{border-color:#ef4444;background:rgba(239,68,68,.1)}
.file-12-container .layer:hover{transform:scale(1.05);box-shadow:0 10px 25px rgba(0,0,0,.3)}
.file-12-container .layer h4{font-size:var(--f3);font-weight:700;margin-bottom:var(--s2)}
.file-12-container .layer p{line-height:1.5;opacity:.9;color:var(--tx2)}
.file-12-container .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,220px));gap:var(--s3);margin-top:var(--s3);justify-content:center}
.file-12-container .fgrid h5{margin-bottom:var(--s1)}
.file-12-container .fgrid p{line-height:1.5;color:var(--tx2)}
.file-12-container .imp{background:linear-gradient(135deg,#fee2e2,#fecaca);padding:var(--s5) 0}
.file-12-container .imp h2{color:#dc2626}
.file-12-container .imp p.ss{color:#7f1d1d}
.file-12-container .imet{background:#fff;padding:var(--s2);border-radius:var(--r3);box-shadow:0 8px 25px rgba(239,68,68,.1);border-left:4px solid #ef4444;min-height:170px}
.file-12-container .imet:hover{transform:translateY(-4px);box-shadow:0 12px 35px rgba(239,68,68,.15)}
.file-12-container .imet header{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.file-12-container .imet header i{font-size:var(--f5);font-style:normal}
.file-12-container .imet header h3{font-size:var(--f3);font-weight:700;color:#dc2626}
.file-12-container .imet .val{font-size:var(--f7);font-weight:900;color:#ef4444;margin-bottom:var(--s2)}
.file-12-container .imet p{line-height:1.6;color:var(--tx2);margin-bottom:var(--s2)}
.file-12-container .imet .tr{background:#fef2f2;padding:var(--s1);border-radius:var(--r1);color:#7f1d1d;border-left:3px solid #ef4444}
.file-12-container .sol{background:linear-gradient(135deg,#ecfdf5,#d1fae5);padding:var(--s5) 0}
.file-12-container .sol h2{color:#047857}
.file-12-container .sol p.ss{color:#065f46}
.file-12-container .scmp{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s5)}
.file-12-container .prob{background:linear-gradient(135deg,#fee2e2,#fecaca);padding:var(--s4);border-radius:var(--r4);border-left:5px solid #ef4444}
.file-12-container .solu{background:linear-gradient(135deg,#dcfce7,#bbf7d0);padding:var(--s4);border-radius:var(--r4);border-left:5px solid #10b981}
.file-12-container .scmp h3{font-size:var(--f4);font-weight:800;margin-bottom:var(--s3);display:flex;align-items:center;gap:var(--s1)}
.file-12-container .prob h3{color:#dc2626}
.file-12-container .solu h3{color:#059669}
.file-12-container .clist{list-style:none}
.file-12-container .clist li{padding:var(--s2) 0;border-bottom:1px solid rgba(0,0,0,.1);display:flex;align-items:flex-start;gap:var(--s1);line-height:1.5}
.file-12-container .clist li:last-child{border-bottom:none}
.file-12-container .clist .m{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0;margin-top:2px;color:#fff}
.file-12-container .clist .m.p{background:#ef4444}
.file-12-container .clist .m.s{background:#10b981}
.file-12-container .sbox{background:linear-gradient(135deg,#dcfce7,#bbf7d0);padding:var(--s5);border-radius:var(--r4);margin-top:var(--s5);text-align:center;border:2px solid #10b981}
.file-12-container .sbox h4{color:#047857;font-size:var(--f4);margin-bottom:var(--s3)}
.file-12-container .sbox p{font-size:var(--f3);line-height:1.7;margin-bottom:var(--s3);color:#065f46}
.file-12-container .sbox .em{font-weight:700;font-size:var(--f4);color:#047857}
.file-12-container .src{background:linear-gradient(135deg,#ecfdf5,#d1fae5);padding:var(--s5) 0}
.file-12-container .src h2{color:#1e40af}
.file-12-container .src p.ss{color:#1e3a8a}
.file-12-container .swrap{background:#fff;border-radius:var(--r4);padding:var(--s5);box-shadow:0 15px 35px rgba(30,64,175,.1);margin-top:var(--s5)}
.file-12-container .sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s5)}
.file-12-container .sgrp{border-left:4px solid;padding-left:var(--s3)}
.file-12-container .sgrp h4{margin-bottom:var(--s2);font-weight:700}
.file-12-container .sgrp ul{list-style:none;line-height:1.8}
.file-12-container .sgrp a{color:#2563eb;text-decoration:none}
.file-12-container .mbox{background:linear-gradient(135deg,#f0f9ff,#dbeafe);padding:var(--s4);border-radius:var(--r3);margin-top:var(--s5);text-align:center}
.file-12-container .mbox h4{color:#1e40af;margin-bottom:var(--s2)}
@media(max-width:768px){.file-12-container .bcmp,
.file-12-container .scmp,
.file-12-container .layers,
.file-12-container .g3{grid-template-columns:1fr}.file-12-container .bars{height:120px}}
/*
 * part-13.css
 * Scoped styles for file-13-container
 * Source: 13ru_main.html (lines 9-72)
 * All selectors scoped under .file-13-container
 */

/* === CSS Variables (scoped to container) === */
.file-13-container {
    --ca: #00d4ff;
    --cg: #39ff14;
    --cp: #ff073a;
    --cb: #0080ff;
    --cv: #8a2be2;
    --bg: #0a0a0a;
    --bg2: #111827;
    --tx: #fff;
    --tx2: #9ca3af;
    --s1: .4rem;
    --s2: .6rem;
    --s3: .8rem;
    --s4: 1rem;
    --s5: 1.2rem;
    --s6: 1.5rem;
    --s7: 2rem;
    --f1: .8rem;
    --f2: .9rem;
    --f3: 1rem;
    --f4: 1.1rem;
    --f5: 1.2rem;
    --f6: 1.3rem;
    --f7: 1.7rem;
    --r1: .375rem;
    --r2: .5rem;
    --r3: .75rem;
    --r4: 1rem;
}

/* === Reset (* selector applied to container) === */
.file-13-container {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === Body styles (applied to container) === */
.file-13-container {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--tx);
    background: var(--bg);
    font-size: var(--f2);
}

/* === Layout === */
.file-13-container .si {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--s5) .5cm;
}

.file-13-container .fi {
    opacity: 1;
    transform: translateY(0);
}

/* === Section Titles === */
.file-13-container h2.st {
    font-size: var(--f5);
    font-weight: 900;
    text-align: center;
    margin-bottom: var(--s3);
    background: linear-gradient(135deg, var(--ca), var(--cg));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.file-13-container p.ss {
    font-size: var(--f3);
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--s4);
    color: var(--tx2);
    line-height: 1.7;
}

/* === Cosmic Background === */
.file-13-container .cbg {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(0, 212, 255, .03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 7, 58, .03) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(57, 255, 20, .03) 0%, transparent 50%),
        linear-gradient(135deg, var(--bg), var(--bg2));
    z-index: -1;
}

/* === Hero Section === */
.file-13-container .hero {
    background: linear-gradient(135deg, rgba(15, 23, 42, .95), rgba(30, 41, 59, .95) 30%, rgba(138, 43, 226, .1) 70%, rgba(0, 212, 255, .1));
    min-height: 25vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid var(--ca);
}

.file-13-container .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="10" y="20" font-size="4" fill="rgba(0,212,255,0.1)">🤖</text><text x="60" y="40" font-size="5" fill="rgba(255,7,58,0.1)">🧠</text><text x="20" y="70" font-size="6" fill="rgba(57,255,20,0.1)">⚡</text><text x="80" y="25" font-size="4" fill="rgba(138,43,226,0.1)">🎯</text><text x="45" y="90" font-size="5" fill="rgba(0,128,255,0.1)">🌐</text></svg>') center/80px repeat;
}

.file-13-container .hero h1 {
    font-size: var(--f7);
    font-weight: 900;
    margin-bottom: var(--s3);
    background: linear-gradient(135deg, var(--ca), var(--cg));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.file-13-container .hero p {
    font-size: var(--f3);
    opacity: .9;
    max-width: 800px;
    margin: 0 auto var(--s4);
    line-height: 1.7;
    color: var(--tx2);
}

.file-13-container .hero .si {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* === Section 1 === */
.file-13-container .sec1 {
    background: linear-gradient(135deg, rgba(30, 41, 59, .95), rgba(15, 23, 42, .95) 50%, rgba(0, 128, 255, .1));
    padding: var(--s5) 0;
    border-bottom: 1px solid var(--cb);
}

/* === Grid Layout (3-column) === */
.file-13-container .g3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 300px));
    gap: var(--s4);
    margin-top: var(--s5);
    justify-content: center;
}

/* === Cards === */
.file-13-container .card {
    background: rgba(0, 0, 0, .6);
    border: 1px solid var(--cb);
    padding: var(--s3);
    border-radius: var(--r3);
    transition: all .3s;
    position: relative;
    backdrop-filter: blur(15px);
    min-height: 220px;
}

.file-13-container .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cb), var(--cv));
    border-radius: var(--r3) var(--r3) 0 0;
}

.file-13-container .card:hover {
    transform: translateY(-8px);
    border-color: var(--ca);
    box-shadow: 0 15px 40px rgba(0, 212, 255, .3);
}

.file-13-container .card i {
    font-size: var(--f6);
    margin-bottom: var(--s2);
    display: block;
    font-style: normal;
}

.file-13-container .card h3 {
    font-size: var(--f4);
    font-weight: 700;
    color: var(--ca);
    margin-bottom: var(--s2);
}

.file-13-container .card p {
    font-size: var(--f2);
    line-height: 1.6;
    color: var(--tx2);
    margin-bottom: var(--s3);
}

.file-13-container .card .det {
    background: rgba(0, 212, 255, .1);
    padding: var(--s2);
    border-radius: var(--r1);
    border-left: 3px solid var(--ca);
    font-size: var(--f1);
    color: var(--tx);
}

.file-13-container .card .det a {
    color: var(--ca);
}

/* === Section 2 === */
.file-13-container .sec2 {
    background: linear-gradient(135deg, rgba(138, 43, 226, .1), rgba(15, 23, 42, .95) 50%, rgba(255, 7, 58, .1));
    padding: var(--s5) 0;
    border-bottom: 1px solid var(--cv);
}

/* === Grid Layout (2-column) === */
.file-13-container .g2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s4);
    margin-top: var(--s5);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* === Threat Cards === */
.file-13-container .tcard {
    background: rgba(138, 43, 226, .1);
    border: 1px solid var(--cv);
    padding: var(--s3);
    border-radius: var(--r3);
    transition: all .3s;
    position: relative;
    backdrop-filter: blur(15px);
    min-height: 250px;
}

.file-13-container .tcard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cv), var(--cp));
    border-radius: var(--r3) var(--r3) 0 0;
}

.file-13-container .tcard:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--cp);
    box-shadow: 0 15px 40px rgba(255, 7, 58, .3);
}

.file-13-container .tcard .lvl {
    display: inline-block;
    background: var(--cv);
    color: #fff;
    padding: var(--s1) var(--s2);
    border-radius: var(--r1);
    font-size: .75rem;
    font-weight: 600;
    margin-bottom: var(--s2);
}

.file-13-container .tcard h3 {
    font-size: var(--f4);
    font-weight: 700;
    color: var(--cp);
    margin-bottom: var(--s2);
}

.file-13-container .tcard p {
    font-size: var(--f2);
    line-height: 1.6;
    color: var(--tx2);
    margin-bottom: var(--s3);
}

.file-13-container .tcard .impl {
    background: rgba(255, 7, 58, .1);
    padding: var(--s2);
    border-radius: var(--r1);
    border-left: 3px solid var(--cp);
    font-size: var(--f1);
}

.file-13-container .tcard .impl a {
    color: var(--ca);
}

/* === Section 3 === */
.file-13-container .sec3 {
    background: linear-gradient(135deg, rgba(255, 7, 58, .1), rgba(15, 23, 42, .95) 50%, rgba(0, 212, 255, .1));
    padding: var(--s5) 0;
    border-bottom: 1px solid var(--cp);
}

/* === Box Wrapper === */
.file-13-container .bwrap {
    background: rgba(0, 0, 0, .4);
    border-radius: var(--r4);
    padding: var(--s4);
    margin: var(--s5) 0;
    backdrop-filter: blur(15px);
    border: 1px solid var(--cp);
}

.file-13-container .bwrap h3 {
    color: var(--cp);
    font-size: var(--f4);
    margin-bottom: var(--s3);
    text-align: center;
}

/* === Key Box === */
.file-13-container .keybox {
    background: rgba(255, 7, 58, .1);
    padding: var(--s4);
    border-radius: var(--r3);
    margin-bottom: var(--s4);
    text-align: center;
}

.file-13-container .keybox h4 {
    color: var(--ca);
    margin-bottom: var(--s2);
}

.file-13-container .keybox p {
    font-size: var(--f3);
    line-height: 1.7;
}

/* === Metrics Grid === */
.file-13-container .bmg {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s4);
    max-width: 600px;
    margin: var(--s5) auto;
}

.file-13-container .bmet {
    background: rgba(255, 7, 58, .1);
    border: 1px solid var(--cp);
    padding: var(--s3);
    border-radius: var(--r3);
    text-align: center;
    transition: all .3s;
    min-height: 180px;
    backdrop-filter: blur(10px);
}

.file-13-container .bmet:hover {
    transform: translateY(-5px);
    border-color: var(--ca);
    box-shadow: 0 15px 40px rgba(255, 7, 58, .3);
}

.file-13-container .bmet i {
    font-size: var(--f6);
    margin-bottom: var(--s2);
    display: block;
    font-style: normal;
}

.file-13-container .bmet h4 {
    font-size: var(--f3);
    font-weight: 700;
    color: var(--cp);
    margin-bottom: var(--s2);
}

.file-13-container .bmet b {
    font-size: var(--f5);
    font-weight: 900;
    color: var(--ca);
    display: block;
    margin-bottom: var(--s1);
}

.file-13-container .bmet p {
    font-size: var(--f2);
    color: var(--tx2);
    line-height: 1.5;
}

/* === Result Box === */
.file-13-container .rbox {
    background: linear-gradient(135deg, #1e3a5f, #2d4a69);
    padding: var(--s7);
    border-radius: var(--r4);
    margin-top: var(--s5);
    text-align: center;
    border: 2px solid var(--ca);
}

.file-13-container .rbox h4 {
    color: var(--cg);
    font-size: var(--f4);
    margin-bottom: var(--s3);
}

.file-13-container .rbox p {
    font-size: var(--f3);
    line-height: 1.7;
    margin-bottom: var(--s3);
}

.file-13-container .rbox .src {
    font-size: var(--f2);
    color: var(--tx2);
}

.file-13-container .rbox .src a {
    color: var(--ca);
}

/* === Section 4 === */
.file-13-container .sec4 {
    background: linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(30, 41, 59, .98));
    padding: var(--s5) 0;
    border-top: 2px solid var(--ca);
}

/* === Source Grid === */
.file-13-container .sgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s5);
    margin-top: var(--s5);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.file-13-container .scat {
    background: rgba(0, 0, 0, .4);
    border: 1px solid var(--ca);
    padding: var(--s3);
    border-radius: var(--r3);
    backdrop-filter: blur(10px);
}

.file-13-container .scat h4 {
    font-size: var(--f3);
    font-weight: 700;
    color: var(--ca);
    margin-bottom: var(--s2);
    display: flex;
    align-items: center;
    gap: var(--s1);
}

.file-13-container .scat ul {
    list-style: none;
}

.file-13-container .scat li {
    padding: var(--s1) 0;
    font-size: var(--f2);
    line-height: 1.6;
    color: var(--tx2);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.file-13-container .scat li:last-child {
    border-bottom: none;
}

.file-13-container .scat li strong {
    color: var(--tx);
}

.file-13-container .scat li a {
    color: var(--ca);
}

/* === Message Box === */
.file-13-container .mbox {
    background: rgba(0, 212, 255, .1);
    padding: var(--s4);
    border-radius: var(--r3);
    margin-top: var(--s5);
    text-align: center;
}

.file-13-container .mbox h4 {
    color: var(--ca);
    margin-bottom: var(--s2);
}

.file-13-container .mbox p {
    font-size: var(--f2);
    line-height: 1.6;
    color: var(--tx2);
}

/* === Responsive === */
@media (max-width: 768px) {
    .file-13-container .g2,
    .file-13-container .bmg,
    .file-13-container .sgrid {
        grid-template-columns: 1fr;
    }
}
/*
 * part-14.css
 * Scoped styles for file-14-container
 * Source: 14ru_main.html (lines 9-74)
 * All selectors scoped under .file-14-container
 */

/* :root variables scoped to container */
.file-14-container {
    --ca: #00d4ff;
    --cg: #39ff14;
    --cp: #ff073a;
    --cb: #0080ff;
    --cv: #8a2be2;
    --cw: #ff6b35;
    --bg: #0a0a0a;
    --bg2: #111827;
    --tx: #fff;
    --tx2: #9ca3af;
    --s1: .4rem;
    --s2: .6rem;
    --s3: .8rem;
    --s4: 1rem;
    --s5: 1.2rem;
    --s6: 1.5rem;
    --s7: 2rem;
    --f1: .8rem;
    --f2: .9rem;
    --f3: 1rem;
    --f4: 1.1rem;
    --f5: 1.2rem;
    --f6: 1.3rem;
    --f7: 1.5rem;
    --f8: 1.7rem;
    --r1: .375rem;
    --r2: .5rem;
    --r3: .75rem;
    --r4: 1rem;
}

/* * (universal reset) applied to container */
.file-14-container {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* body styles applied to container */
.file-14-container {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--tx);
    background: var(--bg);
    font-size: var(--f2);
}

/* Layout */
.file-14-container .si {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--s5) 0;
}

.file-14-container .fi {
    opacity: 1;
    transform: translateY(0);
}

/* Section titles */
.file-14-container h2.st {
    font-size: var(--f5);
    font-weight: 900;
    text-align: center;
    margin-bottom: var(--s3);
    background: linear-gradient(135deg, var(--ca), var(--cg));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.file-14-container p.ss {
    font-size: var(--f3);
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--s4);
    color: var(--tx2);
    line-height: 1.7;
}

/* Background */
.file-14-container .cbg {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, var(--bg), var(--bg2) 50%, #1a1a2e);
    z-index: -1;
}

/* Hero section */
.file-14-container .hero {
    background: linear-gradient(135deg, rgba(15, 23, 42, .95), rgba(30, 41, 59, .95) 50%, rgba(138, 43, 226, .2));
    min-height: 20vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid var(--ca);
}

.file-14-container .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="30" r="1" fill="rgba(0,212,255,0.3)"/><circle cx="80" cy="70" r="1.5" fill="rgba(57,255,20,0.3)"/><circle cx="50" cy="50" r="1" fill="rgba(255,7,58,0.3)"/></svg>') center/100px repeat;
}

.file-14-container .hero .si {
    position: relative;
    z-index: 2;
    text-align: center;
}

.file-14-container .hero h1 {
    font-size: var(--f8);
    font-weight: 900;
    margin-bottom: var(--s3);
    background: linear-gradient(135deg, var(--ca), var(--cg));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.file-14-container .hero p {
    font-size: var(--f3);
    opacity: .9;
    max-width: 800px;
    margin: 0 auto var(--s4);
    line-height: 1.7;
    color: var(--tx2);
}

/* Content sections */
.file-14-container .sec1 {
    background: linear-gradient(135deg, rgba(138, 43, 226, .15), rgba(15, 23, 42, .95));
    padding: var(--s5) 0;
    border-bottom: 1px solid var(--cv);
}

.file-14-container .sec2 {
    background: linear-gradient(135deg, rgba(255, 7, 58, .1), rgba(15, 23, 42, .95));
    padding: var(--s5) 0;
    border-bottom: 1px solid var(--cp);
}

.file-14-container .sec3 {
    background: linear-gradient(135deg, rgba(255, 107, 53, .1), rgba(15, 23, 42, .95));
    padding: var(--s5) 0;
    border-bottom: 1px solid var(--cw);
}

.file-14-container .sec4 {
    background: linear-gradient(135deg, rgba(0, 212, 255, .1), rgba(15, 23, 42, .95));
    padding: var(--s5) 0;
    border-bottom: 1px solid var(--ca);
}

.file-14-container .sec5 {
    background: linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(30, 41, 59, .98));
    padding: var(--s5) 0;
}

/* Grid layouts */
.file-14-container .g3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
    margin-top: var(--s5);
}

.file-14-container .g4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s4);
    margin-top: var(--s5);
}

.file-14-container .g2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s4);
    margin-top: var(--s5);
}

.file-14-container .gf {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 300px));
    gap: var(--s4);
    margin-top: var(--s5);
    justify-content: center;
}

/* Tech cards (.tcard) */
.file-14-container .tcard {
    background: rgba(138, 43, 226, .15);
    border: 1px solid var(--cv);
    padding: var(--s3);
    border-radius: var(--r3);
    transition: all .3s;
    position: relative;
    min-height: 280px;
}

.file-14-container .tcard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cv), var(--cb));
    border-radius: var(--r3) var(--r3) 0 0;
}

.file-14-container .tcard:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--cb);
    box-shadow: 0 10px 30px rgba(0, 128, 255, .2);
}

.file-14-container .tcard .badge {
    display: inline-block;
    background: var(--cv);
    color: #fff;
    padding: var(--s1) var(--s2);
    border-radius: var(--r1);
    font-size: .75rem;
    font-weight: 600;
    margin-bottom: var(--s2);
}

.file-14-container .tcard h3 {
    font-size: var(--f4);
    font-weight: 700;
    color: var(--cb);
    margin-bottom: var(--s2);
}

.file-14-container .tcard p {
    font-size: var(--f2);
    line-height: 1.6;
    color: var(--tx2);
    margin-bottom: var(--s3);
}

.file-14-container .tcard .src {
    background: rgba(0, 128, 255, .1);
    padding: var(--s2);
    border-radius: var(--r1);
    border-left: 3px solid var(--cb);
    font-size: var(--f1);
}

.file-14-container .tcard .src a {
    color: var(--cb);
}

/* Content cards (.ccard) */
.file-14-container .ccard {
    background: rgba(255, 7, 58, .1);
    border: 1px solid var(--cp);
    padding: var(--s3);
    border-radius: var(--r3);
    transition: all .3s;
    position: relative;
    min-height: 250px;
}

.file-14-container .ccard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cp), var(--cv));
    border-radius: var(--r3) var(--r3) 0 0;
}

.file-14-container .ccard:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--ca);
    box-shadow: 0 10px 30px rgba(255, 7, 58, .2);
}

.file-14-container .ccard i {
    font-size: var(--f6);
    margin-bottom: var(--s2);
    display: block;
    font-style: normal;
}

.file-14-container .ccard h3 {
    font-size: var(--f4);
    font-weight: 700;
    color: var(--cp);
    margin-bottom: var(--s2);
}

.file-14-container .ccard p {
    font-size: var(--f2);
    line-height: 1.6;
    color: var(--tx2);
    margin-bottom: var(--s3);
}

.file-14-container .ccard .src {
    background: rgba(255, 7, 58, .15);
    padding: var(--s2);
    border-radius: var(--r1);
    border-left: 3px solid var(--cp);
    font-size: var(--f1);
}

.file-14-container .ccard .src a {
    color: var(--cp);
}

/* Timeline */
.file-14-container .timeline {
    position: relative;
    margin: var(--s5) 0;
}

.file-14-container .timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--cw), var(--cp));
    transform: translateX(-50%);
}

.file-14-container .titem {
    display: flex;
    margin-bottom: var(--s7);
    position: relative;
}

.file-14-container .titem:nth-child(even) {
    flex-direction: row-reverse;
}

.file-14-container .titem .year {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cw);
    color: var(--bg);
    padding: var(--s1) var(--s2);
    border-radius: var(--r2);
    font-weight: 700;
    font-size: var(--f1);
}

.file-14-container .titem .cnt {
    flex: 1;
    background: rgba(255, 107, 53, .1);
    border: 1px solid var(--cw);
    padding: var(--s3);
    border-radius: var(--r3);
    margin: 0 var(--s4);
    transition: all .3s;
}

.file-14-container .titem .cnt:hover {
    transform: scale(1.02);
    border-color: var(--cp);
}

.file-14-container .titem h3 {
    font-size: var(--f3);
    font-weight: 700;
    color: var(--cw);
    margin-bottom: var(--s2);
}

.file-14-container .titem p {
    font-size: var(--f2);
    line-height: 1.6;
    color: var(--tx2);
    margin-bottom: var(--s2);
}

.file-14-container .titem .src {
    background: rgba(255, 107, 53, .2);
    padding: var(--s1);
    border-radius: var(--r1);
    font-size: var(--f1);
    color: var(--tx2);
}

.file-14-container .titem .src a {
    color: var(--cw);
}

/* Stat cards (.scard) */
.file-14-container .scard {
    background: rgba(0, 212, 255, .1);
    border: 1px solid var(--ca);
    padding: var(--s4);
    border-radius: var(--r3);
    text-align: center;
    transition: all .3s;
}

.file-14-container .scard:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 212, 255, .2);
}

.file-14-container .scard b {
    font-size: var(--f7);
    font-weight: 900;
    color: var(--ca);
    display: block;
    margin-bottom: var(--s1);
}

.file-14-container .scard span {
    font-size: var(--f2);
    color: var(--tx2);
    display: block;
    margin-bottom: var(--s1);
}

.file-14-container .scard em {
    font-size: .75rem;
    color: var(--tx2);
    opacity: .7;
    font-style: normal;
}

/* Source category cards (.srcat) */
.file-14-container .srcat {
    background: rgba(0, 0, 0, .4);
    border: 1px solid var(--ca);
    padding: var(--s3);
    border-radius: var(--r3);
}

.file-14-container .srcat h4 {
    font-size: var(--f3);
    font-weight: 700;
    color: var(--ca);
    margin-bottom: var(--s2);
    display: flex;
    align-items: center;
    gap: var(--s1);
}

.file-14-container .srcat ul {
    list-style: none;
}

.file-14-container .srcat li {
    padding: var(--s1) 0;
    font-size: var(--f2);
    line-height: 1.6;
    color: var(--tx2);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.file-14-container .srcat li:last-child {
    border-bottom: none;
}

.file-14-container .srcat li strong {
    color: var(--tx);
}

.file-14-container .srcat li a {
    color: var(--ca);
}

/* Message box (.mbox) */
.file-14-container .mbox {
    background: rgba(0, 212, 255, .1);
    padding: var(--s4);
    border-radius: var(--r3);
    margin-top: var(--s5);
    text-align: center;
}

.file-14-container .mbox h4 {
    color: var(--ca);
    margin-bottom: var(--s2);
}

.file-14-container .mbox p {
    font-size: var(--f2);
    line-height: 1.6;
    color: var(--tx2);
}

/* Responsive: mobile */
@media (max-width: 768px) {
    .file-14-container .g3,
    .file-14-container .g4 {
        grid-template-columns: 1fr;
    }

    .file-14-container .timeline::before {
        display: none;
    }

    .file-14-container .titem,
    .file-14-container .titem:nth-child(even) {
        flex-direction: column;
    }

    .file-14-container .titem .cnt {
        margin: var(--s3) 0;
    }

    .file-14-container .g2 {
        grid-template-columns: 1fr;
    }
}

/* Responsive: tablet */
@media (max-width: 1200px) and (min-width: 769px) {
    .file-14-container .g3 {
        grid-template-columns: repeat(2, 1fr);
    }
}
/*
 * part-15.css
 * Scoped styles for 15ru_main.html
 * All selectors scoped under .file-15-container
 */

/* === CSS Variables (scoped to container) === */
.file-15-container {
    --ca: #06b6d4;
    --cs: #10b981;
    --cw: #f59e0b;
    --ce: #ef4444;
    --bg: #fff;
    --bg2: #f8fafc;
    --tx: #0f172a;
    --tx2: #475569;
    --s1: .4rem;
    --s2: .6rem;
    --s3: .8rem;
    --s4: 1rem;
    --s5: 1.2rem;
    --s6: 1.5rem;
    --s7: 2rem;
    --f1: .875rem;
    --f2: .9rem;
    --f3: 1rem;
    --f4: 1.1rem;
    --f5: 1.2rem;
    --f6: 1.3rem;
    --f7: 1.5rem;
    --r1: .375rem;
    --r2: .5rem;
    --r3: .75rem;
    --r4: 1rem;
}

/* === Universal reset (applied to container) === */
.file-15-container {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === Body styles (applied to container) === */
.file-15-container {
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
    color: var(--tx);
    background: var(--bg);
    font-size: var(--f2);
}

/* === Layout === */
.file-15-container .si {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--s5) var(--s3);
}

.file-15-container .fi {
    opacity: 1;
    transform: translateY(0);
}

/* === Section Titles === */
.file-15-container h2.st {
    font-size: var(--f5);
    font-weight: 900;
    text-align: center;
    margin-bottom: var(--s2);
}

.file-15-container p.ss {
    font-size: var(--f3);
    text-align: center;
    max-width: 1000px;
    margin: 0 auto var(--s2);
    opacity: .8;
    line-height: 1.8;
}

/* === Hero Section === */
.file-15-container .hero {
    background: linear-gradient(135deg, #1e293b, #334155 50%, #475569);
    color: #fff;
    min-height: 20vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.file-15-container .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') center/100px repeat;
}

.file-15-container .hero .si {
    position: relative;
    z-index: 2;
    text-align: center;
}

.file-15-container .hero h1 {
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: var(--s2);
    background: linear-gradient(135deg, #fff, #e2e8f0);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* === Content Sections === */
.file-15-container .sec1 {
    background: var(--bg2);
    padding: var(--s5) 0;
}

.file-15-container .sec2 {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    padding: var(--s6) 0;
}

.file-15-container .sec3 {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    padding: var(--s6) 0;
}

.file-15-container .sec4 {
    background: #0f172a;
    color: #fff;
    padding: var(--s6) 0;
}

.file-15-container .sec5 {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    padding: var(--s6) 0;
}

.file-15-container .sec6 {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #fff;
    padding: var(--s6) 0;
}

.file-15-container .sec7 {
    background: var(--bg2);
    padding: var(--s6) 0;
    border-top: 1px solid #e2e8f0;
}

/* === Hero Stats Grid === */
.file-15-container .hstat {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s2);
    margin-top: var(--s4);
}

.file-15-container .hstat > div {
    text-align: center;
    padding: var(--s2);
    background: rgba(6, 182, 212, .1);
    border: 2px solid var(--ca);
    border-radius: var(--r3);
    transition: all .3s;
}

.file-15-container .hstat > div:hover {
    transform: translateY(-5px);
    background: rgba(6, 182, 212, .15);
}

.file-15-container .hstat b {
    display: block;
    font-size: var(--f5);
    font-weight: 800;
    color: #0891b2;
    margin-bottom: var(--s1);
}

.file-15-container .hstat span {
    font-size: var(--f1);
    color: #164e63;
}

/* === Content Cards === */
.file-15-container .ccard {
    background: #fff;
    padding: var(--s2);
    border-radius: var(--r4);
    box-shadow: 0 10px 30px rgba(239, 68, 68, .1);
    border-left: 5px solid var(--ce);
    transition: all .3s;
    position: relative;
    min-height: 170px;
}

.file-15-container .ccard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.file-15-container .ccard:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(239, 68, 68, .15);
}

.file-15-container .ccard h3 {
    font-size: var(--f3);
    font-weight: 700;
    color: var(--ce);
    margin-bottom: var(--s2);
    display: flex;
    align-items: center;
    gap: var(--s1);
}

.file-15-container .ccard p {
    margin-bottom: var(--s2);
}

/* === Card Grid === */
.file-15-container .cgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--s2);
    margin-top: var(--s4);
}

/* === Progress Bars === */
.file-15-container .pbar {
    background: rgba(255, 255, 255, .1);
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    margin: var(--s1) 0;
}

.file-15-container .pbar > div {
    height: 100%;
    border-radius: 6px;
    transition: width 2s ease;
}

.file-15-container .pc {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.file-15-container .pi {
    background: linear-gradient(90deg, #06b6d4, #0891b2);
}

/* === Challenge Box === */
.file-15-container .chbox {
    background: #fef2f2;
    color: #7f1d1d;
    padding: var(--s2);
    border-radius: var(--r2);
    margin-top: var(--s2);
}

/* === Feature Box (two-column layout) === */
.file-15-container .fbox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
    align-items: center;
}

.file-15-container .fbox .vis {
    background: #fff;
    padding: var(--s2);
    border-radius: var(--r4);
    box-shadow: 0 15px 35px rgba(245, 158, 11, .2);
    text-align: center;
}

/* === Cycle Diagram === */
.file-15-container .cyc {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    position: relative;
    border: 3px solid #f59e0b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.file-15-container .cyc .ctr {
    width: 180px;
    height: 180px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #d97706;
    text-align: center;
    box-shadow: 0 5px 15px rgba(245, 158, 11, .3);
    font-size: var(--f1);
}

.file-15-container .cyc .pts {
    position: absolute;
    inset: 0;
}

.file-15-container .cyc .pt {
    position: absolute;
    font-weight: 600;
    font-size: .75rem;
    text-align: center;
    padding: var(--s1);
    color: #374151;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-15-container .cyc .pt:nth-child(1) {
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
}

.file-15-container .cyc .pt:nth-child(2) {
    top: 25%;
    right: -30px;
    transform: translateY(-50%);
}

.file-15-container .cyc .pt:nth-child(3) {
    bottom: 25%;
    right: -30px;
    transform: translateY(50%);
}

.file-15-container .cyc .pt:nth-child(4) {
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
}

.file-15-container .cyc .pt:nth-child(5) {
    bottom: 25%;
    left: -30px;
    transform: translateY(50%);
}

.file-15-container .cyc .pt:nth-child(6) {
    top: 25%;
    left: -30px;
    transform: translateY(-50%);
}

/* === Dark Box (glassmorphism) === */
.file-15-container .dbox {
    background: rgba(255, 255, 255, .05);
    border-radius: var(--r4);
    padding: var(--s2);
    margin: var(--s4) 0;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .1);
}

.file-15-container .dbox h3 {
    color: var(--ca);
    margin-bottom: var(--s2);
}

/* === Comparison Grid === */
.file-15-container .cmp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
    margin-top: var(--s4);
}

.file-15-container .cmp > div {
    padding: var(--s2);
    border-radius: var(--r4);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .1);
    transition: all .3s;
}

.file-15-container .cmp > div:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .15);
}

.file-15-container .cmp .old {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border-left: 5px solid #ef4444;
}

.file-15-container .cmp .new {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-left: 5px solid #10b981;
}

.file-15-container .cmp ul {
    list-style: none;
    margin-top: var(--s2);
}

.file-15-container .cmp li {
    padding: var(--s1) 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    gap: var(--s1);
}

.file-15-container .cmp li:last-child {
    border-bottom: none;
}

.file-15-container .cmp .ico {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.file-15-container .cmp .ico.r {
    background: #ef4444;
    color: #fff;
}

.file-15-container .cmp .ico.g {
    background: #10b981;
    color: #fff;
}

/* === Solutions Grid === */
.file-15-container .sgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4) var(--s3);
    margin-top: var(--s4);
}

.file-15-container .scard {
    background: rgba(255, 255, 255, .05);
    padding: var(--s2);
    border-radius: var(--r4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: all .3s;
    position: relative;
    min-height: 170px;
}

.file-15-container .scard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #06b6d4, #0891b2);
}

.file-15-container .scard:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, .08);
    border-color: rgba(6, 182, 212, .3);
}

.file-15-container .scard h3 {
    color: var(--ca);
    font-weight: 700;
    margin-bottom: var(--s2);
}

.file-15-container .scard p {
    line-height: 1.8;
    margin-bottom: var(--s2);
}

.file-15-container .scard .note {
    background: rgba(6, 182, 212, .1);
    padding: var(--s2);
    border-radius: var(--r2);
}

/* === Sources Grid === */
.file-15-container .srcg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--s2);
}

.file-15-container .srcg li {
    padding: var(--s1);
    background: #fff;
    border-radius: var(--r2);
    border: 1px solid #e2e8f0;
}

.file-15-container .srcg a {
    color: #6366f1;
    text-decoration: none;
    font-size: var(--f1);
    display: block;
}

.file-15-container .srcg a:hover {
    text-decoration: underline;
}

.file-15-container .srcg small {
    font-size: .75rem;
    color: var(--tx2);
    margin-top: var(--s1);
    display: block;
}

/* === Responsive === */
@media (max-width: 768px) {
    .file-15-container .fbox,
    .file-15-container .cmp {
        grid-template-columns: 1fr;
        gap: var(--s2);
    }

    .file-15-container .hstat {
        grid-template-columns: 1fr;
    }

    .file-15-container .cyc {
        width: 200px;
        height: 200px;
    }

    .file-15-container .cyc .ctr {
        width: 120px;
        height: 120px;
    }

    .file-15-container .sgrid {
        grid-template-columns: 1fr;
        gap: var(--s3);
    }

    .file-15-container .srcg {
        grid-template-columns: 1fr;
    }
}
/*
 * part-16.css
 * Scoped styles for 16ru_main.html
 * All selectors scoped under .file-16-container
 */

/* === CSS Variables (scoped to container) === */
.file-16-container {
    --cp: #6366f1;
    --ca: #06b6d4;
    --cs: #10b981;
    --cw: #f59e0b;
    --ce: #ef4444;
    --bg: #fff;
    --bg2: #f8fafc;
    --tx: #0f172a;
    --tx2: #475569;
    --s1: .4rem;
    --s2: .6rem;
    --s3: .8rem;
    --s4: 1rem;
    --s5: 1.2rem;
    --s6: 1.5rem;
    --f1: .8rem;
    --f2: .9rem;
    --f3: 1rem;
    --f4: 1.1rem;
    --f5: 1.2rem;
    --f6: 1.3rem;
    --r2: .5rem;
    --r3: .75rem;
    --r4: 1rem;
}

/* === Reset (applied to container) === */
.file-16-container {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === Body styles (applied to container) === */
.file-16-container {
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
    color: var(--tx);
    background: var(--bg);
    font-size: var(--f2);
}

/* === Layout === */
.file-16-container .si {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--s5) var(--s3);
}

.file-16-container .fi {
    opacity: 1;
    transform: translateY(0);
}

/* === Section Titles === */
.file-16-container h2.st {
    font-size: var(--f5);
    font-weight: 900;
    text-align: center;
    margin-bottom: var(--s2);
}

.file-16-container p.ss {
    font-size: var(--f3);
    text-align: center;
    max-width: 1000px;
    margin: 0 auto var(--s2);
    opacity: .8;
    line-height: 1.8;
}

/* === Hero Section === */
.file-16-container .hero {
    background: linear-gradient(135deg, #0c0a1e, #1e1b4b 25%, #3730a3 60%, #6366f1);
    min-height: 20vh;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--s5) 0;
    position: relative;
    overflow: hidden;
}

.file-16-container .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 80%, rgba(99, 102, 241, .4) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(139, 92, 246, .4) 0%, transparent 50%);
    z-index: 1;
}

.file-16-container .hero .si {
    position: relative;
    z-index: 2;
}

.file-16-container .hero h1 {
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: var(--s3);
    background: linear-gradient(135deg, #fff, #e0e7ff, #c7d2fe);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* === Content Sections === */
.file-16-container .sec1 {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    padding: var(--s5) 0;
}

.file-16-container .sec2 {
    display: flex;
    min-height: 45vh;
}

.file-16-container .sec2 .left {
    background: linear-gradient(135deg, #0369a1, #0ea5e9);
    color: #fff;
    padding: var(--s5);
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.file-16-container .sec2 .right {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    padding: var(--s5);
    width: 50%;
}

.file-16-container .sec3 {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    padding: var(--s5) 0;
    text-align: center;
}

.file-16-container .sec4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 45vh;
}

.file-16-container .sec4 > div {
    padding: var(--s5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.file-16-container .sec4 .left {
    background: linear-gradient(135deg, #0369a1, #0284c7);
    color: #fff;
}

.file-16-container .sec4 .right {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}

.file-16-container .sec4 .cnt {
    position: relative;
    z-index: 2;
}

.file-16-container .sec5 {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    padding: var(--s5) 0;
    text-align: center;
}

.file-16-container .sec6 {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    padding: var(--s5) 0;
}

.file-16-container .sec7 {
    background: #fff;
    padding: var(--s5) 0;
}

.file-16-container .sec8 {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    padding: var(--s5) 0;
    text-align: center;
}

.file-16-container .sec9 {
    background: var(--bg2);
    padding: var(--s5) 0;
}

/* === S-Cards === */
.file-16-container .scard {
    background: #fff;
    border-radius: var(--r4);
    padding: var(--s2);
    box-shadow: 0 15px 35px rgba(14, 165, 233, .1);
    border-top: 5px solid #0ea5e9;
    transition: all .3s;
    min-height: 120px;
}

.file-16-container .scard:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(14, 165, 233, .2);
}

.file-16-container .scard h4 {
    color: #0369a1;
    margin-bottom: var(--s2);
    font-weight: 800;
    font-size: var(--f3);
    display: flex;
    align-items: center;
    gap: var(--s1);
}

.file-16-container .sgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s2);
}

/* === Stat Grid & Cards === */
.file-16-container .statg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s2);
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--s3);
}

.file-16-container .statc {
    background: #fff;
    border-radius: var(--r4);
    padding: var(--s2) var(--s1);
    box-shadow: 0 15px 35px rgba(71, 85, 105, .1);
    border-top: 6px solid #6366f1;
    transition: all .3s;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}

.file-16-container .statc:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 25px 50px rgba(99, 102, 241, .2);
}

.file-16-container .statc b {
    font-size: var(--f5);
    font-weight: 900;
    color: #6366f1;
    margin-bottom: var(--s1);
    display: block;
}

.file-16-container .statc strong {
    color: var(--tx);
    font-weight: 700;
    font-size: var(--f3);
    line-height: 1.3;
}

.file-16-container .statc small {
    color: var(--tx2);
    font-size: .75rem;
    line-height: 1.4;
    margin-top: auto;
}

/* === Comparison List === */
.file-16-container .cmplist {
    list-style: none;
    padding: 0;
}

.file-16-container .cmplist li {
    padding: var(--s1) 0;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    line-height: 1.7;
    font-size: var(--f2);
}

.file-16-container .cmplist li:last-child {
    border-bottom: none;
}

/* === Feature Box === */
.file-16-container .fbox {
    background: #fff;
    border: 3px solid var(--cp);
    border-radius: var(--r4);
    padding: var(--s4);
    margin: var(--s4) auto;
    max-width: 1000px;
    box-shadow: 0 20px 60px rgba(99, 102, 241, .2);
}

.file-16-container .fbox .title {
    font-size: var(--f4);
    color: var(--cp);
    font-weight: 800;
    margin-bottom: var(--s2);
}

.file-16-container .fgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s3);
    margin-top: var(--s3);
}

.file-16-container .fgrid > div {
    text-align: center;
    padding: var(--s2);
}

.file-16-container .fgrid .ico {
    font-size: var(--f5);
    margin-bottom: var(--s1);
}

.file-16-container .fgrid .lbl {
    font-weight: 700;
    color: var(--cp);
}

.file-16-container .fgrid small {
    font-size: var(--f1);
    color: var(--tx2);
}

/* === Economy Comparison === */
.file-16-container .ecmp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
    margin: var(--s4) auto;
    max-width: 1000px;
    padding: 0 var(--s3);
}

.file-16-container .ecard {
    background: #fff;
    padding: var(--s4);
    border-radius: var(--r4);
    box-shadow: 0 15px 50px rgba(0, 0, 0, .1);
    transition: all .5s;
    min-height: 350px;
}

.file-16-container .ecard.trad {
    border-left: 6px solid #0ea5e9;
}

.file-16-container .ecard.dao {
    border-left: 6px solid #10b981;
}

.file-16-container .ecard:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .15);
}

.file-16-container .ecard ul {
    list-style: none;
    padding: 0;
}

.file-16-container .ecard li {
    display: flex;
    justify-content: space-between;
    padding: var(--s1) 0;
    border-bottom: 1px solid #e2e8f0;
}

/* === D-Cards === */
.file-16-container .dcard {
    background: #fff;
    border-radius: var(--r4);
    padding: var(--s4);
    box-shadow: 0 15px 35px rgba(16, 185, 129, .1);
    border-top: 5px solid #10b981;
    transition: all .3s;
    min-height: 200px;
}

.file-16-container .dcard:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 50px rgba(16, 185, 129, .2);
}

.file-16-container .dcard .ico {
    font-size: var(--f5);
    margin-bottom: var(--s2);
    display: block;
}

.file-16-container .dcard h4 {
    color: #047857;
    font-size: var(--f4);
    font-weight: 800;
    margin-bottom: var(--s2);
}

.file-16-container .dgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s5) var(--s4);
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--s3);
}

/* === B-Cards === */
.file-16-container .bgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s2);
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--s3);
}

.file-16-container .bcard {
    background: #fff;
    border-radius: var(--r4);
    padding: var(--s2);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
    border-top: 5px solid var(--bc);
    transition: all .3s;
    text-align: center;
    min-height: 170px;
}

.file-16-container .bcard.eff {
    --bc: #10b981;
}

.file-16-container .bcard.trn {
    --bc: #3b82f6;
}

.file-16-container .bcard.fair {
    --bc: #8b5cf6;
}

.file-16-container .bcard.spd {
    --bc: #f59e0b;
}

.file-16-container .bcard .ico {
    font-size: var(--f6);
    margin-bottom: var(--s2);
    display: block;
}

.file-16-container .bcard .title {
    font-size: var(--f4);
    font-weight: 800;
    margin-bottom: var(--s2);
    color: var(--bc);
}

/* === Conclusion === */
.file-16-container .conc {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--s3);
}

.file-16-container .conc .hl {
    background: #fff;
    border-radius: var(--r4);
    padding: var(--s2);
    margin: var(--s2) 0;
    border: 2px solid #e2e8f0;
}

/* === Sources Grid === */
.file-16-container .srcg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--s3);
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--s3);
}

.file-16-container .srcg > div {
    background: #fff;
    padding: var(--s2);
    border-radius: var(--r2);
    border-left: 4px solid var(--cp);
}

.file-16-container .srcg a {
    color: var(--cp);
    text-decoration: none;
    font-weight: 600;
}

.file-16-container .srcg a:hover {
    text-decoration: underline;
}

.file-16-container .srcg small {
    font-size: var(--f1);
    color: var(--tx2);
    margin-top: var(--s1);
    display: block;
}

/* === Insight & Context Boxes === */
.file-16-container .insight {
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: var(--r4);
    padding: var(--s2);
    margin: var(--s2) 0;
}

.file-16-container .context {
    background: rgba(14, 165, 233, .3);
    border-left: 6px solid rgba(255, 255, 255, .8);
    padding: var(--s2);
    margin: var(--s2) 0;
    border-radius: 0 var(--r3) var(--r3) 0;
}

/* === Media Queries === */
@media (max-width: 1200px) {
    .file-16-container .sec2 {
        flex-direction: column;
    }

    .file-16-container .sec2 .left,
    .file-16-container .sec2 .right {
        width: 100%;
        min-height: auto;
        padding: var(--s4);
    }

    .file-16-container .sec4 {
        grid-template-columns: 1fr;
    }

    .file-16-container .statg,
    .file-16-container .bgrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .file-16-container .dgrid,
    .file-16-container .ecmp {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .file-16-container .statg,
    .file-16-container .bgrid,
    .file-16-container .sgrid,
    .file-16-container .fgrid,
    .file-16-container .ecmp {
        grid-template-columns: 1fr;
    }

    .file-16-container .hero {
        min-height: 20vh;
        padding: var(--s4) var(--s1);
    }
}
/*
 * part-17.css
 * Scoped styles for 17ru_main.html
 * All selectors scoped under .file-17-container
 */

/* === CSS Variables (scoped to container) === */
.file-17-container {
    --ce: #ef4444;
    --cs: #10b981;
    --cw: #f59e0b;
    --cp: #4f46e5;
    --tx: #0f172a;
    --tx2: #475569;
    --bg: #fff;
    --s1: .4rem;
    --s2: .6rem;
    --s3: .8rem;
    --s4: 1rem;
    --s5: 1.2rem;
    --s6: 1.5rem;
    --f1: .75rem;
    --f2: .8rem;
    --f3: .9rem;
    --f4: 1rem;
    --f5: 1.2rem;
    --f6: 1.3rem;
    --r2: .5rem;
    --r3: .75rem;
    --r4: 1rem;
}

/* === Reset (applied to container) === */
.file-17-container {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === Body styles (applied to container) === */
.file-17-container {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--tx);
    background: var(--bg);
    font-size: var(--f3);
}

/* === Layout === */
.file-17-container .w {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--s5) .5cm;
}

.file-17-container .fi {
    opacity: 1;
    transform: translateY(0);
}

/* === Section Titles === */
.file-17-container .st {
    font-size: var(--f5);
    font-weight: 900;
    text-align: center;
    margin-bottom: var(--s3);
}

.file-17-container .ss {
    font-size: var(--f4);
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--s4);
    opacity: .85;
    line-height: 1.7;
}

/* === Hero Section === */
.file-17-container .hero {
    background: linear-gradient(135deg, #0f172a, #1e293b 50%, #334155);
    color: #fff;
    min-height: 25vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.file-17-container .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="15" y="30" font-size="12" fill="rgba(147,197,253,0.15)">⚖</text><text x="60" y="60" font-size="10" fill="rgba(147,197,253,0.1)">🏛</text></svg>') center/100px repeat;
}

.file-17-container .hero h1 {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: var(--s3);
    background: linear-gradient(135deg, #fff, #93c5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.file-17-container .hero p {
    font-size: var(--f4);
    opacity: .95;
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.7;
    color: #e5e5e5;
}

/* === Section 1 - Statistics === */
.file-17-container .sec1 {
    background: linear-gradient(135deg, #450a0a, #7f1d1d);
    color: #fff;
    padding: var(--s6) 0;
}

.file-17-container .statg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--s3);
    max-width: 900px;
    margin: var(--s4) auto 0;
}

.file-17-container .statc {
    text-align: center;
    padding: var(--s3);
    background: rgba(255, 255, 255, .1);
    border-radius: var(--r3);
    border: 1px solid rgba(255, 255, 255, .2);
    transition: all .3s;
}

.file-17-container .statc:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .15);
}

.file-17-container .statc b {
    display: block;
    font-size: 1.4rem;
    font-weight: 900;
    color: #fca5a5;
    margin-bottom: var(--s1);
}

.file-17-container .statc span {
    font-size: var(--f2);
    opacity: .9;
}

.file-17-container .statc small {
    font-size: var(--f1);
    opacity: .6;
    display: block;
    margin-top: var(--s1);
}

/* === Section 2 - Threat Bars === */
.file-17-container .sec2 {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    padding: var(--s6) 0;
}

.file-17-container .tbox {
    background: #fff;
    border-radius: var(--r4);
    padding: var(--s5);
    margin: var(--s5) 0;
    box-shadow: 0 10px 30px rgba(220, 38, 38, .1);
    border-left: 5px solid #dc2626;
}

.file-17-container .tbar {
    margin-bottom: var(--s3);
}

.file-17-container .tbar > div:first-child {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--s1);
    font-size: var(--f3);
}

.file-17-container .tbar > div:first-child span:first-child {
    font-weight: 600;
}

.file-17-container .tbar > div:last-child {
    height: 24px;
    background: #fee2e2;
    border-radius: var(--r2);
    overflow: hidden;
}

.file-17-container .tfill {
    height: 100%;
    border-radius: var(--r2);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--s1);
    font-size: var(--f1);
    font-weight: 700;
    color: #fff;
    transition: width 1.5s;
}

.file-17-container .fc {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

.file-17-container .fl {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.file-17-container .fm {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.file-17-container .fh {
    background: linear-gradient(90deg, #10b981, #34d399);
}

/* === Section 3 - Money Flow === */
.file-17-container .sec3 {
    background: #0f172a;
    color: #fff;
    padding: var(--s6) 0;
}

.file-17-container .mflow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--s4);
    align-items: center;
    margin: var(--s5) 0;
}

.file-17-container .mbox {
    background: rgba(255, 255, 255, .05);
    padding: var(--s4);
    border-radius: var(--r3);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .1);
}

.file-17-container .marrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s1);
}

.file-17-container .marrow b {
    font-size: 1.3rem;
    color: #fbbf24;
}

.file-17-container .lcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s4);
    margin-top: var(--s5);
}

.file-17-container .lcard {
    background: rgba(255, 255, 255, .05);
    padding: var(--s4);
    border-radius: var(--r3);
    border-left: 4px solid #fbbf24;
    transition: all .3s;
}

.file-17-container .lcard:hover {
    background: rgba(255, 255, 255, .08);
    transform: translateX(5px);
}

.file-17-container .lcard h4 {
    font-size: var(--f4);
    font-weight: 700;
    color: #fbbf24;
    margin-bottom: var(--s2);
}

.file-17-container .lcard b {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fca5a5;
    display: block;
    margin-bottom: var(--s1);
}

/* === Section 4 - Distribution === */
.file-17-container .sec4 {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    padding: var(--s6) 0;
}

.file-17-container .dvis {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--s5);
    margin: var(--s5) 0;
    flex-wrap: wrap;
}

.file-17-container .dside {
    background: #fff;
    padding: var(--s4);
    border-radius: var(--r3);
    text-align: center;
    min-width: 200px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .1);
}

.file-17-container .dside h4 {
    font-size: var(--f4);
    font-weight: 700;
    color: #92400e;
    margin: var(--s2) 0 var(--s1);
}

.file-17-container .rstats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--s3);
    margin-top: var(--s5);
}

.file-17-container .rstat {
    background: #fff;
    padding: var(--s3);
    border-radius: var(--r2);
    text-align: center;
    border-bottom: 3px solid #f59e0b;
}

.file-17-container .rstat b {
    font-size: 1.4rem;
    font-weight: 900;
    color: #b45309;
    display: block;
}

/* === Section 5 - World Comparison === */
.file-17-container .sec5 {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #fff;
    padding: var(--s6) 0;
}

.file-17-container .wcmp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
    margin: var(--s5) 0;
}

.file-17-container .wbox {
    background: rgba(255, 255, 255, .05);
    padding: var(--s4);
    border-radius: var(--r3);
    text-align: center;
    border: 2px solid rgba(255, 255, 255, .1);
}

.file-17-container .wbox h4 {
    font-size: var(--f4);
    font-weight: 700;
    margin-bottom: var(--s3);
    padding-bottom: var(--s2);
    border-bottom: 2px solid rgba(255, 255, 255, .2);
}

.file-17-container .wbig {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: var(--s1);
}

.file-17-container .wc {
    color: #fbbf24;
}

.file-17-container .wp {
    color: #60a5fa;
}

/* === Section 6 - Analysis Stats === */
.file-17-container .sec6 {
    background: linear-gradient(135deg, #450a0a, #7f1d1d);
    color: #fff;
    padding: var(--s6) 0;
}

.file-17-container .astats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s3);
    margin: var(--s5) 0;
}

.file-17-container .astat {
    background: rgba(255, 255, 255, .1);
    padding: var(--s3);
    border-radius: var(--r3);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .2);
}

.file-17-container .astat b {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fecaca;
    display: block;
}

.file-17-container .astat span {
    font-size: var(--f2);
    opacity: .9;
    display: block;
    margin-top: var(--s1);
}

.file-17-container .tline {
    background: rgba(0, 0, 0, .3);
    border-radius: var(--r3);
    padding: var(--s4);
    margin-top: var(--s5);
}

.file-17-container .tline > div {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.file-17-container .tline > div:last-child {
    border-bottom: none;
}

.file-17-container .tline b {
    color: #fca5a5;
    min-width: 80px;
}

/* === Section 7 - Political Visualization === */
.file-17-container .sec7 {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    padding: var(--s6) 0;
}

.file-17-container .pvis {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--s1);
    margin: var(--s5) 0;
}

.file-17-container .pside {
    padding: var(--s4);
    border-radius: var(--r3);
    text-align: center;
    min-width: 120px;
    font-weight: 700;
    color: #fff;
}

.file-17-container .pl {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.file-17-container .pr {
    background: linear-gradient(135deg, #dc2626, #991b1b);
}

.file-17-container .pgap {
    font-size: 3rem;
    color: #4f46e5;
}

.file-17-container .pfacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--s3);
    margin-top: var(--s5);
}

.file-17-container .pfact {
    background: #fff;
    padding: var(--s3);
    border-radius: var(--r2);
    box-shadow: 0 4px 15px rgba(79, 70, 229, .1);
}

.file-17-container .pfact > span:first-child {
    font-size: 1.5rem;
    display: block;
}

.file-17-container .pfact b {
    font-size: 1.3rem;
    font-weight: 900;
    color: #4f46e5;
    display: block;
}

/* === Section 8 - CPI Visualization === */
.file-17-container .sec8 {
    background: #0f172a;
    color: #fff;
    padding: var(--s6) 0;
}

.file-17-container .cpivis {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--s4);
    margin: var(--s5) 0;
    flex-wrap: wrap;
}

.file-17-container .cpim {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(#10b981 0deg 154.8deg, #374151 154.8deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-17-container .cpimi {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #0f172a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.file-17-container .cpimi b {
    font-size: 1.8rem;
    font-weight: 900;
    color: #10b981;
}

.file-17-container .cpif {
    max-width: 400px;
}

.file-17-container .cpif > div {
    padding: var(--s2) 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.file-17-container .cpif > div::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
}

/* === Section 9 - Alternatives Comparison === */
.file-17-container .sec9 {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    padding: var(--s6) 0;
}

.file-17-container .altcmp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
    margin-top: var(--s5);
}

.file-17-container .altbox {
    padding: var(--s4);
    border-radius: var(--r4);
}

.file-17-container .altc {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-left: 5px solid #dc2626;
}

.file-17-container .altn {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-left: 5px solid #10b981;
}

.file-17-container .altbox h3 {
    font-size: var(--f5);
    font-weight: 800;
    margin-bottom: var(--s3);
    display: flex;
    align-items: center;
    gap: var(--s1);
}

.file-17-container .altbox ul {
    list-style: none;
}

.file-17-container .altbox li {
    padding: var(--s1) 0;
    display: flex;
    align-items: flex-start;
    gap: var(--s1);
    font-size: var(--f3);
    line-height: 1.5;
}

.file-17-container .mb {
    color: #dc2626;
    font-weight: 700;
}

.file-17-container .mg {
    color: #10b981;
    font-weight: 700;
}

/* === Section 10 - Sources === */
.file-17-container .sec10 {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #fff;
    padding: var(--s6) 0;
}

.file-17-container .srcg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s3);
    margin-top: var(--s5);
}

.file-17-container .srcc {
    background: rgba(255, 255, 255, .05);
    padding: var(--s3);
    border-radius: var(--r2);
    border-top: 3px solid;
}

.file-17-container .st1 {
    border-color: #dc2626;
}

.file-17-container .st2 {
    border-color: #fbbf24;
}

.file-17-container .st3 {
    border-color: #8b5cf6;
}

.file-17-container .st4 {
    border-color: #10b981;
}

.file-17-container .srcc h4 {
    font-weight: 700;
    margin-bottom: var(--s2);
    font-size: var(--f4);
}

.file-17-container .srcc ul {
    list-style: none;
}

.file-17-container .srcc li {
    padding: var(--s1) 0;
}

.file-17-container .srcc a {
    color: #93c5fd;
    text-decoration: none;
    font-size: var(--f2);
}

.file-17-container .srcc a:hover {
    text-decoration: underline;
}

/* === Shared Components === */
.file-17-container .note {
    background: rgba(255, 255, 255, .05);
    padding: var(--s4);
    border-radius: var(--r3);
    margin-top: var(--s5);
    text-align: center;
}

.file-17-container .note2 {
    background: #fff;
    padding: var(--s4);
    border-radius: var(--r3);
    margin-top: var(--s5);
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .1);
}

.file-17-container .cta {
    background: linear-gradient(135deg, #047857, #059669);
    padding: var(--s5);
    border-radius: var(--r4);
    margin-top: var(--s5);
    text-align: center;
    color: #fff;
}

/* === Responsive === */
@media (max-width: 768px) {
    .file-17-container .mflow,
    .file-17-container .wcmp,
    .file-17-container .altcmp {
        grid-template-columns: 1fr;
    }

    .file-17-container .pvis {
        flex-direction: column;
    }

    .file-17-container .pgap {
        transform: rotate(90deg);
    }
}
/*
 * part-18.css
 * Scoped styles for file-18 (18ru_main.html)
 * All selectors scoped under .file-18-container
 */

/* === CSS Variables (scoped to container) === */
.file-18-container {
    --ce: #ef4444;
    --cs: #10b981;
    --cw: #f59e0b;
    --cp: #6d28d9;
    --tx: #0f172a;
    --tx2: #475569;
    --bg: #fff;
    --s1: .4rem;
    --s2: .6rem;
    --s3: .8rem;
    --s4: 1rem;
    --s5: 1.2rem;
    --s6: 1.5rem;
    --f1: .75rem;
    --f2: .8rem;
    --f3: .9rem;
    --f4: 1rem;
    --f5: 1.2rem;
    --r2: .5rem;
    --r3: .75rem;
    --r4: 1rem;
}

/* === Reset (applied to container) === */
.file-18-container {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === Body styles (applied to container) === */
.file-18-container {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--tx);
    background: var(--bg);
    font-size: var(--f3);
}

/* === Layout === */
.file-18-container .w {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--s5) .5cm;
}

.file-18-container .fi {
    opacity: 1;
    transform: translateY(0);
}

/* === Section Titles === */
.file-18-container .st {
    font-size: var(--f5);
    font-weight: 900;
    text-align: center;
    margin-bottom: var(--s3);
}

.file-18-container .ss {
    font-size: var(--f4);
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--s4);
    opacity: .8;
    line-height: 1.7;
}

/* === Hero Section === */
.file-18-container .hero {
    background: linear-gradient(135deg, #b91c1c, #dc2626 50%, #ef4444);
    color: #fff;
    min-height: 20vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.file-18-container .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="10" y="20" font-size="8" fill="rgba(255,255,255,0.1)">📊</text><text x="70" y="50" font-size="6" fill="rgba(255,255,255,0.1)">📈</text></svg>') center/120px repeat;
}

.file-18-container .hero h1 {
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: var(--s3);
    background: linear-gradient(135deg, #fff, #fecaca);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.file-18-container .hero p {
    font-size: var(--f4);
    opacity: .95;
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.7;
}

/* === Section 1 - Stats === */
.file-18-container .sec1 {
    background: linear-gradient(135deg, #1e3a5f, #2d4a6f);
    color: #fff;
    padding: var(--s6) 0;
}

.file-18-container .infobox {
    background: rgba(255, 255, 255, .15);
    padding: var(--s2);
    border-radius: var(--r3);
    border: 2px solid rgba(255, 255, 255, .2);
    max-width: 600px;
    margin: var(--s5) auto 0;
}

.file-18-container .statg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--s2);
    margin-top: var(--s5);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.file-18-container .statc {
    text-align: center;
    padding: var(--s2);
    background: rgba(255, 255, 255, .1);
    border-radius: var(--r3);
    border: 1px solid rgba(255, 255, 255, .2);
    transition: all .3s;
    min-height: 120px;
}

.file-18-container .statc:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .15);
}

.file-18-container .statc b {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fca5a5;
    margin-bottom: var(--s1);
}

.file-18-container .statc span {
    font-size: var(--f3);
    opacity: .9;
}

/* === Section 2 - Timeline === */
.file-18-container .sec2 {
    background: linear-gradient(135deg, #fef2f2, #fecaca);
    padding: var(--s6) 0;
}

.file-18-container .tline {
    position: relative;
    margin-top: var(--s5);
    padding: var(--s5) 0;
}

.file-18-container .tline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #dc2626, #991b1b);
    transform: translateX(-50%);
}

.file-18-container .titem {
    display: flex;
    align-items: center;
    margin-bottom: var(--s5);
    position: relative;
}

.file-18-container .titem:nth-child(odd) {
    flex-direction: row;
}

.file-18-container .titem:nth-child(even) {
    flex-direction: row-reverse;
}

.file-18-container .tcont {
    background: #fff;
    padding: var(--s2);
    border-radius: var(--r3);
    box-shadow: 0 10px 25px rgba(220, 38, 38, .15);
    width: calc(50% - var(--s4));
    border-left: 4px solid #dc2626;
}

.file-18-container .tdot {
    width: 20px;
    height: 20px;
    background: #dc2626;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    border: 4px solid #fff;
    box-shadow: 0 2px 8px rgba(220, 38, 38, .3);
}

.file-18-container .tcont b {
    font-size: var(--f3);
    font-weight: 700;
    color: #dc2626;
    display: block;
    margin-bottom: var(--s1);
}

.file-18-container .tcont h3 {
    font-size: var(--f4);
    font-weight: 800;
    margin-bottom: var(--s1);
    color: #7f1d1d;
}

.file-18-container .tcont p {
    font-size: var(--f3);
    line-height: 1.6;
    color: var(--tx2);
}

/* === Section 3 - Cards Grid === */
.file-18-container .sec3 {
    background: #0f172a;
    color: #fff;
    padding: var(--s6) 0;
}

.file-18-container .cgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 270px));
    gap: var(--s5);
    margin-top: var(--s5);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.file-18-container .ccard {
    background: rgba(255, 255, 255, .05);
    padding: var(--s4);
    border-radius: var(--r3);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: all .3s;
    position: relative;
    overflow: hidden;
    min-height: 170px;
}

.file-18-container .ccard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ef4444, #b91c1c);
}

.file-18-container .ccard:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, .08);
}

.file-18-container .ccard > span {
    font-size: 1.3rem;
    display: block;
    margin-bottom: var(--s3);
}

.file-18-container .ccard h3 {
    font-size: var(--f4);
    font-weight: 700;
    color: #fca5a5;
    margin-bottom: var(--s2);
}

.file-18-container .ccard p {
    line-height: 1.6;
    opacity: .9;
    margin-bottom: var(--s3);
    font-size: var(--f3);
}

.file-18-container .cex {
    background: rgba(239, 68, 68, .15);
    padding: var(--s2);
    border-radius: var(--r2);
    font-size: var(--f3);
    border-left: 3px solid #ef4444;
}

/* === Section 4 - Levels === */
.file-18-container .sec4 {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #fff;
    padding: var(--s6) 0;
}

.file-18-container .pbox {
    background: rgba(255, 255, 255, .05);
    border-radius: var(--r4);
    padding: var(--s5);
    margin: var(--s5) 0;
    border: 1px solid rgba(255, 255, 255, .1);
}

.file-18-container .plvl {
    padding: var(--s2);
    margin-bottom: var(--s3);
    border-radius: var(--r2);
    transition: all .3s;
}

.file-18-container .plvl:hover {
    transform: translateX(5px);
}

.file-18-container .pl1 {
    background: linear-gradient(135deg, #7f1d1d, #991b1b);
    border: 2px solid #ef4444;
}

.file-18-container .pl2 {
    background: linear-gradient(135deg, #92400e, #a16207);
    border: 2px solid #f59e0b;
}

.file-18-container .pl3 {
    background: linear-gradient(135deg, #1e40af, #1d4ed8);
    border: 2px solid #60a5fa;
}

.file-18-container .plvl h3 {
    font-size: var(--f5);
    font-weight: 800;
    margin-bottom: var(--s2);
    display: flex;
    align-items: center;
    gap: var(--s1);
}

.file-18-container .plvl p {
    font-size: var(--f3);
    line-height: 1.6;
    opacity: .9;
    margin-bottom: var(--s2);
}

.file-18-container .plvl em {
    font-size: var(--f3);
    opacity: .8;
}

/* === Section 5 - Comparison === */
.file-18-container .sec5 {
    background: linear-gradient(135deg, #4c1d95, #6d28d9);
    color: #fff;
    padding: var(--s6) 0;
}

.file-18-container .tcmp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
    margin-top: var(--s5);
}

.file-18-container .tbox {
    padding: var(--s2);
    border-radius: var(--r3);
}

.file-18-container .tbef {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
}

.file-18-container .taft {
    background: linear-gradient(135deg, #7f1d1d, #991b1b);
    border: 2px solid #ef4444;
    box-shadow: 0 0 30px rgba(239, 68, 68, .3);
}

.file-18-container .tbox h3 {
    font-size: var(--f5);
    font-weight: 800;
    margin-bottom: var(--s3);
    display: flex;
    align-items: center;
    gap: var(--s1);
}

.file-18-container .tbox ul {
    list-style: none;
    padding: 0;
}

.file-18-container .tbox li {
    padding: var(--s1) 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    gap: var(--s1);
    font-size: var(--f3);
    line-height: 1.5;
}

.file-18-container .tbox li:last-child {
    border-bottom: none;
}

.file-18-container .fic {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--f1);
    font-weight: 600;
    flex-shrink: 0;
}

.file-18-container .fin {
    background: #60a5fa;
    color: #fff;
}

.file-18-container .fid {
    background: #ef4444;
    color: #fff;
}

/* === Section 6 - Consequences === */
.file-18-container .sec6 {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    padding: var(--s6) 0;
}

.file-18-container .cogrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 270px));
    gap: var(--s5);
    margin-top: var(--s5);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.file-18-container .cocard {
    background: #fff;
    padding: var(--s4);
    border-radius: var(--r3);
    box-shadow: 0 8px 25px rgba(220, 38, 38, .1);
    border-left: 4px solid #dc2626;
    transition: all .3s;
    min-height: 170px;
    position: relative;
    overflow: hidden;
}

.file-18-container .cocard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #dc2626, #991b1b);
}

.file-18-container .cocard:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(220, 38, 38, .15);
}

.file-18-container .cocard > span {
    font-size: 1.3rem;
    display: block;
    margin-bottom: var(--s2);
}

.file-18-container .cocard h3 {
    font-size: var(--f4);
    font-weight: 700;
    color: #991b1b;
    margin-bottom: var(--s2);
}

.file-18-container .cocard p {
    line-height: 1.6;
    color: var(--tx2);
    margin-bottom: var(--s3);
    font-size: var(--f3);
}

.file-18-container .cost {
    background: #fef2f2;
    padding: var(--s2);
    border-radius: var(--r2);
    font-size: var(--f3);
    color: #7f1d1d;
    border-left: 3px solid #dc2626;
}

/* === Section 7 - Alternatives === */
.file-18-container .sec7 {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    padding: var(--s6) 0;
}

.file-18-container .altcmp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
    margin-top: var(--s5);
}

.file-18-container .altbox {
    padding: var(--s2);
    border-radius: var(--r4);
}

.file-18-container .altc {
    background: linear-gradient(135deg, #fef2f2, #fecaca);
    border-left: 5px solid #dc2626;
}

.file-18-container .altn {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-left: 5px solid #10b981;
}

.file-18-container .altbox h3 {
    font-size: var(--f5);
    font-weight: 800;
    margin-bottom: var(--s3);
    display: flex;
    align-items: center;
    gap: var(--s1);
}

.file-18-container .altbox ul {
    list-style: none;
    padding: 0;
}

.file-18-container .altbox li {
    padding: var(--s1) 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    gap: var(--s1);
    font-size: var(--f3);
    line-height: 1.5;
}

.file-18-container .altbox li:last-child {
    border-bottom: none;
}

.file-18-container .sm {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--f1);
    font-weight: 600;
    flex-shrink: 0;
}

.file-18-container .mb {
    background: #dc2626;
    color: #fff;
}

.file-18-container .mg {
    background: #10b981;
    color: #fff;
}

/* === Section 8 - Sources === */
.file-18-container .sec8 {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #fff;
    padding: var(--s6) 0;
}

.file-18-container .srcg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
    margin-top: var(--s5);
}

.file-18-container .srcc {
    background: rgba(255, 255, 255, .05);
    padding: var(--s4);
    border-radius: var(--r3);
    border-left: 4px solid;
}

.file-18-container .srcc h4 {
    margin-bottom: var(--s2);
    font-size: var(--f4);
}

.file-18-container .srcc p {
    font-size: var(--f3);
    line-height: 1.7;
    margin-bottom: var(--s2);
    color: #cbd5e1;
}

.file-18-container .srcc ul {
    list-style: none;
    padding: 0;
    font-size: var(--f2);
}

.file-18-container .srcc li {
    margin-bottom: var(--s1);
}

.file-18-container .srcc a {
    color: #93c5fd;
    text-decoration: none;
}

.file-18-container .srcc a:hover {
    text-decoration: underline;
}

/* === Notes & CTA === */
.file-18-container .note {
    padding: var(--s4);
    border-radius: var(--r3);
    margin-top: var(--s5);
    text-align: center;
}

.file-18-container .cta {
    background: linear-gradient(135deg, #047857, #059669);
    padding: var(--s4);
    border-radius: var(--r3);
    color: #fff;
}

/* === Responsive === */
@media (max-width: 768px) {
    .file-18-container .tcmp,
    .file-18-container .altcmp {
        grid-template-columns: 1fr;
    }

    .file-18-container .titem {
        flex-direction: column !important;
    }

    .file-18-container .tcont {
        width: 100%;
        margin-top: var(--s3);
    }

    .file-18-container .tline::before {
        display: none;
    }

    .file-18-container .srcg {
        grid-template-columns: 1fr;
    }
}