{"id":140,"date":"2026-06-30T14:20:26","date_gmt":"2026-06-30T14:20:26","guid":{"rendered":"https:\/\/yourdigitaldesigns.com\/?page_id=140"},"modified":"2026-06-30T15:10:55","modified_gmt":"2026-06-30T15:10:55","slug":"about-us","status":"publish","type":"page","link":"https:\/\/yourdigitaldesigns.com\/zh\/about-us\/","title":{"rendered":"(English) About Us"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"140\" class=\"elementor elementor-140\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-22eae5b elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"22eae5b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5b0ca58\" data-id=\"5b0ca58\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3bf2b55 elementor-widget elementor-widget-html\" data-id=\"3bf2b55\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ========================================================= YOUR DIGITAL DESIGNS \u2014 ENLARGED ABOUT US HERO Complete HTML, CSS, and JavaScript ========================================================== --> <section class=\"ydd-about-hero\" id=\"ydd-about-hero\"> <div class=\"ydd-about-hero__grid\"><\/div> <div class=\"ydd-about-hero__glow ydd-about-hero__glow--purple\"><\/div> <div class=\"ydd-about-hero__glow ydd-about-hero__glow--cyan\"><\/div> <div class=\"ydd-about-hero__inner\"> <!-- ================================================= LEFT: ABOUT STORY ================================================== --> <div class=\"ydd-about-hero__content\"> <div class=\"ydd-about-hero__eyebrow\"> <span class=\"ydd-about-hero__eyebrow-dot\"><\/span> About Your Digital Designs <\/div> <h1 class=\"ydd-about-hero__title\"> We build the systems <span>behind ambitious businesses.<\/span> <\/h1> <p class=\"ydd-about-hero__lead\"> We began in the United States with a simple belief: a website should do far more than look impressive. Today, we bring that experience to businesses across Thailand\u2014helping them attract more customers, simplify operations, and grow through purposeful digital systems. <\/p> <!-- UNITED STATES TO THAILAND JOURNEY --> <div class=\"ydd-about-hero__story-route\"> <div class=\"ydd-about-hero__route-stop\"> <span class=\"ydd-about-hero__route-marker\">01<\/span> <div> <small>Where our journey began<\/small> <strong>United States<\/strong> <\/div> <\/div> <div class=\"ydd-about-hero__route-line\"> <span><\/span> <\/div> <div class=\"ydd-about-hero__route-stop\"> <span class=\"ydd-about-hero__route-marker\">02<\/span> <div> <small>Where we continue to grow<\/small> <strong>Thailand<\/strong> <\/div> <\/div> <\/div> <!-- PRIMARY ACTION --> <div class=\"ydd-about-hero__actions\"> <a href=\"\/contact-us\/\" class=\"ydd-about-hero__button ydd-about-hero__button--primary\" > Start a project <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"> <path d=\"M5 12h14\"><\/path> <path d=\"m13 6 6 6-6 6\"><\/path> <\/svg> <\/a> <\/div> <!-- TRUST POINTS --> <div class=\"ydd-about-hero__trust-row\"> <div> <span class=\"ydd-about-hero__trust-check\">\u2713<\/span> Strategy-led <\/div> <div> <span class=\"ydd-about-hero__trust-check\">\u2713<\/span> Mobile-first <\/div> <div> <span class=\"ydd-about-hero__trust-check\">\u2713<\/span> Built for growth <\/div> <\/div> <\/div> <!-- ================================================= RIGHT: INTERACTIVE DIGITAL SYSTEM ================================================== --> <div class=\"ydd-about-hero__visual\" data-ydd-visual data-mode=\"attract\" > <div class=\"ydd-about-hero__orbit ydd-about-hero__orbit--one\"><\/div> <div class=\"ydd-about-hero__orbit ydd-about-hero__orbit--two\"><\/div> <!-- FLOATING AUTOMATION CARD --> <div class=\"ydd-about-hero__floating-card ydd-about-hero__floating-card--automation\"> <div class=\"ydd-about-hero__floating-icon\"> <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"> <path d=\"M12 2v4\"><\/path> <path d=\"m4.93 4.93 2.83 2.83\"><\/path> <path d=\"M2 12h4\"><\/path> <path d=\"m4.93 19.07 2.83-2.83\"><\/path> <path d=\"M12 18v4\"><\/path> <path d=\"m16.24 16.24 2.83 2.83\"><\/path> <path d=\"M18 12h4\"><\/path> <path d=\"m16.24 7.76 2.83-2.83\"><\/path> <circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle> <\/svg> <\/div> <div> <small>Smart automation<\/small> <strong>Working 24\/7<\/strong> <\/div> <span class=\"ydd-about-hero__live-dot\"><\/span> <\/div> <!-- MAIN SYSTEM WINDOW --> <div class=\"ydd-about-hero__system\"> <!-- BROWSER HEADER --> <div class=\"ydd-about-hero__browser-bar\"> <div class=\"ydd-about-hero__browser-dots\"> <span><\/span> <span><\/span> <span><\/span> <\/div> <div class=\"ydd-about-hero__browser-address\"> <span class=\"ydd-about-hero__secure-icon\"> <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"> <rect x=\"5\" y=\"10\" width=\"14\" height=\"10\" rx=\"2\" ><\/rect> <path d=\"M8 10V7a4 4 0 0 1 8 0v3\"><\/path> <\/svg> <\/span> yourdigitaldesigns.com\/system <\/div> <div class=\"ydd-about-hero__browser-status\"> Live <\/div> <\/div> <!-- DASHBOARD --> <div class=\"ydd-about-hero__dashboard\"> <!-- DASHBOARD NAVIGATION --> <div class=\"ydd-about-hero__dashboard-nav\"> <div class=\"ydd-about-hero__dashboard-logo\"> YD <\/div> <span class=\"is-active\"> <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"> <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"><\/rect> <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"><\/rect> <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"><\/rect> <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"><\/rect> <\/svg> <\/span> <span> <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"> <path d=\"M4 19V9\"><\/path> <path d=\"M10 19V5\"><\/path> <path d=\"M16 19v-7\"><\/path> <path d=\"M22 19V3\"><\/path> <\/svg> <\/span> <span> <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"> <circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle> <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82\"><\/path> <path d=\"M4.27 6.18A1.65 1.65 0 0 0 4.6 8\"><\/path> <path d=\"M14.95 4.6A1.65 1.65 0 0 0 13.18 4\"><\/path> <path d=\"M9.05 19.4A1.65 1.65 0 0 0 10.82 20\"><\/path> <\/svg> <\/span> <span class=\"ydd-about-hero__dashboard-profile\"> M <\/span> <\/div> <!-- DASHBOARD MAIN CONTENT --> <div class=\"ydd-about-hero__dashboard-main\"> <div class=\"ydd-about-hero__dashboard-heading\"> <div> <span class=\"ydd-about-hero__dashboard-label\"> Digital growth system <\/span> <h2 data-ydd-title> Turn attention into qualified inquiries. <\/h2> <\/div> <div class=\"ydd-about-hero__dashboard-badge\"> <span><\/span> System active <\/div> <\/div> <p class=\"ydd-about-hero__dashboard-description\" data-ydd-description > Create clearer customer journeys that move visitors from first impression to meaningful action. <\/p> <!-- METRICS --> <div class=\"ydd-about-hero__metrics\"> <div class=\"ydd-about-hero__metric\"> <div class=\"ydd-about-hero__metric-top\"> <span data-ydd-metric-one-label> Customer clarity <\/span> <strong data-ydd-metric-one-value> 92% <\/strong> <\/div> <div class=\"ydd-about-hero__progress\"> <span data-ydd-progress-one style=\"width: 92%;\" ><\/span> <\/div> <\/div> <div class=\"ydd-about-hero__metric\"> <div class=\"ydd-about-hero__metric-top\"> <span data-ydd-metric-two-label> Journey readiness <\/span> <strong data-ydd-metric-two-value> 86% <\/strong> <\/div> <div class=\"ydd-about-hero__progress\"> <span data-ydd-progress-two style=\"width: 86%;\" ><\/span> <\/div> <\/div> <\/div> <!-- CHART AND ACTIVITY --> <div class=\"ydd-about-hero__dashboard-grid\"> <div class=\"ydd-about-hero__chart-card\"> <div class=\"ydd-about-hero__card-heading\"> <div> <small>Customer journey<\/small> <strong data-ydd-chart-label> Growing engagement <\/strong> <\/div> <span class=\"ydd-about-hero__trend\"> \u2197 Active <\/span> <\/div> <div class=\"ydd-about-hero__chart\"> <span style=\"height: 34%;\"><\/span> <span style=\"height: 47%;\"><\/span> <span style=\"height: 43%;\"><\/span> <span style=\"height: 62%;\"><\/span> <span style=\"height: 56%;\"><\/span> <span style=\"height: 76%;\"><\/span> <span style=\"height: 91%;\"><\/span> <\/div> <div class=\"ydd-about-hero__chart-days\"> <span>M<\/span> <span>T<\/span> <span>W<\/span> <span>T<\/span> <span>F<\/span> <span>S<\/span> <span>S<\/span> <\/div> <\/div> <div class=\"ydd-about-hero__activity-card\"> <div class=\"ydd-about-hero__card-heading\"> <div> <small>Live activity<\/small> <strong>System events<\/strong> <\/div> <span class=\"ydd-about-hero__activity-count\"> 03 <\/span> <\/div> <div class=\"ydd-about-hero__activity-list\"> <div> <span class=\"ydd-about-hero__activity-icon\"> \u2713 <\/span> <p> <strong data-ydd-event-one> New inquiry captured <\/strong> <small>Just now<\/small> <\/p> <\/div> <div> <span class=\"ydd-about-hero__activity-icon\"> \u2713 <\/span> <p> <strong data-ydd-event-two> Follow-up prepared <\/strong> <small>Automated<\/small> <\/p> <\/div> <div> <span class=\"ydd-about-hero__activity-icon\"> \u2713 <\/span> <p> <strong data-ydd-event-three> Team notified <\/strong> <small>Completed<\/small> <\/p> <\/div> <\/div> <\/div> <\/div> <\/div> <\/div> <\/div> <!-- FLOATING CONFIRMATION CARD --> <div class=\"ydd-about-hero__floating-card ydd-about-hero__floating-card--confirmation\"> <span class=\"ydd-about-hero__confirmation-check\"> <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"> <path d=\"m5 12 4 4L19 6\"><\/path> <\/svg> <\/span> <div> <strong data-ydd-floating-status> Inquiry captured <\/strong> <small data-ydd-floating-subtitle> Without manual follow-up <\/small> <\/div> <\/div> <!-- INTERACTIVE SYSTEM MODES --> <div class=\"ydd-about-hero__modes\" role=\"tablist\" aria-label=\"Explore our digital system approach\" > <button type=\"button\" class=\"ydd-about-hero__mode is-active\" data-ydd-mode=\"attract\" role=\"tab\" aria-selected=\"true\" > <span class=\"ydd-about-hero__mode-number\"> 01 <\/span> <span> <small>Attract<\/small> <strong>Bring customers in<\/strong> <\/span> <\/button> <button type=\"button\" class=\"ydd-about-hero__mode\" data-ydd-mode=\"convert\" role=\"tab\" aria-selected=\"false\" > <span class=\"ydd-about-hero__mode-number\"> 02 <\/span> <span> <small>Convert<\/small> <strong>Make action effortless<\/strong> <\/span> <\/button> <button type=\"button\" class=\"ydd-about-hero__mode\" data-ydd-mode=\"operate\" role=\"tab\" aria-selected=\"false\" > <span class=\"ydd-about-hero__mode-number\"> 03 <\/span> <span> <small>Operate<\/small> <strong>Connect the workflow<\/strong> <\/span> <\/button> <\/div> <p class=\"ydd-about-hero__interaction-hint\"> Select a stage to explore the system <\/p> <\/div> <\/div> <\/section> <style> \/* ========================================================= ABOUT HERO FOUNDATION ========================================================== *\/ .ydd-about-hero { --ydd-about-ink: #11162b; --ydd-about-text: #5f667d; --ydd-about-muted: #8c91a4; --ydd-about-purple: #6d56f4; --ydd-about-purple-deep: #543de0; --ydd-about-blue: #418fe8; --ydd-about-cyan: #12c7d1; --ydd-about-green: #28c99d; --ydd-about-white: #ffffff; --ydd-about-border: rgba(71, 67, 117, 0.11); position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; width: 100vw; min-height: min(940px, 100vh); margin-left: calc(50% - 50vw); padding: clamp(105px, 9vw, 145px) 22px clamp(75px, 7vw, 105px); color: var(--ydd-about-ink); background: radial-gradient( circle at 7% 13%, rgba(109, 86, 244, 0.17), transparent 31% ), radial-gradient( circle at 94% 82%, rgba(18, 199, 209, 0.15), transparent 31% ), linear-gradient( 135deg, #f8f7ff 0%, #ffffff 47%, #f2fdff 100% ); font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif; } .ydd-about-hero *, .ydd-about-hero *::before, .ydd-about-hero *::after { box-sizing: border-box; } .ydd-about-hero button, .ydd-about-hero a { font-family: inherit; } .ydd-about-hero__inner { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(530px, 1.12fr); align-items: center; gap: clamp(52px, 7vw, 100px); width: min(1320px, 100%); margin: 0 auto; } \/* ========================================================= BACKGROUND ELEMENTS ========================================================== *\/ .ydd-about-hero__grid { position: absolute; z-index: 0; inset: 0; opacity: 0.55; pointer-events: none; background-image: linear-gradient( rgba(84, 70, 166, 0.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(84, 70, 166, 0.035) 1px, transparent 1px ); background-size: 50px 50px; mask-image: linear-gradient( to bottom, transparent 0%, #000 15%, #000 85%, transparent 100% ); } .ydd-about-hero__glow { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; filter: blur(25px); animation: yddAboutGlowFloat 13s ease-in-out infinite; } .ydd-about-hero__glow--purple { top: -210px; left: -170px; width: 480px; height: 480px; background: radial-gradient( circle, rgba(111, 85, 246, 0.27), transparent 70% ); } .ydd-about-hero__glow--cyan { right: -190px; bottom: -220px; width: 510px; height: 510px; background: radial-gradient( circle, rgba(13, 205, 210, 0.22), transparent 70% ); animation-delay: -6s; } @keyframes yddAboutGlowFloat { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(25px, -22px, 0) scale(1.08); } } \/* ========================================================= LEFT CONTENT ========================================================== *\/ .ydd-about-hero__content { position: relative; z-index: 5; opacity: 0; transform: translateY(26px); } .ydd-about-hero.is-visible .ydd-about-hero__content { animation: yddAboutContentIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes yddAboutContentIn { to { opacity: 1; transform: translateY(0); } } .ydd-about-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; padding: 9px 14px; border: 1px solid rgba(109, 86, 244, 0.15); border-radius: 999px; color: var(--ydd-about-purple-deep); background: rgba(255, 255, 255, 0.79); box-shadow: 0 10px 30px rgba(70, 56, 143, 0.07); font-size: 10px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; backdrop-filter: blur(14px); } .ydd-about-hero__eyebrow-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ydd-about-green); box-shadow: 0 0 0 5px rgba(40, 201, 157, 0.12); } .ydd-about-hero__eyebrow-dot::after { content: \"\"; position: absolute; inset: -5px; border: 1px solid rgba(40, 201, 157, 0.5); border-radius: inherit; animation: yddAboutPulse 2.3s ease-out infinite; } @keyframes yddAboutPulse { 0% { opacity: 0.7; transform: scale(0.7); } 80%, 100% { opacity: 0; transform: scale(1.9); } } .ydd-about-hero__title { max-width: 720px; margin: 0; color: var(--ydd-about-ink); font-family: Poppins, Inter, sans-serif; font-size: clamp(47px, 5.7vw, 82px); font-weight: 700; line-height: 0.98; letter-spacing: -0.058em; } .ydd-about-hero__title span { display: block; margin-top: 11px; color: transparent; background: linear-gradient( 90deg, #6c53f4 0%, #795df7 28%, #468be6 67%, #0ec2ca 100% ); background-size: 185% auto; -webkit-background-clip: text; background-clip: text; animation: yddAboutGradientText 7s ease-in-out infinite; } @keyframes yddAboutGradientText { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .ydd-about-hero__lead { max-width: 670px; margin: 27px 0 0; color: var(--ydd-about-text); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.76; } \/* ========================================================= UNITED STATES TO THAILAND ROUTE ========================================================== *\/ .ydd-about-hero__story-route { display: flex; align-items: center; gap: 14px; max-width: 590px; margin-top: 30px; padding: 16px 18px; border: 1px solid var(--ydd-about-border); border-radius: 18px; background: rgba(255, 255, 255, 0.71); box-shadow: 0 15px 38px rgba(63, 54, 123, 0.06); backdrop-filter: blur(13px); } .ydd-about-hero__route-stop { display: flex; flex: 1; align-items: center; gap: 11px; min-width: 0; } .ydd-about-hero__route-marker { display: grid; flex: 0 0 auto; place-items: center; width: 35px; height: 35px; border-radius: 11px; color: var(--ydd-about-purple); background: linear-gradient( 135deg, rgba(109, 86, 244, 0.11), rgba(18, 199, 209, 0.07) ); font-size: 9px; font-weight: 850; } .ydd-about-hero__route-stop small, .ydd-about-hero__route-stop strong { display: block; } .ydd-about-hero__route-stop small { margin-bottom: 2px; color: var(--ydd-about-muted); font-size: 9px; line-height: 1.3; } .ydd-about-hero__route-stop strong { color: var(--ydd-about-ink); font-size: 13px; } .ydd-about-hero__route-line { position: relative; flex: 0 0 55px; height: 1px; overflow: visible; background: linear-gradient( 90deg, rgba(109, 86, 244, 0.2), rgba(18, 199, 209, 0.45) ); } .ydd-about-hero__route-line::before, .ydd-about-hero__route-line::after { content: \"\"; position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%; transform: translateY(-50%); } .ydd-about-hero__route-line::before { left: 0; background: var(--ydd-about-purple); } .ydd-about-hero__route-line::after { right: 0; background: var(--ydd-about-cyan); } .ydd-about-hero__route-line span { position: absolute; top: 50%; left: 2px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: var(--ydd-about-cyan); box-shadow: 0 3px 10px rgba(18, 199, 209, 0.35); transform: translateY(-50%); animation: yddAboutRouteMove 2.5s ease-in-out infinite; } @keyframes yddAboutRouteMove { 0%, 100% { left: 2px; } 50% { left: calc(100% - 10px); } } \/* ========================================================= PRIMARY ACTION BUTTON ========================================================== *\/ .ydd-about-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; } .ydd-about-hero__button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 175px; min-height: 54px; padding: 0 21px; border-radius: 14px; font-size: 12px; font-weight: 800; text-decoration: none !important; transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .ydd-about-hero__button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease; } .ydd-about-hero__button--primary { border: 1px solid transparent; color: #fff !important; background: linear-gradient( 135deg, var(--ydd-about-purple), var(--ydd-about-blue) ) !important; box-shadow: 0 13px 28px rgba(93, 72, 223, 0.26); } .ydd-about-hero__button--primary:hover, .ydd-about-hero__button--primary:focus { color: #fff !important; background: linear-gradient( 135deg, #7d63ff, #38a3e9 ) !important; box-shadow: 0 18px 36px rgba(93, 72, 223, 0.34); transform: translateY(-3px); } .ydd-about-hero__button--primary:hover svg { transform: translateX(4px); } \/* ========================================================= TRUST POINTS ========================================================== *\/ .ydd-about-hero__trust-row { display: flex; flex-wrap: wrap; gap: 21px; margin-top: 24px; } .ydd-about-hero__trust-row > div { display: flex; align-items: center; gap: 8px; color: #646b80; font-size: 11px; font-weight: 700; } .ydd-about-hero__trust-check { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #168e70; background: rgba(40, 201, 157, 0.12); font-size: 10px; font-weight: 900; } \/* ========================================================= INTERACTIVE VISUAL FOUNDATION ========================================================== *\/ .ydd-about-hero__visual { --ydd-rotate-x: 0deg; --ydd-rotate-y: 0deg; --ydd-shift-x: 0px; --ydd-shift-y: 0px; position: relative; min-width: 0; padding: 45px 15px 8px; perspective: 1500px; opacity: 0; transform: translateY(30px); } .ydd-about-hero.is-visible .ydd-about-hero__visual { animation: yddAboutVisualIn 0.95s 0.12s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes yddAboutVisualIn { to { opacity: 1; transform: translateY(0); } } \/* ========================================================= DECORATIVE ORBITS ========================================================== *\/ .ydd-about-hero__orbit { position: absolute; z-index: -1; border: 1px solid rgba(109, 86, 244, 0.12); border-radius: 50%; pointer-events: none; } .ydd-about-hero__orbit::after { content: \"\"; position: absolute; top: 50%; left: -5px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--ydd-about-cyan); box-shadow: 0 4px 12px rgba(18, 199, 209, 0.32); } .ydd-about-hero__orbit--one { top: 0; right: 1%; width: 450px; height: 450px; animation: yddAboutOrbit 22s linear infinite; } .ydd-about-hero__orbit--two { right: 15%; bottom: 70px; width: 290px; height: 290px; opacity: 0.55; animation: yddAboutOrbitReverse 17s linear infinite; } @keyframes yddAboutOrbit { to { transform: rotate(360deg); } } @keyframes yddAboutOrbitReverse { to { transform: rotate(-360deg); } } \/* ========================================================= MAIN BROWSER SYSTEM ========================================================== *\/ .ydd-about-hero__system { position: relative; z-index: 3; overflow: hidden; border: 1px solid rgba(109, 86, 244, 0.16); border-radius: 25px; background: rgba(255, 255, 255, 0.91); box-shadow: 0 37px 85px rgba(44, 40, 91, 0.17), 0 10px 30px rgba(68, 54, 145, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); transform: rotateX(var(--ydd-rotate-x)) rotateY(var(--ydd-rotate-y)) translate3d( var(--ydd-shift-x), var(--ydd-shift-y), 0 ); transform-style: preserve-3d; transition: transform 0.22s ease-out, border-color 0.35s ease, box-shadow 0.35s ease; } .ydd-about-hero__visual:hover .ydd-about-hero__system { border-color: rgba(109, 86, 244, 0.28); box-shadow: 0 43px 95px rgba(44, 40, 91, 0.2), 0 15px 35px rgba(68, 54, 145, 0.1); } .ydd-about-hero__system.is-switching { animation: yddAboutSystemSwitch 0.46s ease; } @keyframes yddAboutSystemSwitch { 0% { filter: saturate(1); transform: rotateX(var(--ydd-rotate-x)) rotateY(var(--ydd-rotate-y)) scale(1); } 45% { filter: saturate(1.16); transform: rotateX(var(--ydd-rotate-x)) rotateY(var(--ydd-rotate-y)) scale(0.992); } 100% { filter: saturate(1); transform: rotateX(var(--ydd-rotate-x)) rotateY(var(--ydd-rotate-y)) scale(1); } } \/* ========================================================= BROWSER BAR ========================================================== *\/ .ydd-about-hero__browser-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 53px; padding: 0 17px; border-bottom: 1px solid rgba(71, 67, 117, 0.09); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.96), rgba(247, 247, 252, 0.91) ); } .ydd-about-hero__browser-dots { display: flex; gap: 6px; } .ydd-about-hero__browser-dots span { width: 8px; height: 8px; border-radius: 50%; } .ydd-about-hero__browser-dots span:nth-child(1) { background: #ff8f9a; } .ydd-about-hero__browser-dots span:nth-child(2) { background: #ffc95d; } .ydd-about-hero__browser-dots span:nth-child(3) { background: #43d3aa; } .ydd-about-hero__browser-address { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 280px; min-height: 29px; padding: 0 11px; overflow: hidden; border: 1px solid rgba(71, 67, 117, 0.08); border-radius: 8px; color: #9095a6; background: rgba(245, 246, 251, 0.91); font-size: 8px; white-space: nowrap; text-overflow: ellipsis; } .ydd-about-hero__secure-icon { display: flex; color: var(--ydd-about-green); } .ydd-about-hero__secure-icon svg { width: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ydd-about-hero__browser-status { padding: 6px 9px; border: 1px solid rgba(40, 201, 157, 0.13); border-radius: 8px; color: #23846c; background: rgba(40, 201, 157, 0.08); font-size: 8px; font-weight: 800; } \/* ========================================================= DASHBOARD STRUCTURE ========================================================== *\/ .ydd-about-hero__dashboard { display: grid; grid-template-columns: 61px minmax(0, 1fr); min-height: 440px; } \/* ========================================================= DASHBOARD SIDE NAVIGATION ========================================================== *\/ .ydd-about-hero__dashboard-nav { display: flex; align-items: center; flex-direction: column; gap: 15px; padding: 17px 10px; border-right: 1px solid rgba(71, 67, 117, 0.08); background: linear-gradient( 180deg, #1d2143 0%, #262957 100% ); } .ydd-about-hero__dashboard-logo { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 9px; border-radius: 11px; color: #fff; background: linear-gradient( 135deg, var(--ydd-about-purple), var(--ydd-about-cyan) ); box-shadow: 0 9px 18px rgba(109, 86, 244, 0.3); font-size: 9px; font-weight: 850; } .ydd-about-hero__dashboard-nav > span { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; color: rgba(255, 255, 255, 0.46); transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .ydd-about-hero__dashboard-nav > span.is-active { color: #fff; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } .ydd-about-hero__dashboard-nav > span svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ydd-about-hero__dashboard-profile { margin-top: auto; color: #fff !important; background: linear-gradient( 135deg, var(--ydd-about-purple), var(--ydd-about-blue) ) !important; font-size: 9px; font-weight: 800; } \/* ========================================================= DASHBOARD MAIN ========================================================== *\/ .ydd-about-hero__dashboard-main { min-width: 0; padding: 25px; background: radial-gradient( circle at 100% 0%, rgba(109, 86, 244, 0.08), transparent 35% ), linear-gradient( 135deg, #fbfbff, #f7fcff ); } .ydd-about-hero__dashboard-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .ydd-about-hero__dashboard-label { display: block; margin-bottom: 7px; color: var(--ydd-about-purple); font-size: 7px; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; } .ydd-about-hero__dashboard-heading h2 { max-width: 370px; margin: 0; color: var(--ydd-about-ink); font-family: Poppins, Inter, sans-serif; font-size: clamp(18px, 2vw, 25px); font-weight: 650; line-height: 1.17; letter-spacing: -0.035em; } .ydd-about-hero__dashboard-badge { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid rgba(40, 201, 157, 0.13); border-radius: 9px; color: #27866e; background: rgba(40, 201, 157, 0.07); font-size: 7px; font-weight: 800; } .ydd-about-hero__dashboard-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--ydd-about-green); box-shadow: 0 0 0 4px rgba(40, 201, 157, 0.1); animation: yddAboutStatusBlink 2s ease-in-out infinite; } @keyframes yddAboutStatusBlink { 50% { opacity: 0.45; } } .ydd-about-hero__dashboard-description { max-width: 455px; margin: 10px 0 0; color: #747a8d; font-size: 10px; line-height: 1.6; } \/* ========================================================= DASHBOARD METRICS ========================================================== *\/ .ydd-about-hero__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 21px; } .ydd-about-hero__metric { padding: 13px; border: 1px solid rgba(71, 67, 117, 0.08); border-radius: 12px; background: rgba(255, 255, 255, 0.78); box-shadow: 0 7px 18px rgba(61, 52, 116, 0.04); } .ydd-about-hero__metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; } .ydd-about-hero__metric-top span { color: #878b9e; font-size: 7px; font-weight: 700; } .ydd-about-hero__metric-top strong { color: var(--ydd-about-purple); font-size: 11px; } .ydd-about-hero__progress { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(109, 86, 244, 0.08); } .ydd-about-hero__progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient( 90deg, var(--ydd-about-purple), var(--ydd-about-blue), var(--ydd-about-cyan) ); transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); } \/* ========================================================= CHART AND ACTIVITY GRID ========================================================== *\/ .ydd-about-hero__dashboard-grid { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: 12px; margin-top: 13px; } .ydd-about-hero__chart-card, .ydd-about-hero__activity-card { min-width: 0; padding: 14px; border: 1px solid rgba(71, 67, 117, 0.08); border-radius: 14px; background: rgba(255, 255, 255, 0.81); box-shadow: 0 8px 21px rgba(61, 52, 116, 0.045); } .ydd-about-hero__card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .ydd-about-hero__card-heading small, .ydd-about-hero__card-heading strong { display: block; } .ydd-about-hero__card-heading small { margin-bottom: 3px; color: #969aac; font-size: 6px; } .ydd-about-hero__card-heading strong { color: var(--ydd-about-ink); font-size: 9px; } .ydd-about-hero__trend { padding: 5px 7px; border-radius: 7px; color: #25866d; background: rgba(40, 201, 157, 0.08); font-size: 6px; font-weight: 800; } \/* ========================================================= CHART ========================================================== *\/ .ydd-about-hero__chart { display: flex; align-items: flex-end; gap: 7px; height: 85px; margin-top: 14px; padding-top: 9px; border-bottom: 1px solid rgba(71, 67, 117, 0.08); background-image: linear-gradient( rgba(71, 67, 117, 0.045) 1px, transparent 1px ); background-size: 100% 25%; } .ydd-about-hero__chart span { flex: 1; min-width: 5px; border-radius: 5px 5px 1px 1px; background: linear-gradient( 180deg, var(--ydd-about-purple), var(--ydd-about-cyan) ); box-shadow: 0 5px 10px rgba(109, 86, 244, 0.11); transform-origin: bottom; animation: yddAboutChartGrow 1.1s ease both; } .ydd-about-hero__chart span:nth-child(2) { animation-delay: 0.08s; } .ydd-about-hero__chart span:nth-child(3) { animation-delay: 0.15s; } .ydd-about-hero__chart span:nth-child(4) { animation-delay: 0.22s; } .ydd-about-hero__chart span:nth-child(5) { animation-delay: 0.29s; } .ydd-about-hero__chart span:nth-child(6) { animation-delay: 0.36s; } .ydd-about-hero__chart span:nth-child(7) { animation-delay: 0.43s; } @keyframes yddAboutChartGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } .ydd-about-hero__chart-days { display: flex; justify-content: space-between; margin-top: 6px; color: #a2a6b5; font-size: 5px; } \/* ========================================================= ACTIVITY CARD ========================================================== *\/ .ydd-about-hero__activity-count { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 8px; color: var(--ydd-about-purple); background: rgba(109, 86, 244, 0.08); font-size: 7px; font-weight: 850; } .ydd-about-hero__activity-list { display: grid; gap: 11px; margin-top: 17px; } .ydd-about-hero__activity-list > div { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 8px; } .ydd-about-hero__activity-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #23866d; background: rgba(40, 201, 157, 0.1); font-size: 8px; font-weight: 900; } .ydd-about-hero__activity-list p { min-width: 0; margin: 0; } .ydd-about-hero__activity-list strong, .ydd-about-hero__activity-list small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ydd-about-hero__activity-list strong { color: #53596c; font-size: 7px; } .ydd-about-hero__activity-list small { margin-top: 2px; color: #a0a4b3; font-size: 6px; } \/* ========================================================= FLOATING CARDS ========================================================== *\/ .ydd-about-hero__floating-card { position: absolute; z-index: 6; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(109, 86, 244, 0.13); background: rgba(255, 255, 255, 0.91); box-shadow: 0 18px 42px rgba(51, 45, 100, 0.13); backdrop-filter: blur(17px); } .ydd-about-hero__floating-card--automation { top: 4px; right: -17px; min-width: 190px; padding: 12px 14px; border-radius: 16px; animation: yddAboutFloatOne 5s ease-in-out infinite; } .ydd-about-hero__floating-icon { display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #fff; background: linear-gradient( 135deg, var(--ydd-about-purple), var(--ydd-about-blue) ); box-shadow: 0 8px 18px rgba(109, 86, 244, 0.24); } .ydd-about-hero__floating-icon svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ydd-about-hero__floating-card small, .ydd-about-hero__floating-card strong { display: block; } .ydd-about-hero__floating-card small { color: #9297a8; font-size: 7px; } .ydd-about-hero__floating-card strong { margin-top: 2px; color: var(--ydd-about-ink); font-size: 10px; } .ydd-about-hero__live-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--ydd-about-green); box-shadow: 0 0 0 5px rgba(40, 201, 157, 0.11); } .ydd-about-hero__floating-card--confirmation { right: 18px; bottom: 102px; min-width: 190px; padding: 13px 15px; border-radius: 16px; animation: yddAboutFloatTwo 5.7s ease-in-out infinite; } .ydd-about-hero__confirmation-check { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: linear-gradient( 135deg, var(--ydd-about-green), var(--ydd-about-cyan) ); box-shadow: 0 8px 18px rgba(40, 201, 157, 0.24); } .ydd-about-hero__confirmation-check svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; } @keyframes yddAboutFloatOne { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-9px) rotate(1deg); } } @keyframes yddAboutFloatTwo { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(8px) rotate(-1deg); } } \/* ========================================================= INTERACTIVE MODE CONTROLS ========================================================== *\/ .ydd-about-hero__modes { position: relative; z-index: 8; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 14px 21px 0; padding: 7px; border: 1px solid rgba(109, 86, 244, 0.12); border-radius: 18px; background: rgba(255, 255, 255, 0.79); box-shadow: 0 15px 38px rgba(55, 47, 111, 0.09); backdrop-filter: blur(15px); } .ydd-about-hero__mode { display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; min-height: 57px; padding: 8px 9px; border: 1px solid transparent !important; border-radius: 12px; color: #6e7488 !important; background: transparent !important; box-shadow: none !important; text-align: left; cursor: pointer; transition: color 0.24s ease, border-color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease; } .ydd-about-hero__mode:hover { border-color: rgba(109, 86, 244, 0.14) !important; color: var(--ydd-about-purple-deep) !important; background: linear-gradient( 135deg, rgba(109, 86, 244, 0.08), rgba(18, 199, 209, 0.055) ) !important; transform: translateY(-1px); } .ydd-about-hero__mode.is-active { border-color: rgba(109, 86, 244, 0.14) !important; color: var(--ydd-about-purple-deep) !important; background: linear-gradient( 135deg, rgba(109, 86, 244, 0.12), rgba(18, 199, 209, 0.075) ) !important; box-shadow: 0 8px 20px rgba(68, 55, 142, 0.09) !important; } .ydd-about-hero__mode-number { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: var(--ydd-about-purple); background: rgba(109, 86, 244, 0.08); font-size: 7px; font-weight: 850; transition: color 0.24s ease, background 0.24s ease, transform 0.24s ease; } .ydd-about-hero__mode.is-active .ydd-about-hero__mode-number { color: #fff; background: linear-gradient( 135deg, var(--ydd-about-purple), var(--ydd-about-blue) ); box-shadow: 0 7px 15px rgba(109, 86, 244, 0.22); transform: scale(1.05); } .ydd-about-hero__mode small, .ydd-about-hero__mode strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ydd-about-hero__mode small { margin-bottom: 2px; color: var(--ydd-about-purple); font-size: 6px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; } .ydd-about-hero__mode strong { color: inherit; font-size: 8px; line-height: 1.3; } .ydd-about-hero__interaction-hint { margin: 9px 0 0; color: var(--ydd-about-muted); font-size: 8px; text-align: center; } \/* ========================================================= MODE-SPECIFIC COLORS ========================================================== *\/ .ydd-about-hero__visual[data-mode=\"convert\"] .ydd-about-hero__progress span { background: linear-gradient( 90deg, #497ce9, #16bdd2 ); } .ydd-about-hero__visual[data-mode=\"operate\"] .ydd-about-hero__progress span { background: linear-gradient( 90deg, #6853ed, #8b63ef, #27c69d ); } .ydd-about-hero__visual[data-mode=\"convert\"] .ydd-about-hero__chart span { background: linear-gradient( 180deg, #448ce8, #12c7d1 ); } .ydd-about-hero__visual[data-mode=\"operate\"] .ydd-about-hero__chart span { background: linear-gradient( 180deg, #7656ee, #28c99d ); } \/* ========================================================= ENLARGED DESKTOP SYSTEM ========================================================== *\/ @media (min-width: 1121px) { .ydd-about-hero__inner { width: min(1540px, 100%); grid-template-columns: minmax(435px, 0.7fr) minmax(720px, 1.3fr); gap: clamp(42px, 4vw, 70px); } .ydd-about-hero__content { align-self: center; } .ydd-about-hero__title { font-size: clamp(56px, 5.2vw, 82px); } .ydd-about-hero__visual { width: 100%; padding: 62px 4px 10px; } .ydd-about-hero__system { border-radius: 29px; box-shadow: 0 46px 105px rgba(44, 40, 91, 0.19), 0 16px 40px rgba(68, 54, 145, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95); } \/* Browser bar *\/ .ydd-about-hero__browser-bar { min-height: 65px; padding: 0 22px; gap: 18px; } .ydd-about-hero__browser-dots { gap: 7px; } .ydd-about-hero__browser-dots span { width: 10px; height: 10px; } .ydd-about-hero__browser-address { max-width: 365px; min-height: 36px; padding: 0 14px; border-radius: 10px; font-size: 10px; } .ydd-about-hero__secure-icon svg { width: 13px; } .ydd-about-hero__browser-status { padding: 8px 12px; border-radius: 9px; font-size: 9px; } \/* Dashboard *\/ .ydd-about-hero__dashboard { grid-template-columns: 78px minmax(0, 1fr); min-height: 560px; } .ydd-about-hero__dashboard-nav { gap: 20px; padding: 23px 13px; } .ydd-about-hero__dashboard-logo { width: 45px; height: 45px; margin-bottom: 11px; border-radius: 14px; font-size: 12px; } .ydd-about-hero__dashboard-nav > span { width: 43px; height: 43px; border-radius: 13px; } .ydd-about-hero__dashboard-nav > span svg { width: 20px; height: 20px; } .ydd-about-hero__dashboard-profile { font-size: 12px; } .ydd-about-hero__dashboard-main { padding: 36px 34px 32px; } .ydd-about-hero__dashboard-label { margin-bottom: 10px; font-size: 9px; } .ydd-about-hero__dashboard-heading h2 { max-width: 520px; font-size: clamp(28px, 2.2vw, 36px); line-height: 1.13; } .ydd-about-hero__dashboard-badge { gap: 8px; padding: 10px 13px; border-radius: 11px; font-size: 9px; } .ydd-about-hero__dashboard-badge span { width: 8px; height: 8px; } .ydd-about-hero__dashboard-description { max-width: 620px; margin-top: 14px; font-size: 12px; line-height: 1.65; } \/* Metrics *\/ .ydd-about-hero__metrics { gap: 16px; margin-top: 28px; } .ydd-about-hero__metric { padding: 19px; border-radius: 16px; } .ydd-about-hero__metric-top { margin-bottom: 13px; } .ydd-about-hero__metric-top span { font-size: 9px; } .ydd-about-hero__metric-top strong { font-size: 15px; } .ydd-about-hero__progress { height: 7px; } \/* Chart and activity *\/ .ydd-about-hero__dashboard-grid { grid-template-columns: 1.22fr 0.78fr; gap: 17px; margin-top: 17px; } .ydd-about-hero__chart-card, .ydd-about-hero__activity-card { padding: 20px; border-radius: 18px; } .ydd-about-hero__card-heading small { margin-bottom: 5px; font-size: 8px; } .ydd-about-hero__card-heading strong { font-size: 12px; } .ydd-about-hero__trend { padding: 7px 10px; border-radius: 9px; font-size: 8px; } .ydd-about-hero__chart { height: 130px; gap: 10px; margin-top: 20px; padding-top: 13px; } .ydd-about-hero__chart-days { margin-top: 9px; font-size: 7px; } .ydd-about-hero__activity-count { width: 30px; height: 30px; border-radius: 10px; font-size: 9px; } .ydd-about-hero__activity-list { gap: 17px; margin-top: 22px; } .ydd-about-hero__activity-list > div { grid-template-columns: 34px minmax(0, 1fr); gap: 11px; } .ydd-about-hero__activity-icon { width: 33px; height: 33px; border-radius: 11px; font-size: 10px; } .ydd-about-hero__activity-list strong { font-size: 9px; } .ydd-about-hero__activity-list small { margin-top: 3px; font-size: 7px; } \/* Floating automation card *\/ .ydd-about-hero__floating-card--automation { top: 0; right: -24px; min-width: 225px; padding: 16px 18px; border-radius: 19px; } .ydd-about-hero__floating-icon { width: 45px; height: 45px; border-radius: 14px; } .ydd-about-hero__floating-icon svg { width: 22px; } .ydd-about-hero__floating-card small { font-size: 9px; } .ydd-about-hero__floating-card strong { margin-top: 3px; font-size: 12px; } .ydd-about-hero__live-dot { width: 8px; height: 8px; } \/* Floating confirmation card *\/ .ydd-about-hero__floating-card--confirmation { right: 3px; bottom: 136px; min-width: 235px; padding: 16px 19px; border-radius: 19px; } .ydd-about-hero__confirmation-check { width: 43px; height: 43px; } .ydd-about-hero__confirmation-check svg { width: 21px; } \/* Mode buttons *\/ .ydd-about-hero__modes { gap: 12px; margin: 18px 25px 0; padding: 10px; border-radius: 21px; } .ydd-about-hero__mode { grid-template-columns: 39px minmax(0, 1fr); gap: 11px; min-height: 76px; padding: 12px 13px; border-radius: 15px; } .ydd-about-hero__mode-number { width: 39px; height: 39px; border-radius: 12px; font-size: 9px; } .ydd-about-hero__mode small { margin-bottom: 4px; font-size: 8px; } .ydd-about-hero__mode strong { font-size: 10px; line-height: 1.35; } .ydd-about-hero__interaction-hint { margin-top: 12px; font-size: 9px; } } \/* ========================================================= TABLET ========================================================== *\/ @media (max-width: 1120px) { .ydd-about-hero { min-height: auto; } .ydd-about-hero__inner { grid-template-columns: 1fr; max-width: 900px; } .ydd-about-hero__content { max-width: 790px; margin: 0 auto; text-align: center; } .ydd-about-hero__lead, .ydd-about-hero__story-route { margin-right: auto; margin-left: auto; } .ydd-about-hero__actions, .ydd-about-hero__trust-row { justify-content: center; } .ydd-about-hero__visual { width: min(790px, 100%); margin: 0 auto; } } \/* ========================================================= MOBILE ========================================================== *\/ @media (max-width: 720px) { .ydd-about-hero { padding-right: 15px; padding-left: 15px; } .ydd-about-hero__header { text-align: left; } .ydd-about-hero__content { text-align: left; } .ydd-about-hero__title { font-size: clamp(42px, 12vw, 61px); } .ydd-about-hero__lead { font-size: 16px; } .ydd-about-hero__story-route { align-items: stretch; flex-direction: column; max-width: 430px; margin-left: 0; } .ydd-about-hero__route-line { width: 1px; height: 31px; margin-left: 17px; background: linear-gradient( 180deg, rgba(109, 86, 244, 0.24), rgba(18, 199, 209, 0.45) ); } .ydd-about-hero__route-line::before, .ydd-about-hero__route-line::after { top: auto; left: 50%; transform: translateX(-50%); } .ydd-about-hero__route-line::before { top: 0; } .ydd-about-hero__route-line::after { right: auto; bottom: 0; } .ydd-about-hero__route-line span { top: 2px; left: 50%; transform: translateX(-50%); animation: yddAboutRouteMoveMobile 2.4s ease-in-out infinite; } @keyframes yddAboutRouteMoveMobile { 0%, 100% { top: 2px; } 50% { top: calc(100% - 10px); } } .ydd-about-hero__actions { justify-content: flex-start; flex-direction: column; } .ydd-about-hero__button { width: 100%; } .ydd-about-hero__trust-row { justify-content: flex-start; } .ydd-about-hero__dashboard { grid-template-columns: 46px minmax(0, 1fr); min-height: 420px; } .ydd-about-hero__dashboard-nav { padding: 14px 6px; } .ydd-about-hero__dashboard-logo, .ydd-about-hero__dashboard-nav > span { width: 30px; height: 30px; } .ydd-about-hero__dashboard-main { padding: 18px 15px; } .ydd-about-hero__dashboard-heading { align-items: flex-start; flex-direction: column; } .ydd-about-hero__dashboard-grid { grid-template-columns: 1fr; } .ydd-about-hero__activity-card { display: none; } .ydd-about-hero__floating-card--automation { right: 2px; } .ydd-about-hero__floating-card--confirmation { right: 7px; bottom: 132px; } .ydd-about-hero__modes { grid-template-columns: 1fr; margin-right: 7px; margin-left: 7px; } .ydd-about-hero__mode { grid-template-columns: 31px minmax(0, 1fr); } .ydd-about-hero__mode small, .ydd-about-hero__mode strong { white-space: normal; } } \/* ========================================================= SMALL MOBILE ========================================================== *\/ @media (max-width: 480px) { .ydd-about-hero__eyebrow { font-size: 8px; } .ydd-about-hero__title { font-size: clamp(39px, 12vw, 53px); } .ydd-about-hero__trust-row { align-items: flex-start; flex-direction: column; gap: 10px; } .ydd-about-hero__visual { padding-top: 61px; } .ydd-about-hero__browser-address { max-width: 160px; } .ydd-about-hero__browser-status { display: none; } .ydd-about-hero__metrics { grid-template-columns: 1fr; } .ydd-about-hero__floating-card--automation { min-width: 174px; } .ydd-about-hero__floating-card--confirmation { display: none; } } \/* ========================================================= ACCESSIBILITY ========================================================== *\/ .ydd-about-hero a:focus-visible, .ydd-about-hero button:focus-visible { outline: 3px solid rgba(18, 199, 209, 0.48) !important; outline-offset: 3px; } \/* ========================================================= REDUCED MOTION ========================================================== *\/ @media (prefers-reduced-motion: reduce) { .ydd-about-hero *, .ydd-about-hero *::before, .ydd-about-hero *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .ydd-about-hero__content, .ydd-about-hero__visual { opacity: 1; transform: none; } } <\/style> <script> (function () { \"use strict\"; const section = document.querySelector(\"#ydd-about-hero\"); if (!section || section.dataset.initialized === \"true\") { return; } section.dataset.initialized = \"true\"; const visual = section.querySelector(\"[data-ydd-visual]\"); const system = section.querySelector( \".ydd-about-hero__system\" ); const modeButtons = Array.from( section.querySelectorAll(\"[data-ydd-mode]\") ); const title = section.querySelector( \"[data-ydd-title]\" ); const description = section.querySelector( \"[data-ydd-description]\" ); const metricOneLabel = section.querySelector( \"[data-ydd-metric-one-label]\" ); const metricOneValue = section.querySelector( \"[data-ydd-metric-one-value]\" ); const metricTwoLabel = section.querySelector( \"[data-ydd-metric-two-label]\" ); const metricTwoValue = section.querySelector( \"[data-ydd-metric-two-value]\" ); const progressOne = section.querySelector( \"[data-ydd-progress-one]\" ); const progressTwo = section.querySelector( \"[data-ydd-progress-two]\" ); const chartLabel = section.querySelector( \"[data-ydd-chart-label]\" ); const eventOne = section.querySelector( \"[data-ydd-event-one]\" ); const eventTwo = section.querySelector( \"[data-ydd-event-two]\" ); const eventThree = section.querySelector( \"[data-ydd-event-three]\" ); const floatingStatus = section.querySelector( \"[data-ydd-floating-status]\" ); const floatingSubtitle = section.querySelector( \"[data-ydd-floating-subtitle]\" ); const modes = { attract: { title: \"Turn attention into qualified inquiries.\", description: \"Create clearer customer journeys that move visitors from first impression to meaningful action.\", metricOneLabel: \"Customer clarity\", metricOneValue: \"92%\", metricOneProgress: \"92%\", metricTwoLabel: \"Journey readiness\", metricTwoValue: \"86%\", metricTwoProgress: \"86%\", chartLabel: \"Growing engagement\", eventOne: \"New inquiry captured\", eventTwo: \"Follow-up prepared\", eventThree: \"Team notified\", floatingStatus: \"Inquiry captured\", floatingSubtitle: \"Without manual follow-up\" }, convert: { title: \"Make the next step effortless.\", description: \"Connect bookings, payments, forms, and confirmations into one smooth customer experience.\", metricOneLabel: \"Action simplicity\", metricOneValue: \"95%\", metricOneProgress: \"95%\", metricTwoLabel: \"Response automation\", metricTwoValue: \"89%\", metricTwoProgress: \"89%\", chartLabel: \"More completed actions\", eventOne: \"Booking completed\", eventTwo: \"Payment confirmed\", eventThree: \"Customer updated\", floatingStatus: \"Booking confirmed\", floatingSubtitle: \"Payment and email connected\" }, operate: { title: \"Connect the work behind the screen.\", description: \"Bring customer data, team tasks, reporting, and daily workflows into one dependable system.\", metricOneLabel: \"Workflow visibility\", metricOneValue: \"91%\", metricOneProgress: \"91%\", metricTwoLabel: \"Operational alignment\", metricTwoValue: \"88%\", metricTwoProgress: \"88%\", chartLabel: \"Connected operations\", eventOne: \"Record synchronized\", eventTwo: \"Task automatically assigned\", eventThree: \"Dashboard updated\", floatingStatus: \"Workflow synchronized\", floatingSubtitle: \"Teams and systems connected\" } }; function safelyAnimateText(element, value) { if (!element) { return; } const reducedMotion = window.matchMedia( \"(prefers-reduced-motion: reduce)\" ).matches; if ( reducedMotion || typeof element.animate !== \"function\" ) { element.textContent = value; return; } const fadeOut = element.animate( [ { opacity: 1, transform: \"translateY(0)\" }, { opacity: 0, transform: \"translateY(5px)\" } ], { duration: 140, easing: \"ease\", fill: \"forwards\" } ); fadeOut.finished .then(function () { element.textContent = value; element.animate( [ { opacity: 0, transform: \"translateY(-5px)\" }, { opacity: 1, transform: \"translateY(0)\" } ], { duration: 270, easing: \"cubic-bezier(0.22, 1, 0.36, 1)\", fill: \"forwards\" } ); }) .catch(function () { element.textContent = value; }); } function activateMode(modeName) { const mode = modes[modeName]; if (!mode || !visual) { return; } visual.dataset.mode = modeName; modeButtons.forEach(function (button) { const isActive = button.dataset.yddMode === modeName; button.classList.toggle( \"is-active\", isActive ); button.setAttribute( \"aria-selected\", String(isActive) ); }); if (system) { system.classList.remove(\"is-switching\"); void system.offsetWidth; system.classList.add(\"is-switching\"); window.setTimeout(function () { system.classList.remove(\"is-switching\"); }, 470); } safelyAnimateText(title, mode.title); safelyAnimateText( description, mode.description ); safelyAnimateText( metricOneLabel, mode.metricOneLabel ); safelyAnimateText( metricOneValue, mode.metricOneValue ); safelyAnimateText( metricTwoLabel, mode.metricTwoLabel ); safelyAnimateText( metricTwoValue, mode.metricTwoValue ); safelyAnimateText( chartLabel, mode.chartLabel ); safelyAnimateText( eventOne, mode.eventOne ); safelyAnimateText( eventTwo, mode.eventTwo ); safelyAnimateText( eventThree, mode.eventThree ); safelyAnimateText( floatingStatus, mode.floatingStatus ); safelyAnimateText( floatingSubtitle, mode.floatingSubtitle ); if (progressOne) { progressOne.style.width = mode.metricOneProgress; } if (progressTwo) { progressTwo.style.width = mode.metricTwoProgress; } } modeButtons.forEach(function (button) { button.addEventListener( \"click\", function () { activateMode( button.dataset.yddMode ); } ); button.addEventListener( \"keydown\", function (event) { const currentIndex = modeButtons.indexOf(button); let nextIndex = currentIndex; if ( event.key === \"ArrowRight\" || event.key === \"ArrowDown\" ) { nextIndex = (currentIndex + 1) % modeButtons.length; } if ( event.key === \"ArrowLeft\" || event.key === \"ArrowUp\" ) { nextIndex = ( currentIndex - 1 + modeButtons.length ) % modeButtons.length; } if (nextIndex !== currentIndex) { event.preventDefault(); modeButtons[nextIndex].focus(); activateMode( modeButtons[nextIndex] .dataset .yddMode ); } } ); }); const reducedMotion = window.matchMedia( \"(prefers-reduced-motion: reduce)\" ).matches; const finePointer = window.matchMedia( \"(pointer: fine)\" ).matches; if ( visual && !reducedMotion && finePointer ) { visual.addEventListener( \"pointermove\", function (event) { const rect = visual.getBoundingClientRect(); const x = (event.clientX - rect.left) \/ rect.width; const y = (event.clientY - rect.top) \/ rect.height; const rotateY = (x - 0.5) * 5; const rotateX = (0.5 - y) * 4; visual.style.setProperty( \"--ydd-rotate-x\", rotateX.toFixed(2) + \"deg\" ); visual.style.setProperty( \"--ydd-rotate-y\", rotateY.toFixed(2) + \"deg\" ); visual.style.setProperty( \"--ydd-shift-x\", ((x - 0.5) * 4).toFixed(2) + \"px\" ); visual.style.setProperty( \"--ydd-shift-y\", ((y - 0.5) * 4).toFixed(2) + \"px\" ); } ); visual.addEventListener( \"pointerleave\", function () { visual.style.setProperty( \"--ydd-rotate-x\", \"0deg\" ); visual.style.setProperty( \"--ydd-rotate-y\", \"0deg\" ); visual.style.setProperty( \"--ydd-shift-x\", \"0px\" ); visual.style.setProperty( \"--ydd-shift-y\", \"0px\" ); } ); } if (\"IntersectionObserver\" in window) { const observer = new IntersectionObserver( function (entries) { entries.forEach( function (entry) { if ( entry.isIntersecting ) { section.classList.add( \"is-visible\" ); observer.disconnect(); } } ); }, { threshold: 0.16 } ); observer.observe(section); } else { section.classList.add(\"is-visible\"); } })(); <\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6a558a3 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"6a558a3\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-06ee1ac\" data-id=\"06ee1ac\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f33c5cf elementor-widget elementor-widget-html\" data-id=\"f33c5cf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- =========================================================\r\n     YOUR DIGITAL DESIGNS\r\n     ADVANCED INTERACTIVE QUESTIONS & ANSWERS SECTION\r\n     Paste into one WordPress Custom HTML block\r\n========================================================== -->\r\n\r\n<section class=\"ydd2-faq\" id=\"ydd2-faq\">\r\n    <div class=\"ydd2-faq__grid\"><\/div>\r\n    <div class=\"ydd2-faq__orb ydd2-faq__orb--one\"><\/div>\r\n    <div class=\"ydd2-faq__orb ydd2-faq__orb--two\"><\/div>\r\n    <div class=\"ydd2-faq__orb ydd2-faq__orb--three\"><\/div>\r\n\r\n    <div class=\"ydd2-faq__container\">\r\n\r\n        <!-- SECTION HEADER -->\r\n        <header class=\"ydd2-faq__header\">\r\n            <div class=\"ydd2-faq__eyebrow\">\r\n                <span class=\"ydd2-faq__eyebrow-pulse\"><\/span>\r\n                Answers built around real business decisions\r\n            <\/div>\r\n\r\n            <h2 class=\"ydd2-faq__title\">\r\n                Questions deserve more than\r\n                <span>ordinary answers.<\/span>\r\n            <\/h2>\r\n\r\n            <p class=\"ydd2-faq__intro\">\r\n                Explore how we combine international experience, local market\r\n                understanding, strategic design, and reliable technology to\r\n                help businesses create stronger digital experiences and attract\r\n                more customers.\r\n            <\/p>\r\n        <\/header>\r\n\r\n        <div class=\"ydd2-faq__layout\">\r\n\r\n            <!-- LEFT COLUMN -->\r\n            <aside class=\"ydd2-faq__sidebar\">\r\n\r\n                <!-- MARKET EXPERIENCE CARD -->\r\n                <div class=\"ydd2-faq__market-card\">\r\n                    <div class=\"ydd2-faq__market-top\">\r\n                        <div class=\"ydd2-faq__market-icon\">\r\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                                <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\r\n                                <path d=\"M3 12h18\"><\/path>\r\n                                <path d=\"M12 3c2.7 2.5 4.1 5.5 4.1 9S14.7 18.5 12 21\"><\/path>\r\n                                <path d=\"M12 3c-2.7 2.5-4.1 5.5-4.1 9s1.4 6.5 4.1 9\"><\/path>\r\n                            <\/svg>\r\n                        <\/div>\r\n\r\n                        <span class=\"ydd2-faq__market-label\">\r\n                            International experience\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <h3>\r\n                        Global standards.<br>\r\n                        Local understanding.\r\n                    <\/h3>\r\n\r\n                    <p>\r\n                        Our journey began in the United States and has expanded\r\n                        into Thailand, where we assist local businesses in\r\n                        strengthening their digital presence, reaching more\r\n                        customers, and competing more confidently online.\r\n                    <\/p>\r\n\r\n                    <div class=\"ydd2-faq__market-route\">\r\n                        <div class=\"ydd2-faq__country\">\r\n                            <span class=\"ydd2-faq__country-number\">01<\/span>\r\n                            <div>\r\n                                <strong>United States<\/strong>\r\n                                <small>Where our journey began<\/small>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"ydd2-faq__route-line\">\r\n                            <span><\/span>\r\n                        <\/div>\r\n\r\n                        <div class=\"ydd2-faq__country\">\r\n                            <span class=\"ydd2-faq__country-number\">02<\/span>\r\n                            <div>\r\n                                <strong>Thailand<\/strong>\r\n                                <small>Where we continue to grow<\/small>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ydd2-faq__market-benefit\">\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                            <path d=\"m5 12 4 4L19 6\"><\/path>\r\n                        <\/svg>\r\n\r\n                        <span>\r\n                            International presentation with strategies shaped\r\n                            around your actual market.\r\n                        <\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- PROMISE CARD -->\r\n                <div class=\"ydd2-faq__promise-card\">\r\n                    <span class=\"ydd2-faq__promise-label\">\r\n                        What you can expect\r\n                    <\/span>\r\n\r\n                    <div class=\"ydd2-faq__promise-list\">\r\n                        <div>\r\n                            <span>01<\/span>\r\n                            <p>\r\n                                <strong>Clear direction<\/strong>\r\n                                Recommendations explained without unnecessary jargon.\r\n                            <\/p>\r\n                        <\/div>\r\n\r\n                        <div>\r\n                            <span>02<\/span>\r\n                            <p>\r\n                                <strong>Strategic execution<\/strong>\r\n                                Every feature should serve a real business purpose.\r\n                            <\/p>\r\n                        <\/div>\r\n\r\n                        <div>\r\n                            <span>03<\/span>\r\n                            <p>\r\n                                <strong>Long-term thinking<\/strong>\r\n                                Solutions designed to support future growth.\r\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- CONTACT CARD -->\r\n                <div class=\"ydd2-faq__contact-card\">\r\n                    <div class=\"ydd2-faq__contact-decoration\"><\/div>\r\n\r\n                    <span>Have a question unique to your business?<\/span>\r\n\r\n                    <h3>\r\n                        Let us turn it into a practical solution.\r\n                    <\/h3>\r\n\r\n                    <!-- CHANGE CONTACT LINK HERE -->\r\n                    <a href=\"\/contact-us\/\" class=\"ydd2-faq__contact-button\">\r\n                        Ask our team\r\n\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                            <path d=\"M5 12h14\"><\/path>\r\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\r\n                        <\/svg>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/aside>\r\n\r\n            <!-- RIGHT COLUMN -->\r\n            <div class=\"ydd2-faq__main\">\r\n\r\n                <!-- SEARCH PANEL -->\r\n                <div class=\"ydd2-faq__search-panel\">\r\n\r\n                    <div class=\"ydd2-faq__search-box\">\r\n                        <div class=\"ydd2-faq__search-icon\">\r\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                                <circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"><\/circle>\r\n                                <path d=\"m15.5 15.5 4.5 4.5\"><\/path>\r\n                            <\/svg>\r\n                        <\/div>\r\n\r\n                        <input\r\n                            type=\"search\"\r\n                            class=\"ydd2-faq__search-input\"\r\n                            placeholder=\"Search questions, services, markets, pricing...\"\r\n                            aria-label=\"Search questions and answers\"\r\n                            autocomplete=\"off\"\r\n                        >\r\n\r\n                        <button\r\n                            class=\"ydd2-faq__clear-search\"\r\n                            type=\"button\"\r\n                            aria-label=\"Clear search\"\r\n                            hidden\r\n                        >\r\n                            <span><\/span>\r\n                            <span><\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__search-status\">\r\n                            <span class=\"ydd2-faq__search-dot\"><\/span>\r\n                            Live search\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ydd2-faq__popular\">\r\n                        <span class=\"ydd2-faq__popular-label\">\r\n                            Popular searches:\r\n                        <\/span>\r\n\r\n                        <div class=\"ydd2-faq__popular-buttons\">\r\n                            <button type=\"button\" data-search=\"Thailand market\">\r\n                                Thailand market\r\n                            <\/button>\r\n\r\n                            <button type=\"button\" data-search=\"more customers\">\r\n                                More customers\r\n                            <\/button>\r\n\r\n                            <button type=\"button\" data-search=\"pricing\">\r\n                                Pricing\r\n                            <\/button>\r\n\r\n                            <button type=\"button\" data-search=\"multilingual\">\r\n                                Multilingual\r\n                            <\/button>\r\n\r\n                            <button type=\"button\" data-search=\"support\">\r\n                                Support\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- FILTER CONTROLS -->\r\n                <div class=\"ydd2-faq__controls\">\r\n                    <div\r\n                        class=\"ydd2-faq__filters\"\r\n                        aria-label=\"Filter questions by category\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__filter is-active\"\r\n                            type=\"button\"\r\n                            data-filter=\"all\"\r\n                        >\r\n                            All\r\n                        <\/button>\r\n\r\n                        <button\r\n                            class=\"ydd2-faq__filter\"\r\n                            type=\"button\"\r\n                            data-filter=\"business\"\r\n                        >\r\n                            Business growth\r\n                        <\/button>\r\n\r\n                        <button\r\n                            class=\"ydd2-faq__filter\"\r\n                            type=\"button\"\r\n                            data-filter=\"process\"\r\n                        >\r\n                            Our process\r\n                        <\/button>\r\n\r\n                        <button\r\n                            class=\"ydd2-faq__filter\"\r\n                            type=\"button\"\r\n                            data-filter=\"design\"\r\n                        >\r\n                            Design\r\n                        <\/button>\r\n\r\n                        <button\r\n                            class=\"ydd2-faq__filter\"\r\n                            type=\"button\"\r\n                            data-filter=\"technology\"\r\n                        >\r\n                            Technology\r\n                        <\/button>\r\n\r\n                        <button\r\n                            class=\"ydd2-faq__filter\"\r\n                            type=\"button\"\r\n                            data-filter=\"support\"\r\n                        >\r\n                            Support\r\n                        <\/button>\r\n                    <\/div>\r\n\r\n                    <button\r\n                        class=\"ydd2-faq__expand-all\"\r\n                        type=\"button\"\r\n                        aria-pressed=\"false\"\r\n                    >\r\n                        <span class=\"ydd2-faq__expand-icon\">\r\n                            <span><\/span>\r\n                            <span><\/span>\r\n                        <\/span>\r\n\r\n                        <span class=\"ydd2-faq__expand-text\">\r\n                            Expand all\r\n                        <\/span>\r\n                    <\/button>\r\n                <\/div>\r\n\r\n                <!-- RESULTS -->\r\n                <div class=\"ydd2-faq__results-bar\">\r\n                    <div>\r\n                        <span class=\"ydd2-faq__result-count\">22<\/span>\r\n                        <span class=\"ydd2-faq__result-word\">answers available<\/span>\r\n                    <\/div>\r\n\r\n                    <span class=\"ydd2-faq__result-message\">\r\n                        Select a question to reveal the answer\r\n                    <\/span>\r\n                <\/div>\r\n\r\n                <!-- ACCORDION -->\r\n                <div class=\"ydd2-faq__accordion\">\r\n\r\n                    <!-- QUESTION 01 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item is-open\"\r\n                        data-category=\"business\"\r\n                        data-keywords=\"different difference agency advantage strategy business results conversion customer growth\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"true\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">01<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Our approach<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    What makes Your Digital Designs different from a typical web agency?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"false\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        We do not begin by simply selecting a\r\n                                        template or asking which colors you\r\n                                        prefer. We begin by understanding what\r\n                                        your business needs the website to\r\n                                        accomplish.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        That may mean attracting more inquiries,\r\n                                        building trust, accepting bookings,\r\n                                        selling products, collecting payments,\r\n                                        presenting services more professionally,\r\n                                        or reducing repetitive administrative\r\n                                        work.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        The result is not merely an attractive\r\n                                        website. It is a purposeful digital\r\n                                        system designed around your customers,\r\n                                        operations, and future growth.\r\n                                    <\/p>\r\n\r\n                                    <div class=\"ydd2-faq__answer-feature\">\r\n                                        <span>Our philosophy<\/span>\r\n                                        Beautiful design should support measurable\r\n                                        business goals.\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 02 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"business\"\r\n                        data-keywords=\"experience markets countries usa america united states thailand thai international local businesses\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">02<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Market experience<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    Which countries and markets do you have experience working in?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        Our journey began in the United States,\r\n                                        where strong presentation, convenience,\r\n                                        speed, and clear customer journeys are\r\n                                        essential parts of a successful digital\r\n                                        experience.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        We have since expanded into Thailand,\r\n                                        where we now assist local businesses in\r\n                                        improving how they present themselves,\r\n                                        communicate their value, and attract\r\n                                        customers online.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        This combination allows us to bring\r\n                                        international design and technology\r\n                                        standards into each project while\r\n                                        remaining sensitive to local customer\r\n                                        expectations, language needs, purchasing\r\n                                        habits, and business culture.\r\n                                    <\/p>\r\n\r\n                                    <div class=\"ydd2-faq__answer-feature\">\r\n                                        <span>The advantage<\/span>\r\n                                        International perspective without losing\r\n                                        sight of the local customer.\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 03 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"business\"\r\n                        data-keywords=\"thailand local business customers sales leads attract clients marketing conversion google maps line facebook\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">03<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Thailand growth<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    How can you help a local business in Thailand attract more customers?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        We first identify how customers currently\r\n                                        discover your business and what may be\r\n                                        preventing them from taking the next\r\n                                        step. A visitor may be interested but\r\n                                        leave because the services are unclear,\r\n                                        the website appears outdated, the mobile\r\n                                        experience is difficult, or contacting\r\n                                        the business requires too much effort.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        We then create a clearer path from\r\n                                        discovery to action. This can include\r\n                                        stronger service pages, bilingual\r\n                                        content, prominent LINE or telephone\r\n                                        contact options, booking forms, Google\r\n                                        Maps integration, customer reviews,\r\n                                        persuasive calls to action, and a more\r\n                                        trustworthy visual presentation.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        Our objective is to make it easier for\r\n                                        potential customers to understand why\r\n                                        they should choose you and easier for\r\n                                        them to contact, visit, book, or purchase\r\n                                        from your business.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 04 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"business\"\r\n                        data-keywords=\"international remote worldwide countries outside thailand foreign overseas customers\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">04<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">International projects<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    Do you only work with businesses located in Thailand?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        No. We can work with organizations in\r\n                                        Thailand, the United States, and other\r\n                                        international markets. The discovery,\r\n                                        review, and approval process can be\r\n                                        completed remotely, allowing us to\r\n                                        collaborate efficiently across locations\r\n                                        and time zones.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        For every project, we adapt the content,\r\n                                        customer journey, functionality, and\r\n                                        communication style to the audience the\r\n                                        business wants to reach.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 05 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"process\"\r\n                        data-keywords=\"process steps stages discovery strategy design development testing launch workflow\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">05<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Project process<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    What does the website development process look like?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        Each project moves through a structured\r\n                                        process: discovery, strategy, content\r\n                                        planning, visual direction, development,\r\n                                        testing, refinement, and launch.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        During discovery, we learn about your\r\n                                        business, customers, competitors,\r\n                                        services, and operational needs. We then\r\n                                        determine which pages, messages, and\r\n                                        features are most likely to support your\r\n                                        objectives.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        You are invited to provide feedback at\r\n                                        meaningful milestones, allowing the\r\n                                        project to remain collaborative without\r\n                                        becoming disorganized or unnecessarily\r\n                                        delayed.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 06 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"process\"\r\n                        data-keywords=\"timeline time duration weeks deadline how long launch fast urgent\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">06<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Timeline<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    How long does it normally take to create a website?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        The timeline depends on the number of\r\n                                        pages, the complexity of the features,\r\n                                        the availability of content, and how\r\n                                        quickly feedback is provided.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        A focused business website may be\r\n                                        completed within several weeks. A larger\r\n                                        website involving memberships, courses,\r\n                                        payments, customer portals, custom\r\n                                        workflows, or advanced integrations will\r\n                                        naturally require more planning and\r\n                                        testing.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        Before development begins, we provide a\r\n                                        realistic project schedule so you know\r\n                                        what to expect. We prefer a dependable\r\n                                        timeline over making an unrealistic\r\n                                        promise that compromises quality.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 07 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"design\"\r\n                        data-keywords=\"custom unique template original branding design tailored brand identity\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">07<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Custom design<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    Will my website be designed specifically for my business?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        Yes. The structure, visual direction,\r\n                                        content hierarchy, and customer journey\r\n                                        are shaped around your brand and goals.\r\n                                        We do not simply place your logo and text\r\n                                        into an unrelated template and describe\r\n                                        it as a custom solution.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        We may use reliable frameworks or proven\r\n                                        technology where doing so saves time and\r\n                                        improves stability. However, the visible\r\n                                        experience is adapted to feel deliberate,\r\n                                        professional, and appropriate for your\r\n                                        audience.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 08 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"design\"\r\n                        data-keywords=\"redesign old existing website outdated improve refresh rebuild current site\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">08<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Website redesign<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    Can you redesign or improve an existing website?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        Absolutely. We can assess your existing\r\n                                        website to determine what should be\r\n                                        retained, improved, reorganized, or\r\n                                        replaced.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        A redesign can improve visual credibility,\r\n                                        mobile usability, page speed, navigation,\r\n                                        service explanations, customer conversion,\r\n                                        and the ease with which your team manages\r\n                                        the website.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        We do not change things merely to make\r\n                                        them look different. We focus on changes\r\n                                        that make the website clearer, more\r\n                                        useful, and more effective.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 09 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"design\"\r\n                        data-keywords=\"mobile phone tablet responsive iphone android screen device user experience\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">09<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Mobile experience<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    Will my website work properly on mobile phones and tablets?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        Yes. Mobile responsiveness is considered\r\n                                        throughout the design process rather than\r\n                                        being added at the end.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        Text sizing, navigation, images, forms,\r\n                                        buttons, spacing, and interactive\r\n                                        elements are adjusted for different\r\n                                        devices. This is especially important in\r\n                                        Thailand and other mobile-first markets,\r\n                                        where many customers may experience your\r\n                                        business primarily through a phone.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 10 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"business\"\r\n                        data-keywords=\"seo google search engine rankings local seo maps keywords traffic discovered customers\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">10<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Search visibility<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    Can the website help my business become easier to find on Google?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        We build with search-friendly foundations,\r\n                                        including logical page structure,\r\n                                        descriptive headings, mobile usability,\r\n                                        efficient performance, readable URLs,\r\n                                        metadata support, and content that clearly\r\n                                        explains your services.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        For local businesses, we can also help\r\n                                        create strong location and service pages,\r\n                                        integrate maps, and ensure important\r\n                                        business information is presented\r\n                                        consistently.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        No responsible provider should guarantee\r\n                                        a particular Google ranking. However, we\r\n                                        can ensure your website begins with a\r\n                                        much stronger technical and content\r\n                                        foundation for long-term search growth.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 11 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"technology\"\r\n                        data-keywords=\"booking appointment payments automation forms email confirmations workflow scheduling calendar stripe paypal\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">11<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Business automation<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    Can you add bookings, payments, forms, or automated confirmations?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        Yes. We can create or integrate booking\r\n                                        calendars, appointment forms, payment\r\n                                        systems, email confirmations, customer\r\n                                        notifications, document delivery,\r\n                                        registration workflows, and other\r\n                                        business processes.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        We begin by understanding how your team\r\n                                        currently handles these tasks. We then\r\n                                        recommend technology that reduces\r\n                                        repetitive work and creates a smoother\r\n                                        customer experience.\r\n                                    <\/p>\r\n\r\n                                    <div class=\"ydd2-faq__answer-feature\">\r\n                                        <span>The goal<\/span>\r\n                                        Fewer manual tasks for your team and fewer\r\n                                        obstacles for your customers.\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 12 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"technology\"\r\n                        data-keywords=\"multilingual bilingual thai english chinese language translation switcher international customers\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">12<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Multiple languages<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    Can you create a bilingual or multilingual website?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        Yes. We can create websites that support\r\n                                        English, Thai, Chinese, or other languages,\r\n                                        depending on the needs of your audience.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        A multilingual website involves more than\r\n                                        adding a translation button. Navigation,\r\n                                        page layouts, calls to action, search\r\n                                        settings, forms, and mobile behavior must\r\n                                        continue to work naturally in every\r\n                                        language.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        This is particularly valuable for\r\n                                        businesses serving both local Thai\r\n                                        customers and international residents,\r\n                                        visitors, or corporate clients.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 13 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"technology\"\r\n                        data-keywords=\"ecommerce online shop store products cart checkout shipping inventory woocommerce sell online\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">13<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Online selling<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    Can you build an online store or e-commerce website?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        Yes. We can develop online stores with\r\n                                        product pages, categories, shopping carts,\r\n                                        secure checkout, payment processing,\r\n                                        promotional codes, shipping options,\r\n                                        order notifications, and customer account\r\n                                        features.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        We also consider how products will be\r\n                                        managed after launch, ensuring the system\r\n                                        is practical for the people who will be\r\n                                        updating prices, images, stock, and order\r\n                                        information.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 14 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"business\"\r\n                        data-keywords=\"content writing copywriting text photos images video branding message persuasive\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">14<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Content assistance<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    Can you help us decide what the website should say?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        Yes. Many businesses understand their\r\n                                        services extremely well but find it\r\n                                        difficult to explain them clearly from a\r\n                                        customer's perspective.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        We can help organize your information,\r\n                                        identify the most persuasive benefits,\r\n                                        improve headlines, clarify calls to\r\n                                        action, and structure each page so\r\n                                        visitors can quickly understand what you\r\n                                        offer and why it matters.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        We can work from your existing content,\r\n                                        interview your team for information, or\r\n                                        assist with developing new website copy.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 15 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"technology\"\r\n                        data-keywords=\"integration connect crm line email marketing google calendar accounting software api third party\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">15<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Integrations<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    Can the website connect with systems we already use?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        In many cases, yes. Websites can often\r\n                                        connect with email marketing services,\r\n                                        customer relationship systems, Google\r\n                                        Calendar, payment providers, learning\r\n                                        platforms, analytics tools, LINE contact\r\n                                        options, accounting workflows, and other\r\n                                        third-party services.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        We review the available integration\r\n                                        methods before recommending a solution.\r\n                                        The objective is to create a dependable\r\n                                        connection rather than forcing together\r\n                                        systems that were never designed to work\r\n                                        reliably with one another.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 16 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"technology\"\r\n                        data-keywords=\"speed fast performance security secure backup protection cloudflare optimization malware\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">16<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Performance and security<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    Do you consider website speed, security, and reliability?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        Yes. We make responsible decisions\r\n                                        regarding image optimization, code,\r\n                                        caching, hosting compatibility, plugin\r\n                                        selection, secure configuration, backups,\r\n                                        and ongoing maintenance.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        No website can be made completely immune\r\n                                        from every possible technical issue.\r\n                                        However, careful development and regular\r\n                                        maintenance substantially reduce\r\n                                        avoidable risks and provide a more\r\n                                        dependable experience for both your\r\n                                        customers and your team.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 17 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"support\"\r\n                        data-keywords=\"edit update manage myself wordpress dashboard content images text training\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">17<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Website management<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    Will I be able to update the website myself?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        Yes. Whenever practical, we structure\r\n                                        routine content so your team can update\r\n                                        text, images, services, products, team\r\n                                        members, articles, and other common\r\n                                        information without rebuilding the page.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        We can also provide guidance or ongoing\r\n                                        website management. This gives you the\r\n                                        freedom to make changes internally while\r\n                                        still having professional assistance\r\n                                        available when needed.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 18 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"support\"\r\n                        data-keywords=\"after launch maintenance support updates backups ongoing help future improvements\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">18<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">After launch<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    What happens after the website is launched?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        Launch is the beginning of the website's\r\n                                        working life. We can continue assisting\r\n                                        with maintenance, software updates,\r\n                                        backups, security monitoring, content\r\n                                        changes, performance improvements, and\r\n                                        additional features.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        As your business grows, the website can\r\n                                        evolve with it. New services, locations,\r\n                                        languages, booking options, products, or\r\n                                        customer tools can be introduced when\r\n                                        they become valuable.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 19 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"process\"\r\n                        data-keywords=\"price pricing cost quote budget payment expensive affordable package\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">19<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Pricing<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    How is the price of a website determined?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        Pricing is based on the scope of the\r\n                                        project rather than an arbitrary number.\r\n                                        Important factors include the number of\r\n                                        pages, custom design requirements,\r\n                                        content assistance, multilingual support,\r\n                                        e-commerce, booking systems, integrations,\r\n                                        automation, and other functionality.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        After understanding your needs, we provide\r\n                                        a defined proposal explaining what is\r\n                                        included. Optional features and third-party\r\n                                        expenses can be shown separately so you\r\n                                        can make an informed decision.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        Our objective is to help you invest in\r\n                                        features that create genuine value rather\r\n                                        than selling unnecessary complexity.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 20 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"support\"\r\n                        data-keywords=\"ownership own website files domain hosting account lock contract access\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">20<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Ownership<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    Will I own the website after the project is completed?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        The project proposal will clearly explain\r\n                                        ownership, licensing, hosting, and any\r\n                                        third-party services involved.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        Our goal is to provide clarity rather\r\n                                        than create confusion or unnecessary\r\n                                        dependency. You should understand which\r\n                                        assets belong to your business, which\r\n                                        services require ongoing subscriptions,\r\n                                        and what assistance remains available\r\n                                        after completion.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 21 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"business\"\r\n                        data-keywords=\"small business startup new company affordable beginning first website grow future\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">21<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Small businesses<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    Do you work with small or newly established businesses?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        Yes. A business does not need to be large\r\n                                        to benefit from a professional and\r\n                                        trustworthy digital presence.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        For a newer business, we can focus on the\r\n                                        features that matter most at the current\r\n                                        stage, create a strong foundation, and\r\n                                        allow room for future expansion. This\r\n                                        helps avoid spending heavily on\r\n                                        unnecessary functionality while still\r\n                                        presenting the business professionally.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        A carefully planned first website can\r\n                                        help a small business appear established,\r\n                                        communicate more confidently, and compete\r\n                                        with larger organizations.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- QUESTION 22 -->\r\n                    <article\r\n                        class=\"ydd2-faq__item\"\r\n                        data-category=\"process\"\r\n                        data-keywords=\"start begin consultation contact requirements information next step project meeting\"\r\n                    >\r\n                        <button\r\n                            class=\"ydd2-faq__question\"\r\n                            type=\"button\"\r\n                            aria-expanded=\"false\"\r\n                        >\r\n                            <span class=\"ydd2-faq__number\">22<\/span>\r\n\r\n                            <span class=\"ydd2-faq__question-content\">\r\n                                <span class=\"ydd2-faq__category\">Getting started<\/span>\r\n                                <span class=\"ydd2-faq__question-text\">\r\n                                    What information do you need before we begin?\r\n                                <\/span>\r\n                            <\/span>\r\n\r\n                            <span class=\"ydd2-faq__toggle\">\r\n                                <span><\/span>\r\n                                <span><\/span>\r\n                            <\/span>\r\n                        <\/button>\r\n\r\n                        <div class=\"ydd2-faq__answer\" aria-hidden=\"true\">\r\n                            <div class=\"ydd2-faq__answer-overflow\">\r\n                                <div class=\"ydd2-faq__answer-inner\">\r\n                                    <p>\r\n                                        You do not need to arrive with a complete\r\n                                        technical plan. Begin by telling us about\r\n                                        your business, your customers, your\r\n                                        services, the challenges you are facing,\r\n                                        and what you would like the website to\r\n                                        accomplish.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        Existing branding, website links,\r\n                                        examples you admire, service information,\r\n                                        photographs, and business goals are all\r\n                                        helpful, but we can guide you through\r\n                                        what is needed.\r\n                                    <\/p>\r\n\r\n                                    <p>\r\n                                        From there, we can translate your ideas\r\n                                        into a practical scope, recommended\r\n                                        features, and a clear path toward launch.\r\n                                    <\/p>\r\n\r\n                                    <div class=\"ydd2-faq__answer-feature\">\r\n                                        <span>You bring the vision<\/span>\r\n                                        We help organize it into a system that\r\n                                        works.\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                <\/div>\r\n\r\n                <!-- EMPTY SEARCH RESULT -->\r\n                <div class=\"ydd2-faq__empty\" hidden>\r\n                    <div class=\"ydd2-faq__empty-icon\">\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                            <circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"><\/circle>\r\n                            <path d=\"m15.5 15.5 4.5 4.5\"><\/path>\r\n                            <path d=\"M8.5 10.5h4\"><\/path>\r\n                        <\/svg>\r\n                    <\/div>\r\n\r\n                    <h3>We could not find that exact question.<\/h3>\r\n\r\n                    <p>\r\n                        Try a shorter phrase, select another category, or ask\r\n                        our team directly. Your question may require a more\r\n                        personalized answer.\r\n                    <\/p>\r\n\r\n                    <button class=\"ydd2-faq__reset\" type=\"button\">\r\n                        View all questions\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- FINAL CTA -->\r\n        <div class=\"ydd2-faq__final\">\r\n            <div class=\"ydd2-faq__final-glow\"><\/div>\r\n\r\n            <div class=\"ydd2-faq__final-content\">\r\n                <span class=\"ydd2-faq__final-label\">\r\n                    From question to clear direction\r\n                <\/span>\r\n\r\n                <h3>\r\n                    Your business deserves a digital experience that helps it grow.\r\n                <\/h3>\r\n\r\n                <p>\r\n                    Tell us what you want to improve, simplify, sell, or automate.\r\n                    We will help transform the idea into a clear and practical\r\n                    digital solution.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <div class=\"ydd2-faq__final-actions\">\r\n                <!-- CHANGE LINKS HERE -->\r\n                <a\r\n                    href=\"\/contact-us\/\"\r\n                    class=\"ydd2-faq__final-button ydd2-faq__final-button--primary\"\r\n                >\r\n                    Start a project\r\n\r\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                        <path d=\"M5 12h14\"><\/path>\r\n                        <path d=\"m13 6 6 6-6 6\"><\/path>\r\n                    <\/svg>\r\n                <\/a>\r\n\r\n                <a\r\n                    href=\"\/custom-solutions\/\"\r\n                    class=\"ydd2-faq__final-button ydd2-faq__final-button--secondary\"\r\n                >\r\n                    Explore our solutions\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n\/* =========================================================\r\n   SECTION VARIABLES AND FOUNDATIONS\r\n========================================================== *\/\r\n\r\n.ydd2-faq {\r\n    --ydd2-ink: #14182f;\r\n    --ydd2-text: #555d78;\r\n    --ydd2-muted: #81879c;\r\n    --ydd2-purple: #6e57f5;\r\n    --ydd2-purple-deep: #5840e8;\r\n    --ydd2-blue: #438be7;\r\n    --ydd2-cyan: #13c6d0;\r\n    --ydd2-green: #24c79c;\r\n    --ydd2-border: rgba(76, 70, 130, 0.12);\r\n    --ydd2-white: #ffffff;\r\n\r\n    position: relative;\r\n    isolation: isolate;\r\n    overflow: hidden;\r\n    padding: clamp(85px, 9vw, 145px) 20px;\r\n    color: var(--ydd2-ink);\r\n    background:\r\n        radial-gradient(\r\n            circle at 8% 12%,\r\n            rgba(110, 87, 245, 0.15),\r\n            transparent 30%\r\n        ),\r\n        radial-gradient(\r\n            circle at 92% 87%,\r\n            rgba(19, 198, 208, 0.14),\r\n            transparent 31%\r\n        ),\r\n        linear-gradient(\r\n            135deg,\r\n            #f8f7ff 0%,\r\n            #ffffff 46%,\r\n            #f4feff 100%\r\n        );\r\n    font-family:\r\n        Inter,\r\n        -apple-system,\r\n        BlinkMacSystemFont,\r\n        \"Segoe UI\",\r\n        sans-serif;\r\n}\r\n\r\n.ydd2-faq *,\r\n.ydd2-faq *::before,\r\n.ydd2-faq *::after {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.ydd2-faq button,\r\n.ydd2-faq input,\r\n.ydd2-faq a {\r\n    font-family: inherit;\r\n}\r\n\r\n.ydd2-faq__container {\r\n    position: relative;\r\n    z-index: 4;\r\n    width: min(1210px, 100%);\r\n    margin: 0 auto;\r\n}\r\n\r\n\/* =========================================================\r\n   DECORATIVE BACKGROUND\r\n========================================================== *\/\r\n\r\n.ydd2-faq__grid {\r\n    position: absolute;\r\n    z-index: 0;\r\n    inset: 0;\r\n    opacity: 0.52;\r\n    pointer-events: none;\r\n    background-image:\r\n        linear-gradient(\r\n            rgba(92, 76, 177, 0.035) 1px,\r\n            transparent 1px\r\n        ),\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(92, 76, 177, 0.035) 1px,\r\n            transparent 1px\r\n        );\r\n    background-size: 48px 48px;\r\n    mask-image:\r\n        linear-gradient(\r\n            to bottom,\r\n            transparent,\r\n            #000 12%,\r\n            #000 88%,\r\n            transparent\r\n        );\r\n}\r\n\r\n.ydd2-faq__orb {\r\n    position: absolute;\r\n    z-index: 1;\r\n    border-radius: 999px;\r\n    pointer-events: none;\r\n    filter: blur(4px);\r\n    animation: ydd2OrbFloat 13s ease-in-out infinite;\r\n}\r\n\r\n.ydd2-faq__orb--one {\r\n    top: 7%;\r\n    left: -100px;\r\n    width: 280px;\r\n    height: 280px;\r\n    background:\r\n        radial-gradient(\r\n            circle,\r\n            rgba(122, 96, 255, 0.2),\r\n            transparent 70%\r\n        );\r\n}\r\n\r\n.ydd2-faq__orb--two {\r\n    right: -130px;\r\n    bottom: 14%;\r\n    width: 360px;\r\n    height: 360px;\r\n    background:\r\n        radial-gradient(\r\n            circle,\r\n            rgba(13, 208, 208, 0.2),\r\n            transparent 70%\r\n        );\r\n    animation-delay: -5s;\r\n}\r\n\r\n.ydd2-faq__orb--three {\r\n    top: 42%;\r\n    left: 44%;\r\n    width: 180px;\r\n    height: 180px;\r\n    opacity: 0.65;\r\n    background:\r\n        radial-gradient(\r\n            circle,\r\n            rgba(90, 143, 235, 0.12),\r\n            transparent 72%\r\n        );\r\n    animation-delay: -9s;\r\n}\r\n\r\n@keyframes ydd2OrbFloat {\r\n    0%,\r\n    100% {\r\n        transform: translate3d(0, 0, 0) scale(1);\r\n    }\r\n\r\n    50% {\r\n        transform: translate3d(22px, -20px, 0) scale(1.08);\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================== *\/\r\n\r\n.ydd2-faq__header {\r\n    max-width: 890px;\r\n    margin: 0 auto clamp(50px, 6vw, 78px);\r\n    text-align: center;\r\n}\r\n\r\n.ydd2-faq__eyebrow {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    margin-bottom: 23px;\r\n    padding: 9px 15px;\r\n    border: 1px solid rgba(110, 87, 245, 0.14);\r\n    border-radius: 999px;\r\n    color: var(--ydd2-purple-deep);\r\n    background: rgba(255, 255, 255, 0.78);\r\n    box-shadow: 0 10px 30px rgba(77, 61, 151, 0.07);\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    letter-spacing: 0.12em;\r\n    text-transform: uppercase;\r\n    backdrop-filter: blur(14px);\r\n}\r\n\r\n.ydd2-faq__eyebrow-pulse {\r\n    position: relative;\r\n    width: 8px;\r\n    height: 8px;\r\n    border-radius: 50%;\r\n    background: var(--ydd2-green);\r\n    box-shadow: 0 0 0 5px rgba(36, 199, 156, 0.12);\r\n}\r\n\r\n.ydd2-faq__eyebrow-pulse::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: -5px;\r\n    border: 1px solid rgba(36, 199, 156, 0.45);\r\n    border-radius: inherit;\r\n    animation: ydd2Pulse 2.3s ease-out infinite;\r\n}\r\n\r\n@keyframes ydd2Pulse {\r\n    0% {\r\n        opacity: 0.7;\r\n        transform: scale(0.7);\r\n    }\r\n\r\n    80%,\r\n    100% {\r\n        opacity: 0;\r\n        transform: scale(1.8);\r\n    }\r\n}\r\n\r\n.ydd2-faq__title {\r\n    margin: 0;\r\n    color: var(--ydd2-ink);\r\n    font-size: clamp(43px, 6vw, 76px);\r\n    font-weight: 820;\r\n    line-height: 0.99;\r\n    letter-spacing: -0.058em;\r\n}\r\n\r\n.ydd2-faq__title span {\r\n    display: block;\r\n    margin-top: 10px;\r\n    color: transparent;\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            #6d54f4 0%,\r\n            #7a5df7 28%,\r\n            #438be7 66%,\r\n            #0ec4ca 100%\r\n        );\r\n    background-size: 180% auto;\r\n    -webkit-background-clip: text;\r\n    background-clip: text;\r\n    animation: ydd2TitleShimmer 7s ease-in-out infinite;\r\n}\r\n\r\n@keyframes ydd2TitleShimmer {\r\n    0%,\r\n    100% {\r\n        background-position: 0% 50%;\r\n    }\r\n\r\n    50% {\r\n        background-position: 100% 50%;\r\n    }\r\n}\r\n\r\n.ydd2-faq__intro {\r\n    max-width: 750px;\r\n    margin: 26px auto 0;\r\n    color: var(--ydd2-text);\r\n    font-size: clamp(16px, 1.8vw, 19px);\r\n    line-height: 1.75;\r\n}\r\n\r\n\/* =========================================================\r\n   MAIN LAYOUT\r\n========================================================== *\/\r\n\r\n.ydd2-faq__layout {\r\n    display: grid;\r\n    grid-template-columns: minmax(295px, 0.78fr) minmax(0, 1.68fr);\r\n    gap: 29px;\r\n    align-items: start;\r\n}\r\n\r\n.ydd2-faq__sidebar {\r\n    position: sticky;\r\n    top: 24px;\r\n    display: grid;\r\n    gap: 18px;\r\n}\r\n\r\n\/* =========================================================\r\n   MARKET CARD\r\n========================================================== *\/\r\n\r\n.ydd2-faq__market-card {\r\n    position: relative;\r\n    overflow: hidden;\r\n    padding: 31px;\r\n    border: 1px solid rgba(110, 87, 245, 0.14);\r\n    border-radius: 27px;\r\n    background:\r\n        radial-gradient(\r\n            circle at 100% 0%,\r\n            rgba(110, 87, 245, 0.15),\r\n            transparent 40%\r\n        ),\r\n        radial-gradient(\r\n            circle at 0% 100%,\r\n            rgba(19, 198, 208, 0.09),\r\n            transparent 35%\r\n        ),\r\n        rgba(255, 255, 255, 0.87);\r\n    box-shadow:\r\n        0 25px 70px rgba(55, 47, 111, 0.1),\r\n        inset 0 1px 0 rgba(255, 255, 255, 0.9);\r\n    backdrop-filter: blur(18px);\r\n}\r\n\r\n.ydd2-faq__market-card::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: -62px;\r\n    right: -62px;\r\n    width: 155px;\r\n    height: 155px;\r\n    border: 1px solid rgba(110, 87, 245, 0.1);\r\n    border-radius: 50%;\r\n    box-shadow:\r\n        0 0 0 22px rgba(110, 87, 245, 0.026),\r\n        0 0 0 46px rgba(110, 87, 245, 0.018);\r\n}\r\n\r\n.ydd2-faq__market-top {\r\n    position: relative;\r\n    z-index: 2;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 13px;\r\n    margin-bottom: 25px;\r\n}\r\n\r\n.ydd2-faq__market-icon {\r\n    display: grid;\r\n    flex: 0 0 auto;\r\n    place-items: center;\r\n    width: 52px;\r\n    height: 52px;\r\n    border-radius: 17px;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            var(--ydd2-purple),\r\n            var(--ydd2-blue)\r\n        );\r\n    box-shadow: 0 13px 27px rgba(110, 87, 245, 0.27);\r\n}\r\n\r\n.ydd2-faq__market-icon svg {\r\n    width: 26px;\r\n    fill: none;\r\n    stroke: #fff;\r\n    stroke-width: 1.6;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n.ydd2-faq__market-label {\r\n    color: var(--ydd2-purple);\r\n    font-size: 10px;\r\n    font-weight: 850;\r\n    letter-spacing: 0.12em;\r\n    line-height: 1.4;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.ydd2-faq__market-card h3 {\r\n    position: relative;\r\n    z-index: 2;\r\n    margin: 0 0 16px;\r\n    color: var(--ydd2-ink);\r\n    font-size: clamp(27px, 2.7vw, 34px);\r\n    line-height: 1.1;\r\n    letter-spacing: -0.04em;\r\n}\r\n\r\n.ydd2-faq__market-card > p {\r\n    position: relative;\r\n    z-index: 2;\r\n    margin: 0;\r\n    color: var(--ydd2-text);\r\n    font-size: 14px;\r\n    line-height: 1.72;\r\n}\r\n\r\n.ydd2-faq__market-route {\r\n    position: relative;\r\n    z-index: 2;\r\n    display: grid;\r\n    gap: 12px;\r\n    margin-top: 27px;\r\n    padding: 20px;\r\n    border: 1px solid rgba(78, 71, 127, 0.09);\r\n    border-radius: 19px;\r\n    background: rgba(248, 248, 255, 0.77);\r\n}\r\n\r\n.ydd2-faq__country {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n}\r\n\r\n.ydd2-faq__country-number {\r\n    display: grid;\r\n    flex: 0 0 auto;\r\n    place-items: center;\r\n    width: 31px;\r\n    height: 31px;\r\n    border-radius: 10px;\r\n    color: var(--ydd2-purple);\r\n    background: rgba(110, 87, 245, 0.09);\r\n    font-size: 9px;\r\n    font-weight: 850;\r\n}\r\n\r\n.ydd2-faq__country strong,\r\n.ydd2-faq__country small {\r\n    display: block;\r\n}\r\n\r\n.ydd2-faq__country strong {\r\n    margin-bottom: 2px;\r\n    color: var(--ydd2-ink);\r\n    font-size: 13px;\r\n}\r\n\r\n.ydd2-faq__country small {\r\n    color: var(--ydd2-muted);\r\n    font-size: 10px;\r\n}\r\n\r\n.ydd2-faq__route-line {\r\n    position: relative;\r\n    height: 17px;\r\n    margin-left: 15px;\r\n    border-left: 1px dashed rgba(110, 87, 245, 0.3);\r\n}\r\n\r\n.ydd2-faq__route-line span {\r\n    position: absolute;\r\n    top: 2px;\r\n    left: -3px;\r\n    width: 5px;\r\n    height: 5px;\r\n    border-radius: 50%;\r\n    background: var(--ydd2-cyan);\r\n    animation: ydd2RouteMove 1.8s ease-in-out infinite;\r\n}\r\n\r\n@keyframes ydd2RouteMove {\r\n    0%,\r\n    100% {\r\n        opacity: 0.45;\r\n        transform: translateY(0);\r\n    }\r\n\r\n    50% {\r\n        opacity: 1;\r\n        transform: translateY(10px);\r\n    }\r\n}\r\n\r\n.ydd2-faq__market-benefit {\r\n    position: relative;\r\n    z-index: 2;\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 10px;\r\n    margin-top: 18px;\r\n    padding: 14px;\r\n    border-radius: 14px;\r\n    color: #3e5264;\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(19, 198, 208, 0.1),\r\n            rgba(110, 87, 245, 0.06)\r\n        );\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    line-height: 1.55;\r\n}\r\n\r\n.ydd2-faq__market-benefit svg {\r\n    flex: 0 0 auto;\r\n    width: 18px;\r\n    fill: none;\r\n    stroke: var(--ydd2-green);\r\n    stroke-width: 2.2;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n\/* =========================================================\r\n   PROMISE CARD\r\n========================================================== *\/\r\n\r\n.ydd2-faq__promise-card {\r\n    padding: 25px;\r\n    border: 1px solid rgba(110, 87, 245, 0.11);\r\n    border-radius: 23px;\r\n    background: rgba(255, 255, 255, 0.76);\r\n    box-shadow: 0 17px 46px rgba(55, 47, 111, 0.07);\r\n    backdrop-filter: blur(14px);\r\n}\r\n\r\n.ydd2-faq__promise-label {\r\n    display: block;\r\n    margin-bottom: 18px;\r\n    color: var(--ydd2-purple);\r\n    font-size: 10px;\r\n    font-weight: 850;\r\n    letter-spacing: 0.12em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.ydd2-faq__promise-list {\r\n    display: grid;\r\n    gap: 15px;\r\n}\r\n\r\n.ydd2-faq__promise-list > div {\r\n    display: grid;\r\n    grid-template-columns: 32px minmax(0, 1fr);\r\n    gap: 12px;\r\n    align-items: start;\r\n}\r\n\r\n.ydd2-faq__promise-list > div > span {\r\n    display: grid;\r\n    place-items: center;\r\n    width: 31px;\r\n    height: 31px;\r\n    border: 1px solid rgba(110, 87, 245, 0.12);\r\n    border-radius: 10px;\r\n    color: var(--ydd2-purple);\r\n    background: rgba(110, 87, 245, 0.06);\r\n    font-size: 9px;\r\n    font-weight: 850;\r\n}\r\n\r\n.ydd2-faq__promise-list p {\r\n    margin: 0;\r\n    color: var(--ydd2-muted);\r\n    font-size: 11px;\r\n    line-height: 1.52;\r\n}\r\n\r\n.ydd2-faq__promise-list strong {\r\n    display: block;\r\n    margin-bottom: 3px;\r\n    color: var(--ydd2-ink);\r\n    font-size: 13px;\r\n}\r\n\r\n\/* =========================================================\r\n   CONTACT CARD\r\n========================================================== *\/\r\n\r\n.ydd2-faq__contact-card {\r\n    position: relative;\r\n    overflow: hidden;\r\n    padding: 25px;\r\n    border: 1px solid rgba(110, 87, 245, 0.17);\r\n    border-radius: 23px;\r\n    background:\r\n        radial-gradient(\r\n            circle at 100% 0%,\r\n            rgba(19, 198, 208, 0.2),\r\n            transparent 43%\r\n        ),\r\n        linear-gradient(\r\n            135deg,\r\n            #f1edff 0%,\r\n            #eef8ff 100%\r\n        );\r\n    box-shadow: 0 18px 45px rgba(65, 57, 130, 0.1);\r\n}\r\n\r\n.ydd2-faq__contact-decoration {\r\n    position: absolute;\r\n    right: -36px;\r\n    bottom: -49px;\r\n    width: 130px;\r\n    height: 130px;\r\n    border: 1px solid rgba(110, 87, 245, 0.1);\r\n    border-radius: 50%;\r\n    box-shadow:\r\n        0 0 0 20px rgba(110, 87, 245, 0.026),\r\n        0 0 0 39px rgba(110, 87, 245, 0.018);\r\n}\r\n\r\n.ydd2-faq__contact-card > span {\r\n    position: relative;\r\n    z-index: 2;\r\n    display: block;\r\n    margin-bottom: 7px;\r\n    color: var(--ydd2-text);\r\n    font-size: 11px;\r\n}\r\n\r\n.ydd2-faq__contact-card h3 {\r\n    position: relative;\r\n    z-index: 2;\r\n    margin: 0 0 18px;\r\n    color: var(--ydd2-ink);\r\n    font-size: 19px;\r\n    line-height: 1.3;\r\n    letter-spacing: -0.025em;\r\n}\r\n\r\n.ydd2-faq__contact-button {\r\n    position: relative;\r\n    z-index: 2;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 12px;\r\n    width: 100%;\r\n    min-height: 48px;\r\n    padding: 0 17px;\r\n    border: 1px solid transparent;\r\n    border-radius: 14px;\r\n    color: #fff !important;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            var(--ydd2-purple),\r\n            var(--ydd2-blue)\r\n        ) !important;\r\n    box-shadow: 0 11px 25px rgba(91, 72, 223, 0.24);\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    text-decoration: none !important;\r\n    transition:\r\n        transform 0.25s ease,\r\n        box-shadow 0.25s ease,\r\n        filter 0.25s ease;\r\n}\r\n\r\n.ydd2-faq__contact-button:hover,\r\n.ydd2-faq__contact-button:focus {\r\n    color: #fff !important;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #7c63ff,\r\n            #39a4e8\r\n        ) !important;\r\n    box-shadow: 0 15px 31px rgba(91, 72, 223, 0.32);\r\n    transform: translateY(-2px);\r\n    filter: saturate(1.08);\r\n}\r\n\r\n.ydd2-faq__contact-button svg {\r\n    width: 18px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 1.8;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n    transition: transform 0.25s ease;\r\n}\r\n\r\n.ydd2-faq__contact-button:hover svg {\r\n    transform: translateX(4px);\r\n}\r\n\r\n\/* =========================================================\r\n   SEARCH PANEL\r\n========================================================== *\/\r\n\r\n.ydd2-faq__main {\r\n    min-width: 0;\r\n}\r\n\r\n.ydd2-faq__search-panel {\r\n    padding: 8px;\r\n    border: 1px solid rgba(110, 87, 245, 0.13);\r\n    border-radius: 22px;\r\n    background: rgba(255, 255, 255, 0.77);\r\n    box-shadow: 0 17px 46px rgba(55, 47, 111, 0.075);\r\n    backdrop-filter: blur(15px);\r\n}\r\n\r\n.ydd2-faq__search-box {\r\n    display: flex;\r\n    align-items: center;\r\n    min-height: 61px;\r\n    padding: 0 16px;\r\n    border: 1px solid rgba(72, 69, 116, 0.09);\r\n    border-radius: 15px;\r\n    background: rgba(248, 248, 254, 0.88);\r\n    transition:\r\n        border-color 0.25s ease,\r\n        box-shadow 0.25s ease,\r\n        background 0.25s ease;\r\n}\r\n\r\n.ydd2-faq__search-box:focus-within {\r\n    border-color: rgba(110, 87, 245, 0.42);\r\n    background: #fff;\r\n    box-shadow:\r\n        0 0 0 5px rgba(110, 87, 245, 0.075),\r\n        0 12px 30px rgba(72, 58, 156, 0.07);\r\n}\r\n\r\n.ydd2-faq__search-icon {\r\n    display: grid;\r\n    flex: 0 0 auto;\r\n    place-items: center;\r\n    width: 36px;\r\n    height: 36px;\r\n    margin-right: 10px;\r\n    border-radius: 11px;\r\n    color: var(--ydd2-purple);\r\n    background: rgba(110, 87, 245, 0.075);\r\n}\r\n\r\n.ydd2-faq__search-icon svg {\r\n    width: 20px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 1.8;\r\n    stroke-linecap: round;\r\n}\r\n\r\n.ydd2-faq__search-input {\r\n    width: 100%;\r\n    min-width: 0;\r\n    padding: 0 !important;\r\n    border: 0 !important;\r\n    outline: 0 !important;\r\n    color: var(--ydd2-ink) !important;\r\n    background: transparent !important;\r\n    box-shadow: none !important;\r\n    font-size: 14px !important;\r\n}\r\n\r\n.ydd2-faq__search-input::placeholder {\r\n    color: #9b9fb0;\r\n}\r\n\r\n.ydd2-faq__search-status {\r\n    display: inline-flex;\r\n    flex: 0 0 auto;\r\n    align-items: center;\r\n    gap: 7px;\r\n    margin-left: 12px;\r\n    padding: 7px 10px;\r\n    border: 1px solid rgba(36, 199, 156, 0.13);\r\n    border-radius: 9px;\r\n    color: #28876f;\r\n    background: rgba(36, 199, 156, 0.07);\r\n    font-size: 9px;\r\n    font-weight: 800;\r\n    white-space: nowrap;\r\n}\r\n\r\n.ydd2-faq__search-dot {\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background: var(--ydd2-green);\r\n    box-shadow: 0 0 0 4px rgba(36, 199, 156, 0.1);\r\n}\r\n\r\n.ydd2-faq__clear-search {\r\n    position: relative;\r\n    flex: 0 0 auto;\r\n    width: 31px;\r\n    height: 31px;\r\n    margin-left: 8px;\r\n    padding: 0;\r\n    border: 1px solid rgba(110, 87, 245, 0.11) !important;\r\n    border-radius: 9px;\r\n    color: var(--ydd2-purple);\r\n    background: rgba(110, 87, 245, 0.065) !important;\r\n    cursor: pointer;\r\n    transition:\r\n        transform 0.2s ease,\r\n        background 0.2s ease;\r\n}\r\n\r\n.ydd2-faq__clear-search:hover {\r\n    color: var(--ydd2-purple-deep) !important;\r\n    background: rgba(110, 87, 245, 0.13) !important;\r\n    transform: rotate(5deg) scale(1.05);\r\n}\r\n\r\n.ydd2-faq__clear-search span {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 11px;\r\n    height: 1.5px;\r\n    border-radius: 999px;\r\n    background: currentColor;\r\n}\r\n\r\n.ydd2-faq__clear-search span:first-child {\r\n    transform: translate(-50%, -50%) rotate(45deg);\r\n}\r\n\r\n.ydd2-faq__clear-search span:last-child {\r\n    transform: translate(-50%, -50%) rotate(-45deg);\r\n}\r\n\r\n.ydd2-faq__popular {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 11px;\r\n    padding: 11px 7px 3px;\r\n}\r\n\r\n.ydd2-faq__popular-label {\r\n    flex: 0 0 auto;\r\n    color: var(--ydd2-muted);\r\n    font-size: 9px;\r\n    font-weight: 750;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.08em;\r\n}\r\n\r\n.ydd2-faq__popular-buttons {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 6px;\r\n}\r\n\r\n.ydd2-faq__popular-buttons button {\r\n    min-height: 29px;\r\n    padding: 0 10px;\r\n    border: 1px solid rgba(110, 87, 245, 0.1) !important;\r\n    border-radius: 999px;\r\n    color: #696f87 !important;\r\n    background: rgba(110, 87, 245, 0.045) !important;\r\n    font-size: 9px;\r\n    font-weight: 750;\r\n    cursor: pointer;\r\n    transition:\r\n        color 0.2s ease,\r\n        border-color 0.2s ease,\r\n        background 0.2s ease,\r\n        transform 0.2s ease,\r\n        box-shadow 0.2s ease;\r\n}\r\n\r\n.ydd2-faq__popular-buttons button:hover {\r\n    border-color: rgba(110, 87, 245, 0.25) !important;\r\n    color: var(--ydd2-purple-deep) !important;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(110, 87, 245, 0.12),\r\n            rgba(19, 198, 208, 0.08)\r\n        ) !important;\r\n    box-shadow: 0 7px 17px rgba(88, 64, 232, 0.09);\r\n    transform: translateY(-1px);\r\n}\r\n\r\n\/* =========================================================\r\n   FILTERS AND CONTROLS\r\n========================================================== *\/\r\n\r\n.ydd2-faq__controls {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    justify-content: space-between;\r\n    gap: 13px;\r\n    margin-top: 18px;\r\n}\r\n\r\n.ydd2-faq__filters {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 8px;\r\n}\r\n\r\n.ydd2-faq__filter {\r\n    min-height: 39px;\r\n    padding: 0 15px;\r\n    border: 1px solid rgba(72, 69, 116, 0.11) !important;\r\n    border-radius: 999px;\r\n    color: #6c7288 !important;\r\n    background: rgba(255, 255, 255, 0.67) !important;\r\n    font-size: 11px;\r\n    font-weight: 780;\r\n    cursor: pointer;\r\n    box-shadow: none !important;\r\n    transition:\r\n        color 0.22s ease,\r\n        border-color 0.22s ease,\r\n        background 0.22s ease,\r\n        transform 0.22s ease,\r\n        box-shadow 0.22s ease;\r\n}\r\n\r\n.ydd2-faq__filter:hover {\r\n    border-color: rgba(110, 87, 245, 0.26) !important;\r\n    color: var(--ydd2-purple-deep) !important;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(110, 87, 245, 0.09),\r\n            rgba(19, 198, 208, 0.055)\r\n        ) !important;\r\n    box-shadow: 0 8px 20px rgba(88, 64, 232, 0.08) !important;\r\n    transform: translateY(-1px);\r\n}\r\n\r\n.ydd2-faq__filter.is-active,\r\n.ydd2-faq__filter.is-active:hover {\r\n    border-color: transparent !important;\r\n    color: #fff !important;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            var(--ydd2-purple),\r\n            var(--ydd2-blue)\r\n        ) !important;\r\n    box-shadow: 0 10px 23px rgba(94, 72, 224, 0.23) !important;\r\n}\r\n\r\n.ydd2-faq__expand-all {\r\n    display: inline-flex;\r\n    flex: 0 0 auto;\r\n    align-items: center;\r\n    gap: 9px;\r\n    min-height: 39px;\r\n    padding: 0 13px;\r\n    border: 1px solid rgba(19, 198, 208, 0.17) !important;\r\n    border-radius: 12px;\r\n    color: #318790 !important;\r\n    background: rgba(19, 198, 208, 0.065) !important;\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    cursor: pointer;\r\n    box-shadow: none !important;\r\n    transition:\r\n        color 0.2s ease,\r\n        border-color 0.2s ease,\r\n        background 0.2s ease,\r\n        transform 0.2s ease,\r\n        box-shadow 0.2s ease;\r\n}\r\n\r\n.ydd2-faq__expand-all:hover {\r\n    border-color: rgba(19, 198, 208, 0.32) !important;\r\n    color: #197984 !important;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(19, 198, 208, 0.13),\r\n            rgba(110, 87, 245, 0.07)\r\n        ) !important;\r\n    box-shadow: 0 8px 20px rgba(19, 198, 208, 0.1) !important;\r\n    transform: translateY(-1px);\r\n}\r\n\r\n.ydd2-faq__expand-icon {\r\n    position: relative;\r\n    width: 14px;\r\n    height: 14px;\r\n}\r\n\r\n.ydd2-faq__expand-icon span {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 11px;\r\n    height: 1.5px;\r\n    border-radius: 999px;\r\n    background: currentColor;\r\n    transition: transform 0.28s ease;\r\n}\r\n\r\n.ydd2-faq__expand-icon span:first-child {\r\n    transform: translate(-50%, -50%);\r\n}\r\n\r\n.ydd2-faq__expand-icon span:last-child {\r\n    transform: translate(-50%, -50%) rotate(90deg);\r\n}\r\n\r\n.ydd2-faq__expand-all[aria-pressed=\"true\"]\r\n.ydd2-faq__expand-icon span:last-child {\r\n    transform: translate(-50%, -50%) rotate(0deg);\r\n}\r\n\r\n\/* =========================================================\r\n   RESULTS BAR\r\n========================================================== *\/\r\n\r\n.ydd2-faq__results-bar {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 14px;\r\n    margin: 21px 3px 13px;\r\n}\r\n\r\n.ydd2-faq__results-bar > div {\r\n    display: flex;\r\n    align-items: baseline;\r\n    gap: 6px;\r\n}\r\n\r\n.ydd2-faq__result-count {\r\n    color: var(--ydd2-purple);\r\n    font-size: 18px;\r\n    font-weight: 850;\r\n}\r\n\r\n.ydd2-faq__result-word,\r\n.ydd2-faq__result-message {\r\n    color: var(--ydd2-muted);\r\n    font-size: 10px;\r\n}\r\n\r\n.ydd2-faq__result-message {\r\n    text-align: right;\r\n}\r\n\r\n\/* =========================================================\r\n   ACCORDION\r\n========================================================== *\/\r\n\r\n.ydd2-faq__accordion {\r\n    display: grid;\r\n    gap: 12px;\r\n}\r\n\r\n.ydd2-faq__item {\r\n    position: relative;\r\n    overflow: hidden;\r\n    border: 1px solid rgba(72, 69, 116, 0.1);\r\n    border-radius: 20px;\r\n    background: rgba(255, 255, 255, 0.82);\r\n    box-shadow: 0 11px 34px rgba(53, 47, 104, 0.055);\r\n    backdrop-filter: blur(13px);\r\n    transition:\r\n        border-color 0.32s ease,\r\n        box-shadow 0.32s ease,\r\n        transform 0.32s ease,\r\n        background 0.32s ease;\r\n}\r\n\r\n.ydd2-faq__item::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    z-index: 0;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 4px;\r\n    opacity: 0;\r\n    background:\r\n        linear-gradient(\r\n            to bottom,\r\n            var(--ydd2-purple),\r\n            var(--ydd2-blue),\r\n            var(--ydd2-cyan)\r\n        );\r\n    transform: scaleY(0.3);\r\n    transition:\r\n        opacity 0.32s ease,\r\n        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.ydd2-faq__item::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    z-index: 0;\r\n    top: -80px;\r\n    right: -90px;\r\n    width: 190px;\r\n    height: 190px;\r\n    border-radius: 50%;\r\n    opacity: 0;\r\n    background:\r\n        radial-gradient(\r\n            circle,\r\n            rgba(110, 87, 245, 0.11),\r\n            transparent 70%\r\n        );\r\n    transform: scale(0.7);\r\n    transition:\r\n        opacity 0.4s ease,\r\n        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.ydd2-faq__item:hover {\r\n    border-color: rgba(110, 87, 245, 0.22);\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(110, 87, 245, 0.028),\r\n            rgba(19, 198, 208, 0.018)\r\n        ),\r\n        rgba(255, 255, 255, 0.93);\r\n    box-shadow: 0 18px 44px rgba(74, 61, 151, 0.09);\r\n    transform: translateY(-2px);\r\n}\r\n\r\n.ydd2-faq__item.is-open {\r\n    border-color: rgba(110, 87, 245, 0.3);\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(110, 87, 245, 0.047),\r\n            rgba(19, 198, 208, 0.023) 70%\r\n        ),\r\n        rgba(255, 255, 255, 0.95);\r\n    box-shadow:\r\n        0 22px 58px rgba(68, 55, 144, 0.12),\r\n        0 0 0 1px rgba(110, 87, 245, 0.025);\r\n    transform: translateY(-1px);\r\n}\r\n\r\n.ydd2-faq__item.is-open::before {\r\n    opacity: 1;\r\n    transform: scaleY(1);\r\n}\r\n\r\n.ydd2-faq__item.is-open::after {\r\n    opacity: 1;\r\n    transform: scale(1);\r\n}\r\n\r\n.ydd2-faq__item.is-hidden {\r\n    display: none;\r\n}\r\n\r\n\/* QUESTION BUTTON *\/\r\n\r\n.ydd2-faq__question {\r\n    position: relative;\r\n    z-index: 2;\r\n    display: grid;\r\n    grid-template-columns: 40px minmax(0, 1fr) 36px;\r\n    align-items: center;\r\n    gap: 14px;\r\n    width: 100%;\r\n    min-height: 88px;\r\n    padding: 17px 20px;\r\n    border: 0 !important;\r\n    border-radius: 0 !important;\r\n    color: var(--ydd2-ink) !important;\r\n    background: transparent !important;\r\n    box-shadow: none !important;\r\n    text-align: left;\r\n    cursor: pointer;\r\n}\r\n\r\n.ydd2-faq__question:hover,\r\n.ydd2-faq__question:focus {\r\n    color: var(--ydd2-ink) !important;\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(110, 87, 245, 0.035),\r\n            rgba(19, 198, 208, 0.018)\r\n        ) !important;\r\n}\r\n\r\n.ydd2-faq__number {\r\n    display: grid;\r\n    place-items: center;\r\n    width: 38px;\r\n    height: 38px;\r\n    border: 1px solid rgba(110, 87, 245, 0.13);\r\n    border-radius: 12px;\r\n    color: var(--ydd2-purple);\r\n    background: rgba(110, 87, 245, 0.065);\r\n    font-size: 10px;\r\n    font-weight: 850;\r\n    transition:\r\n        color 0.3s ease,\r\n        border-color 0.3s ease,\r\n        background 0.3s ease,\r\n        box-shadow 0.3s ease,\r\n        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.ydd2-faq__item:hover .ydd2-faq__number {\r\n    background: rgba(110, 87, 245, 0.1);\r\n    transform: scale(1.04);\r\n}\r\n\r\n.ydd2-faq__item.is-open .ydd2-faq__number {\r\n    border-color: transparent;\r\n    color: #fff;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            var(--ydd2-purple),\r\n            var(--ydd2-blue)\r\n        );\r\n    box-shadow: 0 10px 22px rgba(95, 73, 224, 0.25);\r\n    transform: scale(1.06) rotate(-3deg);\r\n}\r\n\r\n.ydd2-faq__question-content {\r\n    display: grid;\r\n    gap: 4px;\r\n}\r\n\r\n.ydd2-faq__category {\r\n    color: var(--ydd2-purple);\r\n    font-size: 8px;\r\n    font-weight: 850;\r\n    letter-spacing: 0.11em;\r\n    text-transform: uppercase;\r\n    opacity: 0.8;\r\n}\r\n\r\n.ydd2-faq__question-text {\r\n    color: var(--ydd2-ink);\r\n    font-size: clamp(14px, 1.35vw, 17px);\r\n    font-weight: 760;\r\n    line-height: 1.42;\r\n    letter-spacing: -0.014em;\r\n    transition:\r\n        color 0.25s ease,\r\n        transform 0.25s ease;\r\n}\r\n\r\n.ydd2-faq__item:hover .ydd2-faq__question-text {\r\n    color: var(--ydd2-purple-deep);\r\n    transform: translateX(2px);\r\n}\r\n\r\n.ydd2-faq__item.is-open .ydd2-faq__question-text {\r\n    color: var(--ydd2-purple-deep);\r\n}\r\n\r\n.ydd2-faq__toggle {\r\n    position: relative;\r\n    display: grid;\r\n    place-items: center;\r\n    width: 34px;\r\n    height: 34px;\r\n    border: 1px solid rgba(76, 70, 130, 0.11);\r\n    border-radius: 11px;\r\n    color: #6c7286;\r\n    background: rgba(255, 255, 255, 0.88);\r\n    box-shadow: 0 5px 13px rgba(61, 53, 115, 0.05);\r\n    transition:\r\n        color 0.28s ease,\r\n        border-color 0.28s ease,\r\n        background 0.28s ease,\r\n        box-shadow 0.28s ease,\r\n        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.ydd2-faq__toggle span {\r\n    position: absolute;\r\n    width: 11px;\r\n    height: 1.5px;\r\n    border-radius: 999px;\r\n    background: currentColor;\r\n    transition:\r\n        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),\r\n        opacity 0.25s ease;\r\n}\r\n\r\n.ydd2-faq__toggle span:last-child {\r\n    transform: rotate(90deg);\r\n}\r\n\r\n.ydd2-faq__item:hover .ydd2-faq__toggle {\r\n    border-color: rgba(110, 87, 245, 0.2);\r\n    color: var(--ydd2-purple);\r\n    background: rgba(110, 87, 245, 0.075);\r\n    transform: scale(1.06);\r\n}\r\n\r\n.ydd2-faq__item.is-open .ydd2-faq__toggle {\r\n    border-color: transparent;\r\n    color: #fff;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            var(--ydd2-purple),\r\n            var(--ydd2-blue)\r\n        );\r\n    box-shadow: 0 9px 20px rgba(94, 72, 224, 0.22);\r\n    transform: rotate(180deg);\r\n}\r\n\r\n.ydd2-faq__item.is-open .ydd2-faq__toggle span:last-child {\r\n    opacity: 0;\r\n    transform: rotate(0deg) scaleX(0);\r\n}\r\n\r\n\/* ANSWER ANIMATION *\/\r\n\r\n.ydd2-faq__answer {\r\n    position: relative;\r\n    z-index: 2;\r\n    display: grid;\r\n    grid-template-rows: 0fr;\r\n    opacity: 0;\r\n    transition:\r\n        grid-template-rows 0.52s cubic-bezier(0.22, 1, 0.36, 1),\r\n        opacity 0.3s ease;\r\n}\r\n\r\n.ydd2-faq__item.is-open .ydd2-faq__answer {\r\n    grid-template-rows: 1fr;\r\n    opacity: 1;\r\n}\r\n\r\n.ydd2-faq__answer-overflow {\r\n    min-height: 0;\r\n    overflow: hidden;\r\n}\r\n\r\n.ydd2-faq__answer-inner {\r\n    margin: 0 20px 0 74px;\r\n    padding: 0 0 27px;\r\n    color: var(--ydd2-text);\r\n    font-size: 14px;\r\n    line-height: 1.76;\r\n    opacity: 0;\r\n    transform: translateY(-11px);\r\n    transition:\r\n        opacity 0.32s ease 0.03s,\r\n        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.ydd2-faq__item.is-open .ydd2-faq__answer-inner {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n    transition-delay: 0.11s;\r\n}\r\n\r\n.ydd2-faq__answer-inner::before {\r\n    content: \"\";\r\n    display: block;\r\n    width: 100%;\r\n    height: 1px;\r\n    margin-bottom: 20px;\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(110, 87, 245, 0.22),\r\n            rgba(19, 198, 208, 0.12),\r\n            transparent\r\n        );\r\n    transform: scaleX(0);\r\n    transform-origin: left;\r\n    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.ydd2-faq__item.is-open .ydd2-faq__answer-inner::before {\r\n    transform: scaleX(1);\r\n    transition-delay: 0.1s;\r\n}\r\n\r\n.ydd2-faq__answer-inner p {\r\n    margin: 0;\r\n}\r\n\r\n.ydd2-faq__answer-inner p + p {\r\n    margin-top: 13px;\r\n}\r\n\r\n.ydd2-faq__answer-feature {\r\n    position: relative;\r\n    overflow: hidden;\r\n    margin-top: 19px;\r\n    padding: 15px 17px;\r\n    border: 1px solid rgba(110, 87, 245, 0.1);\r\n    border-radius: 14px;\r\n    color: #4e5870;\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(110, 87, 245, 0.085),\r\n            rgba(19, 198, 208, 0.05)\r\n        );\r\n    font-size: 12px;\r\n    line-height: 1.55;\r\n}\r\n\r\n.ydd2-faq__answer-feature::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: -80%;\r\n    width: 45%;\r\n    height: 100%;\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            transparent,\r\n            rgba(255, 255, 255, 0.65),\r\n            transparent\r\n        );\r\n    transform: skewX(-20deg);\r\n}\r\n\r\n.ydd2-faq__item.is-open .ydd2-faq__answer-feature::after {\r\n    animation: ydd2FeatureShine 1.05s ease 0.35s 1;\r\n}\r\n\r\n@keyframes ydd2FeatureShine {\r\n    from {\r\n        left: -80%;\r\n    }\r\n\r\n    to {\r\n        left: 145%;\r\n    }\r\n}\r\n\r\n.ydd2-faq__answer-feature span {\r\n    margin-right: 4px;\r\n    color: var(--ydd2-purple-deep);\r\n    font-weight: 850;\r\n}\r\n\r\n\/* =========================================================\r\n   EMPTY STATE\r\n========================================================== *\/\r\n\r\n.ydd2-faq__empty {\r\n    padding: 55px 28px;\r\n    border: 1px dashed rgba(110, 87, 245, 0.26);\r\n    border-radius: 23px;\r\n    background: rgba(255, 255, 255, 0.69);\r\n    text-align: center;\r\n    box-shadow: 0 16px 40px rgba(65, 57, 130, 0.06);\r\n}\r\n\r\n.ydd2-faq__empty-icon {\r\n    display: grid;\r\n    place-items: center;\r\n    width: 55px;\r\n    height: 55px;\r\n    margin: 0 auto 17px;\r\n    border-radius: 17px;\r\n    color: #fff;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            var(--ydd2-purple),\r\n            var(--ydd2-cyan)\r\n        );\r\n    box-shadow: 0 12px 27px rgba(95, 73, 224, 0.22);\r\n}\r\n\r\n.ydd2-faq__empty-icon svg {\r\n    width: 25px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 1.8;\r\n    stroke-linecap: round;\r\n}\r\n\r\n.ydd2-faq__empty h3 {\r\n    margin: 0 0 9px;\r\n    color: var(--ydd2-ink);\r\n    font-size: 21px;\r\n}\r\n\r\n.ydd2-faq__empty p {\r\n    max-width: 480px;\r\n    margin: 0 auto 21px;\r\n    color: var(--ydd2-text);\r\n    font-size: 13px;\r\n    line-height: 1.68;\r\n}\r\n\r\n.ydd2-faq__reset {\r\n    min-height: 44px;\r\n    padding: 0 18px;\r\n    border: 1px solid transparent !important;\r\n    border-radius: 13px;\r\n    color: #fff !important;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            var(--ydd2-purple),\r\n            var(--ydd2-blue)\r\n        ) !important;\r\n    box-shadow: 0 10px 23px rgba(94, 72, 224, 0.21) !important;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    cursor: pointer;\r\n    transition:\r\n        transform 0.22s ease,\r\n        box-shadow 0.22s ease,\r\n        filter 0.22s ease;\r\n}\r\n\r\n.ydd2-faq__reset:hover {\r\n    color: #fff !important;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #7b62ff,\r\n            #37a4e8\r\n        ) !important;\r\n    box-shadow: 0 14px 28px rgba(94, 72, 224, 0.28) !important;\r\n    transform: translateY(-2px);\r\n    filter: saturate(1.08);\r\n}\r\n\r\n\/* =========================================================\r\n   FINAL CALL TO ACTION\r\n========================================================== *\/\r\n\r\n.ydd2-faq__final {\r\n    position: relative;\r\n    isolation: isolate;\r\n    overflow: hidden;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 38px;\r\n    margin-top: clamp(55px, 7vw, 88px);\r\n    padding: clamp(35px, 5vw, 58px);\r\n    border: 1px solid rgba(110, 87, 245, 0.18);\r\n    border-radius: 30px;\r\n    background:\r\n        radial-gradient(\r\n            circle at 92% 20%,\r\n            rgba(255, 255, 255, 0.24),\r\n            transparent 28%\r\n        ),\r\n        radial-gradient(\r\n            circle at 5% 100%,\r\n            rgba(19, 198, 208, 0.27),\r\n            transparent 35%\r\n        ),\r\n        linear-gradient(\r\n            125deg,\r\n            #7559f4 0%,\r\n            #5b6deb 51%,\r\n            #22b9d1 100%\r\n        );\r\n    box-shadow:\r\n        0 30px 75px rgba(72, 59, 170, 0.25),\r\n        inset 0 1px 0 rgba(255, 255, 255, 0.24);\r\n}\r\n\r\n.ydd2-faq__final::before,\r\n.ydd2-faq__final::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    border: 1px solid rgba(255, 255, 255, 0.12);\r\n    border-radius: 50%;\r\n}\r\n\r\n.ydd2-faq__final::before {\r\n    right: -70px;\r\n    bottom: -110px;\r\n    width: 330px;\r\n    height: 330px;\r\n    box-shadow:\r\n        0 0 0 38px rgba(255, 255, 255, 0.035),\r\n        0 0 0 78px rgba(255, 255, 255, 0.022);\r\n}\r\n\r\n.ydd2-faq__final::after {\r\n    top: -95px;\r\n    left: 46%;\r\n    width: 190px;\r\n    height: 190px;\r\n}\r\n\r\n.ydd2-faq__final-glow {\r\n    position: absolute;\r\n    z-index: -1;\r\n    top: -60%;\r\n    left: -10%;\r\n    width: 55%;\r\n    height: 220%;\r\n    opacity: 0.35;\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            transparent,\r\n            rgba(255, 255, 255, 0.37),\r\n            transparent\r\n        );\r\n    transform: skewX(-20deg);\r\n    animation: ydd2FinalGlow 7s ease-in-out infinite;\r\n}\r\n\r\n@keyframes ydd2FinalGlow {\r\n    0%,\r\n    100% {\r\n        transform: translateX(-60%) skewX(-20deg);\r\n    }\r\n\r\n    50% {\r\n        transform: translateX(220%) skewX(-20deg);\r\n    }\r\n}\r\n\r\n.ydd2-faq__final-content,\r\n.ydd2-faq__final-actions {\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n\r\n.ydd2-faq__final-content {\r\n    max-width: 680px;\r\n}\r\n\r\n.ydd2-faq__final-label {\r\n    display: block;\r\n    margin-bottom: 11px;\r\n    color: rgba(255, 255, 255, 0.76);\r\n    font-size: 10px;\r\n    font-weight: 850;\r\n    letter-spacing: 0.13em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.ydd2-faq__final h3 {\r\n    margin: 0;\r\n    color: #fff;\r\n    font-size: clamp(30px, 4vw, 47px);\r\n    line-height: 1.08;\r\n    letter-spacing: -0.042em;\r\n}\r\n\r\n.ydd2-faq__final p {\r\n    max-width: 620px;\r\n    margin: 16px 0 0;\r\n    color: rgba(255, 255, 255, 0.78);\r\n    font-size: 14px;\r\n    line-height: 1.72;\r\n}\r\n\r\n.ydd2-faq__final-actions {\r\n    display: flex;\r\n    flex: 0 0 auto;\r\n    flex-direction: column;\r\n    gap: 10px;\r\n    min-width: 215px;\r\n}\r\n\r\n.ydd2-faq__final-button {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 10px;\r\n    min-height: 53px;\r\n    padding: 0 21px;\r\n    border-radius: 15px;\r\n    font-size: 12px;\r\n    font-weight: 820;\r\n    text-align: center;\r\n    text-decoration: none !important;\r\n    transition:\r\n        color 0.25s ease,\r\n        border-color 0.25s ease,\r\n        background 0.25s ease,\r\n        transform 0.25s ease,\r\n        box-shadow 0.25s ease;\r\n}\r\n\r\n.ydd2-faq__final-button--primary {\r\n    border: 1px solid #fff;\r\n    color: var(--ydd2-purple-deep) !important;\r\n    background: #fff !important;\r\n    box-shadow: 0 13px 28px rgba(69, 53, 157, 0.2);\r\n}\r\n\r\n.ydd2-faq__final-button--primary:hover,\r\n.ydd2-faq__final-button--primary:focus {\r\n    border-color: #fff;\r\n    color: var(--ydd2-purple-deep) !important;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #ffffff,\r\n            #eefcff\r\n        ) !important;\r\n    box-shadow: 0 17px 34px rgba(69, 53, 157, 0.28);\r\n    transform: translateY(-3px);\r\n}\r\n\r\n.ydd2-faq__final-button--secondary {\r\n    border: 1px solid rgba(255, 255, 255, 0.38);\r\n    color: #fff !important;\r\n    background: rgba(255, 255, 255, 0.12) !important;\r\n    backdrop-filter: blur(10px);\r\n}\r\n\r\n.ydd2-faq__final-button--secondary:hover,\r\n.ydd2-faq__final-button--secondary:focus {\r\n    border-color: rgba(255, 255, 255, 0.75);\r\n    color: var(--ydd2-purple-deep) !important;\r\n    background: rgba(255, 255, 255, 0.92) !important;\r\n    box-shadow: 0 15px 30px rgba(69, 53, 157, 0.18);\r\n    transform: translateY(-3px);\r\n}\r\n\r\n.ydd2-faq__final-button svg {\r\n    width: 18px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 1.8;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n    transition: transform 0.25s ease;\r\n}\r\n\r\n.ydd2-faq__final-button:hover svg {\r\n    transform: translateX(4px);\r\n}\r\n\r\n\/* =========================================================\r\n   ACCESSIBILITY\r\n========================================================== *\/\r\n\r\n.ydd2-faq button:focus-visible,\r\n.ydd2-faq a:focus-visible,\r\n.ydd2-faq input:focus-visible {\r\n    outline: 3px solid rgba(19, 198, 208, 0.48) !important;\r\n    outline-offset: 3px;\r\n}\r\n\r\n\/* =========================================================\r\n   RESPONSIVE DESIGN\r\n========================================================== *\/\r\n\r\n@media (max-width: 1000px) {\r\n    .ydd2-faq__layout {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .ydd2-faq__sidebar {\r\n        position: static;\r\n        grid-template-columns: 1.2fr 0.8fr;\r\n    }\r\n\r\n    .ydd2-faq__market-card {\r\n        grid-row: span 2;\r\n    }\r\n\r\n    .ydd2-faq__final {\r\n        align-items: flex-start;\r\n        flex-direction: column;\r\n    }\r\n\r\n    .ydd2-faq__final-actions {\r\n        flex-direction: row;\r\n        width: 100%;\r\n    }\r\n\r\n    .ydd2-faq__final-button {\r\n        flex: 1;\r\n    }\r\n}\r\n\r\n@media (max-width: 760px) {\r\n    .ydd2-faq {\r\n        padding-right: 15px;\r\n        padding-left: 15px;\r\n    }\r\n\r\n    .ydd2-faq__header {\r\n        text-align: left;\r\n    }\r\n\r\n    .ydd2-faq__title {\r\n        font-size: clamp(40px, 13vw, 59px);\r\n    }\r\n\r\n    .ydd2-faq__intro {\r\n        margin-left: 0;\r\n    }\r\n\r\n    .ydd2-faq__sidebar {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .ydd2-faq__market-card {\r\n        grid-row: auto;\r\n    }\r\n\r\n    .ydd2-faq__controls {\r\n        align-items: stretch;\r\n        flex-direction: column;\r\n    }\r\n\r\n    .ydd2-faq__filters {\r\n        flex-wrap: nowrap;\r\n        margin-right: -15px;\r\n        padding-right: 15px;\r\n        overflow-x: auto;\r\n        scrollbar-width: none;\r\n    }\r\n\r\n    .ydd2-faq__filters::-webkit-scrollbar {\r\n        display: none;\r\n    }\r\n\r\n    .ydd2-faq__filter {\r\n        flex: 0 0 auto;\r\n    }\r\n\r\n    .ydd2-faq__expand-all {\r\n        align-self: flex-start;\r\n    }\r\n\r\n    .ydd2-faq__popular {\r\n        align-items: flex-start;\r\n        flex-direction: column;\r\n    }\r\n\r\n    .ydd2-faq__popular-buttons {\r\n        flex-wrap: nowrap;\r\n        width: 100%;\r\n        overflow-x: auto;\r\n        scrollbar-width: none;\r\n    }\r\n\r\n    .ydd2-faq__popular-buttons::-webkit-scrollbar {\r\n        display: none;\r\n    }\r\n\r\n    .ydd2-faq__popular-buttons button {\r\n        flex: 0 0 auto;\r\n    }\r\n\r\n    .ydd2-faq__search-status {\r\n        display: none;\r\n    }\r\n\r\n    .ydd2-faq__results-bar {\r\n        align-items: flex-start;\r\n        flex-direction: column;\r\n        gap: 3px;\r\n    }\r\n\r\n    .ydd2-faq__result-message {\r\n        text-align: left;\r\n    }\r\n\r\n    .ydd2-faq__question {\r\n        grid-template-columns: 33px minmax(0, 1fr) 31px;\r\n        gap: 10px;\r\n        min-height: 80px;\r\n        padding: 15px 13px;\r\n    }\r\n\r\n    .ydd2-faq__number {\r\n        width: 33px;\r\n        height: 33px;\r\n        border-radius: 10px;\r\n    }\r\n\r\n    .ydd2-faq__toggle {\r\n        width: 31px;\r\n        height: 31px;\r\n        border-radius: 10px;\r\n    }\r\n\r\n    .ydd2-faq__answer-inner {\r\n        margin: 0 14px 0 56px;\r\n        padding-bottom: 23px;\r\n    }\r\n\r\n    .ydd2-faq__final-actions {\r\n        flex-direction: column;\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .ydd2-faq__market-card {\r\n        padding: 25px 21px;\r\n    }\r\n\r\n    .ydd2-faq__search-box {\r\n        padding: 0 11px;\r\n    }\r\n\r\n    .ydd2-faq__search-icon {\r\n        width: 32px;\r\n        height: 32px;\r\n    }\r\n\r\n    .ydd2-faq__search-input {\r\n        font-size: 12px !important;\r\n    }\r\n\r\n    .ydd2-faq__question-text {\r\n        font-size: 13px;\r\n    }\r\n\r\n    .ydd2-faq__category {\r\n        font-size: 7px;\r\n    }\r\n\r\n    .ydd2-faq__answer-inner {\r\n        margin-left: 14px;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================== *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n    .ydd2-faq *,\r\n    .ydd2-faq *::before,\r\n    .ydd2-faq *::after {\r\n        scroll-behavior: auto !important;\r\n        animation-duration: 0.01ms !important;\r\n        animation-iteration-count: 1 !important;\r\n        transition-duration: 0.01ms !important;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n    \"use strict\";\r\n\r\n    function initializeYdd2Faq(section) {\r\n        if (!section || section.dataset.initialized === \"true\") {\r\n            return;\r\n        }\r\n\r\n        section.dataset.initialized = \"true\";\r\n\r\n        const items = Array.from(\r\n            section.querySelectorAll(\".ydd2-faq__item\")\r\n        );\r\n\r\n        const filterButtons = Array.from(\r\n            section.querySelectorAll(\".ydd2-faq__filter\")\r\n        );\r\n\r\n        const popularButtons = Array.from(\r\n            section.querySelectorAll(\"[data-search]\")\r\n        );\r\n\r\n        const searchInput = section.querySelector(\r\n            \".ydd2-faq__search-input\"\r\n        );\r\n\r\n        const clearSearchButton = section.querySelector(\r\n            \".ydd2-faq__clear-search\"\r\n        );\r\n\r\n        const expandAllButton = section.querySelector(\r\n            \".ydd2-faq__expand-all\"\r\n        );\r\n\r\n        const expandText = section.querySelector(\r\n            \".ydd2-faq__expand-text\"\r\n        );\r\n\r\n        const accordion = section.querySelector(\r\n            \".ydd2-faq__accordion\"\r\n        );\r\n\r\n        const emptyState = section.querySelector(\r\n            \".ydd2-faq__empty\"\r\n        );\r\n\r\n        const resetButton = section.querySelector(\r\n            \".ydd2-faq__reset\"\r\n        );\r\n\r\n        const resultCount = section.querySelector(\r\n            \".ydd2-faq__result-count\"\r\n        );\r\n\r\n        const resultWord = section.querySelector(\r\n            \".ydd2-faq__result-word\"\r\n        );\r\n\r\n        const resultMessage = section.querySelector(\r\n            \".ydd2-faq__result-message\"\r\n        );\r\n\r\n        let activeFilter = \"all\";\r\n        let allVisibleItemsExpanded = false;\r\n\r\n        function normalizeText(value) {\r\n            return String(value || \"\")\r\n                .toLowerCase()\r\n                .replace(\/[^\\p{L}\\p{N}\\s-]\/gu, \" \")\r\n                .replace(\/\\s+\/g, \" \")\r\n                .trim();\r\n        }\r\n\r\n        function getSearchWords(value) {\r\n            return normalizeText(value)\r\n                .split(\" \")\r\n                .filter(function (word) {\r\n                    return word.length > 1;\r\n                });\r\n        }\r\n\r\n        function setItemState(item, shouldOpen) {\r\n            const button = item.querySelector(\".ydd2-faq__question\");\r\n            const answer = item.querySelector(\".ydd2-faq__answer\");\r\n\r\n            if (!button || !answer) {\r\n                return;\r\n            }\r\n\r\n            item.classList.toggle(\"is-open\", shouldOpen);\r\n            button.setAttribute(\"aria-expanded\", String(shouldOpen));\r\n            answer.setAttribute(\"aria-hidden\", String(!shouldOpen));\r\n        }\r\n\r\n        function getVisibleItems() {\r\n            return items.filter(function (item) {\r\n                return !item.classList.contains(\"is-hidden\");\r\n            });\r\n        }\r\n\r\n        function updateExpandAllState() {\r\n            const visibleItems = getVisibleItems();\r\n\r\n            allVisibleItemsExpanded =\r\n                visibleItems.length > 0 &&\r\n                visibleItems.every(function (item) {\r\n                    return item.classList.contains(\"is-open\");\r\n                });\r\n\r\n            if (expandAllButton) {\r\n                expandAllButton.setAttribute(\r\n                    \"aria-pressed\",\r\n                    String(allVisibleItemsExpanded)\r\n                );\r\n            }\r\n\r\n            if (expandText) {\r\n                expandText.textContent = allVisibleItemsExpanded\r\n                    ? \"Collapse all\"\r\n                    : \"Expand all\";\r\n            }\r\n        }\r\n\r\n        function animateVisibleItems(visibleItems) {\r\n            if (\r\n                window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\r\n            ) {\r\n                return;\r\n            }\r\n\r\n            visibleItems.forEach(function (item, index) {\r\n                if (typeof item.animate !== \"function\") {\r\n                    return;\r\n                }\r\n\r\n                item.animate(\r\n                    [\r\n                        {\r\n                            opacity: 0,\r\n                            transform: \"translateY(10px) scale(0.992)\"\r\n                        },\r\n                        {\r\n                            opacity: 1,\r\n                            transform: \"translateY(0) scale(1)\"\r\n                        }\r\n                    ],\r\n                    {\r\n                        duration: 350,\r\n                        delay: Math.min(index * 28, 220),\r\n                        easing: \"cubic-bezier(0.22, 1, 0.36, 1)\",\r\n                        fill: \"both\"\r\n                    }\r\n                );\r\n            });\r\n        }\r\n\r\n        function updateResults(options) {\r\n            const settings = Object.assign(\r\n                {\r\n                    animate: true,\r\n                    openFirstSearchResult: false\r\n                },\r\n                options || {}\r\n            );\r\n\r\n            const searchValue = searchInput\r\n                ? searchInput.value\r\n                : \"\";\r\n\r\n            const searchWords = getSearchWords(searchValue);\r\n            const hasSearch = searchWords.length > 0;\r\n\r\n            let visibleCount = 0;\r\n            const visibleItems = [];\r\n\r\n            items.forEach(function (item) {\r\n                const category = item.dataset.category || \"\";\r\n                const keywords = item.dataset.keywords || \"\";\r\n                const searchableText = normalizeText(\r\n                    item.textContent + \" \" + keywords\r\n                );\r\n\r\n                const categoryMatches =\r\n                    activeFilter === \"all\" ||\r\n                    category === activeFilter;\r\n\r\n                const searchMatches =\r\n                    !hasSearch ||\r\n                    searchWords.every(function (word) {\r\n                        return searchableText.includes(word);\r\n                    });\r\n\r\n                const shouldShow =\r\n                    categoryMatches && searchMatches;\r\n\r\n                item.classList.toggle(\r\n                    \"is-hidden\",\r\n                    !shouldShow\r\n                );\r\n\r\n                if (shouldShow) {\r\n                    visibleCount += 1;\r\n                    visibleItems.push(item);\r\n                } else {\r\n                    setItemState(item, false);\r\n                }\r\n            });\r\n\r\n            if (\r\n                settings.openFirstSearchResult &&\r\n                hasSearch &&\r\n                visibleItems.length > 0\r\n            ) {\r\n                visibleItems.forEach(function (item, index) {\r\n                    setItemState(item, index === 0);\r\n                });\r\n            }\r\n\r\n            if (resultCount) {\r\n                resultCount.textContent = String(visibleCount);\r\n            }\r\n\r\n            if (resultWord) {\r\n                resultWord.textContent =\r\n                    visibleCount === 1\r\n                        ? \"answer available\"\r\n                        : \"answers available\";\r\n            }\r\n\r\n            if (resultMessage) {\r\n                if (hasSearch && visibleCount > 0) {\r\n                    resultMessage.textContent =\r\n                        visibleCount === 1\r\n                            ? \"We found a closely related answer\"\r\n                            : \"We found several related answers\";\r\n                } else if (visibleCount === 0) {\r\n                    resultMessage.textContent =\r\n                        \"Try another word or phrase\";\r\n                } else {\r\n                    resultMessage.textContent =\r\n                        \"Select a question to reveal the answer\";\r\n                }\r\n            }\r\n\r\n            if (accordion) {\r\n                accordion.hidden = visibleCount === 0;\r\n            }\r\n\r\n            if (emptyState) {\r\n                emptyState.hidden = visibleCount !== 0;\r\n            }\r\n\r\n            if (clearSearchButton) {\r\n                clearSearchButton.hidden =\r\n                    !searchInput || !searchInput.value.trim();\r\n            }\r\n\r\n            if (settings.animate && visibleItems.length > 0) {\r\n                animateVisibleItems(visibleItems);\r\n            }\r\n\r\n            updateExpandAllState();\r\n        }\r\n\r\n        items.forEach(function (item) {\r\n            const questionButton = item.querySelector(\r\n                \".ydd2-faq__question\"\r\n            );\r\n\r\n            if (!questionButton) {\r\n                return;\r\n            }\r\n\r\n            questionButton.addEventListener(\"click\", function () {\r\n                const shouldOpen =\r\n                    !item.classList.contains(\"is-open\");\r\n\r\n                setItemState(item, shouldOpen);\r\n                updateExpandAllState();\r\n\r\n                if (\r\n                    shouldOpen &&\r\n                    !window.matchMedia(\r\n                        \"(prefers-reduced-motion: reduce)\"\r\n                    ).matches &&\r\n                    typeof item.animate === \"function\"\r\n                ) {\r\n                    item.animate(\r\n                        [\r\n                            { transform: \"translateY(-1px) scale(0.997)\" },\r\n                            { transform: \"translateY(-1px) scale(1.003)\" },\r\n                            { transform: \"translateY(-1px) scale(1)\" }\r\n                        ],\r\n                        {\r\n                            duration: 430,\r\n                            easing: \"cubic-bezier(0.22, 1, 0.36, 1)\"\r\n                        }\r\n                    );\r\n                }\r\n            });\r\n        });\r\n\r\n        filterButtons.forEach(function (button) {\r\n            button.addEventListener(\"click\", function () {\r\n                activeFilter = button.dataset.filter || \"all\";\r\n\r\n                filterButtons.forEach(function (filterButton) {\r\n                    filterButton.classList.toggle(\r\n                        \"is-active\",\r\n                        filterButton === button\r\n                    );\r\n                });\r\n\r\n                updateResults({\r\n                    animate: true,\r\n                    openFirstSearchResult: false\r\n                });\r\n            });\r\n        });\r\n\r\n        if (searchInput) {\r\n            searchInput.addEventListener(\"input\", function () {\r\n                updateResults({\r\n                    animate: true,\r\n                    openFirstSearchResult:\r\n                        searchInput.value.trim().length >= 3\r\n                });\r\n            });\r\n\r\n            searchInput.addEventListener(\"keydown\", function (event) {\r\n                if (event.key === \"Escape\") {\r\n                    searchInput.value = \"\";\r\n\r\n                    updateResults({\r\n                        animate: true,\r\n                        openFirstSearchResult: false\r\n                    });\r\n                }\r\n            });\r\n        }\r\n\r\n        if (clearSearchButton) {\r\n            clearSearchButton.addEventListener(\"click\", function () {\r\n                if (!searchInput) {\r\n                    return;\r\n                }\r\n\r\n                searchInput.value = \"\";\r\n                searchInput.focus();\r\n\r\n                updateResults({\r\n                    animate: true,\r\n                    openFirstSearchResult: false\r\n                });\r\n            });\r\n        }\r\n\r\n        popularButtons.forEach(function (button) {\r\n            button.addEventListener(\"click\", function () {\r\n                if (!searchInput) {\r\n                    return;\r\n                }\r\n\r\n                searchInput.value =\r\n                    button.dataset.search || \"\";\r\n\r\n                searchInput.focus();\r\n\r\n                updateResults({\r\n                    animate: true,\r\n                    openFirstSearchResult: true\r\n                });\r\n            });\r\n        });\r\n\r\n        if (expandAllButton) {\r\n            expandAllButton.addEventListener(\"click\", function () {\r\n                const visibleItems = getVisibleItems();\r\n                const shouldExpand = !allVisibleItemsExpanded;\r\n\r\n                visibleItems.forEach(function (item, index) {\r\n                    window.setTimeout(function () {\r\n                        setItemState(item, shouldExpand);\r\n                        updateExpandAllState();\r\n                    }, index * 24);\r\n                });\r\n            });\r\n        }\r\n\r\n        if (resetButton) {\r\n            resetButton.addEventListener(\"click\", function () {\r\n                activeFilter = \"all\";\r\n\r\n                if (searchInput) {\r\n                    searchInput.value = \"\";\r\n                }\r\n\r\n                filterButtons.forEach(function (button) {\r\n                    button.classList.toggle(\r\n                        \"is-active\",\r\n                        button.dataset.filter === \"all\"\r\n                    );\r\n                });\r\n\r\n                items.forEach(function (item, index) {\r\n                    setItemState(item, index === 0);\r\n                });\r\n\r\n                updateResults({\r\n                    animate: true,\r\n                    openFirstSearchResult: false\r\n                });\r\n\r\n                if (searchInput) {\r\n                    searchInput.focus();\r\n                }\r\n            });\r\n        }\r\n\r\n        updateResults({\r\n            animate: false,\r\n            openFirstSearchResult: false\r\n        });\r\n    }\r\n\r\n    function initializeAllYdd2FaqSections() {\r\n        document\r\n            .querySelectorAll(\".ydd2-faq\")\r\n            .forEach(initializeYdd2Faq);\r\n    }\r\n\r\n    if (document.readyState === \"loading\") {\r\n        document.addEventListener(\r\n            \"DOMContentLoaded\",\r\n            initializeAllYdd2FaqSections\r\n        );\r\n    } else {\r\n        initializeAllYdd2FaqSections();\r\n    }\r\n})();\r\n<\/script>\r\n```\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>About Your Digital Designs We build the systems behind  &#8230; <a title=\"(English) About Us\" class=\"read-more\" href=\"https:\/\/yourdigitaldesigns.com\/zh\/about-us\/\" aria-label=\"\u9605\u8bfb (English) About Us\">\u9605\u8bfb\u66f4\u591a<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"nf_dc_page":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-140","page","type-page","status-publish"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>(English) About Us - Your Digital Designs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/yourdigitaldesigns.com\/zh\/about-us\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"(English) About Us - Your Digital Designs\" \/>\n<meta property=\"og:description\" content=\"About Your Digital Designs We build the systems behind ... \u9605\u8bfb\u66f4\u591a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/yourdigitaldesigns.com\/zh\/about-us\/\" \/>\n<meta property=\"og:site_name\" content=\"Your Digital Designs\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-30T15:10:55+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data1\" content=\"49 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/yourdigitaldesigns.com\\\/zh\\\/about-us\\\/\",\"url\":\"https:\\\/\\\/yourdigitaldesigns.com\\\/zh\\\/about-us\\\/\",\"name\":\"(English) About Us - Your Digital Designs\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/yourdigitaldesigns.com\\\/zh\\\/#website\"},\"datePublished\":\"2026-06-30T14:20:26+00:00\",\"dateModified\":\"2026-06-30T15:10:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/yourdigitaldesigns.com\\\/zh\\\/about-us\\\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[[\"https:\\\/\\\/yourdigitaldesigns.com\\\/zh\\\/about-us\\\/\"]]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/yourdigitaldesigns.com\\\/zh\\\/about-us\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/yourdigitaldesigns.com\\\/zh\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"About Us\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/yourdigitaldesigns.com\\\/zh\\\/#website\",\"url\":\"https:\\\/\\\/yourdigitaldesigns.com\\\/zh\\\/\",\"name\":\"Your Digital Designs\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/yourdigitaldesigns.com\\\/zh\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-Hans\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"(English) About Us - Your Digital Designs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/yourdigitaldesigns.com\/zh\/about-us\/","og_locale":"zh_CN","og_type":"article","og_title":"(English) About Us - Your Digital Designs","og_description":"About Your Digital Designs We build the systems behind ... \u9605\u8bfb\u66f4\u591a","og_url":"https:\/\/yourdigitaldesigns.com\/zh\/about-us\/","og_site_name":"Your Digital Designs","article_modified_time":"2026-06-30T15:10:55+00:00","twitter_card":"summary_large_image","twitter_misc":{"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"49 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/yourdigitaldesigns.com\/zh\/about-us\/","url":"https:\/\/yourdigitaldesigns.com\/zh\/about-us\/","name":"(English) About Us - Your Digital Designs","isPartOf":{"@id":"https:\/\/yourdigitaldesigns.com\/zh\/#website"},"datePublished":"2026-06-30T14:20:26+00:00","dateModified":"2026-06-30T15:10:55+00:00","breadcrumb":{"@id":"https:\/\/yourdigitaldesigns.com\/zh\/about-us\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":[["https:\/\/yourdigitaldesigns.com\/zh\/about-us\/"]]}]},{"@type":"BreadcrumbList","@id":"https:\/\/yourdigitaldesigns.com\/zh\/about-us\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/yourdigitaldesigns.com\/zh\/"},{"@type":"ListItem","position":2,"name":"About Us"}]},{"@type":"WebSite","@id":"https:\/\/yourdigitaldesigns.com\/zh\/#website","url":"https:\/\/yourdigitaldesigns.com\/zh\/","name":"Your Digital Designs","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/yourdigitaldesigns.com\/zh\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-Hans"}]}},"_links":{"self":[{"href":"https:\/\/yourdigitaldesigns.com\/zh\/wp-json\/wp\/v2\/pages\/140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yourdigitaldesigns.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yourdigitaldesigns.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yourdigitaldesigns.com\/zh\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/yourdigitaldesigns.com\/zh\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":5,"href":"https:\/\/yourdigitaldesigns.com\/zh\/wp-json\/wp\/v2\/pages\/140\/revisions"}],"predecessor-version":[{"id":175,"href":"https:\/\/yourdigitaldesigns.com\/zh\/wp-json\/wp\/v2\/pages\/140\/revisions\/175"}],"wp:attachment":[{"href":"https:\/\/yourdigitaldesigns.com\/zh\/wp-json\/wp\/v2\/media?parent=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}