.arch-hero {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; padding: 100px 24px 40px; position: relative; overflow: hidden;
  }
  #archVanta {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none; opacity: 0.5;
  }
  .arch-hero::before {
    content: ''; position: absolute; top: -60%; left: -40%; width: 180%; height: 180%;
    background: radial-gradient(ellipse at 40% 40%, rgba(99,102,241,0.06) 0%, transparent 60%),
                radial-gradient(ellipse at 60% 60%, rgba(168,85,247,0.04) 0%, transparent 60%);
    animation: heroGradient 20s ease-in-out infinite alternate; z-index: 0;
  }
  @keyframes heroGradient { 0% { transform: translate(0,0); } 100% { transform: translate(-3%, 3%); } }
  .arch-hero > * { position: relative; z-index: 1; }
  .arch-hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.03em; }
  .arch-hero p { color: var(--text-secondary, #a1a1aa); font-size: 1.15rem; max-width: 620px; line-height: 1.6; }
  .arch-section { padding: 60px 24px; max-width: 1100px; margin: 0 auto; }
  .arch-section h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em; }
  .arch-section .section-sub { color: var(--text-secondary, #a1a1aa); font-size: 1.05rem; max-width: 600px; margin-bottom: 32px; line-height: 1.6; }
  .layer-stack { display: flex; flex-direction: column; gap: 0; }
  .layer-card {
    background: var(--card-bg, rgba(255,255,255,0.03)); border: 1px solid var(--border, rgba(255,255,255,0.06));
    padding: 28px 24px; position: relative; transition: border-color 0.3s;
  }
  .layer-card:first-child { border-radius: 16px 16px 0 0; }
  .layer-card:last-child { border-radius: 0 0 16px 16px; }
  .layer-card:hover { border-color: var(--accent, #6366f1); }
  .layer-number { position: absolute; top: 16px; right: 24px; font-size: 3rem; font-weight: 900; color: rgba(99,102,241,0.08); line-height: 1; }
  .layer-card h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
  .layer-card p { color: var(--text-secondary, #a1a1aa); line-height: 1.7; max-width: 540px; }
  .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 1024px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) { .cap-grid { grid-template-columns: 1fr; } }
  .cap-card {
    background: var(--card-bg, rgba(255,255,255,0.03)); border: 1px solid var(--border, rgba(255,255,255,0.06));
    border-radius: 16px; padding: 22px 20px; transition: border-color 0.3s, transform 0.3s;
  }
  .cap-card:hover { border-color: var(--accent, #6366f1); transform: translateY(-4px); }
  .cap-icon { margin-bottom: 12px; display: flex; color: var(--accent, #6366f1); }
  .cap-icon svg { width: 28px; height: 28px; }
  .cap-card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
  .cap-card p { color: var(--text-secondary, #a1a1aa); font-size: 0.9rem; line-height: 1.6; }
  .example-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  @media (max-width: 768px) { .example-grid { grid-template-columns: 1fr; } }
  .example-card {
    background: var(--card-bg, rgba(255,255,255,0.03)); border: 1px solid var(--border, rgba(255,255,255,0.06));
    border-radius: 16px; padding: 24px; transition: border-color 0.3s;
  }
  .example-card:hover { border-color: var(--accent, #6366f1); }
  .example-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; }
  .example-card p { color: var(--text-secondary, #a1a1aa); line-height: 1.7; margin-bottom: 16px; font-size: 0.95rem; }
  .flow-arrows { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .flow-step { background: rgba(99,102,241,0.1); color: var(--accent, #6366f1); padding: 4px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; }
  .flow-arrow { color: var(--text-tertiary, #71717a); font-size: 0.9rem; }
  .philosophy-section { border-left: 3px solid var(--accent, #6366f1); padding-left: 24px; max-width: 640px; }
  .philosophy-section h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 16px; }
  .principle-list { list-style: none; padding: 0; }
  .principle-list li {
    padding: 10px 0; border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
    color: var(--text-secondary, #a1a1aa); line-height: 1.6;
    display: flex; align-items: flex-start; gap: 12px;
  }
  .principle-list li::before { content: '\2192'; color: var(--accent, #6366f1); font-weight: 700; flex-shrink: 0; }
  .section-illust { display: flex; justify-content: center; margin-bottom: 12px; opacity: 0.45; }