{"id":2971,"date":"2026-05-26T08:08:37","date_gmt":"2026-05-26T08:08:37","guid":{"rendered":"https:\/\/uisb.com\/?page_id=2971"},"modified":"2026-09-11T02:58:21","modified_gmt":"2026-09-11T02:58:21","slug":"elementor-page-2971","status":"publish","type":"page","link":"https:\/\/uisb.com\/zh\/elementor-page-2971\/","title":{"rendered":"Contact aff"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2971\" class=\"elementor elementor-2971\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2854b24 e-con-full e-flex jltma-glass-effect-no e-con e-parent\" data-id=\"2854b24\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-222cf57 jltma-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"222cf57\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Google Fonts -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@300;400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap\" rel=\"stylesheet\">\r\n<style>\r\nhtml {\r\n    overflow-x: hidden;\r\n}\r\n\r\n  :root {\r\n    --white: #ffffff;\r\n    --ice: #f8fbff;\r\n    --soft-blue: #eff6ff;\r\n    --light-blue: #dbeafe;\r\n    --sky: #93c5fd;\r\n    --blue: #3b82f6;\r\n    --deep-blue: #1e40af;\r\n    --navy: #071a3d;\r\n    --navy-2: #0f172a;\r\n    --text: #172033;\r\n    --muted: #64748b;\r\n    --glass: rgba(255,255,255,.72);\r\n    --glass-strong: rgba(255,255,255,.88);\r\n    --border: rgba(147,197,253,.42);\r\n    --shadow: 0 22px 70px rgba(30,64,175,.14);\r\n    --shadow-strong: 0 34px 110px rgba(30,64,175,.25);\r\n  }\r\n\r\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n  body {\r\n    font-family: 'DM Sans', sans-serif;\r\n    background: var(--ice);\r\n    color: var(--text);\r\n    overflow-x: hidden;\r\n    min-height: 100vh;\r\n  }\r\n\r\n  \/* \u2500\u2500 Background orbs \u2500\u2500 *\/\r\n  .bg-layer {\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 0;\r\n    pointer-events: none;\r\n    overflow: hidden;\r\n  }\r\n  .orb {\r\n    position: absolute;\r\n    border-radius: 50%;\r\n    filter: blur(80px);\r\n    opacity: 0;\r\n    animation: orbFloat 0.8s ease forwards;\r\n  }\r\n  .orb-1 {\r\n    width: 560px; height: 560px;\r\n    background: radial-gradient(circle, rgba(147,197,253,.35) 0%, rgba(59,130,246,.12) 60%, transparent 100%);\r\n    top: -180px; right: -100px;\r\n    animation-delay: 0.1s;\r\n    animation: orbFloat 0.8s ease forwards 0.1s, orbDrift1 18s ease-in-out infinite 1s;\r\n  }\r\n  .orb-2 {\r\n    width: 400px; height: 400px;\r\n    background: radial-gradient(circle, rgba(219,234,254,.5) 0%, rgba(147,197,253,.2) 60%, transparent 100%);\r\n    bottom: 100px; left: -120px;\r\n    animation: orbFloat 0.8s ease forwards 0.3s, orbDrift2 22s ease-in-out infinite 1s;\r\n  }\r\n  .orb-3 {\r\n    width: 300px; height: 300px;\r\n    background: radial-gradient(circle, rgba(59,130,246,.18) 0%, transparent 70%);\r\n    top: 50%; left: 40%;\r\n    animation: orbFloat 0.8s ease forwards 0.5s, orbDrift3 26s ease-in-out infinite 1s;\r\n  }\r\n\r\n  @keyframes orbFloat {\r\n    to { opacity: 1; }\r\n  }\r\n  @keyframes orbDrift1 {\r\n    0%,100% { transform: translate(0,0) scale(1); }\r\n    33% { transform: translate(-30px, 40px) scale(1.05); }\r\n    66% { transform: translate(20px, -20px) scale(.97); }\r\n  }\r\n  @keyframes orbDrift2 {\r\n    0%,100% { transform: translate(0,0); }\r\n    50% { transform: translate(40px,-50px); }\r\n  }\r\n  @keyframes orbDrift3 {\r\n    0%,100% { transform: translate(0,0); }\r\n    40% { transform: translate(-40px,30px); }\r\n    70% { transform: translate(20px,-20px); }\r\n  }\r\n\r\n  \/* \u2500\u2500 Grid dots \u2500\u2500 *\/\r\n  .grid-dots {\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 0;\r\n    pointer-events: none;\r\n    background-image: radial-gradient(circle, rgba(147,197,253,.25) 1px, transparent 1px);\r\n    background-size: 36px 36px;\r\n    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);\r\n    opacity: 0;\r\n    animation: fadeIn 1.2s ease forwards 0.4s;\r\n  }\r\n\r\n  @keyframes fadeIn { to { opacity: 1; } }\r\n\r\n  \/* \u2500\u2500 Wrapper \u2500\u2500 *\/\r\n  .page-wrapper {\r\n    position: relative;\r\n    z-index: 1;\r\n    min-height: 100vh;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 60px 24px;\r\n  }\r\n\r\n  .container {\r\n    width: 100%;\r\n    max-width: 1060px;\r\n  }\r\n\r\n  \/* \u2500\u2500 Hero header \u2500\u2500 *\/\r\n  .hero {\r\n    text-align: center;\r\n    margin-bottom: 64px;\r\n    opacity: 0;\r\n    transform: translateY(28px);\r\n    animation: slideUp 0.7s cubic-bezier(.22,.68,0,1.2) forwards 0.2s;\r\n  }\r\n\r\n  .hero-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    background: var(--glass-strong);\r\n    border: 1px solid var(--border);\r\n    border-radius: 100px;\r\n    padding: 6px 18px;\r\n    font-size: 13px;\r\n    font-weight: 500;\r\n    color: var(--deep-blue);\r\n    margin-bottom: 28px;\r\n    backdrop-filter: blur(12px);\r\n    box-shadow: 0 4px 20px rgba(59,130,246,.1);\r\n  }\r\n  .hero-badge::before {\r\n    content: '';\r\n    width: 7px; height: 7px;\r\n    background: var(--blue);\r\n    border-radius: 50%;\r\n    animation: pulse 2s ease-in-out infinite;\r\n  }\r\n  @keyframes pulse {\r\n    0%,100% { box-shadow: 0 0 0 0 rgba(59,130,246,.5); }\r\n    50% { box-shadow: 0 0 0 6px rgba(59,130,246,0); }\r\n  }\r\n\r\n  .hero h1 {\r\n    font-family: 'Sora', sans-serif;\r\n    font-size: clamp(40px, 6vw, 68px);\r\n    font-weight: 700;\r\n    line-height: 1.08;\r\n    color: var(--navy);\r\n    letter-spacing: -0.03em;\r\n    margin-bottom: 20px;\r\n  }\r\n  .hero h1 span {\r\n    background: linear-gradient(135deg, var(--blue) 0%, var(--deep-blue) 100%);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n  }\r\n  .hero p {\r\n    font-size: 18px;\r\n    color: var(--muted);\r\n    font-weight: 300;\r\n    max-width: 480px;\r\n    margin: 0 auto;\r\n    line-height: 1.65;\r\n  }\r\n\r\n  @keyframes slideUp {\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  \/* \u2500\u2500 Main grid \u2500\u2500 *\/\r\n  .main-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1.6fr;\r\n    gap: 24px;\r\n    align-items: start;\r\n  }\r\n  @media (max-width: 768px) {\r\n    .main-grid { grid-template-columns: 1fr; }\r\n  }\r\n\r\n  \/* \u2500\u2500 Card base \u2500\u2500 *\/\r\n  .card {\r\n    background: var(--glass-strong);\r\n    border: 1px solid var(--border);\r\n    border-radius: 24px;\r\n    backdrop-filter: blur(20px);\r\n    box-shadow: var(--shadow);\r\n    opacity: 0;\r\n    transform: translateY(32px);\r\n    animation: slideUp 0.7s cubic-bezier(.22,.68,0,1.2) forwards;\r\n  }\r\n  .card:nth-child(1) { animation-delay: 0.45s; }\r\n  .card:nth-child(2) { animation-delay: 0.6s; }\r\n\r\n  \/* \u2500\u2500 Info card \u2500\u2500 *\/\r\n  .info-card {\r\n    padding: 0;\r\n    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);\r\n    border: none;\r\n    position: relative;\r\n    overflow: hidden; \/* needed to clip animated orb pseudo-elements *\/\r\n  }\r\n  .info-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    width: 300px; height: 300px;\r\n    background: radial-gradient(circle, rgba(59,130,246,.25) 0%, transparent 70%);\r\n    top: -80px; right: -80px;\r\n    animation: orbDrift1 14s ease-in-out infinite;\r\n  }\r\n  .info-card::after {\r\n    content: '';\r\n    position: absolute;\r\n    width: 200px; height: 200px;\r\n    background: radial-gradient(circle, rgba(147,197,253,.15) 0%, transparent 70%);\r\n    bottom: 40px; left: -40px;\r\n    animation: orbDrift2 18s ease-in-out infinite;\r\n  }\r\n\r\n  .info-inner {\r\n    position: relative;\r\n    z-index: 1;\r\n    padding: 44px 36px;\r\n  }\r\n\r\n  .info-label {\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.12em;\r\n    text-transform: uppercase;\r\n    color: var(--sky);\r\n    margin-bottom: 12px;\r\n    opacity: 0.8;\r\n  }\r\n  .info-title {\r\n    font-family: 'Sora', sans-serif;\r\n    font-size: 26px;\r\n    font-weight: 700;\r\n    color: var(--white);\r\n    line-height: 1.25;\r\n    margin-bottom: 12px;\r\n  }\r\n  .info-sub {\r\n    font-size: 14px;\r\n    color: rgba(147,197,253,.75);\r\n    line-height: 1.6;\r\n    margin-bottom: 40px;\r\n  }\r\n\r\n  .contact-item {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 16px;\r\n    margin-bottom: 28px;\r\n    opacity: 0;\r\n    transform: translateX(-16px);\r\n    animation: slideRight 0.5s ease forwards;\r\n  }\r\n  .contact-item:nth-child(1) { animation-delay: 0.9s; }\r\n  .contact-item:nth-child(2) { animation-delay: 1.05s; }\r\n  .contact-item:nth-child(3) { animation-delay: 1.2s; }\r\n  .contact-item:nth-child(4) { animation-delay: 1.35s; }\r\n\r\n  @keyframes slideRight {\r\n    to { opacity: 1; transform: translateX(0); }\r\n  }\r\n\r\n  .ci-icon {\r\n    width: 42px; height: 42px;\r\n    background: rgba(59,130,246,.2);\r\n    border: 1px solid rgba(147,197,253,.3);\r\n    border-radius: 12px;\r\n    display: flex; align-items: center; justify-content: center;\r\n    flex-shrink: 0;\r\n    transition: background 0.3s, transform 0.3s;\r\n  }\r\n  .ci-icon svg { width: 18px; height: 18px; stroke: var(--sky); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }\r\n  .contact-item:hover .ci-icon {\r\n    background: rgba(59,130,246,.35);\r\n    transform: scale(1.1);\r\n  }\r\n  .ci-label {\r\n    font-size: 11px;\r\n    font-weight: 500;\r\n    color: rgba(147,197,253,.6);\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.08em;\r\n    margin-bottom: 4px;\r\n  }\r\n  .ci-value {\r\n    font-size: 14px;\r\n    color: var(--white);\r\n    font-weight: 400;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  .divider {\r\n    height: 1px;\r\n    background: rgba(147,197,253,.15);\r\n    margin: 32px 0;\r\n  }\r\n\r\n  .social-row {\r\n    display: flex;\r\n    gap: 10px;\r\n    opacity: 0;\r\n    animation: fadeIn 0.5s ease forwards 1.5s;\r\n  }\r\n  .social-btn {\r\n    width: 38px; height: 38px;\r\n    background: rgba(255,255,255,.08);\r\n    border: 1px solid rgba(147,197,253,.2);\r\n    border-radius: 10px;\r\n    display: flex; align-items: center; justify-content: center;\r\n    cursor: pointer;\r\n    transition: background 0.3s, border-color 0.3s, transform 0.3s;\r\n    text-decoration: none;\r\n  }\r\n  .social-btn svg { width: 16px; height: 16px; fill: rgba(147,197,253,.7); transition: fill 0.3s; }\r\n  .social-btn:hover {\r\n    background: rgba(59,130,246,.3);\r\n    border-color: rgba(147,197,253,.5);\r\n    transform: translateY(-3px);\r\n  }\r\n  .social-btn:hover svg { fill: var(--white); }\r\n\r\n  \/* \u2500\u2500 Form card \u2500\u2500 *\/\r\n  .form-card { padding: 48px 44px; }\r\n  @media (max-width: 600px) { .form-card { padding: 32px 24px; } }\r\n\r\n  .form-title {\r\n    font-family: 'Sora', sans-serif;\r\n    font-size: 22px;\r\n    font-weight: 700;\r\n    color: var(--navy);\r\n    margin-bottom: 6px;\r\n  }\r\n  .form-sub {\r\n    font-size: 14px;\r\n    color: var(--muted);\r\n    margin-bottom: 36px;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  .form-row {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 16px;\r\n    margin-bottom: 16px;\r\n  }\r\n  @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }\r\n\r\n  .field {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 8px;\r\n    opacity: 0;\r\n    transform: translateY(14px);\r\n    animation: slideUp 0.5s ease forwards;\r\n  }\r\n  .field:nth-child(1) { animation-delay: 0.75s; }\r\n  .field:nth-child(2) { animation-delay: 0.85s; }\r\n  .field-single:nth-child(1) { animation-delay: 0.95s; }\r\n  .field-single:nth-child(2) { animation-delay: 1.05s; }\r\n  .field-single:nth-child(3) { animation-delay: 1.15s; }\r\n\r\n  label {\r\n    font-size: 13px;\r\n    font-weight: 500;\r\n    color: var(--text);\r\n    letter-spacing: 0.01em;\r\n  }\r\n\r\n  input, select, textarea {\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 14px;\r\n    color: var(--text);\r\n    background: var(--white);\r\n    border: 1.5px solid var(--border);\r\n    border-radius: 12px;\r\n    padding: 13px 16px;\r\n    width: 100%;\r\n    outline: none;\r\n    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;\r\n    -webkit-appearance: none;\r\n  }\r\n  input::placeholder, textarea::placeholder { color: rgba(100,116,139,.5); }\r\n  input:focus, select:focus, textarea:focus {\r\n    border-color: var(--blue);\r\n    background: var(--soft-blue);\r\n    box-shadow: 0 0 0 4px rgba(59,130,246,.12);\r\n  }\r\n  input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {\r\n    border-color: var(--sky);\r\n  }\r\n  textarea { resize: none; height: 120px; line-height: 1.6; }\r\n  select { display: none; }\r\n\r\n  \/* \u2500\u2500 Custom select \u2500\u2500 *\/\r\n  .cs-wrap { position: relative; }\r\n  .cs-trigger {\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 14px;\r\n    color: rgba(100,116,139,.5);\r\n    background: var(--white);\r\n    border: 1.5px solid var(--border);\r\n    border-radius: 12px;\r\n    padding: 13px 42px 13px 16px;\r\n    width: 100%;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    transition: border-color .25s, box-shadow .25s, background .25s;\r\n    user-select: none;\r\n    position: relative;\r\n  }\r\n  .cs-trigger:hover { border-color: var(--sky); }\r\n  .cs-trigger.cs-open, .cs-trigger:focus-visible {\r\n    border-color: var(--blue);\r\n    background: var(--soft-blue);\r\n    box-shadow: 0 0 0 4px rgba(59,130,246,.12);\r\n    outline: none;\r\n  }\r\n  .cs-trigger.cs-selected { color: var(--text); }\r\n  .cs-chevron {\r\n    position: absolute;\r\n    right: 14px; top: 50%;\r\n    transform: translateY(-50%);\r\n    width: 9px; height: 9px;\r\n    border-right: 2px solid #64748b;\r\n    border-bottom: 2px solid #64748b;\r\n    transform: translateY(-65%) rotate(45deg);\r\n    transition: transform .2s;\r\n    pointer-events: none;\r\n  }\r\n  .cs-trigger.cs-open .cs-chevron { transform: translateY(-35%) rotate(225deg); }\r\n  .cs-list {\r\n    position: fixed;\r\n    background: var(--white);\r\n    border: 1.5px solid var(--border);\r\n    border-radius: 12px;\r\n    box-shadow: 0 8px 32px rgba(30,64,175,.12);\r\n    list-style: none;\r\n    z-index: 999999;\r\n    display: none;\r\n    overflow: hidden;\r\n  }\r\n  .cs-list.cs-open { display: block; }\r\n  .cs-list li {\r\n    padding: 11px 16px;\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 14px;\r\n    color: var(--text);\r\n    cursor: pointer;\r\n    transition: background .15s, color .15s;\r\n  }\r\n  .cs-list li:hover { background: var(--soft-blue); color: var(--blue); }\r\n  .cs-list li.cs-active { background: var(--soft-blue); color: var(--blue); font-weight: 500; }\r\n\r\n  .mb16 { margin-bottom: 16px; }\r\n  .mb24 { margin-bottom: 24px; }\r\n\r\n  \/* \u2500\u2500 Submit btn \u2500\u2500 *\/\r\n  .submit-wrap {\r\n    opacity: 0;\r\n    animation: slideUp 0.5s ease forwards 1.3s;\r\n  }\r\n\r\n  .btn-submit {\r\n    width: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 10px;\r\n    padding: 15px 32px;\r\n    font-family: 'Sora', sans-serif;\r\n    font-size: 15px;\r\n    font-weight: 600;\r\n    color: var(--white);\r\n    background: linear-gradient(135deg, var(--blue) 0%, var(--deep-blue) 100%);\r\n    border: none;\r\n    border-radius: 14px;\r\n    cursor: pointer;\r\n    position: relative;\r\n    overflow: hidden;\r\n    transition: transform 0.25s, box-shadow 0.25s;\r\n    box-shadow: 0 8px 32px rgba(59,130,246,.35);\r\n  }\r\n  .btn-submit::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);\r\n    opacity: 0;\r\n    transition: opacity 0.3s;\r\n  }\r\n  .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 44px rgba(59,130,246,.5); }\r\n  .btn-submit:hover::before { opacity: 1; }\r\n  .btn-submit:active { transform: translateY(0) scale(.98); }\r\n\r\n  .btn-arrow {\r\n    width: 20px; height: 20px;\r\n    background: rgba(255,255,255,.25);\r\n    border-radius: 6px;\r\n    display: flex; align-items: center; justify-content: center;\r\n    transition: transform 0.3s;\r\n  }\r\n  .btn-submit:hover .btn-arrow { transform: translateX(3px); }\r\n  .btn-arrow svg { width: 11px; height: 11px; stroke: white; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }\r\n\r\n  \/* \u2500\u2500 Ripple effect \u2500\u2500 *\/\r\n  .ripple {\r\n    position: absolute;\r\n    border-radius: 50%;\r\n    background: rgba(255,255,255,.3);\r\n    transform: scale(0);\r\n    animation: rippleAnim 0.6s linear;\r\n    pointer-events: none;\r\n  }\r\n  @keyframes rippleAnim {\r\n    to { transform: scale(4); opacity: 0; }\r\n  }\r\n\r\n  \/* \u2500\u2500 Success state \u2500\u2500 *\/\r\n  .success-overlay {\r\n    display: none;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    text-align: center;\r\n    padding: 48px;\r\n    min-height: 380px;\r\n  }\r\n  .success-overlay.visible { display: flex; }\r\n  .form-inner.hidden { display: none; }\r\n\r\n  .success-icon {\r\n    width: 72px; height: 72px;\r\n    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);\r\n    border-radius: 50%;\r\n    display: flex; align-items: center; justify-content: center;\r\n    margin: 0 auto 24px;\r\n    animation: popIn 0.5s cubic-bezier(.34,1.56,.64,1) forwards;\r\n    box-shadow: 0 8px 32px rgba(34,197,94,.35);\r\n  }\r\n  @keyframes popIn {\r\n    from { transform: scale(0); opacity: 0; }\r\n    to { transform: scale(1); opacity: 1; }\r\n  }\r\n  .success-icon svg { width: 32px; height: 32px; stroke: white; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }\r\n  .success-title {\r\n    font-family: 'Sora', sans-serif;\r\n    font-size: 24px;\r\n    font-weight: 700;\r\n    color: var(--navy);\r\n    margin-bottom: 10px;\r\n  }\r\n  .success-text {\r\n    font-size: 15px;\r\n    color: var(--muted);\r\n    line-height: 1.6;\r\n    max-width: 320px;\r\n  }\r\n\r\n  \/* \u2500\u2500 Floating particles \u2500\u2500 *\/\r\n  .particle {\r\n    position: fixed;\r\n    width: 4px; height: 4px;\r\n    background: var(--sky);\r\n    border-radius: 50%;\r\n    pointer-events: none;\r\n    opacity: 0;\r\n    z-index: 0;\r\n  }\r\n<\/style>\r\n\r\n<div class=\"bg-layer\">\r\n  <div class=\"orb orb-1\"><\/div>\r\n  <div class=\"orb orb-2\"><\/div>\r\n  <div class=\"orb orb-3\"><\/div>\r\n<\/div>\r\n<div class=\"grid-dots\"><\/div>\r\n\r\n<div class=\"page-wrapper\">\r\n  <div class=\"container\">\r\n\r\n    <!-- Hero -->\r\n    <div class=\"hero\">\r\n      <div class=\"hero-badge\">Available Monday \u2013 Friday<\/div>\r\n      <h1>Let's <span>start a<br>conversation<\/span><\/h1>\r\n      <p>Have a question or want to work together? Drop us a message and we'll get back to you shortly.<\/p>\r\n    <\/div>\r\n\r\n    <!-- Main grid -->\r\n    <div class=\"main-grid\">\r\n\r\n      <!-- Info card -->\r\n      <div class=\"card info-card\">\r\n        <div class=\"info-inner\">\r\n          <div class=\"info-label\">Get in touch<\/div>\r\n          <div class=\"info-title\">We'd love to hear from you<\/div>\r\n          <div class=\"info-sub\">Reach out through any channel \u2014 our team responds within one business day.<\/div>\r\n\r\n          <div class=\"contact-item\">\r\n            <div class=\"ci-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\/><\/svg>\r\n            <\/div>\r\n            <div>\r\n              <div class=\"ci-label\">Email us<\/div>\r\n              <div class=\"ci-value\">uvibdd@uisb.com<\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"contact-item\">\r\n            <div class=\"ci-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 01-2.18 2A19.79 19.79 0 013.08 5.18 2 2 0 015 3h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L9.09 10.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 17.92z\"\/><\/svg>\r\n            <\/div>\r\n            <div>\r\n              <div class=\"ci-label\">Call us<\/div>\r\n              <div class=\"ci-value\">+603-33927726<\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"contact-item\">\r\n            <div class=\"ci-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0118 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\r\n            <\/div>\r\n            <div>\r\n              <div class=\"ci-label\">Visit us<\/div>\r\n              <div class=\"ci-value\">Lot 5018, Jalan Teratai, Off Jalan Meru, 41050 Klang<br>Selangor Darul Ehsan<\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"contact-item\">\r\n            <div class=\"ci-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 6v6l4 2\"\/><\/svg>\r\n            <\/div>\r\n            <div>\r\n              <div class=\"ci-label\">Office hours<\/div>\r\n              <div class=\"ci-value\">Mon \u2013 Fri, 8:00 AM \u2013 5:30 PM<\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"divider\"><\/div>\r\n\r\n          <div class=\"social-row\">\r\n            <a href=\"#\" class=\"social-btn\" aria-label=\"LinkedIn\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z\"\/><circle cx=\"4\" cy=\"4\" r=\"2\"\/><\/svg>\r\n            <\/a>\r\n            <a href=\"#\" class=\"social-btn\" aria-label=\"Twitter\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M23 3a10.9 10.9 0 01-3.14 1.53A4.48 4.48 0 0012 8v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z\"\/><\/svg>\r\n            <\/a>\r\n            <a href=\"#\" class=\"social-btn\" aria-label=\"Facebook\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z\"\/><\/svg>\r\n            <\/a>\r\n            <a href=\"#\" class=\"social-btn\" aria-label=\"Instagram\">\r\n              <svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"\/><path d=\"M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z\"\/><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"\/><\/svg>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Form card -->\r\n      <div class=\"card form-card\" id=\"formCard\">\r\n\r\n        <div class=\"form-inner\" id=\"formInner\">\r\n          <div class=\"form-title\">Send us a message<\/div>\r\n          <div class=\"form-sub\">Fill in the details below and we'll respond as soon as possible.<\/div>\r\n\r\n          <div class=\"form-row\">\r\n            <div class=\"field\">\r\n              <label for=\"fname\">First name<\/label>\r\n              <input type=\"text\" id=\"fname\" placeholder=\"Ahmad\">\r\n            <\/div>\r\n            <div class=\"field\">\r\n              <label for=\"lname\">Last name<\/label>\r\n              <input type=\"text\" id=\"lname\" placeholder=\"Razif\">\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"field field-single mb16\">\r\n            <label for=\"email\">Email address<\/label>\r\n            <input type=\"email\" id=\"email\" placeholder=\"you@example.com\">\r\n          <\/div>\r\n\r\n          <div class=\"field field-single mb16\">\r\n            <label>Subject<\/label>\r\n            <div class=\"cs-wrap\">\r\n              <div class=\"cs-trigger\" id=\"csTrigger\" tabindex=\"0\" role=\"combobox\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\r\n                <span id=\"csDisplay\">Select a topic\u2026<\/span>\r\n                <span class=\"cs-chevron\"><\/span>\r\n              <\/div>\r\n              <ul class=\"cs-list\" id=\"csList\" role=\"listbox\">\r\n                <li data-value=\"General Inquiry\">General Inquiry<\/li>\r\n                <li data-value=\"Business Inquiry\">Business Inquiry<\/li>\r\n                <li data-value=\"Partnership Opportunity\">Partnership Opportunity<\/li>\r\n                <li data-value=\"Careers\">Careers<\/li>\r\n              <\/ul>\r\n            <\/div>\r\n            <input type=\"hidden\" id=\"subject\">\r\n          <\/div>\r\n\r\n          <div class=\"field field-single mb24\">\r\n            <label for=\"message\">Message<\/label>\r\n            <textarea id=\"message\" placeholder=\"Tell us how we can help\u2026\"><\/textarea>\r\n          <\/div>\r\n\r\n          <!-- Honeypot: hidden from humans, bots fill it -->\r\n          <div style=\"display:none!important;position:absolute;left:-9999px;\" aria-hidden=\"true\">\r\n            <input type=\"text\" id=\"website\" name=\"website\" tabindex=\"-1\" autocomplete=\"off\">\r\n          <\/div>\r\n          <input type=\"hidden\" id=\"_t\" name=\"_t\">\r\n\r\n          <div id=\"form-error\" style=\"display:none;margin-bottom:16px;padding:12px 16px;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:#b91c1c;font-size:.88rem;\"><\/div>\r\n\r\n          <div class=\"submit-wrap\">\r\n            <button class=\"btn-submit\" id=\"submitBtn\">\r\n              <span id=\"submitLabel\">Send Message<\/span>\r\n              <div class=\"btn-arrow\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n              <\/div>\r\n            <\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"success-overlay\" id=\"successOverlay\">\r\n          <div class=\"success-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"success-title\">Message sent!<\/div>\r\n          <div class=\"success-text\">Thank you for reaching out. Our team will get back to you within one business day.<\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  \/\/ Stamp page load time for bot time-check\r\n  document.getElementById('_t').value = Math.floor(Date.now() \/ 1000);\r\n\r\n  const btn = document.getElementById('submitBtn');\r\n  const submitLabel = document.getElementById('submitLabel');\r\n  const formError = document.getElementById('form-error');\r\n\r\n  \/\/ Ripple\r\n  btn.addEventListener('mousedown', function(e) {\r\n    const rect = btn.getBoundingClientRect();\r\n    const ripple = document.createElement('span');\r\n    ripple.classList.add('ripple');\r\n    const size = Math.max(rect.width, rect.height);\r\n    ripple.style.cssText = `width:${size}px;height:${size}px;left:${e.clientX-rect.left-size\/2}px;top:${e.clientY-rect.top-size\/2}px`;\r\n    btn.appendChild(ripple);\r\n    setTimeout(() => ripple.remove(), 620);\r\n  });\r\n\r\n  \/\/ Submit\r\n  btn.addEventListener('click', async function(e) {\r\n    e.preventDefault();\r\n    formError.style.display = 'none';\r\n\r\n    const fname   = document.getElementById('fname').value.trim();\r\n    const lname   = document.getElementById('lname').value.trim();\r\n    const email   = document.getElementById('email').value.trim();\r\n    const subject = document.getElementById('subject').value;\r\n    const message = document.getElementById('message').value.trim();\r\n    const website = document.getElementById('website').value;\r\n    const _t      = document.getElementById('_t').value;\r\n\r\n    if (!fname || !lname || !email || !subject || !message) {\r\n      formError.textContent = 'Please fill in all required fields.';\r\n      formError.style.display = 'block';\r\n      return;\r\n    }\r\n\r\n    btn.disabled = true;\r\n    submitLabel.textContent = 'Sending\u2026';\r\n\r\n    try {\r\n      const res = await fetch('\/wp-json\/uisb\/v1\/contact', {\r\n        method: 'POST',\r\n        headers: { 'Content-Type': 'application\/json' },\r\n        body: JSON.stringify({ fname, lname, email, subject, message, website, _t }),\r\n      });\r\n      const data = await res.json();\r\n\r\n      if (res.ok && data.success) {\r\n        document.getElementById('formInner').classList.add('hidden');\r\n        document.getElementById('successOverlay').classList.add('visible');\r\n        spawnParticles(e.clientX, e.clientY);\r\n      } else {\r\n        formError.textContent = data.error || 'Something went wrong. Please try again.';\r\n        formError.style.display = 'block';\r\n        btn.disabled = false;\r\n        submitLabel.textContent = 'Send Message';\r\n      }\r\n    } catch (err) {\r\n      formError.textContent = 'Network error. Please check your connection and try again.';\r\n      formError.style.display = 'block';\r\n      btn.disabled = false;\r\n      submitLabel.textContent = 'Send Message';\r\n    }\r\n  });\r\n\r\n  \/\/ Floating particles on success\r\n  function spawnParticles(x, y) {\r\n    for (let i = 0; i < 18; i++) {\r\n      const p = document.createElement('div');\r\n      p.className = 'particle';\r\n      document.body.appendChild(p);\r\n      const angle = (Math.PI * 2 \/ 18) * i;\r\n      const dist = 60 + Math.random() * 80;\r\n      const tx = Math.cos(angle) * dist;\r\n      const ty = Math.sin(angle) * dist;\r\n      p.style.left = x + 'px';\r\n      p.style.top = y + 'px';\r\n      p.style.opacity = '1';\r\n      p.style.background = ['#3b82f6','#93c5fd','#1e40af','#dbeafe'][Math.floor(Math.random()*4)];\r\n      p.style.transition = `transform 0.8s cubic-bezier(.22,.68,0,1) ${i * 0.03}s, opacity 0.6s ease ${0.2 + i*0.02}s`;\r\n      requestAnimationFrame(() => {\r\n        p.style.transform = `translate(${tx}px, ${ty}px) scale(0)`;\r\n        p.style.opacity = '0';\r\n      });\r\n      setTimeout(() => p.remove(), 900);\r\n    }\r\n  }\r\n\r\n  \/\/ Custom select \u2014 list rendered fixed to escape stacking contexts\r\n  (function() {\r\n    const trigger = document.getElementById('csTrigger');\r\n    const list    = document.getElementById('csList');\r\n    const display = document.getElementById('csDisplay');\r\n    const hidden  = document.getElementById('subject');\r\n\r\n    \/\/ Move list to body so it escapes all parent stacking contexts\r\n    document.body.appendChild(list);\r\n\r\n    function positionList() {\r\n      const r = trigger.getBoundingClientRect();\r\n      list.style.top    = (r.bottom + 6) + 'px';\r\n      list.style.left   = r.left + 'px';\r\n      list.style.width  = r.width + 'px';\r\n    }\r\n\r\n    function openList() {\r\n      positionList();\r\n      trigger.classList.add('cs-open');\r\n      list.classList.add('cs-open');\r\n      trigger.setAttribute('aria-expanded', 'true');\r\n    }\r\n    function closeList() {\r\n      trigger.classList.remove('cs-open');\r\n      list.classList.remove('cs-open');\r\n      trigger.setAttribute('aria-expanded', 'false');\r\n    }\r\n\r\n    trigger.addEventListener('click', () => trigger.classList.contains('cs-open') ? closeList() : openList());\r\n    trigger.addEventListener('keydown', e => {\r\n      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); trigger.classList.contains('cs-open') ? closeList() : openList(); }\r\n      if (e.key === 'Escape') closeList();\r\n    });\r\n\r\n    list.querySelectorAll('li').forEach(li => {\r\n      li.addEventListener('click', () => {\r\n        list.querySelectorAll('li').forEach(x => x.classList.remove('cs-active'));\r\n        li.classList.add('cs-active');\r\n        display.textContent = li.dataset.value;\r\n        hidden.value = li.dataset.value;\r\n        trigger.classList.add('cs-selected');\r\n        closeList();\r\n      });\r\n    });\r\n\r\n    document.addEventListener('click', e => {\r\n      if (!trigger.contains(e.target) && !list.contains(e.target)) closeList();\r\n    });\r\n    window.addEventListener('scroll', () => { if (list.classList.contains('cs-open')) positionList(); }, true);\r\n    window.addEventListener('resize', () => { if (list.classList.contains('cs-open')) positionList(); });\r\n  })();\r\n\r\n  \/\/ Subtle input focus animation \u2014 expand label slightly\r\n  document.querySelectorAll('input, select, textarea').forEach(el => {\r\n    el.addEventListener('focus', () => {\r\n      const lbl = el.closest('.field')?.querySelector('label');\r\n      if (lbl) lbl.style.color = '#3b82f6';\r\n    });\r\n    el.addEventListener('blur', () => {\r\n      const lbl = el.closest('.field')?.querySelector('label');\r\n      if (lbl) lbl.style.color = '';\r\n    });\r\n  });\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Available Monday \u2013 Friday Let&#8217;s start aconversation Have a question or want to work together? Drop us a message and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2971","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/pages\/2971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/comments?post=2971"}],"version-history":[{"count":24,"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/pages\/2971\/revisions"}],"predecessor-version":[{"id":4040,"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/pages\/2971\/revisions\/4040"}],"wp:attachment":[{"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/media?parent=2971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}