{"id":78,"date":"2026-06-08T10:39:41","date_gmt":"2026-06-08T10:39:41","guid":{"rendered":"https:\/\/staging.ntl-recruit.hk\/?page_id=78"},"modified":"2026-06-25T10:57:29","modified_gmt":"2026-06-25T10:57:29","slug":"%e8%a7%a3%e6%b1%ba%e6%96%b9%e6%a1%88","status":"publish","type":"page","link":"https:\/\/staging.ntl-recruit.hk\/?page_id=78","title":{"rendered":"2 Services – 4 Scenario-driven solutions – zh"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n NTL \u5834\u666f\u5316\u89e3\u6c7a\u65b9\u6848\uff5c\u6309\u4f01\u696d\u72c0\u6cc1\u627e\u5230\u5408\u9069\u652f\u63f4<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\" \/>\r\n <style>\r\n \/* ============================================================\r\n DESIGN TOKENS\r\n ============================================================ *\/\r\n :root {\r\n --ntl-deep: #8D7A97;\r\n --ntl-medium: #9F8AA8;\r\n --ntl-light: #B8A7C0;\r\n --ntl-offwhite: #F7F4F1;\r\n --ntl-warm: #EDE8E3;\r\n --foreground: #332E38;\r\n --muted: #332E38;\r\n --soft-line: #332E38;\r\n --white: #FFFFFF;\r\n --radius-sm: 6px;\r\n --radius-md: 14px;\r\n --radius-lg: 24px;\r\n --max-w: 1180px;\r\n --font-serif: 'Cormorant Garamond', Georgia, serif;\r\n --font-sans: 'Inter', system-ui, -apple-system, sans-serif;\r\n --section-pad: clamp(5rem, 9vw, 8rem);\r\n }\r\n\r\n \/* ============================================================\r\n RESET & BASE\r\n ============================================================ *\/\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n font-family: var(--font-sans);\r\n color: var(--foreground);\r\n background: var(--ntl-offwhite);\r\n line-height: 1.75;\r\n overflow-x: hidden;\r\n }\r\n\r\n a { color: inherit; text-decoration: none; }\r\n button { font: inherit; cursor: pointer; }\r\n img { display: block; width: 100%; height: 100%; object-fit: cover; }\r\n ::selection { background: rgba(141,122,151,0.22); }\r\n\r\n \/* ============================================================\r\n LAYOUT UTILITIES\r\n ============================================================ *\/\r\n .container {\r\n width: min(100% - 40px, var(--max-w));\r\n margin: 0 auto;\r\n }\r\n\r\n .container--wide {\r\n width: min(100% - 40px, var(--max-w));\r\n margin: 0 auto;\r\n }\r\n\r\n \/* ============================================================\r\n TYPOGRAPHY UTILITIES\r\n ============================================================ *\/\r\n .eyebrow {\r\n display: inline-block;\r\n font-size: 0.85rem;\r\n letter-spacing: 0.34em;\r\n text-transform: uppercase;\r\n font-weight: 500;\r\n color: var(--ntl-medium);\r\n margin-bottom: 1.2rem;\r\n }\r\n\r\n h1, h2, h3, h4 {\r\n font-family: var(--font-serif);\r\n font-weight: 400;\r\n letter-spacing: 0.02em;\r\n color: var(--foreground);\r\n line-height: 1.2;\r\n }\r\n\r\n h1 { font-size: clamp(2.4rem, 5.5vw, 3.2rem); }\r\n h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); }\r\n h3 { font-size: clamp(1.5rem, 2.5vw, 1.9rem); }\r\n\r\n .section-sub {\r\n font-size: 1.02rem;\r\n color: var(--muted);\r\n font-weight: 400;\r\n line-height: 1.85;\r\n max-width: 680px;\r\n }\r\n\r\n \/* ============================================================\r\n REVEAL ANIMATION\r\n ============================================================ *\/\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.75s ease, transform 0.75s ease;\r\n }\r\n .reveal.visible { opacity: 1; transform: translateY(0); }\r\n .reveal-delay-1 { transition-delay: 0.12s; }\r\n .reveal-delay-2 { transition-delay: 0.24s; }\r\n .reveal-delay-3 { transition-delay: 0.36s; }\r\n\r\n \/* ============================================================\r\n BUTTONS\r\n ============================================================ *\/\r\n .btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n min-height: 50px;\r\n padding: 0.9rem 1.7rem;\r\n border-radius: var(--radius-sm);\r\n letter-spacing: 0.08em;\r\n font-size: 0.88rem;\r\n font-weight: 400;\r\n border: 1px solid transparent;\r\n transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;\r\n }\r\n .btn-primary { background: var(--ntl-deep); color: var(--white); }\r\n .btn-primary:hover { background: var(--ntl-medium); transform: translateY(-2px); }\r\n .btn-ghost { border-color: rgba(141,122,151,0.38); color: var(--ntl-deep); background: transparent; }\r\n .btn-ghost:hover { border-color: var(--ntl-deep); background: rgba(141,122,151,0.06); transform: translateY(-2px); }\r\n .btn-white { background: var(--white); color: var(--ntl-deep); }\r\n .btn-white:hover { background: var(--ntl-offwhite); transform: translateY(-2px); }\r\n\r\n \/* ============================================================\r\n IMAGE PLACEHOLDER SYSTEM\r\n ============================================================ *\/\r\n .img-placeholder {\r\n background: linear-gradient(145deg, rgba(184,167,192,0.28), rgba(141,122,151,0.14));\r\n border: 1px dashed rgba(141,122,151,0.32);\r\n border-radius: var(--radius-md);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.6rem;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .img-placeholder::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background:\r\n linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 50%),\r\n radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), transparent 60%);\r\n }\r\n .img-placeholder-label {\r\n position: relative;\r\n z-index: 1;\r\n text-align: center;\r\n }\r\n .img-placeholder-label span {\r\n display: block;\r\n font-size: 0.68rem;\r\n letter-spacing: 0.22em;\r\n text-transform: uppercase;\r\n color: var(--ntl-medium);\r\n font-weight: 500;\r\n }\r\n .img-placeholder-label small {\r\n display: block;\r\n font-size: 0.62rem;\r\n color: rgba(141,122,151,0.65);\r\n margin-top: 0.3rem;\r\n letter-spacing: 0.1em;\r\n }\r\n .img-placeholder-icon {\r\n position: relative;\r\n z-index: 1;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.52);\r\n border: 1px solid rgba(141,122,151,0.24);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .img-placeholder-icon svg {\r\n width: 18px;\r\n height: 18px;\r\n stroke: var(--ntl-medium);\r\n fill: none;\r\n stroke-width: 1.5;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n \/* ============================================================\r\n DECORATIVE SVG ELEMENTS\r\n ============================================================ *\/\r\n .deco-line {\r\n position: absolute;\r\n pointer-events: none;\r\n opacity: 0.55;\r\n }\r\n\r\n \/* ============================================================\r\n PILL TAGS\r\n ============================================================ *\/\r\n .pill {\r\n display: inline-flex;\r\n align-items: center;\r\n min-height: 26px;\r\n padding: 0.2rem 0.65rem;\r\n border-radius: 999px;\r\n background: rgba(247,244,241,0.82);\r\n border: 1px solid rgba(141,122,151,0.16);\r\n color: var(--muted);\r\n font-size: 0.76rem;\r\n letter-spacing: 0.04em;\r\n }\r\n .pill-dark {\r\n background: rgba(141,122,151,0.14);\r\n border-color: rgba(141,122,151,0.22);\r\n color: var(--ntl-deep);\r\n }\r\n\r\n \/* ============================================================\r\n SECTION 1 \u2014 HERO\r\n Layout: 50\/50 asymmetric split\r\n Left: text + stats | Right: stacked image composition\r\n ============================================================ *\/\r\n .s-hero {\r\n min-height: 70vh;\r\n display: grid;\r\n align-items: center;\r\n padding: clamp(5rem,9vw,8rem) 0 clamp(4rem,7vw,6rem);\r\n position: relative;\r\n overflow: hidden;\r\n background:\r\n radial-gradient(circle at 6% 8%, rgba(184,167,192,0.20), transparent 32%),\r\n radial-gradient(circle at 88% 14%, rgba(159,138,168,0.14), transparent 30%),\r\n var(--ntl-offwhite);\r\n }\r\n\r\n \/* Subtle grid texture *\/\r\n .s-hero::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n opacity: 0.28;\r\n background-image:\r\n linear-gradient(rgba(141,122,151,0.06) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(141,122,151,0.05) 1px, transparent 1px);\r\n background-size: 72px 72px;\r\n mask-image: linear-gradient(180deg, rgba(0,0,0,0.6), transparent 70%);\r\n }\r\n\r\n .hero-grid {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);\r\n gap: clamp(3rem, 6vw, 7rem);\r\n align-items: center;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .hero-copy { max-width: 620px; }\r\n\r\n .hero-headline {\r\n margin-bottom: 1.6rem;\r\n }\r\n\r\n .hero-headline em {\r\n font-style: italic;\r\n color: var(--ntl-deep);\r\n }\r\n\r\n .hero-body {\r\n font-size: 1.05rem;\r\n color: var(--muted);\r\n font-weight: 300;\r\n line-height: 1.9;\r\n max-width: 580px;\r\n }\r\n\r\n .hero-actions {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.85rem;\r\n margin-top: 2.2rem;\r\n }\r\n\r\n .hero-stats {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 1px;\r\n margin-top: 3rem;\r\n padding-top: 2.2rem;\r\n border-top: 1px solid var(--soft-line);\r\n max-width: 560px;\r\n }\r\n\r\n .hero-stat {\r\n padding-right: 1.5rem;\r\n }\r\n\r\n .hero-stat strong {\r\n display: block;\r\n font-family: var(--font-serif);\r\n font-size: clamp(1.8rem, 3vw, 2.4rem);\r\n font-weight: 500;\r\n color: var(--ntl-deep);\r\n line-height: 1;\r\n margin-bottom: 0.4rem;\r\n }\r\n\r\n .hero-stat span {\r\n display: block;\r\n font-size: 1rem;\r\n color: var(--muted);\r\n line-height: 1.5;\r\n }\r\n\r\n \/* Hero visual composition *\/\r\n .hero-visual {\r\n position: relative;\r\n height: 620px;\r\n }\r\n\r\n \/* Main portrait image \u2014 top right *\/\r\n .hero-img-main {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n width: 82%;\r\n height: 78%;\r\n border-radius: 48% 48% var(--radius-lg) var(--radius-lg);\r\n overflow: hidden;\r\n }\r\n\r\n \/* Secondary landscape image \u2014 bottom left, overlapping *\/\r\n .hero-img-secondary {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 58%;\r\n height: 42%;\r\n border-radius: var(--radius-lg);\r\n overflow: hidden;\r\n box-shadow: 0 24px 60px rgba(51,46,56,0.12);\r\n }\r\n\r\n \/* Floating label badge *\/\r\n .hero-badge {\r\n position: absolute;\r\n bottom: 22%;\r\n right: 2%;\r\n width: 160px;\r\n padding: 1rem 1.1rem;\r\n background: rgba(255,255,255,0.72);\r\n border: 1px solid rgba(141,122,151,0.18);\r\n border-radius: var(--radius-md);\r\n backdrop-filter: blur(12px);\r\n box-shadow: 0 16px 40px rgba(141,122,151,0.16);\r\n }\r\n\r\n .hero-badge span {\r\n display: block;\r\n font-size: 0.64rem;\r\n letter-spacing: 0.24em;\r\n color: var(--ntl-medium);\r\n text-transform: uppercase;\r\n margin-bottom: 0.4rem;\r\n }\r\n\r\n .hero-badge strong {\r\n display: block;\r\n font-family: var(--font-serif);\r\n font-size: 1.2rem;\r\n font-weight: 400;\r\n color: var(--ntl-deep);\r\n line-height: 1.25;\r\n }\r\n\r\n \/* ============================================================\r\n SECTION 2 \u2014 INTRO STATEMENT\r\n Layout: Full-width centered pull quote \/ large typography\r\n ============================================================ *\/\r\n .s-statement {\r\n padding: clamp(5rem, 8vw, 7rem) 0;\r\n background: var(--ntl-offwhite);\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .s-statement::before {\r\n content: \"?\";\r\n position: absolute;\r\n font-family: var(--font-serif);\r\n font-size: 32vw;\r\n color: rgba(141,122,151,0.04);\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n pointer-events: none;\r\n line-height: 1;\r\n font-style: italic;\r\n }\r\n\r\n .statement-inner {\r\n position: relative;\r\n z-index: 1;\r\n max-width: 860px;\r\n margin: 0 auto;\r\n }\r\n\r\n .statement-q {\r\n font-family: var(--font-serif);\r\n font-size: clamp(1.9rem, 4.5vw, 3.2rem);\r\n font-weight: 300;\r\n font-style: italic;\r\n line-height: 1.35;\r\n color: var(--foreground);\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .statement-q em {\r\n font-style: normal;\r\n color: var(--ntl-deep);\r\n border-bottom: 1px solid rgba(141,122,151,0.4);\r\n }\r\n\r\n .statement-body {\r\n font-size: 1rem;\r\n color: var(--muted);\r\n font-weight: 400;\r\n line-height: 1.9;\r\n max-width: 640px;\r\n margin: 0 auto;\r\n }\r\n\r\n .statement-chooser {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.6rem;\r\n justify-content: center;\r\n margin-top: 2.4rem;\r\n }\r\n\r\n .chooser-pill {\r\n padding: 0.55rem 1.1rem;\r\n border-radius: 999px;\r\n background: rgba(255,255,255,0.72);\r\n border: 1px solid rgba(141,122,151,0.22);\r\n font-size: 0.88rem;\r\n color: var(--ntl-deep);\r\n cursor: pointer;\r\n transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;\r\n }\r\n\r\n .chooser-pill:hover {\r\n background: rgba(141,122,151,0.12);\r\n border-color: var(--ntl-deep);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* ============================================================\r\n SECTION 3 \u2014 SCENARIOS (STICKY SCROLL EDITORIAL)\r\n Layout: Sticky left nav + scrolling right editorial blocks\r\n ============================================================ *\/\r\n .s-scenarios {\r\n padding: var(--section-pad) 0;\r\n background: var(--white);\r\n position: relative;\r\n }\r\n\r\n .scenarios-header {\r\n max-width: 680px;\r\n margin-bottom: 4rem;\r\n }\r\n\r\n .scenarios-layout {\r\n display: grid;\r\n grid-template-columns: 280px minmax(0, 1fr);\r\n gap: clamp(2.5rem, 5vw, 5rem);\r\n align-items: start;\r\n }\r\n\r\n \/* Sticky left nav *\/\r\n .scenarios-nav {\r\n position: sticky;\r\n top: 2rem;\r\n padding: 1.8rem;\r\n background: rgba(247,244,241,0.82);\r\n border: 1px solid var(--soft-line);\r\n border-radius: var(--radius-lg);\r\n backdrop-filter: blur(8px);\r\n }\r\n\r\n .scenarios-nav-title {\r\n font-size: 0.85rem;\r\n letter-spacing: 0.28em;\r\n text-transform: uppercase;\r\n color: var(--ntl-medium);\r\n font-weight: 500;\r\n margin-bottom: 1.2rem;\r\n }\r\n\r\n .scenarios-nav-list {\r\n list-style: none;\r\n display: grid;\r\n gap: 0.4rem;\r\n }\r\n\r\n .scenarios-nav-item a {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n padding: 0.65rem 0.75rem;\r\n border-radius: var(--radius-sm);\r\n font-size: 1rem;\r\n color: var(--muted);\r\n transition: background 0.2s ease, color 0.2s ease;\r\n }\r\n\r\n .scenarios-nav-item a:hover,\r\n .scenarios-nav-item a.active {\r\n background: rgba(141,122,151,0.1);\r\n color: var(--ntl-deep);\r\n }\r\n\r\n .scenarios-nav-num {\r\n font-family: var(--font-serif);\r\n font-size: 1.1rem;\r\n color: var(--ntl-light);\r\n min-width: 24px;\r\n line-height: 1;\r\n }\r\n\r\n .scenarios-nav-item a.active .scenarios-nav-num {\r\n color: var(--ntl-deep);\r\n }\r\n\r\n .scenarios-nav-cta {\r\n margin-top: 1.8rem;\r\n padding-top: 1.4rem;\r\n border-top: 1px solid var(--soft-line);\r\n }\r\n\r\n .scenarios-nav-cta p {\r\n font-size: 1rem;\r\n color: var(--muted);\r\n line-height: 1.65;\r\n margin-bottom: 0.9rem;\r\n }\r\n\r\n \/* Scrolling right column *\/\r\n .scenarios-feed {\r\n display: grid;\r\n gap: 0px;\r\n }\r\n\r\n \/* Individual scenario block *\/\r\n .scenario-block {\r\n padding: clamp(2.5rem, 5vw, 4rem) 0;\r\n border-bottom: 1px solid var(--soft-line);\r\n position: relative;\r\n }\r\n\r\n .scenario-block:last-child { border-bottom: none; }\r\n\r\n .scenario-block-header {\r\n display: grid;\r\n grid-template-columns: 72px minmax(0, 1fr);\r\n gap: 1.5rem;\r\n align-items: start;\r\n margin-bottom: 2.5rem;\r\n }\r\n\r\n .scenario-num-badge {\r\n width: 72px;\r\n height: 72px;\r\n border-radius: 50%;\r\n background: rgba(184,167,192,0.18);\r\n border: 1px solid rgba(141,122,151,0.22);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--font-serif);\r\n font-size: 1.7rem;\r\n color: var(--ntl-deep);\r\n flex-shrink: 0;\r\n }\r\n\r\n .scenario-block-title { margin-bottom: 0.6rem; }\r\n\r\n .scenario-block-desc {\r\n font-size: 1rem;\r\n color: var(--muted);\r\n font-weight: 300;\r\n line-height: 1.8;\r\n max-width: 680px;\r\n }\r\n\r\n .scenario-tags {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.4rem;\r\n margin-top: 0.9rem;\r\n }\r\n\r\n \/* Pain + Support two-column inside scenario *\/\r\n .scenario-body {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\r\n gap: clamp(1.5rem, 4vw, 3rem);\r\n margin-bottom: 2.5rem;\r\n }\r\n\r\n .scenario-col-title {\r\n font-size: 1rem;\r\n letter-spacing: 0.26em;\r\n text-transform: uppercase;\r\n color: var(--ntl-medium);\r\n font-weight: 500;\r\n margin-bottom: 1.2rem;\r\n }\r\n\r\n \/* Pain points \u2014 highlight box style *\/\r\n .pain-box {\r\n background: rgba(247,244,241,0.9);\r\n border: 1px solid var(--soft-line);\r\n border-radius: var(--radius-md);\r\n padding: 1.4rem;\r\n }\r\n\r\n .pain-entry {\r\n display: grid;\r\n grid-template-columns: 8px minmax(0, 1fr);\r\n gap: 0.85rem;\r\n padding: 0.9rem 0;\r\n border-bottom: 1px solid rgba(141,122,151,0.08);\r\n }\r\n\r\n .pain-entry:last-child { border-bottom: none; padding-bottom: 0; }\r\n .pain-entry:first-child { padding-top: 0; }\r\n\r\n .pain-dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: var(--ntl-light);\r\n margin-top: 0.45rem;\r\n flex-shrink: 0;\r\n }\r\n\r\n .pain-entry strong {\r\n display: block;\r\n font-size: 1.2rem;\r\n font-weight: 500;\r\n color: var(--foreground);\r\n margin-bottom: 0.2rem;\r\n }\r\n\r\n .pain-entry span {\r\n display: block;\r\n font-size: 1rem;\r\n color: var(--muted);\r\n line-height: 1.7;\r\n font-weight: 300;\r\n }\r\n\r\n \/* Support list \u2014 clean numbered style *\/\r\n .support-list {\r\n display: grid;\r\n gap: 1.1rem;\r\n }\r\n\r\n .support-entry {\r\n display: grid;\r\n grid-template-columns: 28px minmax(0, 1fr);\r\n gap: 0.9rem;\r\n align-items: start;\r\n }\r\n\r\n .support-num {\r\n width: 28px;\r\n height: 28px;\r\n border-radius: 50%;\r\n background: rgba(141,122,151,0.12);\r\n border: 1px solid rgba(141,122,151,0.2);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 0.72rem;\r\n font-weight: 500;\r\n color: var(--ntl-deep);\r\n flex-shrink: 0;\r\n margin-top: 0.1rem;\r\n }\r\n\r\n .support-entry strong {\r\n display: block;\r\n font-size: 1.2rem;\r\n font-weight: 500;\r\n color: var(--foreground);\r\n margin-bottom: 0.2rem;\r\n }\r\n\r\n .support-entry span {\r\n display: block;\r\n font-size: 1rem;\r\n color: var(--muted);\r\n line-height: 1.7;\r\n font-weight: 300;\r\n }\r\n\r\n \/* Scenario image + metrics row *\/\r\n .scenario-visual-row {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1fr) 260px;\r\n gap: clamp(1.5rem, 3vw, 2.5rem);\r\n align-items: stretch;\r\n }\r\n\r\n \/* Scenario image placeholder *\/\r\n .scenario-img {\r\n border-radius: var(--radius-md);\r\n overflow: hidden;\r\n min-height: 200px;\r\n }\r\n\r\n \/* Metrics card *\/\r\n .metrics-card {\r\n background: rgba(247,244,241,0.9);\r\n border: 1px solid var(--soft-line);\r\n border-radius: var(--radius-md);\r\n padding: 1.4rem;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.8rem;\r\n }\r\n\r\n .metrics-card-title {\r\n font-size: 0.68rem;\r\n letter-spacing: 0.26em;\r\n text-transform: uppercase;\r\n color: var(--ntl-medium);\r\n font-weight: 500;\r\n }\r\n\r\n .metric-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 0.55rem;\r\n flex: 1;\r\n }\r\n\r\n .metric-item {\r\n background: var(--white);\r\n border: 1px solid rgba(141,122,151,0.1);\r\n border-radius: var(--radius-sm);\r\n padding: 0.75rem;\r\n }\r\n\r\n .metric-item strong {\r\n display: block;\r\n font-family: var(--font-serif);\r\n font-size: 1.3rem;\r\n font-weight: 500;\r\n color: var(--ntl-deep);\r\n line-height: 1;\r\n margin-bottom: 0.25rem;\r\n }\r\n\r\n .metric-item span {\r\n display: block;\r\n font-size: 1rem;\r\n color: var(--muted);\r\n line-height: 1.45;\r\n }\r\n\r\n .scenario-quote {\r\n padding-top: 0.9rem;\r\n border-top: 1px solid var(--soft-line);\r\n margin-top: auto;\r\n }\r\n\r\n .scenario-quote p {\r\n font-family: var(--font-serif);\r\n font-size: 0.98rem;\r\n font-style: italic;\r\n color: rgba(51,46,56,0.75);\r\n line-height: 1.55;\r\n }\r\n\r\n .scenario-quote cite {\r\n display: block;\r\n margin-top: 0.5rem;\r\n font-style: normal;\r\n font-size: 0.76rem;\r\n color: var(--ntl-medium);\r\n letter-spacing: 0.06em;\r\n }\r\n\r\n .scenario-cta-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.4rem;\r\n font-size: 0.88rem;\r\n color: var(--ntl-deep);\r\n border-bottom: 1px solid rgba(141,122,151,0.35);\r\n padding-bottom: 0.1rem;\r\n transition: color 0.2s ease, border-color 0.2s ease;\r\n margin-top: 1.5rem;\r\n }\r\n\r\n .scenario-cta-link:hover { color: var(--foreground); border-color: var(--foreground); }\r\n\r\n \/* ============================================================\r\n SECTION 6 \u2014 FAQ\r\n Layout: Centered, minimalist accordion\r\n ============================================================ *\/\r\n .s-faq {\r\n padding: var(--section-pad) 0;\r\n background: var(--white);\r\n }\r\n\r\n .faq-header {\r\n max-width: 680px;\r\n margin: 0 auto 3.5rem;\r\n text-align: center;\r\n }\r\n\r\n .faq-list {\r\n max-width: 760px;\r\n margin: 0 auto;\r\n }\r\n\r\n .faq-item {\r\n border-bottom: 1px solid var(--soft-line);\r\n }\r\n\r\n .faq-item:first-child { border-top: 1px solid var(--soft-line); }\r\n\r\n .faq-q {\r\n width: 100%;\r\n text-align: left;\r\n border: 0;\r\n background: transparent;\r\n padding: 1.4rem 0;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 1.5rem;\r\n color: var(--foreground);\r\n }\r\n\r\n .faq-q-text {\r\n font-size: 1rem;\r\n font-weight: 500;\r\n line-height: 1.5;\r\n }\r\n\r\n .faq-icon {\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n border: 1px solid var(--soft-line);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n color: var(--ntl-medium);\r\n transition: background 0.2s ease, transform 0.3s ease;\r\n font-size: 1.1rem;\r\n line-height: 1;\r\n }\r\n\r\n .faq-item.is-open .faq-icon {\r\n background: rgba(141,122,151,0.1);\r\n transform: rotate(45deg);\r\n }\r\n\r\n .faq-a {\r\n display: grid;\r\n grid-template-rows: 0fr;\r\n transition: grid-template-rows 0.35s ease;\r\n }\r\n\r\n .faq-item.is-open .faq-a { grid-template-rows: 1fr; }\r\n .faq-a-inner { overflow: hidden; }\r\n\r\n .faq-a p {\r\n padding-bottom: 1.4rem;\r\n font-size: 1rem;\r\n color: var(--muted);\r\n font-weight: 400;\r\n line-height: 1.85;\r\n }\r\n \/* ============================================================\r\n SECTION 7 \u2014 FINAL CTA\r\n Layout: Full-screen background image with centered frosted glass box\r\n ============================================================ *\/\r\n .s-cta {\r\n position: relative;\r\n min-height: 80vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n }\r\n\r\n .s-cta-bg {\r\n position: absolute;\r\n inset: 0;\r\n }\r\n\r\n .s-cta-bg .img-placeholder {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 0;\r\n border: none;\r\n background: linear-gradient(145deg, rgba(141,122,151,0.9), rgba(51,46,56,0.85));\r\n }\r\n\r\n \/* Organic blob decoration *\/\r\n .s-cta::before {\r\n content: \"\";\r\n position: absolute;\r\n width: 600px;\r\n height: 600px;\r\n border-radius: 52% 48% 44% 56% \/ 50% 46% 54% 50%;\r\n border: 1px solid rgba(255,255,255,0.12);\r\n right: -200px;\r\n top: -200px;\r\n pointer-events: none;\r\n }\r\n\r\n .s-cta::after {\r\n content: \"\";\r\n position: absolute;\r\n width: 400px;\r\n height: 400px;\r\n border-radius: 44% 56% 52% 48% \/ 46% 54% 46% 54%;\r\n border: 1px solid rgba(255,255,255,0.08);\r\n left: -100px;\r\n bottom: -100px;\r\n pointer-events: none;\r\n }\r\n\r\n .cta-box {\r\n position: relative;\r\n z-index: 1;\r\n max-width: 720px;\r\n width: min(100% - 40px, 720px);\r\n padding: clamp(2.5rem, 5vw, 4rem);\r\n background: rgba(255,255,255,0.1);\r\n border: 1px solid rgba(255,255,255,0.18);\r\n border-radius: var(--radius-lg);\r\n backdrop-filter: blur(20px);\r\n text-align: center;\r\n }\r\n\r\n .cta-box .eyebrow { color: rgba(255,255,255,0.6); }\r\n .cta-box h2 { color: var(--white); margin-bottom: 1.4rem; }\r\n\r\n .cta-box p {\r\n font-size: 1rem;\r\n color: rgba(255,255,255,0.75);\r\n font-weight: 300;\r\n line-height: 1.9;\r\n max-width: 580px;\r\n margin: 0 auto;\r\n }\r\n\r\n .cta-actions {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.85rem;\r\n justify-content: center;\r\n margin-top: 2.2rem;\r\n }\r\n\r\n .cta-contact-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 1.5rem;\r\n justify-content: center;\r\n margin-top: 1.8rem;\r\n padding-top: 1.8rem;\r\n border-top: 1px solid rgba(255,255,255,0.14);\r\n }\r\n\r\n .cta-contact-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.6rem;\r\n font-size: 1rem;\r\n color: rgba(255,255,255,0.65);\r\n }\r\n\r\n .cta-contact-item a {\r\n color: rgba(255,255,255,0.88);\r\n border-bottom: 1px solid rgba(255,255,255,0.3);\r\n padding-bottom: 0.1rem;\r\n transition: color 0.2s ease;\r\n }\r\n\r\n .cta-contact-item a:hover { color: var(--white); }\r\n\r\n \/* ============================================================\r\n RESPONSIVE\r\n ============================================================ *\/\r\n @media (max-width: 1024px) {\r\n .scenarios-layout { grid-template-columns: 1fr; }\r\n .scenarios-nav { position: relative; top: auto; }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .hero-grid { grid-template-columns: 1fr; }\r\n .hero-visual { height: 420px; max-width: 500px; margin: 0 auto; width: 100%; }\r\n .hero-stats { grid-template-columns: repeat(3, 1fr); }\r\n .decision-row { grid-template-columns: 1fr; }\r\n .decision-row.reverse { direction: ltr; }\r\n .decision-row-center { grid-template-columns: 1fr; }\r\n .decision-center-text { grid-column: span 1; }\r\n }\r\n\r\n @media (max-width: 700px) {\r\n .scenario-body { grid-template-columns: 1fr; }\r\n .scenario-visual-row { grid-template-columns: 1fr; }\r\n .hero-stats { grid-template-columns: 1fr 1fr; }\r\n .story-card { width: 280px; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .hero-stats { grid-template-columns: 1fr; }\r\n .metric-grid { grid-template-columns: 1fr 1fr; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<main>\r\n\r\n <!-- ============================================================\r\n SECTION 1 \u2014 HERO\r\n Layout: 50\/50 asymmetric split\r\n Left: headline + stats | Right: stacked image composition\r\n ============================================================ -->\r\n <section class=\"s-hero\" id=\"top\">\r\n <div class=\"container\">\r\n <div class=\"hero-grid\">\r\n\r\n <!-- LEFT: Copy -->\r\n <div class=\"hero-copy reveal\">\r\n <span class=\"eyebrow\">NTL \u5834\u666f\u5316\u89e3\u6c7a\u65b9\u6848<\/span>\r\n <h1 class=\"hero-headline\">\u5148\u770b\u4f01\u696d\u72c0\u6cc1\uff0c<br \/><em>\u518d\u914d\u5c0d\u771f\u6b63\u9700\u8981\u7684\u652f\u63f4\u3002<\/em><\/h1>\r\n <p class=\"hero-body\">\u4e0d\u540c\u4f01\u696d\u9762\u5c0d\u7684\u4eba\u624d\u8207\u71df\u904b\u58d3\u529b\u4e26\u4e0d\u4e00\u6a23\u3002NTL \u4ee5\u5834\u666f\u65b9\u5f0f\u5354\u52a9\u7ba1\u7406\u5c64\u5feb\u901f\u5224\u65b7\uff1a\u73fe\u5728\u6700\u6025\u7684\u662f\u4eba\u624b\u3001\u5236\u5ea6\u3001\u6392\u73ed\u85aa\u916c\u3001\u672c\u5730\u5408\u898f\uff0c\u9084\u662f\u6578\u4f4d\u8f49\u578b\uff0c\u7136\u5f8c\u4ee5\u6210\u719f\u7d93\u9a57\u3001\u6e05\u6670\u6d41\u7a0b\u8207\u53ef\u9810\u6e2c\u6210\u672c\u4ecb\u5165\u3002<\/p>\r\n <div class=\"hero-actions\">\r\n <a class=\"btn btn-primary\" href=\"#scenarios\">\u67e5\u770b\u4e94\u500b\u5834\u666f<\/a>\r\n <a class=\"btn btn-ghost\" href=\"#contact\">\u514d\u8cbb\u8aee\u8a62<\/a>\r\n <\/div>\r\n <div class=\"hero-stats\">\r\n <div class=\"hero-stat\">\r\n <strong>5<\/strong>\r\n <span>\u500b\u5e38\u898b\u4f01\u696d\u5834\u666f\uff0c\u8b93\u7ba1\u7406\u5c64\u5feb\u901f\u5c0d\u865f\u5165\u5ea7<\/span>\r\n <\/div>\r\n <div class=\"hero-stat\">\r\n <strong>72h<\/strong>\r\n <span>\u77ed\u671f\u4eba\u624b\u8207\u9805\u76ee\u652f\u63f4\u53ef\u5feb\u901f\u555f\u52d5\u914d\u5c0d<\/span>\r\n <\/div>\r\n <div class=\"hero-stat\">\r\n <strong>20\u5e74<\/strong>\r\n <span>\u7531\u5177\u6210\u719f\u7d93\u9a57\u7684\u4eba\u624d\u8207\u9867\u554f\u63d0\u4f9b\u652f\u63f4<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- RIGHT: Image composition -->\r\n <!-- IMAGE PLACEHOLDER NOTES:\r\n hero-img-main: Portrait image, ratio 4:5, ~390\u00d7490px\r\n Suggested: professional woman in office\/workspace\r\n hero-img-secondary: Landscape image, ratio 16:9, ~320\u00d7180px\r\n Suggested: team collaboration or workspace detail\r\n -->\r\n <div class=\"hero-visual reveal reveal-delay-1\" aria-hidden=\"true\">\r\n <div class=\"hero-img-main img-placeholder\">\r\n <div class=\"img-placeholder-icon\">\r\n <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\r\n <\/div>\r\n <div class=\"img-placeholder-label\">\r\n <span>\u4e3b\u8996\u89ba\u5716\u7247<\/span>\r\n <small>\u5efa\u8b70\u6bd4\u4f8b 4:5 \u00b7 \u8096\u50cf\/\u4eba\u7269<\/small>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hero-img-secondary img-placeholder\">\r\n <div class=\"img-placeholder-icon\">\r\n <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\r\n <\/div>\r\n <div class=\"img-placeholder-label\">\r\n <span>\u8f14\u52a9\u5716\u7247<\/span>\r\n <small>\u5efa\u8b70\u6bd4\u4f8b 16:9 \u00b7 \u5de5\u4f5c\u5834\u666f<\/small>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n <!-- ============================================================\r\n SECTION 2 \u2014 INTRO STATEMENT\r\n Layout: Full-width centered large typography \/ pull quote\r\n Purpose: Visual break + guide user into the 5 scenarios\r\n ============================================================ -->\r\n <section class=\"s-statement\" id=\"chooser\">\r\n <div class=\"container\">\r\n <div class=\"statement-inner reveal\">\r\n <span class=\"eyebrow\">\u5982\u4f55\u4f7f\u7528\u6b64\u9801<\/span>\r\n <p class=\"statement-q\">\u4f60\u73fe\u5728\u6700\u9700\u8981\u89e3\u6c7a\u7684\uff0c<br \/>\u662f<em>\u4eba\u624b\u3001\u5236\u5ea6\u3001\u85aa\u916c<\/em>\uff0c<br \/>\u9084\u662f\u8f49\u578b\uff1f<\/p>\r\n <p class=\"statement-body\">\u6309\u4f01\u696d\u6700\u5e38\u898b\u7684\u4e94\u7a2e\u58d3\u529b\uff0c\u628a\u9700\u6c42\u3001\u652f\u63f4\u65b9\u5f0f\u3001\u5178\u578b\u6210\u679c\u6574\u7406\u6210\u6e05\u6670\u5834\u666f\u3002\u5148\u9ede\u64ca\u6700\u63a5\u8fd1\u516c\u53f8\u72c0\u6cc1\u7684\u5834\u666f\uff0c\u518d\u6c7a\u5b9a\u662f\u5426\u9700\u8981\u8207 NTL \u9032\u4e00\u6b65\u50be\u8ac7\u3002<\/p>\r\n <div class=\"statement-chooser\">\r\n <a class=\"chooser-pill\" href=\"#scenario-1\">\u77ed\u671f\u5927\u91cf\u4eba\u624b\u4e0d\u8db3<\/a>\r\n <a class=\"chooser-pill\" href=\"#scenario-2\">\u5feb\u901f\u64f4\u5f35\u4f46\u5236\u5ea6\u672a\u6210\u5f62<\/a>\r\n <a class=\"chooser-pill\" href=\"#scenario-3\">\u6392\u73ed\u8207\u85aa\u916c\u5bb9\u6613\u51fa\u932f<\/a>\r\n <a class=\"chooser-pill\" href=\"#scenario-4\">\u9999\u6e2f\u843d\u5730\u9700\u8981\u672c\u5730\u5408\u898f<\/a>\r\n <a class=\"chooser-pill\" href=\"#scenario-5\">\u820a\u6d41\u7a0b\u8207\u65b0\u7cfb\u7d71\u4e26\u884c<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n <!-- ============================================================\r\n SECTION 3 \u2014 FIVE SCENARIOS (STICKY SCROLL EDITORIAL)\r\n Layout: Sticky left nav + scrolling right editorial blocks\r\n Purpose: Present 5 scenarios with full detail, no accordion\r\n ============================================================ -->\r\n <section class=\"s-scenarios\" id=\"scenarios\">\r\n <div class=\"container\">\r\n\r\n <div class=\"scenarios-header reveal\">\r\n <span class=\"eyebrow\">\u4e94\u500b\u5834\u666f<\/span>\r\n <h2>\u4f60\u76ee\u524d\u6b63\u5728\u9762\u5c0d\u4ee5\u4e0b\u5834\u666f\u55ce\uff1f<\/h2>\r\n <\/div>\r\n\r\n <div class=\"scenarios-layout\">\r\n\r\n <!-- STICKY LEFT NAV -->\r\n <aside class=\"scenarios-nav reveal\">\r\n <div class=\"scenarios-nav-title\">\u5feb\u901f\u5c0e\u822a<\/div>\r\n <ul class=\"scenarios-nav-list\">\r\n <li class=\"scenarios-nav-item\"><a href=\"#scenario-1\" class=\"active\"><span class=\"scenarios-nav-num\">01<\/span>\u7cfb\u7d71\u9077\u79fb \u00b7 \u77ed\u671f\u9805\u76ee<\/a><\/li>\r\n <li class=\"scenarios-nav-item\"><a href=\"#scenario-2\"><span class=\"scenarios-nav-num\">02<\/span>\u521d\u5275\u5feb\u901f\u64f4\u5f35<\/a><\/li>\r\n <li class=\"scenarios-nav-item\"><a href=\"#scenario-3\"><span class=\"scenarios-nav-num\">03<\/span>\u9910\u98f2\u8207\u96f6\u552e\u65fa\u5b63<\/a><\/li>\r\n <li class=\"scenarios-nav-item\"><a href=\"#scenario-4\"><span class=\"scenarios-nav-num\">04<\/span>\u5916\u8cc7\u9999\u6e2f\u843d\u5730<\/a><\/li>\r\n <li class=\"scenarios-nav-item\"><a href=\"#scenario-5\"><span class=\"scenarios-nav-num\">05<\/span>\u50b3\u7d71\u4f01\u696d\u6578\u4f4d\u8f49\u578b<\/a><\/li>\r\n <\/ul>\r\n <div class=\"scenarios-nav-cta\">\r\n <p>\u4e0d\u78ba\u5b9a\u5c6c\u65bc\u54ea\u500b\u5834\u666f\uff1f\u76f4\u63a5\u806f\u7e6b\u6211\u5011\uff0cNTL \u5354\u52a9\u4f60\u5224\u65b7\u512a\u5148\u6b21\u5e8f\u3002<\/p>\r\n <a class=\"btn btn-primary\" href=\"#contact\" style=\"width:100%;justify-content:center;\">\u806f\u7e6b\u6211\u5011<\/a>\r\n <\/div>\r\n <\/aside>\r\n\r\n <!-- SCROLLING RIGHT COLUMN -->\r\n <div class=\"scenarios-feed\">\r\n\r\n <!-- \u2500\u2500 SCENARIO 01 \u2500\u2500 -->\r\n <!-- IMAGE PLACEHOLDER: scenario-img-1\r\n Ratio: 16:9, ~680\u00d7382px\r\n Suggested: IT office, data migration, team at computers\r\n -->\r\n <article class=\"scenario-block reveal\" id=\"scenario-1\">\r\n <div class=\"scenario-block-header\">\r\n <div class=\"scenario-num-badge\">01<\/div>\r\n <div>\r\n <h3 class=\"scenario-block-title\">\u7cfb\u7d71\u9077\u79fb\u6216\u77ed\u671f\u9805\u76ee\uff1a\u9700\u8981\u5373\u63d2\u5373\u7528\u6210\u719f\u6230\u529b<\/h3>\r\n <p class=\"scenario-block-desc\">\u9069\u5408 IT \u4f01\u696d\u3001\u8de8\u570b\u516c\u53f8\u6216\u5927\u578b\u9805\u76ee\u5718\u968a\uff0c\u5728 2\u201312 \u9031\u5167\u9700\u8981\u5927\u91cf\u53ef\u9760\u4eba\u624b\u5b8c\u6210\u8cc7\u6599\u6574\u7406\u3001\u6d41\u7a0b\u652f\u63f4\u3001\u7528\u6236\u8ddf\u9032\u6216\u5167\u90e8\u5354\u8abf\u3002<\/p>\r\n <div class=\"scenario-tags\">\r\n <span class=\"pill pill-dark\">72 \u5c0f\u6642\u914d\u5c0d<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scenario-body\">\r\n <div>\r\n <div class=\"scenario-col-title\">\u4f60\u53ef\u80fd\u6b63\u9762\u5c0d<\/div>\r\n <div class=\"pain-box\">\r\n <div class=\"pain-entry\">\r\n <div class=\"pain-dot\"><\/div>\r\n <div><strong>\u9805\u76ee\u6642\u9593\u8868\u7a81\u7136\u6536\u7dca<\/strong><span>\u539f\u672c\u53ef\u6162\u6162\u5b8c\u6210\u7684\u9077\u79fb\u3001\u6574\u7406\u6216\u6aa2\u67e5\u5de5\u4f5c\uff0c\u7a81\u7136\u9700\u8981\u5728\u6578\u9031\u5167\u5b8c\u6210\uff0c\u5167\u90e8\u5718\u968a\u5df2\u7121\u6cd5\u518d\u5438\u6536\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"pain-entry\">\r\n <div class=\"pain-dot\"><\/div>\r\n <div><strong>\u666e\u901a\u62db\u8058\u592a\u6162\uff0c\u5916\u5305\u53c8\u592a\u964c\u751f<\/strong><span>\u4f60\u9700\u8981\u7684\u662f\u61c2\u8077\u5834\u3001\u61c2\u6d41\u7a0b\u3001\u80fd\u7acb\u5373\u4e0a\u624b\u7684\u4eba\uff0c\u800c\u4e0d\u662f\u4ecd\u8981\u5927\u91cf\u57f9\u8a13\u7684\u65b0\u4eba\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"pain-entry\">\r\n <div class=\"pain-dot\"><\/div>\r\n <div><strong>\u7ba1\u7406\u5c64\u4e0d\u60f3\u589e\u52a0\u9577\u671f\u56fa\u5b9a\u6210\u672c<\/strong><span>\u9805\u76ee\u5b8c\u6210\u5f8c\u4e0d\u4e00\u5b9a\u9700\u8981\u9577\u671f\u8077\u4f4d\uff0c\u56e0\u6b64\u66f4\u9700\u8981\u77ed\u671f\u3001\u6e05\u6670\u3001\u53ef\u9000\u51fa\u7684\u652f\u63f4\u6a21\u5f0f\u3002<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"scenario-col-title\">NTL \u5982\u4f55\u4ecb\u5165<\/div>\r\n <div class=\"support-list\">\r\n <div class=\"support-entry\">\r\n <div class=\"support-num\">1<\/div>\r\n <div><strong>\u5feb\u901f\u7406\u89e3\u9805\u76ee\u4efb\u52d9<\/strong><span>\u5148\u91d0\u6e05\u5de5\u4f5c\u91cf\u3001\u6240\u9700\u7d93\u9a57\u3001\u4fdd\u5bc6\u8981\u6c42\u53ca\u6642\u7a0b\uff0c\u518d\u5b9a\u7fa9\u5408\u9069\u7684\u4eba\u624b\u7d44\u5408\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"support-entry\">\r\n <div class=\"support-num\">2<\/div>\r\n <div><strong>\u914d\u5c0d\u6210\u719f\u652f\u63f4\u4eba\u54e1<\/strong><span>\u6309 48 \u5c0f\u6642\u914d\u5c0d\u7bc0\u594f\u63d0\u4f9b\u5177 15\u201320 \u5e74\u7d93\u9a57\u7684\u4eba\u624d\uff0c\u5354\u52a9\u4f01\u696d\u5373\u6642\u88dc\u8db3\u57f7\u884c\u529b\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"support-entry\">\r\n <div class=\"support-num\">3<\/div>\r\n <div><strong>\u6309\u9805\u76ee\u7bc0\u594f\u8abf\u6574\u4eba\u624b<\/strong><span>\u53ef\u6309\u65e5\u3001\u6309\u9031\u6216\u6309\u968e\u6bb5\u589e\u6e1b\u652f\u63f4\uff0c\u4e0d\u9700\u8981\u4f01\u696d\u627f\u64d4\u9577\u671f\u8058\u7528\u98a8\u96aa\u3002<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scenario-visual-row\">\r\n <div class=\"scenario-img img-placeholder\">\r\n <div class=\"img-placeholder-icon\">\r\n <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\r\n <\/div>\r\n <div class=\"img-placeholder-label\">\r\n <span>\u5834\u666f\u5716\u7247 01<\/span>\r\n <small>\u5efa\u8b70\u6bd4\u4f8b 16:9 \u00b7 IT \/ \u8fa6\u516c\u5ba4\u5354\u4f5c<\/small>\r\n <\/div>\r\n <\/div>\r\n <div class=\"metrics-card\">\r\n <div class=\"metrics-card-title\">\u9810\u671f\u6210\u679c<\/div>\r\n <div class=\"metric-grid\">\r\n <div class=\"metric-item\"><strong>2 \u9031<\/strong><span>\u5b8c\u6210\u539f\u672c\u9700\u7d04 2 \u500b\u6708\u7684\u5de5\u4f5c\u91cf<\/span><\/div>\r\n <div class=\"metric-item\"><strong>72h<\/strong><span>\u5b8c\u6210\u521d\u6b65\u4eba\u624b\u914d\u5c0d<\/span><\/div>\r\n <div class=\"metric-item\"><strong>2\u201312\u9031<\/strong><span>\u5178\u578b\u652f\u63f4\u6642\u9593\u8868<\/span><\/div>\r\n <div class=\"metric-item\"><strong>\u53ef\u63a7<\/strong><span>\u4ee5\u65e5\u8cbb\u6216\u9031\u8cbb\u63a7\u5236\u6210\u672c<\/span><\/div>\r\n <\/div>\r\n <div class=\"scenario-quote\">\r\n <p>\u300c\u6211\u5011\u5728 2 \u9031\u5167\u5b8c\u6210\u4e86\u672c\u61c9\u82b1 2 \u500b\u6708\u7684\u5de5\u4f5c\u3002\u300d<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <a class=\"scenario-cta-link\" href=\"#contact\">\u5c31\u6b64\u5834\u666f\u806f\u7e6b\u6211\u5011 \u2192<\/a>\r\n <\/article>\r\n\r\n <!-- \u2500\u2500 SCENARIO 02 \u2500\u2500 -->\r\n <!-- IMAGE PLACEHOLDER: scenario-img-2\r\n Ratio: 4:5, ~480\u00d7600px\r\n Suggested: startup team, whiteboard planning, founders\r\n -->\r\n <article class=\"scenario-block reveal\" id=\"scenario-2\">\r\n <div class=\"scenario-block-header\">\r\n <div class=\"scenario-num-badge\">02<\/div>\r\n <div>\r\n <h3 class=\"scenario-block-title\">\u521d\u5275\u5feb\u901f\u64f4\u5f35\uff1a\u5148\u628a\u4eba\u4e8b\u5236\u5ea6\u6253\u597d\u5e95<\/h3>\r\n <p class=\"scenario-block-desc\">\u9069\u5408 5\u201320 \u4eba\u6b63\u5728\u52a0\u901f\u62db\u8058\u7684\u521d\u5275\u6216\u65b0\u8208\u4f01\u696d\uff0c\u9700\u8981\u5728\u4e0d\u904e\u5ea6\u884c\u653f\u5316\u7684\u60c5\u6cc1\u4e0b\uff0c\u5efa\u7acb\u54e1\u5de5\u624b\u518a\u3001\u5165\u8077\u6d41\u7a0b\u3001\u85aa\u916c\u5047\u671f\u898f\u5247\u8207\u57fa\u790e HR \u7cfb\u7d71\u3002<\/p>\r\n <div class=\"scenario-tags\">\r\n <span class=\"pill pill-dark\">\u5236\u5ea6\u5efa\u7acb<\/span>\r\n <span class=\"pill pill-dark\">4\u20136 \u9031<\/span>\r\n <span class=\"pill pill-dark\">\u6309\u9805\u76ee\u6536\u8cbb<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scenario-body\">\r\n <div>\r\n <div class=\"scenario-col-title\">\u4f60\u53ef\u80fd\u6b63\u9762\u5c0d<\/div>\r\n <div class=\"pain-box\">\r\n <div class=\"pain-entry\">\r\n <div class=\"pain-dot\"><\/div>\r\n <div><strong>\u62db\u8058\u901f\u5ea6\u5feb\u904e\u5236\u5ea6\u6210\u719f\u5ea6<\/strong><span>\u5718\u968a\u4eba\u6578\u589e\u52a0\uff0c\u4f46\u5165\u8077\u3001\u5047\u671f\u3001\u85aa\u916c\u3001\u8a66\u7528\u671f\u8207\u7d00\u5f8b\u7a0b\u5e8f\u4ecd\u9760\u53e3\u982d\u8655\u7406\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"pain-entry\">\r\n <div class=\"pain-dot\"><\/div>\r\n <div><strong>\u5275\u8fa6\u4eba\u88ab\u884c\u653f\u554f\u984c\u62c9\u4f4f<\/strong><span>\u672c\u61c9\u6295\u5165\u7522\u54c1\u3001\u5ba2\u6236\u8207\u878d\u8cc7\uff0c\u4f46\u6bcf\u5929\u88ab\u54e1\u5de5\u554f\u984c\u3001\u5408\u7d04\u7d30\u7bc0\u8207\u6d41\u7a0b\u6c7a\u5b9a\u6d88\u8017\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"pain-entry\">\r\n <div class=\"pain-dot\"><\/div>\r\n <div><strong>\u4e0d\u60f3\u8acb\u5168\u8077 HR\uff0c\u4f46\u53c8\u4e0d\u80fd\u6c92\u6709\u5236\u5ea6<\/strong><span>\u4f01\u696d\u4ecd\u5728\u6210\u9577\u521d\u671f\uff0c\u9700\u8981\u8f15\u91cf\u4f46\u5408\u898f\u7684\u4eba\u4e8b\u57fa\u790e\uff0c\u800c\u4e0d\u662f\u539a\u91cd\u3001\u96e3\u843d\u5730\u7684\u6587\u4ef6\u3002<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"scenario-col-title\">NTL \u5982\u4f55\u4ecb\u5165<\/div>\r\n <div class=\"support-list\">\r\n <div class=\"support-entry\">\r\n <div class=\"support-num\">1<\/div>\r\n <div><strong>\u5efa\u7acb\u53ef\u57f7\u884c\u54e1\u5de5\u624b\u518a<\/strong><span>\u628a\u5047\u671f\u3001\u85aa\u916c\u3001\u5165\u8077\u3001\u96e2\u8077\u8207\u7d00\u5f8b\u6d41\u7a0b\u5beb\u6210\u5718\u968a\u771f\u6b63\u770b\u5f97\u61c2\u3001\u7528\u5f97\u5230\u7684\u5236\u5ea6\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"support-entry\">\r\n <div class=\"support-num\">2<\/div>\r\n <div><strong>\u8a2d\u8a08\u57fa\u790e HR \u6d41\u7a0b<\/strong><span>\u5354\u52a9\u5efa\u7acb\u5165\u8077\u6e05\u55ae\u3001\u5408\u7d04\u6587\u4ef6\u3001\u5047\u671f\u7d00\u9304\u8207\u85aa\u916c\u8655\u7406\u65b9\u6cd5\uff0c\u6e1b\u5c11\u5275\u8fa6\u4eba\u53cd\u8986\u6c7a\u7b56\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"support-entry\">\r\n <div class=\"support-num\">3<\/div>\r\n <div><strong>\u9078\u64c7\u5408\u9069 HR \u7cfb\u7d71<\/strong><span>\u6309\u9810\u7b97\u3001\u4eba\u6578\u8207\u6210\u9577\u968e\u6bb5\u5efa\u8b70\u7c21\u6f54\u5de5\u5177\uff0c\u907f\u514d\u4e00\u958b\u59cb\u5c0e\u5165\u904e\u91cd\u7cfb\u7d71\u3002<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scenario-visual-row\">\r\n <div class=\"scenario-img img-placeholder\">\r\n <div class=\"img-placeholder-icon\">\r\n <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\r\n <\/div>\r\n <div class=\"img-placeholder-label\">\r\n <span>\u5834\u666f\u5716\u7247 02<\/span>\r\n <small>\u5efa\u8b70\u6bd4\u4f8b 16:9 \u00b7 \u521d\u5275 \/ \u898f\u5283\u5834\u666f<\/small>\r\n <\/div>\r\n <\/div>\r\n <div class=\"metrics-card\">\r\n <div class=\"metrics-card-title\">\u9810\u671f\u6210\u679c<\/div>\r\n <div class=\"metric-grid\">\r\n <div class=\"metric-item\"><strong>4\u20136\u9031<\/strong><span>\u5178\u578b\u5236\u5ea6\u5efa\u7acb\u6642\u9593<\/span><\/div>\r\n <div class=\"metric-item\"><strong>\u6e05\u6670<\/strong><span>\u5165\u8077\u8207\u5047\u671f\u6d41\u7a0b\u53ef\u8ffd\u8e64<\/span><\/div>\r\n <div class=\"metric-item\"><strong>\u53ef\u7528<\/strong><span>\u54e1\u5de5\u624b\u518a\u4e0d\u518d\u53ea\u662f\u6587\u4ef6<\/span><\/div>\r\n <div class=\"metric-item\"><strong>\u53ef\u64f4\u5c55<\/strong><span>\u652f\u63f4\u4e0b\u4e00\u968e\u6bb5\u62db\u8058<\/span><\/div>\r\n <\/div>\r\n <div class=\"scenario-quote\">\r\n <p>\u300c\u54e1\u5de5\u624b\u518a\u4e0d\u662f\u4e00\u4efd\u539a\u91cd\u6587\u4ef6\uff0c\u800c\u662f\u771f\u6b63\u9069\u5408\u521d\u5275\u7684\u6307\u5357\u3002\u300d<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <a class=\"scenario-cta-link\" href=\"#contact\">\u5c31\u6b64\u5834\u666f\u806f\u7e6b\u6211\u5011 \u2192<\/a>\r\n <\/article>\r\n\r\n <!-- \u2500\u2500 SCENARIO 03 \u2500\u2500 -->\r\n <!-- IMAGE PLACEHOLDER: scenario-img-3\r\n Ratio: 16:9, ~680\u00d7382px\r\n Suggested: restaurant\/retail staff, busy service environment\r\n -->\r\n <article class=\"scenario-block reveal\" id=\"scenario-3\">\r\n <div class=\"scenario-block-header\">\r\n <div class=\"scenario-num-badge\">03<\/div>\r\n <div>\r\n <h3 class=\"scenario-block-title\">\u9910\u98f2\u8207\u96f6\u552e\u65fa\u5b63\uff1a\u6392\u73ed\u3001\u85aa\u916c\u8207\u5408\u898f\u4e00\u6b21\u7a69\u4f4f<\/h3>\r\n <p class=\"scenario-block-desc\">\u9069\u5408\u591a\u5e97\u71df\u904b\u3001\u517c\u8077\u54e1\u5de5\u591a\u3001\u6392\u73ed\u8b8a\u52d5\u5927\u7684\u9910\u98f2\u53ca\u96f6\u552e\u9023\u9396\uff0c\u91cd\u9ede\u662f\u6e1b\u5c11\u5e97\u9577\u884c\u653f\u8ca0\u64d4\u3001\u63d0\u9ad8\u85aa\u916c\u6e96\u78ba\u7387\u3001\u964d\u4f4e\u54e1\u5de5\u6295\u8a34\u8207\u6d41\u5931\u3002<\/p>\r\n <div class=\"scenario-tags\">\r\n <span class=\"pill pill-dark\">\u6392\u73ed\u7ba1\u7406<\/span>\r\n <span class=\"pill pill-dark\">\u85aa\u916c\u8655\u7406<\/span>\r\n <span class=\"pill pill-dark\">\u6309\u6708\u652f\u63f4<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scenario-body\">\r\n <div>\r\n <div class=\"scenario-col-title\">\u4f60\u53ef\u80fd\u6b63\u9762\u5c0d<\/div>\r\n <div class=\"pain-box\">\r\n <div class=\"pain-entry\">\r\n <div class=\"pain-dot\"><\/div>\r\n <div><strong>\u5e97\u9577\u9577\u671f\u88ab\u6392\u73ed\u56f0\u4f4f<\/strong><span>\u4eba\u624b\u6d41\u52d5\u3001\u65fa\u5b63\u9700\u6c42\u53ca\u517c\u8077\u66f4\u8868\u4ee4\u6392\u73ed\u8b8a\u6210\u6bcf\u65e5\u6551\u706b\uff0c\u5f71\u97ff\u524d\u7dda\u670d\u52d9\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"pain-entry\">\r\n <div class=\"pain-dot\"><\/div>\r\n <div><strong>\u85aa\u916c\u8a08\u7b97\u5bb9\u6613\u51fa\u932f<\/strong><span>\u6642\u85aa\u3001\u5047\u671f\u3001\u52a0\u73ed\u3001\u517c\u8077\u6642\u6578\u53ca\u6d25\u8cbc\u8907\u96dc\uff0c\u54e1\u5de5\u4e00\u6709\u61f7\u7591\u4fbf\u5f71\u97ff\u4fe1\u4efb\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"pain-entry\">\r\n <div class=\"pain-dot\"><\/div>\r\n <div><strong>\u54e1\u5de5\u6d41\u5931\u5e36\u4f86\u984d\u5916\u62db\u8058\u6210\u672c<\/strong><span>\u85aa\u8cc7\u4e0d\u900f\u660e\u3001\u6392\u73ed\u4e0d\u516c\u5e73\u6216\u884c\u653f\u56de\u61c9\u6162\uff0c\u90fd\u6703\u52a0\u901f\u524d\u7dda\u54e1\u5de5\u96e2\u8077\u3002<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"scenario-col-title\">NTL \u5982\u4f55\u4ecb\u5165<\/div>\r\n <div class=\"support-list\">\r\n <div class=\"support-entry\">\r\n <div class=\"support-num\">1<\/div>\r\n <div><strong>\u5efa\u7acb\u6392\u73ed\u8207\u85aa\u916c\u6d41\u7a0b<\/strong><span>\u5354\u52a9\u4f01\u696d\u7528\u6e05\u6670\u898f\u5247\u8655\u7406\u66f4\u8868\u3001\u6642\u6578\u78ba\u8a8d\u3001\u85aa\u916c\u6838\u5c0d\u8207\u54e1\u5de5\u67e5\u8a62\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"support-entry\">\r\n <div class=\"support-num\">2<\/div>\r\n <div><strong>\u5c0e\u5165\u8f15\u91cf\u6392\u73ed\u7ba1\u7406<\/strong><span>\u8b93\u5e97\u9577\u3001\u54e1\u5de5\u8207\u5f8c\u52e4\u6709\u5171\u540c\u7d00\u9304\uff0c\u6e1b\u5c11\u91cd\u8907\u8ffd\u554f\u8207\u4eba\u624b\u932f\u914d\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"support-entry\">\r\n <div class=\"support-num\">3<\/div>\r\n <div><strong>\u6bcf\u6708\u85aa\u916c\u652f\u63f4\u8207\u5408\u898f\u6aa2\u67e5<\/strong><span>\u63d0\u5347\u85aa\u916c\u6e96\u78ba\u7387\uff0c\u78ba\u4fdd\u5047\u671f\u53ca\u76f8\u95dc\u5b89\u6392\u7b26\u5408\u9999\u6e2f\u50f1\u50ad\u8981\u6c42\u3002<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Scenario 03 uses a different visual layout: full-width image + metrics below -->\r\n <div style=\"margin-bottom:1.5rem;\">\r\n <div class=\"scenario-img img-placeholder\" style=\"height:220px;\">\r\n <div class=\"img-placeholder-icon\">\r\n <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\r\n <\/div>\r\n <div class=\"img-placeholder-label\">\r\n <span>\u5834\u666f\u5716\u7247 03<\/span>\r\n <small>\u5efa\u8b70\u6bd4\u4f8b 21:9 \u00b7 \u9910\u98f2 \/ \u96f6\u552e \/ \u524d\u7dda\u670d\u52d9<\/small>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Metrics displayed as a horizontal strip -->\r\n <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:0.7rem;margin-bottom:1.5rem;\">\r\n <div class=\"metric-item\" style=\"text-align:center;padding:1.1rem;\">\r\n <strong style=\"font-size:1.6rem;\">80%<\/strong><span>\u5e97\u9577\u6392\u73ed\u6642\u9593\u6e1b\u5c11<\/span>\r\n <\/div>\r\n <div class=\"metric-item\" style=\"text-align:center;padding:1.1rem;\">\r\n <strong style=\"font-size:1.6rem;\">99%+<\/strong><span>\u85aa\u916c\u6e96\u78ba\u7387\u63d0\u5347<\/span>\r\n <\/div>\r\n <div class=\"metric-item\" style=\"text-align:center;padding:1.1rem;\">\r\n <strong style=\"font-size:1.6rem;\">90%<\/strong><span>\u85aa\u916c\u6295\u8a34\u6e1b\u5c11<\/span>\r\n <\/div>\r\n <div class=\"metric-item\" style=\"text-align:center;padding:1.1rem;\">\r\n <strong style=\"font-size:1.6rem;\">18%<\/strong><span>\u54e1\u5de5\u6d41\u5931\u7387\u4e0b\u964d\u81f3<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"scenario-quote\" style=\"border-top:1px solid var(--soft-line);padding-top:1rem;\">\r\n <p>\u300c\u54e1\u5de5\u5c0d\u85aa\u8cc7\u8a08\u7b97\u7684\u4fe1\u4efb\u5ea6\u63d0\u9ad8\u4e86\uff0c\u6d41\u5931\u7387\u4e5f\u4e0b\u964d\u4e86\u3002\u300d<\/p>\r\n <cite>\u9023\u9396\u9910\u98f2\u96c6\u5718 HR \u7d93\u7406<\/cite>\r\n <\/div>\r\n <a class=\"scenario-cta-link\" href=\"#contact\">\u5c31\u6b64\u5834\u666f\u806f\u7e6b\u6211\u5011 \u2192<\/a>\r\n <\/article>\r\n\r\n <!-- \u2500\u2500 SCENARIO 04 \u2500\u2500 -->\r\n <!-- IMAGE PLACEHOLDER: scenario-img-4\r\n Ratio: 1:1, ~400\u00d7400px\r\n Suggested: Hong Kong skyline, international business meeting\r\n -->\r\n <article class=\"scenario-block reveal\" id=\"scenario-4\">\r\n <div class=\"scenario-block-header\">\r\n <div class=\"scenario-num-badge\">04<\/div>\r\n <div>\r\n <h3 class=\"scenario-block-title\">\u5916\u8cc7\u4f01\u696d\u9999\u6e2f\u843d\u5730\uff1a\u628a\u6d77\u5916\u5236\u5ea6\u8f49\u6210\u9999\u6e2f\u53ef\u57f7\u884c\u7248\u672c<\/h3>\r\n <p class=\"scenario-block-desc\">\u9069\u5408\u8de8\u570b\u4f01\u696d\u3001\u570b\u4f01\u6216\u6d77\u5916\u7e3d\u90e8\u5728\u9999\u6e2f\u8a2d\u7acb\u5206\u516c\u53f8\u6642\uff0c\u9700\u8981\u8655\u7406\u672c\u5730\u50f1\u50ad\u5408\u898f\u3001\u85aa\u916c\u798f\u5229\u3001\u5f37\u7a4d\u91d1\u3001\u54e1\u5de5\u95dc\u4fc2\u53ca\u96c6\u5718\u5be9\u8a08\u8981\u6c42\u3002<\/p>\r\n <div class=\"scenario-tags\">\r\n <span class=\"pill pill-dark\">\u672c\u5730\u5408\u898f<\/span>\r\n <span class=\"pill pill-dark\">8\u201312 \u9031<\/span>\r\n <span class=\"pill pill-dark\">\u5236\u5ea6\u672c\u5730\u5316<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Scenario 04 uses a different layout: image left, content right -->\r\n <div style=\"display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:start;margin-bottom:2rem;\">\r\n <div class=\"scenario-img img-placeholder\" style=\"aspect-ratio:1\/1;min-height:auto;\">\r\n <div class=\"img-placeholder-icon\">\r\n <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\r\n <\/div>\r\n <div class=\"img-placeholder-label\">\r\n <span>\u5834\u666f\u5716\u7247 04<\/span>\r\n <small>\u5efa\u8b70\u6bd4\u4f8b 1:1 \u00b7 \u9999\u6e2f\u5546\u696d \/ \u570b\u969b\u6703\u8b70<\/small>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"scenario-col-title\" style=\"margin-bottom:1rem;\">\u4f60\u53ef\u80fd\u6b63\u9762\u5c0d<\/div>\r\n <div class=\"pain-box\" style=\"margin-bottom:1.5rem;\">\r\n <div class=\"pain-entry\">\r\n <div class=\"pain-dot\"><\/div>\r\n <div><strong>\u6d77\u5916\u5236\u5ea6\u4e0d\u80fd\u76f4\u63a5\u7167\u642c<\/strong><span>\u7e3d\u90e8\u653f\u7b56\u5728\u5047\u671f\u3001\u85aa\u916c\u3001\u96e2\u8077\u3001\u798f\u5229\u53ca\u7d00\u5f8b\u7a0b\u5e8f\u4e0a\uff0c\u672a\u5fc5\u7b26\u5408\u9999\u6e2f\u5be6\u52d9\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"pain-entry\">\r\n <div class=\"pain-dot\"><\/div>\r\n <div><strong>\u7ba1\u7406\u5c64\u4e0d\u719f\u6089\u9999\u6e2f HR \u74b0\u5883<\/strong><span>\u6d77\u5916\u7ba1\u7406\u5c64\u9700\u8981\u7406\u89e3\u672c\u5730\u6cd5\u5f8b\u539f\u56e0\uff0c\u800c\u4e0d\u662f\u53ea\u6536\u5230\u4e00\u5806\u96e3\u4ee5\u6d88\u5316\u7684\u898f\u5247\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"pain-entry\">\r\n <div class=\"pain-dot\"><\/div>\r\n <div><strong>\u96c6\u5718\u5be9\u8a08\u524d\u6709\u5408\u898f\u58d3\u529b<\/strong><span>\u82e5\u54e1\u5de5\u624b\u518a\u3001\u85aa\u916c\u8a08\u7b97\u6216\u5f37\u7a4d\u91d1\u5b89\u6392\u6709\u7f3a\u53e3\uff0c\u6703\u5f71\u97ff\u96c6\u5718\u4fe1\u5fc3\u8207\u8072\u8b7d\u3002<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"scenario-col-title\" style=\"margin-bottom:1rem;\">NTL \u5982\u4f55\u4ecb\u5165<\/div>\r\n <div class=\"support-list\">\r\n <div class=\"support-entry\">\r\n <div class=\"support-num\">1<\/div>\r\n <div><strong>\u9032\u884c HR \u5408\u898f\u8a3a\u65b7<\/strong><span>\u6aa2\u8996\u73fe\u6709\u5236\u5ea6\u3001\u5408\u7d04\u3001\u85aa\u916c\u798f\u5229\u53ca\u54e1\u5de5\u95dc\u4fc2\u6d41\u7a0b\uff0c\u627e\u51fa\u672c\u5730\u5316\u7f3a\u53e3\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"support-entry\">\r\n <div class=\"support-num\">2<\/div>\r\n <div><strong>\u8a2d\u8a08\u9999\u6e2f\u7248\u672c\u5236\u5ea6<\/strong><span>\u628a\u7e3d\u90e8\u653f\u7b56\u8f49\u5316\u70ba\u9999\u6e2f\u53ef\u843d\u5730\u7684\u54e1\u5de5\u624b\u518a\u3001\u85aa\u916c\u653f\u7b56\u8207\u65e5\u5e38\u6d41\u7a0b\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"support-entry\">\r\n <div class=\"support-num\">3<\/div>\r\n <div><strong>\u652f\u63f4\u7ba1\u7406\u5c64\u8207\u54e1\u5de5\u6e9d\u901a<\/strong><span>\u5354\u52a9\u6d77\u5916\u7ba1\u7406\u5c64\u7406\u89e3\u9999\u6e2f\u5dee\u7570\uff0c\u4e5f\u8b93\u54e1\u5de5\u77e5\u9053\u5236\u5ea6\u80cc\u5f8c\u7684\u539f\u56e0\u3002<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"metrics-card\" style=\"flex-direction:row;gap:1.5rem;align-items:center;\">\r\n <div style=\"flex:1;\">\r\n <div class=\"metrics-card-title\" style=\"margin-bottom:0.8rem;\">\u9810\u671f\u6210\u679c<\/div>\r\n <div class=\"metric-grid\">\r\n <div class=\"metric-item\"><strong>8<\/strong><span>\u9805\u5408\u898f\u7f3a\u53e3\u88ab\u4fee\u5fa9<\/span><\/div>\r\n <div class=\"metric-item\"><strong>0<\/strong><span>\u4e09\u500b\u6708\u5f8c\u54e1\u5de5\u6295\u8a34<\/span><\/div>\r\n <div class=\"metric-item\"><strong>\u901a\u904e<\/strong><span>\u96c6\u5718\u5be9\u8a08\u7121\u5408\u898f\u767c\u73fe<\/span><\/div>\r\n <div class=\"metric-item\"><strong>95%<\/strong><span>\u5236\u5ea6\u6eff\u610f\u5ea6\u63d0\u5347\u81f3<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"scenario-quote\" style=\"flex:0.7;border-top:none;border-left:1px solid var(--soft-line);padding-top:0;padding-left:1.5rem;\">\r\n <p>\u300cNTL \u4e0d\u53ea\u544a\u8a34\u6211\u5011\u61c9\u8a72\u600e\u6a23\u505a\uff0c\u66f4\u89e3\u91cb\u4e86\u80cc\u5f8c\u7684\u6cd5\u5f8b\u539f\u56e0\u3002\u300d<\/p>\r\n <\/div>\r\n <\/div>\r\n <a class=\"scenario-cta-link\" href=\"#contact\">\u5c31\u6b64\u5834\u666f\u806f\u7e6b\u6211\u5011 \u2192<\/a>\r\n <\/article>\r\n\r\n <!-- \u2500\u2500 SCENARIO 05 \u2500\u2500 -->\r\n <!-- IMAGE PLACEHOLDER: scenario-img-5\r\n Ratio: 16:9, ~680\u00d7382px\r\n Suggested: digital transformation, tech adoption, training session\r\n -->\r\n <article class=\"scenario-block reveal\" id=\"scenario-5\">\r\n <div class=\"scenario-block-header\">\r\n <div class=\"scenario-num-badge\">05<\/div>\r\n <div>\r\n <h3 class=\"scenario-block-title\">\u50b3\u7d71\u4f01\u696d\u6578\u4f4d\u8f49\u578b\uff1a\u8b93\u820a\u5236\u5ea6\u8207\u65b0\u7cfb\u7d71\u5e73\u7a69\u4ea4\u63a5<\/h3>\r\n <p class=\"scenario-block-desc\">\u9069\u5408\u88fd\u9020\u3001\u5730\u7522\u3001\u91d1\u878d\u6216\u5176\u4ed6\u50b3\u7d71\u4f01\u696d\uff0c\u6b63\u5728\u7531\u7d19\u672c\u8207\u8a66\u7b97\u8868\u6d41\u7a0b\u8f49\u5411\u6578\u4f4d\u7cfb\u7d71\uff0c\u9700\u8981\u9078\u578b\u3001\u5c0e\u5165\u3001\u8cc7\u6599\u9077\u79fb\u3001\u54e1\u5de5\u57f9\u8a13\u8207\u8b8a\u9769\u7ba1\u7406\u3002<\/p>\r\n <div class=\"scenario-tags\">\r\n <span class=\"pill pill-dark\">\u7cfb\u7d71\u9078\u578b<\/span>\r\n <span class=\"pill pill-dark\">12\u201320 \u9031<\/span>\r\n <span class=\"pill pill-dark\">\u8b8a\u9769\u7ba1\u7406<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scenario-body\">\r\n <div>\r\n <div class=\"scenario-col-title\">\u4f60\u53ef\u80fd\u6b63\u9762\u5c0d<\/div>\r\n <div class=\"pain-box\">\r\n <div class=\"pain-entry\">\r\n <div class=\"pain-dot\"><\/div>\r\n <div><strong>\u820a\u6d41\u7a0b\u6548\u7387\u4f4e\u4f46\u4e0d\u80fd\u5373\u6642\u505c\u6b62<\/strong><span>\u7d19\u672c\u6a94\u6848\u8207\u8a66\u7b97\u8868\u4ecd\u5728\u904b\u4f5c\uff0c\u65b0\u7cfb\u7d71\u53c8\u672a\u5b8c\u5168\u6e96\u5099\u597d\uff0c\u5169\u908a\u4e26\u884c\u4ee4\u5f8c\u52e4\u58d3\u529b\u500d\u589e\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"pain-entry\">\r\n <div class=\"pain-dot\"><\/div>\r\n <div><strong>\u8cc7\u6df1\u54e1\u5de5\u6297\u62d2\u8f49\u8b8a<\/strong><span>\u54e1\u5de5\u64d4\u5fc3\u81ea\u5df1\u4e0d\u61c2\u65b0\u7cfb\u7d71\uff0c\u6216\u4ee5\u70ba\u8f49\u578b\u610f\u5473\u81ea\u5df1\u88ab\u53d6\u4ee3\uff0c\u5f71\u97ff\u58eb\u6c23\u8207\u7559\u4efb\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"pain-entry\">\r\n <div class=\"pain-dot\"><\/div>\r\n <div><strong>\u7ba1\u7406\u5c64\u4e0d\u77e5\u9053\u5982\u4f55\u9078\u7cfb\u7d71<\/strong><span>\u5e02\u5834\u5de5\u5177\u591a\u3001\u5831\u50f9\u5dee\u7570\u5927\uff0c\u82e5\u9078\u932f\u7cfb\u7d71\uff0c\u53cd\u800c\u589e\u52a0\u6210\u672c\u8207\u5167\u90e8\u6469\u64e6\u3002<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"scenario-col-title\">NTL \u5982\u4f55\u4ecb\u5165<\/div>\r\n <div class=\"support-list\">\r\n <div class=\"support-entry\">\r\n <div class=\"support-num\">1<\/div>\r\n <div><strong>\u5148\u505a\u6d41\u7a0b\u8a3a\u65b7\u8207\u7cfb\u7d71\u9078\u578b<\/strong><span>\u6309\u4eba\u6578\u3001\u6d41\u7a0b\u3001\u9810\u7b97\u8207\u7ba1\u7406\u9700\u8981\uff0c\u8a55\u4f30\u5408\u9069\u5de5\u5177\u8207\u6295\u8cc7\u56de\u5831\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"support-entry\">\r\n <div class=\"support-num\">2<\/div>\r\n <div><strong>\u5236\u5b9a\u5c0e\u5165\u8207\u8cc7\u6599\u9077\u79fb\u8a08\u5283<\/strong><span>\u8b93\u820a\u7cfb\u7d71\u8207\u65b0\u7cfb\u7d71\u6709\u6e05\u6670\u4e26\u884c\u671f\uff0c\u907f\u514d\u696d\u52d9\u4e2d\u65b7\u8207\u8cc7\u6599\u907a\u5931\u3002<\/span><\/div>\r\n <\/div>\r\n <div class=\"support-entry\">\r\n <div class=\"support-num\">3<\/div>\r\n <div><strong>\u4ee5\u8b8a\u9769\u7ba1\u7406\u964d\u4f4e\u6297\u62d2<\/strong><span>\u900f\u904e\u57f9\u8a13\u3001\u5167\u90e8\u63a8\u52d5\u8005\u8207\u6e05\u6670\u6e9d\u901a\uff0c\u8b93\u8cc7\u6df1\u54e1\u5de5\u7531\u6297\u62d2\u8005\u8b8a\u6210\u63a8\u5ee3\u8005\u3002<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scenario-visual-row\">\r\n <div class=\"scenario-img img-placeholder\">\r\n <div class=\"img-placeholder-icon\">\r\n <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\r\n <\/div>\r\n <div class=\"img-placeholder-label\">\r\n <span>\u5834\u666f\u5716\u7247 05<\/span>\r\n <small>\u5efa\u8b70\u6bd4\u4f8b 16:9 \u00b7 \u6578\u4f4d\u8f49\u578b \/ \u57f9\u8a13\u5834\u666f<\/small>\r\n <\/div>\r\n <\/div>\r\n <div class=\"metrics-card\">\r\n <div class=\"metrics-card-title\">\u9810\u671f\u6210\u679c<\/div>\r\n <div class=\"metric-grid\">\r\n <div class=\"metric-item\"><strong>60%<\/strong><span>HR \u884c\u653f\u5de5\u4f5c\u91cf\u6e1b\u5c11<\/span><\/div>\r\n <div class=\"metric-item\"><strong>99%+<\/strong><span>\u8cc7\u6599\u6e96\u78ba\u7387\u63d0\u5347\u81f3<\/span><\/div>\r\n <div class=\"metric-item\"><strong>85%<\/strong><span>\u54e1\u5de5\u5c0d\u65b0\u7cfb\u7d71\u6eff\u610f\u5ea6<\/span><\/div>\r\n <div class=\"metric-item\"><strong>5%<\/strong><span>\u8f49\u578b\u671f\u9593\u6d41\u5931\u7387\u63a7\u5236\u5728<\/span><\/div>\r\n <\/div>\r\n <div class=\"scenario-quote\">\r\n <p>\u300c\u8cc7\u6df1\u54e1\u5de5\u5f9e\u6700\u521d\u7684\u6297\u62d2\u8b8a\u6210\u4e86\u7cfb\u7d71\u7684\u63a8\u5ee3\u8005\u3002\u300d<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <a class=\"scenario-cta-link\" href=\"#contact\">\u5c31\u6b64\u5834\u666f\u806f\u7e6b\u6211\u5011 \u2192<\/a>\r\n <\/article>\r\n\r\n <\/div><!-- \/scenarios-feed -->\r\n <\/div><!-- \/scenarios-layout -->\r\n <\/div><!-- \/container -->\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n SECTION 6 \u2014 FAQ (MINIMALIST ACCORDION)\r\n Layout: Centered, clean accordion on white background\r\n Purpose: Address common objections and questions\r\n ============================================================ -->\r\n <section class=\"s-faq\">\r\n <div class=\"container\">\r\n <div class=\"faq-header reveal\">\r\n <span class=\"eyebrow\">\u5e38\u898b\u554f\u984c<\/span>\r\n <h2>\u5982\u679c\u60c5\u6cc1\u6a6b\u8de8\u591a\u500b\u5834\u666f\uff0cNTL \u6703\u5148\u5e6b\u4f60\u6392\u5e8f\u3002<\/h2>\r\n <p class=\"section-sub\" style=\"margin-top:1rem;margin:1rem auto 0;\">\u5834\u666f\u5316\u7684\u76ee\u7684\u4e0d\u662f\u628a\u4f01\u696d\u786c\u585e\u9032\u55ae\u4e00\u5206\u985e\uff0c\u800c\u662f\u8b93\u7ba1\u7406\u5c64\u66f4\u5feb\u770b\u898b\u512a\u5148\u6b21\u5e8f\uff0c\u6c7a\u5b9a\u7b2c\u4e00\u6b65\u61c9\u8a72\u5f9e\u54ea\u88e1\u958b\u59cb\u3002<\/p>\r\n <\/div>\r\n <div class=\"faq-list reveal\">\r\n <div class=\"faq-item is-open\">\r\n <button class=\"faq-q\" type=\"button\">\r\n <span class=\"faq-q-text\">NTL \u662f\u5426\u53ef\u4ee5\u540c\u6642\u652f\u63f4\u591a\u500b\u5834\u666f\uff1f<\/span>\r\n <span class=\"faq-icon\">+<\/span>\r\n <\/button>\r\n <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>\u53ef\u4ee5\u3002\u4f8b\u5982\u4e00\u9593\u521d\u5275\u4f01\u696d\u53ef\u80fd\u540c\u6642\u9700\u8981\u5236\u5ea6\u5efa\u7acb\u8207\u5f48\u6027\u4eba\u624b\u652f\u63f4\u3002NTL \u6703\u5148\u4e86\u89e3\u4f01\u696d\u7576\u4e0b\u6700\u6025\u7684\u71df\u904b\u58d3\u529b\uff0c\u518d\u628a\u652f\u63f4\u6392\u5e8f\uff0c\u907f\u514d\u4e00\u6b21\u8655\u7406\u592a\u591a\u4e8b\u9805\u800c\u4ee4\u7ba1\u7406\u5c64\u66f4\u75b2\u7d2f\u3002<\/p><\/div><\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" type=\"button\">\r\n <span class=\"faq-q-text\">\u5982\u679c\u6211\u4e0d\u78ba\u5b9a\u81ea\u5df1\u5c6c\u65bc\u54ea\u500b\u5834\u666f\uff0c\u61c9\u8a72\u600e\u6a23\u958b\u59cb\uff1f<\/span>\r\n <span class=\"faq-icon\">+<\/span>\r\n <\/button>\r\n <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>\u4f60\u53ef\u4ee5\u76f4\u63a5\u806f\u7e6b\u6211\u5011\uff0c\u7c21\u55ae\u63cf\u8ff0\u516c\u53f8\u4eba\u6578\u3001\u76ee\u524d\u6700\u5f71\u97ff\u71df\u904b\u7684\u554f\u984c\u53ca\u5e0c\u671b\u6539\u5584\u7684\u6642\u9593\u8868\u3002NTL \u6703\u5354\u52a9\u4f60\u5224\u65b7\u6700\u63a5\u8fd1\u7684\u5834\u666f\uff0c\u4e26\u63d0\u51fa\u521d\u6b65\u652f\u63f4\u65b9\u5411\u3002<\/p><\/div><\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" type=\"button\">\r\n <span class=\"faq-q-text\">\u9019\u4e9b\u65b9\u6848\u662f\u5426\u4e00\u5b9a\u9700\u8981\u9577\u671f\u5408\u4f5c\uff1f<\/span>\r\n <span class=\"faq-icon\">+<\/span>\r\n <\/button>\r\n <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>\u4e0d\u4e00\u5b9a\u3002\u4e0d\u540c\u5834\u666f\u53ef\u63a1\u7528\u6309\u9805\u76ee\u3001\u6309\u6708\u6216\u77ed\u671f\u652f\u63f4\u65b9\u5f0f\u3002\u91cd\u9ede\u662f\u8b93\u4f01\u696d\u5728\u9700\u8981\u6642\u53d6\u5f97\u6210\u719f\u7d93\u9a57\uff0c\u800c\u4e0d\u662f\u88ab\u8feb\u627f\u64d4\u4e0d\u5408\u9069\u7684\u9577\u671f\u56fa\u5b9a\u6210\u672c\u3002<\/p><\/div><\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" type=\"button\">\r\n <span class=\"faq-q-text\">NTL \u7684\u5834\u666f\u65b9\u6848\u662f\u5426\u5305\u542b\u6301\u7e8c\u652f\u63f4\uff1f<\/span>\r\n <span class=\"faq-icon\">+<\/span>\r\n <\/button>\r\n <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>\u53ef\u4ee5\u5305\u542b\u3002\u90e8\u5206\u4f01\u696d\u53ea\u9700\u8981\u521d\u671f\u8a3a\u65b7\u8207\u5c0e\u5165\uff0c\u90e8\u5206\u4f01\u696d\u5247\u9700\u8981\u5f8c\u7e8c\u6bcf\u6708\u9867\u554f\u3001\u85aa\u916c\u3001\u7cfb\u7d71\u6216\u4eba\u624b\u652f\u63f4\u3002\u5be6\u969b\u7bc4\u570d\u6703\u5728\u4e86\u89e3\u60c5\u6cc1\u5f8c\u78ba\u8a8d\u3002<\/p><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n <!-- ============================================================\r\n SECTION 7 \u2014 FINAL CTA\r\n Layout: Full-screen background image + frosted glass content box\r\n Purpose: Drive final conversion \/ contact\r\n ============================================================ -->\r\n <!-- IMAGE PLACEHOLDER: cta-bg\r\n Full-screen background, ratio 16:9 or cover\r\n Suggested: warm editorial lifestyle, professional woman, calm workspace\r\n Overlay: heavy purple gradient applied on top\r\n -->\r\n <section class=\"s-cta\" id=\"contact\">\r\n <div class=\"s-cta-bg\">\r\n <div class=\"img-placeholder\" style=\"border-radius:0;border:none;background:linear-gradient(145deg,rgba(141,122,151,0.96),rgba(51,46,56,0.92));\">\r\n <div class=\"img-placeholder-label\">\r\n <span style=\"color:rgba(255,255,255,0.5);\">\u80cc\u666f\u5716\u7247<\/span>\r\n <small style=\"color:rgba(255,255,255,0.35);\">\u5168\u5e45\u80cc\u666f \u00b7 \u5efa\u8b70\u6bd4\u4f8b 16:9 \u00b7 \u6696\u8272\u8abf\u5de5\u4f5c\u5834\u666f<\/small>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cta-box reveal\">\r\n <span class=\"eyebrow\">\u4e0b\u4e00\u6b65<\/span>\r\n <h2>\u627e\u5230\u63a5\u8fd1\u4f60\u60c5\u6cc1\u7684\u5834\u666f\u4e86\u55ce\uff1f<\/h2>\r\n <p>\u4f60\u4e0d\u9700\u8981\u4e00\u958b\u59cb\u5c31\u6e96\u5099\u5b8c\u6574\u7c21\u5831\u3002\u53ea\u8981\u544a\u8a34\u6211\u5011\u516c\u53f8\u76ee\u524d\u6700\u56f0\u64fe\u7ba1\u7406\u5c64\u7684\u662f\u4eba\u624b\u3001\u5236\u5ea6\u3001\u5408\u898f\u3001\u85aa\u916c\uff0c\u9084\u662f\u8f49\u578b\u58d3\u529b\uff0cNTL \u6703\u5354\u52a9\u4f60\u5224\u65b7\u6700\u9069\u5408\u7684\u5834\u666f\uff0c\u4e26\u6574\u7406\u4e0b\u4e00\u6b65\u53ef\u884c\u65b9\u6848\u3002<\/p>\r\n <div class=\"cta-actions\">\r\n <a href=\"https:\/\/staging.ntl-recruit.hk\/?page_id=117\" \r\n class=\"btn btn-white\"> \u514d\u8cbb\u8aee\u8a62<\/a>\r\n <div class=\"cta-contact-row\">\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/main>\r\n\r\n<script>\r\n \/* \u2500\u2500 Reveal on scroll \u2500\u2500 *\/\r\n const revealEls = document.querySelectorAll('.reveal');\r\n const revealObs = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if (e.isIntersecting) {\r\n e.target.classList.add('visible');\r\n revealObs.unobserve(e.target);\r\n }\r\n });\r\n }, { threshold: 0.1 });\r\n revealEls.forEach(el => revealObs.observe(el));\r\n\r\n \/* \u2500\u2500 FAQ accordion \u2500\u2500 *\/\r\n document.querySelectorAll('.faq-item').forEach(item => {\r\n const btn = item.querySelector('.faq-q');\r\n const icon = btn.querySelector('.faq-icon');\r\n \/\/ init open state\r\n if (item.classList.contains('is-open')) icon.textContent = '\u2212';\r\n btn.addEventListener('click', () => {\r\n const open = item.classList.toggle('is-open');\r\n icon.textContent = open ? '\u2212' : '+';\r\n });\r\n });\r\n\r\n \/* \u2500\u2500 Sticky nav active state \u2500\u2500 *\/\r\n const scenarioIds = ['scenario-1','scenario-2','scenario-3','scenario-4','scenario-5'];\r\n const navLinks = document.querySelectorAll('.scenarios-nav-item a');\r\n\r\n const scenarioObs = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if (e.isIntersecting) {\r\n navLinks.forEach(link => link.classList.remove('active'));\r\n const activeLink = document.querySelector(`.scenarios-nav-item a[href=\"#${e.target.id}\"]`);\r\n if (activeLink) activeLink.classList.add('active');\r\n }\r\n });\r\n }, { threshold: 0.4 });\r\n\r\n scenarioIds.forEach(id => {\r\n const el = document.getElementById(id);\r\n if (el) scenarioObs.observe(el);\r\n });\r\n\r\n \/* \u2500\u2500 Horizontal scroll drag \u2500\u2500 *\/\r\n const scrollWrap = document.querySelector('.stories-scroll-wrap');\r\n if (scrollWrap) {\r\n let isDown = false, startX, scrollLeft;\r\n scrollWrap.addEventListener('mousedown', e => {\r\n isDown = true;\r\n scrollWrap.style.cursor = 'grabbing';\r\n startX = e.pageX - scrollWrap.offsetLeft;\r\n scrollLeft = scrollWrap.scrollLeft;\r\n });\r\n scrollWrap.addEventListener('mouseleave', () => { isDown = false; scrollWrap.style.cursor = 'grab'; });\r\n scrollWrap.addEventListener('mouseup', () => { isDown = false; scrollWrap.style.cursor = 'grab'; });\r\n scrollWrap.addEventListener('mousemove', e => {\r\n if (!isDown) return;\r\n e.preventDefault();\r\n const x = e.pageX - scrollWrap.offsetLeft;\r\n const walk = (x - startX) * 1.5;\r\n scrollWrap.scrollLeft = scrollLeft - walk;\r\n });\r\n }\r\n\r\n \/* \u2500\u2500 Chooser pill smooth scroll \u2500\u2500 *\/\r\n document.querySelectorAll('.chooser-pill').forEach(pill => {\r\n pill.addEventListener('click', e => {\r\n e.preventDefault();\r\n const target = document.querySelector(pill.getAttribute('href'));\r\n if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n });\r\n });\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>NTL \u5834\u666f\u5316\u89e3\u6c7a\u65b9\u6848\uff5c\u6309\u4f01\u696d\u72c0\u6cc1\u627e\u5230\u5408\u9069\u652f\u63f4 NTL \u5834\u666f\u5316\u89e3\u6c7a\u65b9\u6848 \u5148\u770b\u4f01\u696d\u72c0\u6cc1\uff0c\u518d\u914d\u5c0d\u771f\u6b63\u9700\u8981\u7684\u652f\u63f4\u3002 \u4e0d\u540c\u4f01\u696d\u9762\u5c0d\u7684\u4eba\u624d\u8207\u71df\u904b\u58d3\u529b\u4e26\u4e0d\u4e00\u6a23\u3002NTL \u4ee5\u5834\u666f\u65b9\u5f0f\u5354\u52a9\u7ba1\u7406\u5c64\u5feb\u901f\u5224\u65b7\uff1a\u73fe\u5728\u6700\u6025\u7684\u662f\u4eba\u624b\u3001\u5236\u5ea6\u3001\u6392\u73ed\u85aa\u916c\u3001\u672c\u5730\u5408\u898f\uff0c\u9084\u662f\u6578\u4f4d\u8f49\u578b\uff0c\u7136\u5f8c\u4ee5\u6210\u719f\u7d93\u9a57\u3001\u6e05\u6670\u6d41\u7a0b\u8207\u53ef\u9810\u6e2c\u6210\u672c\u4ecb\u5165\u3002 \u67e5\u770b\u4e94\u500b\u5834\u666f \u514d\u8cbb\u8aee\u8a62 5 \u500b\u5e38\u898b\u4f01\u696d\u5834\u666f\uff0c\u8b93\u7ba1\u7406\u5c64\u5feb\u901f\u5c0d\u865f\u5165\u5ea7 72h \u77ed\u671f\u4eba\u624b\u8207\u9805\u76ee\u652f\u63f4\u53ef\u5feb\u901f\u555f\u52d5\u914d\u5c0d 20\u5e74 \u7531\u5177\u6210\u719f\u7d93\u9a57\u7684\u4eba\u624d\u8207\u9867\u554f\u63d0\u4f9b\u652f\u63f4 \u4e3b\u8996\u89ba\u5716\u7247 \u5efa\u8b70\u6bd4\u4f8b 4:5 \u00b7 \u8096\u50cf\/\u4eba\u7269 \u8f14\u52a9\u5716\u7247 \u5efa\u8b70\u6bd4\u4f8b 16:9 \u00b7 \u5de5\u4f5c\u5834\u666f \u5982\u4f55\u4f7f\u7528\u6b64\u9801 \u4f60\u73fe\u5728\u6700\u9700\u8981\u89e3\u6c7a\u7684\uff0c\u662f\u4eba\u624b\u3001\u5236\u5ea6\u3001\u85aa\u916c\uff0c\u9084\u662f\u8f49\u578b\uff1f \u6309\u4f01\u696d\u6700\u5e38\u898b\u7684\u4e94\u7a2e\u58d3\u529b\uff0c\u628a\u9700\u6c42\u3001\u652f\u63f4\u65b9\u5f0f\u3001\u5178\u578b\u6210\u679c\u6574\u7406\u6210\u6e05\u6670\u5834\u666f\u3002\u5148\u9ede\u64ca\u6700\u63a5\u8fd1\u516c\u53f8\u72c0\u6cc1\u7684\u5834\u666f\uff0c\u518d\u6c7a\u5b9a\u662f\u5426\u9700\u8981\u8207 NTL \u9032\u4e00\u6b65\u50be\u8ac7\u3002 \u77ed\u671f\u5927\u91cf\u4eba\u624b\u4e0d\u8db3 \u5feb\u901f\u64f4\u5f35\u4f46\u5236\u5ea6\u672a\u6210\u5f62 \u6392\u73ed\u8207\u85aa\u916c\u5bb9\u6613\u51fa\u932f \u9999\u6e2f\u843d\u5730\u9700\u8981\u672c\u5730\u5408\u898f \u820a\u6d41\u7a0b\u8207\u65b0\u7cfb\u7d71\u4e26\u884c \u4e94\u500b\u5834\u666f \u4f60\u76ee\u524d\u6b63\u5728\u9762\u5c0d\u4ee5\u4e0b\u5834\u666f\u55ce\uff1f \u5feb\u901f\u5c0e\u822a 01\u7cfb\u7d71\u9077\u79fb \u00b7 \u77ed\u671f\u9805\u76ee 02\u521d\u5275\u5feb\u901f\u64f4\u5f35 03\u9910\u98f2\u8207\u96f6\u552e\u65fa\u5b63 04\u5916\u8cc7\u9999\u6e2f\u843d\u5730 05\u50b3\u7d71\u4f01\u696d\u6578\u4f4d\u8f49\u578b \u4e0d\u78ba\u5b9a\u5c6c\u65bc\u54ea\u500b\u5834\u666f\uff1f\u76f4\u63a5\u806f\u7e6b\u6211\u5011\uff0cNTL \u5354\u52a9\u4f60\u5224\u65b7\u512a\u5148\u6b21\u5e8f\u3002 \u806f\u7e6b\u6211\u5011 01 \u7cfb\u7d71\u9077\u79fb\u6216\u77ed\u671f\u9805\u76ee\uff1a\u9700\u8981\u5373\u63d2\u5373\u7528\u6210\u719f\u6230\u529b \u9069\u5408 IT \u4f01\u696d\u3001\u8de8\u570b\u516c\u53f8\u6216\u5927\u578b\u9805\u76ee\u5718\u968a\uff0c\u5728 2\u201312 \u9031\u5167\u9700\u8981\u5927\u91cf\u53ef\u9760\u4eba\u624b\u5b8c\u6210\u8cc7\u6599\u6574\u7406\u3001\u6d41\u7a0b\u652f\u63f4\u3001\u7528\u6236\u8ddf\u9032\u6216\u5167\u90e8\u5354\u8abf\u3002 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"_acf_changed":false,"_angie_page":false,"footnotes":""},"class_list":["post-78","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/staging.ntl-recruit.hk\/index.php?rest_route=\/wp\/v2\/pages\/78","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.ntl-recruit.hk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging.ntl-recruit.hk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging.ntl-recruit.hk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.ntl-recruit.hk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=78"}],"version-history":[{"count":26,"href":"https:\/\/staging.ntl-recruit.hk\/index.php?rest_route=\/wp\/v2\/pages\/78\/revisions"}],"predecessor-version":[{"id":586,"href":"https:\/\/staging.ntl-recruit.hk\/index.php?rest_route=\/wp\/v2\/pages\/78\/revisions\/586"}],"wp:attachment":[{"href":"https:\/\/staging.ntl-recruit.hk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}