/* ============================================================
       1. CSS VARIABLES & RESET
    ============================================================ */
    :root {
      --deep-blue: #0a2a44;
      --mid-blue: #1a4a7a;
      --main-blue: #2274C3;
      --main-blue-dark: #1a5f9e;
      --main-blue-light: #e8f2fb;
      --hub-yellow: #ffdd00;
      --hub-yellow-light: #fff7cc;
      --gray-bg: #f6f9fc;
      --border-gray: #e2e8f0;
      --text-dark: #111827;
      --text-muted: #4b5563;
      --text-light: #9ca3af;
      --shadow-sm: 0 2px 8px rgba(10,42,68,0.06);
      --shadow-md: 0 4px 20px rgba(10,42,68,0.08);
      --shadow-lg: 0 20px 60px rgba(10,42,68,0.12);
      --shadow-hover: 0 12px 48px rgba(10,42,68,0.16);
      --radius: 10px;
      --radius-lg: 16px;
      --radius-xl: 20px;
      --font-xs: 12px;
      --font-sm: 14px;
      --font-base: 16px;
      --font-md: 18px;
      --font-lg: 24px;
      --font-xl: 32px;
      --font-xxl: 44px;
      --transition: 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #fff;
      color: var(--text-dark);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    body.lang-zh .en { display: none !important; }
    body.lang-en .zh { display: none !important; }
    body.lang-zh .zh { display: inline; }
    body.lang-en .en { display: inline; }
    a { text-decoration:none; color:inherit; }
    button { cursor:pointer; font-family:inherit; border:none; background:none; }
    img { max-width:100%; display:block; }
    .container { max-width:1200px; margin:0 auto; padding:0 24px; }

    ::-webkit-scrollbar { width:5px; height:5px; }
    ::-webkit-scrollbar-track { background:var(--gray-bg); }
    ::-webkit-scrollbar-thumb { background:var(--main-blue); border-radius:3px; }
    ::selection { background:var(--hub-yellow); color:var(--deep-blue); }

    /* ============================================================
       2. HEADER
    ============================================================ */
    .header {
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      padding: 6px 0;
      position: fixed;
      top:0;
      left:0;
      right:0;
      z-index:1000;
      border-bottom:1px solid rgba(226,232,240,0.4);
      transition: box-shadow var(--transition), padding var(--transition);
    }
    .header.scrolled {
      box-shadow: 0 4px 30px rgba(10,42,68,0.08);
      padding: 2px 0;
    }
    .header .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }
    .logo-img {
      height: 40px;
      width: auto;
      display: block;
      transition: transform var(--transition);
    }
    .logo:hover .logo-img { transform:scale(1.04); }
    .logo-icon-fallback {
      display: none;
      width: 40px;
      height: 40px;
      background: var(--hub-yellow);
      transform: rotate(45deg);
      border-radius: 6px;
      align-items: center;
      justify-content: center;
      flex-shrink:0;
    }
    .logo-icon-fallback::after {
      content:"h";
      transform:rotate(-45deg);
      font-size:22px;
      font-weight:900;
      color:#000;
    }
    .logo-img:not([src]) + .logo-icon-fallback,
    .logo-img[src=""] + .logo-icon-fallback,
    .logo-img[src*="error"] + .logo-icon-fallback {
      display:flex;
    }
    .logo-text h1 {
      font-size:20px;
      font-weight:900;
      color:var(--deep-blue);
      line-height:1.2;
      letter-spacing:-0.4px;
    }
    .logo-text p {
      font-size:11px;
      color:var(--text-muted);
      font-weight:500;
      letter-spacing:0.8px;
      opacity:0.6;
      line-height:1.2;
      text-transform:uppercase;
    }
    .header-actions {
      display:flex;
      align-items:center;
      gap:4px;
      flex-shrink:0;
    }
    .lang-btn {
      background:var(--gray-bg);
      color:var(--text-muted);
      border:1px solid transparent;
      padding:3px 12px;
      border-radius:20px;
      font-size:12px;
      font-weight:600;
      transition:var(--transition);
      letter-spacing:0.3px;
    }
    .lang-btn:hover {
      background:var(--main-blue-light);
      color:var(--main-blue);
    }
    .lang-btn.active {
      background:var(--main-blue);
      color:#fff;
      border-color:var(--main-blue);
    }
    .nav-list {
      display:flex;
      gap:2px;
      overflow-x:auto;
      padding:8px 0 2px;
      width:100%;
      border-top:1px solid rgba(226,232,240,0.3);
      margin-top:6px;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .nav-list::-webkit-scrollbar { display:none; }
    .nav-item {
      white-space:nowrap;
      padding:6px 16px;
      font-size:13px;
      line-height:1.2;
      font-weight:600;
      color:var(--text-muted);
      border-radius:30px;
      transition:var(--transition);
      background:transparent;
      border:none;
      position:relative;
    }
    .nav-item::after {
      content:'';
      position:absolute;
      bottom:0;
      left:50%;
      transform:translateX(-50%);
      width:0;
      height:2.5px;
      background:var(--hub-yellow);
      border-radius:2px;
      transition:var(--transition);
    }
    .nav-item:hover::after,
    .nav-item.active::after { width:40%; }
    .nav-item:hover:not(.active) {
      color:var(--deep-blue);
      background:rgba(34,116,195,0.05);
    }
    .nav-item.active {
      color:var(--deep-blue);
      background:rgba(255,221,0,0.15);
    }

    /* ============================================================
       3. SECTIONS
    ============================================================ */
    section { padding:72px 0; border-bottom:1px solid var(--border-gray); }
    .sec-tag {
      display:inline-block;
      background:var(--hub-yellow);
      color:var(--deep-blue);
      font-size:12px;
      font-weight:800;
      padding:4px 16px;
      border-radius:30px;
      letter-spacing:1.8px;
      margin-bottom:10px;
      text-transform:uppercase;
    }
    .sec-title {
      font-size:var(--font-xl);
      font-weight:800;
      color:var(--deep-blue);
      margin-bottom:8px;
      letter-spacing:-0.5px;
      line-height:1.15;
    }
    .sec-title .highlight {
      color:var(--main-blue);
      position:relative;
    }
    .sec-title .highlight::after {
      content:'';
      position:absolute;
      bottom:2px;
      left:0;
      right:0;
      height:4px;
      background:var(--hub-yellow);
      opacity:0.3;
      border-radius:2px;
    }
    .sec-sub {
      font-size:var(--font-base);
      color:var(--text-muted);
      max-width:680px;
      margin-bottom:32px;
      line-height:1.8;
    }

    /* ============================================================
       4. GRID & CARDS
    ============================================================ */
    .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
    .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
    .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

    .card {
      background:#fff;
      border:1px solid var(--border-gray);
      border-radius:var(--radius-lg);
      padding:26px 24px;
      transition:var(--transition);
      box-shadow:var(--shadow-sm);
      display:flex;
      flex-direction:column;
      position:relative;
      overflow:hidden;
    }
    .card::before {
      content:'';
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:3px;
      background:linear-gradient(90deg, var(--main-blue), var(--hub-yellow));
      opacity:0;
      transition:var(--transition);
    }
    .card:hover::before { opacity:1; }
    .card:hover {
      transform:translateY(-4px);
      box-shadow:var(--shadow-hover);
      border-color:var(--main-blue);
    }
    .card .badge-top {
      align-self:flex-start;
      background:var(--main-blue);
      color:#fff;
      padding:3px 14px;
      border-radius:30px;
      font-size:12px;
      font-weight:700;
      letter-spacing:0.5px;
      margin-bottom:10px;
      text-transform:uppercase;
    }
    .card h3 { font-size:var(--font-md); margin-bottom:4px; color:var(--deep-blue); font-weight:700; }
    .card p { color:var(--text-muted); font-size:var(--font-sm); line-height:1.7; }
    .card .service-subtitle {
      font-weight:600;
      color:var(--main-blue);
    }
    .card ul {
      list-style:none;
      margin-top:10px;
    }
    .card ul li {
      font-size:var(--font-sm);
      color:var(--text-muted);
      padding:4px 0 4px 22px;
      position:relative;
      line-height:1.6;
    }
    .card ul li::before {
      content:"▹";
      color:var(--main-blue);
      font-weight:700;
      position:absolute;
      left:0;
      top:4px;
    }

    /* ============================================================
       5. HERO
    ============================================================ */
    .hero {
      background: linear-gradient(145deg, var(--deep-blue) 0%, #0d3559 50%, var(--mid-blue) 100%);
      color:#fff;
      padding:140px 0 110px;
      margin-top:52px;
      border-bottom:5px solid var(--hub-yellow);
      position:relative;
      overflow:hidden;
    }
    .hero::before {
      content:'';
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 20% 30%, rgba(255,221,0,0.06) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(34,116,195,0.10) 0%, transparent 50%);
      pointer-events:none;
    }
    .hero .bg-pattern {
      position:absolute;
      inset:0;
      opacity:0.04;
      background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      pointer-events:none;
    }
    .hero .container { position:relative; z-index:2; }
    .hero-tags {
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      margin-bottom:20px;
    }
    .hero-tags span {
      background:rgba(255,255,255,0.08);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      border:1px solid rgba(255,255,255,0.08);
      padding:4px 16px;
      border-radius:30px;
      font-size:11px;
      font-weight:500;
      letter-spacing:0.3px;
    }
    .hero h2 {
      font-size:var(--font-xxl);
      font-weight:900;
      line-height:1.08;
      margin-bottom:14px;
      max-width:1080px;
      letter-spacing:-0.8px;
    }
    .hero .subhead {
      font-size:var(--font-md);
      opacity:0.88;
      max-width:1080px;
      margin-bottom:32px;
      font-weight:400;
      line-height:1.8;
    }
    .btn-primary {
      background:var(--hub-yellow);
      color:var(--deep-blue);
      padding:14px 34px;
      border-radius:var(--radius);
      font-weight:700;
      font-size:var(--font-base);
      transition:var(--transition);
      display:inline-flex;
      align-items:center;
      gap:10px;
      box-shadow:0 4px 24px rgba(255,221,0,0.25);
    }
    .btn-primary:hover {
      transform:translateY(-2px);
      box-shadow:0 8px 40px rgba(255,221,0,0.35);
    }
    .btn-secondary {
      background:transparent;
      color:#fff;
      padding:14px 30px;
      border-radius:var(--radius);
      font-weight:600;
      border:1.5px solid rgba(255,255,255,0.2);
      transition:var(--transition);
      backdrop-filter:blur(4px);
      display:inline-flex;
      align-items:center;
      gap:10px;
    }
    .btn-secondary:hover {
      background:rgba(255,255,255,0.08);
      border-color:rgba(255,255,255,0.4);
      transform:translateY(-2px);
    }
    .cta-group {
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      align-items:center;
    }

    /* ============================================================
       6. USP
    ============================================================ */
    .usp-grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:24px;
      margin:4px 0;
    }
    .usp-card {
      background:#fff;
      border:1px solid var(--border-gray);
      border-radius:var(--radius-lg);
      padding:30px 24px;
      text-align:center;
      transition:var(--transition);
      border-top:4px solid var(--hub-yellow);
      box-shadow:var(--shadow-sm);
    }
    .usp-card:hover {
      border-color:var(--main-blue);
      transform:translateY(-3px);
      box-shadow:var(--shadow-hover);
    }
    .usp-card .usp-icon {
      font-size:40px;
      color:var(--main-blue);
      margin-bottom:8px;
      display:block;
    }
    .usp-card h3 {
      font-size:var(--font-md);
      color:var(--deep-blue);
      margin-bottom:4px;
      font-weight:700;
    }
    .usp-card p {
      font-size:var(--font-sm);
      color:var(--text-muted);
      margin-top:4px;
      line-height:1.7;
    }

    /* ============================================================
       7. PROCESS
    ============================================================ */
    .process-flow {
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:4px;
      margin-top:20px;
      position:relative;
    }
    .process-step {
      flex:1;
      min-width:120px;
      background:#fff;
      border:1px solid var(--border-gray);
      border-radius:var(--radius);
      padding:18px 14px;
      text-align:center;
      box-shadow:var(--shadow-sm);
      transition:var(--transition);
    }
    .process-step:hover {
      border-color:var(--main-blue);
      transform:translateY(-2px);
      box-shadow:var(--shadow-md);
    }
    .process-step .step-num {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:var(--deep-blue);
      color:#fff;
      width:32px;
      height:32px;
      border-radius:50%;
      font-weight:700;
      font-size:13px;
      margin-bottom:8px;
    }
    .process-step h4 {
      font-size:var(--font-sm);
      font-weight:700;
      color:var(--deep-blue);
    }
    .process-step p {
      font-size:11px;
      color:var(--text-muted);
      margin-top:3px;
      line-height:1.5;
    }
    .process-arrow {
      display:flex;
      align-items:center;
      color:var(--main-blue);
      font-size:18px;
      font-weight:300;
      opacity:0.3;
      flex-shrink:0;
      padding:0 2px;
    }

    /* ============================================================
       8. BADGE
    ============================================================ */
    .badge-grid {
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:12px;
      margin:16px 0;
    }
    .badge-item {
      background:#fff;
      border:1px solid var(--border-gray);
      border-radius:var(--radius);
      padding:16px 8px;
      text-align:center;
      transition:var(--transition);
    }
    .badge-item:hover {
      border-color:var(--main-blue);
      transform:translateY(-2px);
      box-shadow:var(--shadow-sm);
    }
    .badge-item .b-icon {
      font-size:22px;
      font-weight:800;
      color:var(--main-blue);
    }
    .badge-item .b-label {
      font-size:12px;
      color:var(--text-muted);
      margin-top:3px;
      font-weight:500;
    }

    /* ============================================================
       9. TABLES
    ============================================================ */
    .table-wrap {
      overflow-x:auto;
      border-radius:var(--radius);
      background:#fff;
      border:1px solid var(--border-gray);
    }
    table {
      width:100%;
      border-collapse:collapse;
      font-size:var(--font-sm);
      min-width:420px;
    }
    th, td {
      padding:12px 18px;
      border-bottom:1px solid var(--border-gray);
      text-align:left;
    }
    th {
      background:var(--gray-bg);
      color:var(--deep-blue);
      font-weight:700;
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:0.6px;
    }
    #network .table-wrap table {
      font-size:var(--font-sm);
    }
    #network .table-wrap th,
    #network .table-wrap th span {
      font-size:12px;
      line-height:1.6;
    }
    #network .table-wrap td {
      font-size:var(--font-sm);
      line-height:1.6;
    }
    tr:last-child td { border-bottom:none; }
    tr:hover td { background:rgba(34,116,195,0.02); }

    /* ============================================================
       10. NETWORK MAP
    ============================================================ */
    .network-layout {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:28px;
      align-items:stretch;
      margin-bottom:28px;
    }
    .network-image {
      background:#ffffff;
      border-radius:var(--radius-lg);
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:280px;
      padding:12px;
      border:1px solid var(--border-gray);
      box-shadow:var(--shadow-sm);
    }
    .network-image svg {
      width:100%;
      height:auto;
      display:block;
      border-radius:4px;
      max-height:400px;
    }

    /* ============================================================
       11. QC
    ============================================================ */
    .qc-grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:14px;
      margin-top:14px;
    }
    .ppap-card,
    .qc-card {
      background:#fff;
      padding:18px 22px;
      border-radius:var(--radius);
      box-shadow:var(--shadow-sm);
    }
    .ppap-card {
      border-left:6px solid var(--hub-yellow);
      margin-bottom:18px;
    }
    .qc-card {
      border-left:6px solid var(--main-blue);
    }
    .ppap-card strong,
    .qc-card strong {
      font-size:14px;
      color:var(--deep-blue);
    }
    .ppap-chip-list {
      display:flex;
      flex-wrap:wrap;
      gap:4px;
      margin-top:8px;
    }
    .ppap-chip-list,
    .ppap-chip-list span,
    .ppap-chip-list li {
      font-size:12px;
    }
    .ppap-chip-list span {
      background:var(--gray-bg);
      padding:3px 12px;
      border-radius:30px;
      color:var(--text-muted);
    }
    .qc-item {
      background:#fff;
      border:1px solid var(--border-gray);
      border-radius:var(--radius);
      padding:16px 18px;
      border-left:4px solid var(--main-blue);
      transition:var(--transition);
    }
    .qc-item:hover {
      border-color:var(--main-blue);
      box-shadow:var(--shadow-sm);
      transform:translateX(3px);
    }
    .qc-item h4 {
      font-size:14px;
      font-weight:700;
      color:var(--deep-blue);
      margin-bottom:3px;
    }
    .qc-item p {
      font-size:13px;
      color:var(--text-muted);
      line-height:1.6;
    }

    /* ============================================================
       12. SAMPLE IMAGE
    ============================================================ */
    .sample-img {
      width:100%;
      height:auto;
      border-radius:8px;
      margin:10px 0;
      object-fit:cover;
      max-height:160px;
      background:var(--gray-bg);
    }
    .sample-placeholder {
      display:none;
      align-items:center;
      justify-content:center;
      height:160px;
      background:var(--gray-bg);
      border-radius:8px;
      margin:10px 0;
      color:var(--text-muted);
      font-size:14px;
      border:1.5px dashed var(--border-gray);
      flex-direction:column;
      gap:4px;
    }
    .sample-placeholder i {
      font-size:32px;
      display:block;
      margin-bottom:2px;
      opacity:0.3;
    }

    /* ============================================================
       13. FORM
    ============================================================ */
    .form-box { max-width:680px; display:flex; flex-direction:column; gap:18px; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .form-item label {
      font-weight:600;
      font-size:var(--font-sm);
      color:var(--deep-blue);
      display:block;
      margin-bottom:4px;
    }
    .form-item input,
    .form-item select,
    .form-item textarea {
      width:100%;
      padding:12px 16px;
      border:1.5px solid var(--border-gray);
      border-radius:var(--radius);
      font-size:var(--font-base);
      transition:var(--transition);
      background:#fff;
      font-family:inherit;
      color:var(--text-dark);
    }
    .form-item input:focus,
    .form-item select:focus,
    .form-item textarea:focus {
      outline:none;
      border-color:var(--main-blue);
      box-shadow:0 0 0 4px rgba(34,116,195,0.06);
    }
    .form-item small {
      font-size:12px;
      color:var(--text-muted);
      display:block;
      margin-top:4px;
    }
    .custom-file-upload {
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
    }
    .custom-file-upload .file-input-wrapper {
      position:relative;
      overflow:hidden;
      display:inline-block;
    }
    .custom-file-upload .file-input-wrapper input[type="file"] {
      position:absolute;
      left:0;
      top:0;
      opacity:0;
      width:100%;
      height:100%;
      cursor:pointer;
    }
    .custom-file-upload .file-btn {
      display:inline-block;
      padding:10px 24px;
      background:var(--main-blue);
      color:#fff;
      border-radius:var(--radius);
      font-weight:600;
      font-size:var(--font-sm);
      cursor:pointer;
      transition:var(--transition);
      border:none;
    }
    .custom-file-upload .file-btn:hover {
      background:var(--main-blue-dark);
      transform:translateY(-1px);
    }
    .custom-file-upload .file-name {
      font-size:var(--font-sm);
      color:var(--text-muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:200px;
    }
    .custom-file-upload .file-name.placeholder { color:var(--text-light); }

    /* ============================================================
       14. CONTACT BLOCK
    ============================================================ */
    .contact-block {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:30px;
      margin-top:30px;
      padding-top:30px;
      border-top:1px solid var(--border-gray);
    }
    .contact-block h4 {
      color:var(--deep-blue);
      margin-bottom:8px;
      font-size:var(--font-md);
      font-weight:700;
    }
    .contact-block .office { margin-bottom:18px; }
    .contact-block .office p {
      font-size:var(--font-sm);
      color:var(--text-muted);
      margin-bottom:1px;
      line-height:1.7;
    }
    .contact-block .office .name {
      font-weight:700;
      color:var(--deep-blue);
      font-size:15px;
    }
    #contact { padding-bottom:0; }
    #office-addresses { padding-top:0; }
    #office-addresses .container { padding-top:30px; }
    #office-addresses .contact-block { margin-top:0; }
    #office-addresses .contact-block > div:nth-child(2) {
      padding-left:clamp(18px, 3vw, 42px);
    }

    /* ============================================================
       15. MODAL
    ============================================================ */
    .modal-window {
      display:none;
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.5);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      z-index:9999;
      justify-content:center;
      align-items:center;
      padding:20px;
      animation:modalFadeIn 0.3s ease;
    }
    @keyframes modalFadeIn {
      from { opacity:0; transform:scale(0.96); }
      to { opacity:1; transform:scale(1); }
    }
    .modal-window > div {
      background:#fff;
      max-width:720px;
      width:100%;
      border-radius:var(--radius-lg);
      padding:32px 36px;
      box-shadow:0 32px 80px rgba(0,0,0,0.3);
      position:relative;
      max-height:90vh;
      overflow-y:auto;
      scrollbar-width:thin;
    }
    .modal-window > div::-webkit-scrollbar { width:4px; }
    .modal-window > div::-webkit-scrollbar-thumb { background:#ccc; border-radius:3px; }
    .modal-close {
      position:absolute;
      top:14px;
      right:18px;
      background:none;
      border:none;
      font-size:28px;
      cursor:pointer;
      color:#aaa;
      transition:var(--transition);
      line-height:1;
    }
    .modal-close:hover {
      color:var(--deep-blue);
      transform:rotate(90deg);
    }
    .modal-product-image {
      background:var(--gray-bg);
      border-radius:var(--radius);
      padding:14px;
      margin-bottom:16px;
      text-align:center;
      border:1px solid var(--border-gray);
    }
    .modal-product-image img {
      max-height:150px;
      width:auto;
      max-width:100%;
      border-radius:6px;
      margin:0 auto;
    }
    .modal-body-content ul {
      list-style:none;
      padding-left:0;
    }
    .modal-body-content li {
      padding:3px 0 3px 22px;
      position:relative;
      color:var(--text-muted);
      font-size:14px;
    }
    .modal-body-content li::before {
      content:'▹';
      position:absolute;
      left:0;
      color:var(--main-blue);
    }
    .modal-product-image .image-placeholder {
      display:none;
      align-items:center;
      justify-content:center;
      height:100px;
      background:var(--gray-bg);
      border-radius:6px;
      color:var(--text-muted);
      font-size:14px;
      flex-direction:column;
      gap:4px;
    }
    .modal-product-image .image-placeholder i {
      font-size:32px;
      opacity:0.3;
    }
    .modal-body-content {
      border-top:1px solid var(--border-gray);
      padding-top:14px;
    }
    .modal-body-content h4 {
      color:var(--deep-blue);
      font-size:15px;
      font-weight:800;
      margin:14px 0 6px;
    }
    .modal-body-content h4:first-child {
      margin-top:0;
    }
    .modal-body-content p,
    .modal-body-content li {
      color:var(--text-muted);
      font-size:14px;
      line-height:1.7;
    }
    .modal-body-content ul {
      list-style:none;
      padding:0;
      margin:6px 0 0;
    }
    .modal-body-content li {
      position:relative;
      padding:3px 0 3px 18px;
    }
    .modal-body-content li::before {
      content:'▹';
      position:absolute;
      left:0;
      color:var(--main-blue);
      font-size:12px;
    }

    /* ============================================================
       16. RESULT NUMBER
    ============================================================ */
    .result-number {
      font-size:44px;
      font-weight:900;
      color:var(--deep-blue);
      line-height:1;
      letter-spacing:-2px;
    }

    /* ============================================================
       17. FOOTER
    ============================================================ */
    .footer {
      background: var(--deep-blue);
      color: #fff;
      padding: 40px 0 20px;
      border-top: 5px solid var(--hub-yellow);
    }
    .footer .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }
    .footer-brand {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .footer-logo {
      height: 34px;
      width: auto;
      display: block;
    }
    .footer-brand-text {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: -0.4px;
    }
    .footer-brand-sub {
      font-size: 12px;
      opacity: 0.4;
      margin-top: 1px;
    }
    .footer-links a {
      color: rgba(255,255,255,0.35);
      font-size: var(--font-sm);
      margin: 0 12px 0 0;
      transition: var(--transition);
      cursor: pointer;
      padding: 3px 0;
      border-bottom: 2px solid transparent;
    }
    .footer-links a:hover {
      color: var(--hub-yellow);
      border-bottom-color: var(--hub-yellow);
    }
    .footer-copy {
      opacity: 0.25;
      font-size: 11px;
      width: 100%;
      text-align: center;
      margin-top: 14px;
      letter-spacing: 0.3px;
    }

    /* ============================================================
       18. RESPONSIVE
    ============================================================ */
    @media (max-width:1024px) {
      .hero h2 { font-size:38px; }
      .badge-grid { grid-template-columns:repeat(3,1fr); }
    }
    @media (max-width:768px) {
      .grid-2, .grid-3 { grid-template-columns:1fr; }
      .grid-4 { grid-template-columns:1fr 1fr; }
      .usp-grid { grid-template-columns:1fr; }
      .badge-grid { grid-template-columns:repeat(3,1fr); }
      .qc-grid { grid-template-columns:1fr 1fr; }
      .form-row { grid-template-columns:1fr; }
      .process-flow { flex-direction:column; align-items:stretch; }
      .process-arrow { transform:rotate(90deg); padding:4px 0; justify-content:center; }
      .hero { padding:120px 0 80px; margin-top:48px; }
      .hero h2 { font-size:28px; }
      .hero .subhead { font-size:15px; }
      .contact-block { grid-template-columns:1fr; }
      #office-addresses .contact-block > div:nth-child(2) { padding-left:0; }
      .network-layout { grid-template-columns:1fr; }
      .network-image { min-height:200px; }
      .header .container { gap:4px; }
      .logo-text h1 { font-size:17px; }
      .logo-text p { font-size:10px; }
      .nav-item { font-size:12px; padding:5px 12px; }
      section { padding:48px 0; }
      .sec-title { font-size:24px; }
      .custom-file-upload { flex-direction:column; align-items:stretch; }
      .custom-file-upload .file-name { max-width:100%; }
      .modal-window > div { padding:20px 18px; margin:10px; }
      .modal-product-image img { max-height:100px; }
      .footer .container { flex-direction:column; text-align:center; }
      .footer-links a { margin:0 8px; }
      .footer-brand { flex-direction:column; align-items:center; }
    }
    @media (max-width:480px) {
      .grid-4 { grid-template-columns:1fr; }
      .badge-grid { grid-template-columns:repeat(2,1fr); }
      .qc-grid { grid-template-columns:1fr; }
      .hero-tags span { font-size:9px; padding:3px 12px; }
      .hero h2 { font-size:22px; }
      .btn-primary, .btn-secondary { padding:11px 20px; font-size:14px; }
    }