* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #f0f2f5;
      font-family: 'Inter', Arial, sans-serif;
      font-size: 16px;
      color: #111;
    }

    /* Navbar */
    .navbar {
      list-style: none;
      display: flex;
      align-items: center;
      padding: 0 40px;
      background-color: #fff;
      border-bottom: 1px solid #e5e7eb;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .navbar a {
      display: block;
      color: #888;
      padding: 18px 14px;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.15s;
    }

    .navbar a:hover {
      color: #111;
    }

    .navbar a.brand {
      color: #111;
      font-weight: 500;
      margin-right: 20px;
      padding-left: 0;
    }

    /* Main */
    .main {
      max-width: 1100px;
      margin: 48px auto;
      padding: 0 24px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* Section boxes */
    .box {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 32px;
    }

    /* Hero box */
    h1 {
      font-size: 32px;
      font-weight: 300;
      color: #111;
      line-height: 1.3;
      margin-bottom: 14px;
    }

    .hero h1 span {
      color: #FF9900;
    }

    .hero p {
      color: #666;
      font-size: 15px;
      line-height: 1.8;
    }

    /* Tech grid */
    span {
        color: #FF9900;
    }

    .comparison-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
      font-size: 14px;
    }

    .comparison-table th,
    .comparison-table td {
      border: 1px solid #e5e7eb;
      padding: 12px;
      text-align: left;
    }

    .comparison-table th {
      background: #f8f9fa;
      font-weight: 600;
      color: #111;
    }

    .comparison-table tr:hover {
      background: #fafafa;
    }

    .caption {
      margin-top: 8px;
      font-size: 0.9rem;
      color: #555;
      text-align: center;
    }

    .arch-steps {
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    h2 {
      font-size: 18px;
      font-weight: 300;
      color: #111;
      line-height: 1.3;
      margin-bottom: 14px;
      margin-top: 14px;
    }

    .tech-item a:hover {
      transform: scale(1.05);
      transition: 0.2s ease;
    }

    .step {
      display: flex;
      gap: 16px;
      margin-top: 16px;
      background: #f8f9fa;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 16px;
    }

    .tech-item a {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      color: inherit;
    }

    .step span {
      min-width: 28px;
      height: 28px;
      background: #FF9900;
      color: white;
      font-weight: 600;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step p {
      font-size: 15px;   
      color: #666;      
      line-height: 1.6;
      margin: 0;
    }

    .tech-grid {
      display: grid;
      grid-template-columns: repeat(3, 220px);
      gap: 64px;
      justify-content: center;
    }

    #Architecture-Diagram img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0 auto;
  }

    .tech-item {
      background: #f8f9fa;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 220px;
      transition: border-color 0.15s;
    }

    .tech-item:hover {
      border-color: #FF9900;
    }

    .tech-item img {
      width: 160px;
      height: 160px;
      object-fit: contain;
    }

    .tech-item span {
      font-size: 12px;
      color: #666;
      text-align: center;
    }

    /* Document links */
    .doc-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .doc-list li a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      background: #f8f9fa;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      text-decoration: none;
      color: #333;
      font-size: 14px;
      transition: border-color 0.15s, color 0.15s;
    }

    .doc-list li a:hover {
      border-color: #FF9900;
      color: #111;
    }

    .doc-list li a:hover .arrow {
      color: #FF9900;
    }

    .doc-meta {
      font-size: 11px;
      color: #aaa;
      margin-left: 8px;
    }

    .arrow {
      color: #ccc;
      font-size: 15px;
      transition: color 0.15s;
    }

    .doc-left {
      display: flex;
      align-items: center;
    }

    /* Footer */
    footer {
      max-width: 1100;
      margin: 0 auto 48px;
      padding: 0 24px;
      color: #aaa;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
    }