:root { --brand-red:#E21413; --brand-red-subtle:#FFF5F5; --brand-blue:#3B82F6; --on-brand:#FFFFFF; --text-primary:#303133; --text-secondary:#606266; --text-muted:#909399; --canvas:#F5F6F8; --workspace-canvas:#F5F7FA; --surface:#FFFFFF; --surface-subtle:#FAFAFA; --border:#EBEEF5; --border-strong:#DCDFE6; --border-default:#E5E6EB; --success:#16A34A; --success-subtle:#F0FDF4; --processing:#4590E6; --processing-subtle:#EAF3FF; --action-gradient:linear-gradient(148.66deg,#F96766 0%,#E21413 100%); --shadow-sm:0 4px 12px rgba(48,49,51,.12); --font:"HarmonyOS Sans SC","Microsoft YaHei","PingFang SC",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { min-width:320px; margin:0; color:var(--text-primary); background:var(--canvas); font-family:var(--font); -webkit-font-smoothing:antialiased; } a { color:inherit; text-decoration:none; } button { font:inherit; } .container { width:100%; padding-inline:clamp(24px,5vw,80px); margin:0 auto; }
.site-header { position:fixed; inset:0 0 auto; z-index:20; display:flex; align-items:center; justify-content:space-between; height:64px; padding-inline:clamp(24px,5vw,80px); border-bottom:1px solid rgba(255,255,255,.62); background:rgba(255,255,255,.7); backdrop-filter:blur(10px); }.section[id],.final-cta[id] { scroll-margin-top:80px; }.brand,.footer-brand { display:flex; align-items:center; gap:12px; color:var(--text-secondary); font-size:12px; letter-spacing:.04em; }.brand img,.footer-brand img { display:block; width:73px; height:auto; }.brand > span { width:1px; height:18px; background:var(--border-strong); }.brand b { font-weight:500; } nav { display:flex; gap:26px; margin-left:auto; margin-right:32px; } nav a,.header-link { position:relative; color:var(--text-secondary); font-size:13px; transition:color .2s ease; } nav a::after { content:""; position:absolute; right:0; bottom:-23px; left:0; height:2px; background:var(--brand-red); opacity:0; transition:opacity .2s ease; } nav a:hover,nav a.active,.header-link:hover { color:var(--brand-red); } nav a.active::after { opacity:1; }.header-link span { color:var(--brand-red); }.menu-toggle { display:none; width:36px; height:36px; padding:9px; border:1px solid var(--border-default); border-radius:4px; background:var(--surface); }.menu-toggle span { display:block; height:1px; margin:5px 0; background:var(--text-secondary); }
.hero { position:relative; min-height:620px; height:min(760px,88vh); overflow:hidden; isolation:isolate; background:var(--surface); }.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.86) 43%,rgba(255,255,255,.3) 76%,rgba(255,255,255,.12)); }.hero-video { position:absolute; inset:0; z-index:-2; display:block; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.83; transition:opacity .2s ease; }.hero-video-reverse { opacity:0; }.hero.is-reverse .hero-video-forward { opacity:0; }.hero.is-reverse .hero-video-reverse { opacity:.83; }.hero-grid { position:absolute; inset:0; z-index:-1; opacity:.36; background-image:linear-gradient(rgba(48,49,51,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(48,49,51,.07) 1px,transparent 1px); background-size:64px 64px; }.hero-glow { position:absolute; right:5%; bottom:-19%; z-index:-1; width:48vw; height:48vw; border-radius:50%; background:radial-gradient(circle,rgba(226,20,19,.23),rgba(255,245,245,.12) 48%,transparent 70%); }.hero-content { padding-top:max(140px,17vh); }.overline { margin:0 0 14px; color:var(--brand-red); font-size:11px; font-weight:700; letter-spacing:.14em; }.overline.light { color:#F96766; }.hero h1 { max-width:710px; margin:0; color:var(--text-primary); font-size:clamp(46px,5.2vw,72px); font-weight:700; letter-spacing:-.055em; line-height:1.01; }.hero h1 em { display:inline-block; color:var(--brand-red); font-size:.86em; font-style:normal; letter-spacing:-.04em; white-space:nowrap; }.hero-copy { margin:22px 0 0; color:var(--text-primary); font-size:20px; font-weight:600; }.hero-summary { max-width:500px; margin:10px 0 0; color:var(--text-secondary); font-size:14px; line-height:1.75; }.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:8px 16px; border:1px solid transparent; border-radius:4px; font-size:14px; font-weight:500; transition:opacity .2s ease,transform .2s ease,border-color .2s ease; }.button:hover { transform:translateY(-1px); opacity:.9; }.button:focus-visible,.flow-step:focus-visible,.asset-card:focus-visible,.case-detail:focus-visible,.text-link:focus-visible,nav a:focus-visible { outline:1px solid var(--brand-red); outline-offset:3px; }.button.primary { color:var(--on-brand); background:var(--action-gradient); }.button.secondary { border-color:var(--brand-red); background:var(--surface); color:var(--brand-red); }.button.ghost { border-color:var(--on-brand); background:transparent; color:var(--on-brand); }.system-entry { display:inline-flex; gap:8px; margin-top:18px; color:var(--brand-blue); font-size:12px; }
.evidence-strip { position:relative; z-index:2; border-bottom:1px solid var(--border); background:var(--surface); }.evidence-grid { display:grid; grid-template-columns:repeat(4,1fr); padding-top:0; padding-bottom:0; }.evidence-grid > div { min-height:88px; padding:18px 24px; border-left:1px solid var(--border); }.evidence-grid > div:first-child { border-left:0; }.evidence-grid span,.asset-card span,.board-label { display:block; color:var(--text-muted); font-size:10px; font-weight:700; letter-spacing:.1em; }.evidence-grid strong { display:block; margin-top:7px; color:var(--text-primary); font-size:20px; font-weight:600; letter-spacing:-.035em; }.evidence-grid em { color:var(--brand-red); font-style:normal; }
.section { padding-block:82px; }.section-soft { background:var(--workspace-canvas); }.section-intro { max-width:780px; }.split-intro { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; max-width:none; align-items:end; }.section-intro h2,.case-head h2,.cta-layout h2 { margin:0; color:var(--text-primary); font-size:clamp(31px,3.4vw,46px); font-weight:700; letter-spacing:-.06em; line-height:1.14; }.section-intro > p:last-child,.case-head > p { margin:0; color:var(--text-secondary); font-size:14px; line-height:1.75; }
.problem { background:var(--surface); }.problem-board { display:grid; grid-template-columns:1fr 1fr; min-height:300px; margin-top:56px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }.problem-side { padding:28px 32px; background:var(--surface-subtle); }.problem-side ul { padding:0; margin:22px 0 0; list-style:none; }.problem-side li { display:grid; grid-template-columns:32px 1fr; gap:12px; align-items:start; padding:13px 0; border-top:1px solid var(--border); color:var(--text-secondary); font-size:14px; line-height:1.5; }.problem-side li:last-child { border-bottom:1px solid var(--border); }.problem-side b { color:var(--brand-red); font-size:11px; }.solution-side { position:relative; padding:28px 32px; overflow:hidden; background:var(--brand-red-subtle); }.solution-side::before { content:""; position:absolute; width:220px; height:220px; right:-60px; top:-65px; border:1px solid rgba(226,20,19,.22); border-radius:50%; box-shadow:0 0 0 40px rgba(226,20,19,.06); }.solution-side .board-label { color:var(--brand-red); }.solution-side strong { position:relative; display:block; margin-top:30px; color:var(--text-primary); font-size:clamp(26px,2.8vw,37px); letter-spacing:-.06em; line-height:1.22; }.solution-side strong i { color:var(--brand-red); font-style:normal; }.solution-side p { position:relative; max-width:275px; margin:15px 0 0; color:var(--text-secondary); font-size:13px; line-height:1.65; }
.flow { background:var(--canvas); }.flow-intro { display:flex; justify-content:space-between; max-width:none; gap:50px; align-items:end; }.flow-intro p:last-child { max-width:390px; margin:0 0 3px; color:var(--text-secondary); font-size:14px; line-height:1.75; }.workflow { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:48px; }.flow-step { display:block; min-height:178px; padding:20px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text-primary); }.flow-step.is-linked { transition:border-color .2s ease,background .2s ease,transform .2s ease; }.flow-step.is-linked:hover { border-color:var(--brand-red); background:var(--brand-red-subtle); transform:translateY(-2px); }.flow-step > span { color:var(--text-muted); font-size:11px; }.flow-icon { display:block; width:24px; height:24px; margin:27px 0 14px; fill:none; stroke:var(--text-secondary); stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }.flow-step h3 { margin:0; color:var(--text-primary); font-size:15px; }.flow-step h3 i { color:var(--brand-blue); font-size:12px; font-style:normal; }.flow-step p { margin:7px 0 0; color:var(--text-muted); font-size:12px; line-height:1.5; }.shared-foundation { display:grid; grid-template-columns:245px 1fr; margin-top:24px; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface); }.foundation-title { display:flex; flex-direction:column; justify-content:center; gap:5px; padding:16px 20px; color:var(--text-primary); font-size:12px; }.foundation-title b { color:var(--text-muted); font-size:9px; letter-spacing:.1em; }.foundation-items { display:grid; grid-template-columns:repeat(4,1fr); }.foundation-items span { display:grid; place-items:center; min-height:62px; padding:8px; border-left:1px solid var(--border); color:var(--text-secondary); font-size:12px; text-align:center; }.foundation-items i { color:var(--brand-red); font-style:normal; }.foundation-items code { color:var(--text-primary); font-family:inherit; }
.case { background:var(--workspace-canvas); }.case-head { display:flex; align-items:end; justify-content:space-between; gap:56px; }.case-head > p { max-width:330px; }.rtm-case { display:grid; grid-template-columns:.72fr 1.28fr; min-height:560px; margin-top:48px; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface); }.case-copy { display:flex; flex-direction:column; align-items:flex-start; padding:36px 32px; background:var(--text-primary); color:var(--on-brand); }.case-status { display:flex; flex-wrap:wrap; gap:8px; }.case-tag { padding:5px 8px; border:1px solid #F96766; border-radius:4px; color:#F96766; font-size:10px; font-weight:700; letter-spacing:.08em; }.status { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:4px; font-size:12px; font-style:normal; white-space:nowrap; }.status.success { background:var(--success-subtle); color:var(--success); }.status.processing { background:var(--processing-subtle); color:var(--processing); }.case-copy .status { min-height:22px; font-size:10px; }.case-copy h3 { margin:25px 0 14px; color:var(--on-brand); font-size:clamp(33px,3vw,45px); letter-spacing:-.065em; line-height:1.08; }.case-copy h3 em { color:#F96766; font-style:normal; }.case-copy > p { margin:0; color:var(--border-strong); font-size:13px; line-height:1.7; }.case-copy dl { width:100%; margin:22px 0; }.case-copy dl div { padding:9px 0; border-top:1px solid rgba(255,255,255,.2); }.case-copy dt { display:inline-block; width:78px; color:var(--text-muted); font-size:11px; }.case-copy dd { display:inline; margin:0; color:var(--on-brand); font-size:12px; }.case-copy dd code { color:#F96766; font-family:inherit; }.case-actions { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:auto; }.case-detail { color:var(--on-brand); border-bottom:1px solid var(--border-strong); font-size:12px; padding-bottom:4px; }.case-display { position:relative; padding:62px 24px 22px; overflow:hidden; background:var(--canvas); }.live-frame { display:block; width:100%; height:420px; overflow:hidden; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); }.live-frame-bar { display:flex; align-items:center; gap:5px; height:28px; padding:0 10px; border-bottom:1px solid var(--border); background:var(--surface-subtle); color:var(--text-muted); font-size:9px; }.live-frame-bar span { width:6px; height:6px; border-radius:9999px; background:var(--border-strong); }.live-frame-bar b { margin-left:6px; color:var(--text-secondary); font-size:9px; font-weight:500; }.rtm-preview-link img { display:block; width:100%; height:calc(100% - 28px); object-fit:cover; object-position:center top; transition:transform .2s ease; }.rtm-preview-link:hover img { transform:scale(1.015); }.compliance-badge { position:absolute; z-index:2; top:24px; left:24px; display:grid; grid-template-columns:1fr auto; gap:3px 8px; width:188px; padding:12px 14px; border:1px solid var(--brand-red); border-radius:4px; background:var(--surface); color:var(--text-primary); }.compliance-badge > span { grid-column:1/-1; color:var(--text-secondary); font-size:9px; font-weight:700; letter-spacing:.09em; }.compliance-badge strong { color:var(--brand-red); font-size:30px; letter-spacing:-.07em; line-height:1; }.compliance-badge small { color:var(--text-muted); font-size:11px; letter-spacing:0; }.compliance-badge > i { align-self:end; color:var(--success); font-size:10px; font-style:normal; }.compliance-scope { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:4px; padding-top:7px; border-top:1px solid var(--border); }.compliance-scope b { padding:3px 4px; border-radius:4px; background:var(--surface-subtle); color:var(--text-secondary); font-size:8px; font-weight:500; }.component-stat { position:absolute; right:24px; bottom:22px; display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:4px; background:var(--surface); }.component-stat b { grid-row:span 2; color:var(--brand-red); font-size:22px; letter-spacing:-.07em; }.component-stat span { color:var(--text-secondary); font-size:10px; }.component-stat i { color:var(--success); font-size:10px; font-style:normal; }
.foundation { background:var(--surface); }.foundation .section-intro { margin-bottom:48px; }.asset-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.asset-card { position:relative; display:flex; flex-direction:column; min-height:160px; padding:20px 24px; border:1px solid var(--border); border-radius:8px; background:var(--surface-subtle); color:var(--text-primary); transition:border-color .2s ease,background .2s ease,transform .2s ease; }.asset-card:hover { border-color:var(--brand-red); background:var(--brand-red-subtle); transform:translateY(-2px); }.asset-card strong { margin:12px 0 8px; color:var(--text-primary); font-size:18px; letter-spacing:-.04em; line-height:1.2; }.asset-card strong em { color:var(--brand-red); font-style:normal; }.asset-card strong code { font-family:inherit; }.asset-card p { margin:0; color:var(--text-secondary); font-size:12px; line-height:1.6; }.asset-card > i { position:absolute; right:18px; bottom:16px; color:var(--brand-blue); font-style:normal; }
.capability-list { margin-top:48px; }.capability { position:relative; display:grid; grid-template-columns:64px minmax(280px,.86fr) 1.14fr; gap:20px; min-height:266px; padding:32px; overflow:hidden; border:1px solid var(--border); border-radius:8px; background:var(--surface); }.capability + .capability { margin-top:16px; }.cap-number { color:var(--text-muted); font-size:12px; letter-spacing:.1em; }.cap-copy > span { display:block; color:var(--brand-red); font-size:11px; font-weight:700; letter-spacing:.12em; }.cap-copy .status { margin-top:10px; }.cap-copy h3 { margin:13px 0 10px; color:var(--text-primary); font-size:27px; letter-spacing:-.055em; line-height:1.2; }.cap-copy > p { margin:0; color:var(--text-secondary); font-size:13px; line-height:1.65; }.cap-copy > a { display:inline-block; margin-top:20px; border-bottom:1px solid var(--brand-blue); color:var(--brand-blue); font-size:12px; padding-bottom:4px; }.rtm-cap { background:var(--surface-subtle); }.cap-preview { display:block; height:200px; align-self:center; overflow:hidden; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); }.cap-preview img { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .2s ease; }.cap-preview:hover img { transform:scale(1.015); }.mobile-cap { background:var(--workspace-canvas); }.mobile-cap .cap-copy h3 { font-size:24px; }.patterns { margin-top:15px; }.patterns p { margin:0; padding:8px 0; border-top:1px solid var(--border); color:var(--text-secondary); font-size:11px; line-height:1.5; }.patterns b { display:block; color:var(--text-primary); font-size:12px; }.phone-stack { position:relative; min-height:220px; }.phone { position:absolute; top:0; width:166px; height:258px; padding:14px 10px; overflow:hidden; border:7px solid var(--text-primary); border-radius:8px; background:var(--surface); color:var(--text-primary); font-size:9px; }.phone b { display:block; font-size:13px; }.phone span { display:block; margin:12px 0 8px; color:var(--brand-red); white-space:nowrap; }.phone i { display:block; padding:7px; border-radius:4px; background:var(--surface-subtle); color:var(--text-muted); font-style:normal; }.phone p { margin:7px 0; padding:9px; border:1px solid var(--border); border-radius:4px; font-size:10px; }.phone small { display:block; margin-top:5px; color:var(--text-muted); font-size:8px; }.phone-list { left:12%; transform:rotate(-3deg); }.phone-form { right:8%; top:-6px; transform:rotate(4deg); }.phone-form p { margin-top:16px; padding:8px 0; border-width:0 0 1px; color:var(--text-secondary); }.phone-form strong { display:block; margin-top:42px; padding:9px; border-radius:4px; background:var(--action-gradient); color:var(--on-brand); text-align:center; }.ppt-cap { background:var(--brand-red-subtle); }.ppt-asset { position:relative; display:block; align-self:center; height:190px; overflow:hidden; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); }.ppt-cover-bg { display:block; width:100%; height:100%; object-fit:cover; }.ppt-cover-content { position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:20px; color:var(--on-brand); }.ppt-cover-content img { width:82px; height:auto; }.ppt-cover-content span { margin-top:auto; font-size:12px; font-weight:600; }.ppt-cover-content strong { margin-top:5px; font-size:18px; line-height:1.12; letter-spacing:-.03em; }.ppt-cover-content small { margin-top:9px; font-size:10px; color:var(--border-strong); }
.final-cta { padding-block:52px; background:var(--text-primary); color:var(--on-brand); }.cta-layout { display:flex; align-items:center; justify-content:space-between; gap:48px; }.cta-layout h2 { color:var(--on-brand); font-size:clamp(30px,3.2vw,42px); }.cta-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; min-width:430px; }.cta-actions .text-link { padding:8px 0; border-bottom:1px solid var(--text-secondary); color:var(--border-strong); font-size:12px; }.cta-actions .text-link:hover { color:var(--on-brand); } footer { padding:22px 0; border-top:1px solid var(--border); background:var(--surface); color:var(--text-muted); font-size:11px; } footer .container { display:flex; align-items:center; justify-content:space-between; } .footer-brand { color:var(--text-secondary); }.footer-brand img { width:64px; } footer .container > div { display:flex; gap:28px; } footer a:hover { color:var(--brand-blue); }.reveal { opacity:0; transform:translateY(12px); transition:opacity .2s ease,transform .2s ease; }.reveal.is-visible { opacity:1; transform:none; }
@media (max-width:1000px) { nav { gap:18px; }.workflow { grid-template-columns:repeat(3,1fr); }.flow-step { min-height:164px; }.rtm-case { grid-template-columns:1fr; }.case-copy { min-height:390px; }.asset-grid { grid-template-columns:repeat(2,1fr); }.capability { grid-template-columns:52px 1fr .9fr; padding:28px; }.phone-list { left:2%; }.phone-form { right:0; }.cta-layout { align-items:flex-start; flex-direction:column; }.cta-actions { width:100%; min-width:0; max-width:540px; } }
@media (max-width:760px) { .site-header { padding-inline:24px; }.brand > span,.brand b,nav { display:none; }.menu-toggle { display:block; }.site-header.is-open { background:var(--surface); }.site-header.is-open nav { position:absolute; top:64px; left:0; right:0; display:flex; flex-direction:column; gap:0; padding:8px 24px 16px; border-bottom:1px solid var(--border); background:var(--surface); }.site-header.is-open nav a { padding:11px 0; }.site-header.is-open nav a::after { right:auto; bottom:7px; width:32px; }.header-link { display:none; }.hero { min-height:590px; height:80vh; }.hero::after { background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.77) 66%,rgba(255,255,255,.28)); }.hero-content { padding-top:126px; }.hero h1 { max-width:470px; font-size:clamp(44px,12vw,62px); }.hero-copy { margin-top:19px; font-size:17px; }.hero-summary { max-width:390px; font-size:13px; }.evidence-grid { grid-template-columns:repeat(2,1fr); }.evidence-grid > div:nth-child(3) { border-left:0; border-top:1px solid var(--border); }.evidence-grid > div:nth-child(4) { border-top:1px solid var(--border); }.evidence-grid > div { min-height:76px; padding:14px 18px; }.evidence-grid strong { font-size:18px; }.section { padding-block:64px; }.split-intro,.flow-intro,.case-head { display:block; }.section-intro h2,.case-head h2 { font-size:35px; }.split-intro > p:last-child,.flow-intro p:last-child,.case-head > p { margin-top:18px; font-size:13px; }.problem-board { grid-template-columns:1fr; min-height:0; margin-top:48px; }.problem-side,.solution-side { padding:24px; }.workflow { grid-template-columns:1fr; gap:8px; margin-top:40px; }.flow-step { position:relative; min-height:0; padding:16px 16px 16px 62px; }.flow-step > span { position:absolute; top:18px; left:16px; }.flow-icon { position:absolute; top:41px; left:16px; width:24px; height:24px; margin:0; }.flow-step h3 { font-size:16px; }.flow-step p { margin-top:5px; }.shared-foundation { grid-template-columns:1fr; margin-top:18px; }.foundation-title { padding:15px 16px; }.foundation-items { grid-template-columns:1fr 1fr; }.foundation-items span { min-height:54px; border-top:1px solid var(--border); }.foundation-items span:nth-child(odd) { border-left:0; }.rtm-case { margin-top:40px; }.case-copy { min-height:0; padding:28px 24px; }.case-display { padding:58px 16px 18px; }.live-frame { height:270px; }.compliance-badge { top:18px; left:16px; width:174px; }.component-stat { right:16px; bottom:18px; }.asset-grid { grid-template-columns:1fr; }.asset-card { min-height:142px; padding:20px; }.capability-list { margin-top:40px; }.capability { display:block; padding:26px 22px; }.cap-number { margin-bottom:14px; }.cap-copy h3 { font-size:25px; }.cap-preview { height:186px; margin-top:26px; }.phone-stack { height:255px; margin-top:20px; }.phone-list { left:0; }.phone-form { right:0; }.ppt-asset { height:175px; margin-top:24px; }.final-cta { padding-block:46px; }.cta-actions { grid-template-columns:1fr; }.cta-actions .button { justify-content:space-between; } footer .container { align-items:flex-start; flex-direction:column; gap:15px; } footer .container > div { flex-direction:column; gap:8px; } }
.brand > img { width:96px; }.footer-brand > img { width:80px; }
.problem.section { padding-block:66px; }.value-intro { display:grid; grid-template-columns:55fr 35fr; gap:clamp(32px,6vw,96px); align-items:end; max-width:1100px; }.value-intro h2 { margin:0; color:var(--text-primary); font-size:clamp(31px,3.4vw,46px); font-weight:700; letter-spacing:-.06em; line-height:1.14; }.value-intro > p { max-width:420px; margin:0 0 3px; color:var(--text-secondary); font-size:14px; line-height:1.75; }.transformation-map { max-width:1160px; margin-top:48px; border-top:1px solid var(--border); }.transform-row { display:grid; grid-template-columns:34px minmax(220px,1.35fr) 28px minmax(178px,.9fr) 28px minmax(150px,.7fr); gap:14px; align-items:center; min-height:108px; border-bottom:1px solid var(--border); }.transform-index { align-self:stretch; display:grid; place-items:center start; color:var(--brand-red); font-size:11px; font-weight:700; }.transform-row small { display:block; margin-bottom:8px; color:var(--text-muted); font-size:10px; font-weight:700; letter-spacing:.1em; }.transform-problem strong { color:var(--text-primary); font-size:15px; line-height:1.5; }.transform-problem em,.transform-asset em,.transform-capability em { color:var(--brand-red); font-style:normal; }.transform-arrow { color:var(--text-muted); font-size:18px; text-align:center; }.transform-asset { padding:12px 14px; border:1px solid var(--border); border-radius:4px; background:var(--surface-subtle); }.transform-asset small { margin-bottom:5px; }.transform-asset code { color:var(--text-primary); font-family:var(--font); font-size:13px; font-weight:600; }.transform-capability strong { color:var(--text-primary); font-size:16px; }.capabilities .section-intro { max-width:none; }.business-showcase { margin-top:48px; }.business-rtm { display:grid; grid-template-columns:35fr 65fr; height:390px; overflow:hidden; border:1px solid var(--border); border-radius:8px; background:var(--surface); }.business-rtm-copy { display:flex; flex-direction:column; align-items:flex-start; padding:30px 32px; background:var(--surface-subtle); }.business-rtm-copy > span,.business-half-copy > span { display:block; color:var(--brand-red); font-size:11px; font-weight:700; letter-spacing:.12em; }.business-rtm-copy .status,.business-half-copy .status { margin-top:10px; }.business-rtm-copy h3 { margin:16px 0 9px; color:var(--text-primary); font-size:clamp(25px,2.4vw,34px); letter-spacing:-.055em; line-height:1.2; }.business-rtm-copy > p,.business-half-copy > p { margin:0; color:var(--text-secondary); font-size:13px; line-height:1.65; }.business-proof { display:flex; gap:20px; margin-top:22px; }.business-proof b { display:grid; gap:2px; color:var(--brand-red); font-size:24px; letter-spacing:-.07em; line-height:1; }.business-proof small { align-self:end; color:var(--text-muted); font-size:11px; letter-spacing:0; }.business-proof em { color:var(--text-secondary); font-size:10px; font-style:normal; font-weight:500; letter-spacing:0; }.business-rtm-copy > a,.business-half-copy > a { display:inline-block; margin-top:auto; border-bottom:1px solid var(--brand-blue); color:var(--brand-blue); font-size:12px; padding-bottom:4px; }.business-rtm-preview { display:block; overflow:hidden; background:var(--surface); }.business-rtm-preview img { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .2s ease; }.business-rtm-preview:hover img { transform:scale(1.015); }.business-secondary { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }.business-half { display:grid; grid-template-columns:1fr 1fr; min-height:318px; overflow:hidden; border:1px solid var(--border); border-radius:8px; background:var(--surface); }.business-half-copy { display:flex; flex-direction:column; align-items:flex-start; padding:26px; }.business-half-copy h3 { margin:15px 0 10px; color:var(--text-primary); font-size:22px; letter-spacing:-.05em; line-height:1.25; }.business-half-copy > p + p { margin-top:8px; }.business-half-copy > p b { color:var(--text-primary); font-size:12px; }.mobile-business { background:var(--workspace-canvas); }.mobile-business .phone-stack { min-height:0; height:100%; margin:0; }.mobile-business .phone { width:142px; height:220px; padding:12px 9px; border:3px solid var(--text-primary); border-radius:8px; font-size:8px; box-shadow:none; }.mobile-business .phone b { font-size:12px; }.mobile-business .phone span { margin:9px 0 6px; font-size:8px; }.mobile-business .phone i { padding:6px; }.mobile-business .phone p { margin:5px 0; padding:7px; font-size:9px; }.mobile-business .phone small { font-size:7px; }.mobile-business .phone-list { left:3%; top:52px; transform:rotate(-4deg); }.mobile-business .phone-form { right:5%; top:30px; transform:rotate(4deg); }.mobile-business .phone-form p { margin-top:12px; padding:7px 0; }.mobile-business .phone-form strong { margin-top:27px; padding:8px; }.ppt-business { background:var(--brand-red-subtle); }.ppt-pages { position:relative; display:block; align-self:center; height:230px; margin-right:22px; overflow:hidden; }.ppt-pages img { position:absolute; display:block; width:78%; border:1px solid var(--border-strong); border-radius:4px; box-shadow:var(--shadow-sm); }.ppt-pages img:first-child { top:0; left:2%; transform:rotate(-2deg); }.ppt-pages img:last-child { right:0; bottom:0; transform:rotate(3deg); }
@media (max-width:760px) { .hero h1 { font-size:clamp(40px,10vw,52px); line-height:1.05; }.hero h1 em { font-size:.65em; }.live-frame { height:320px; } }
@media (max-width:1000px) { .business-rtm { grid-template-columns:42fr 58fr; }.business-rtm-copy { padding:28px; }.business-proof { gap:14px; }.business-half { grid-template-columns:1fr .82fr; }.business-half-copy { padding:24px; }.mobile-business .phone { width:128px; height:208px; }.mobile-business .phone-list { left:0; }.mobile-business .phone-form { right:0; }.ppt-pages { margin-right:16px; } }
@media (max-width:760px) { .problem.section { padding-block:56px; }.value-intro { display:block; }.value-intro > p { margin-top:18px; }.transformation-map { margin-top:36px; }.transform-row { grid-template-columns:28px 1fr; gap:9px 12px; align-items:start; min-height:0; padding:18px 0; }.transform-index { grid-row:1 / span 5; align-self:start; padding-top:3px; }.transform-problem,.transform-asset,.transform-capability { grid-column:2; }.transform-arrow { grid-column:2; width:24px; transform:rotate(90deg); text-align:left; }.business-showcase { margin-top:40px; }.business-rtm { grid-template-columns:1fr; height:auto; }.business-rtm-copy { min-height:260px; padding:26px 22px; }.business-rtm-preview { height:230px; }.business-secondary { grid-template-columns:1fr; margin-top:14px; }.business-half { grid-template-columns:1fr; min-height:0; }.business-half-copy { min-height:218px; padding:24px 22px; }.mobile-business .phone-stack { height:235px; }.mobile-business .phone { width:140px; height:214px; }.mobile-business .phone-list { left:8%; top:18px; }.mobile-business .phone-form { right:8%; top:8px; }.ppt-pages { height:230px; margin:0 18px 18px; }.ppt-pages img { width:72%; }.ppt-business .business-half-copy { min-height:190px; } }
.problem.section { padding-block:66px; }.value-intro { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(24px,4vw,64px); max-width:none; width:100%; margin-inline:auto; }.value-intro > div { grid-column:span 5; }.value-intro > p { grid-column:7 / span 5; max-width:520px; }.transformation-map { width:100%; max-width:none; margin-top:48px; overflow:hidden; border:1px solid var(--border); border-radius:8px; background:var(--surface); }.transform-head,.transform-row { grid-template-columns:64px 36fr 40px 26fr 40px 24fr; gap:0; }.transform-head { display:grid; align-items:center; min-height:48px; border-bottom:1px solid var(--border); background:var(--surface-subtle); color:var(--text-muted); font-size:10px; font-weight:700; letter-spacing:.1em; }.transform-head span { padding:0 18px; }.transform-head span:nth-child(3),.transform-head span:nth-child(5) { padding:0; }.transform-row { min-height:92px; border-bottom:1px solid var(--border); }.transform-row:last-child { border-bottom:0; }.transform-index { align-self:stretch; place-items:center; padding:0 18px; }.transform-row small { display:none; }.transform-problem,.transform-capability { padding:0 18px; }.transform-problem strong { font-size:14px; }.transform-asset { margin:16px 0; padding:12px 14px; border:0; background:var(--surface-subtle); }.transform-arrow { align-self:stretch; display:grid; place-items:center; font-size:16px; }.transform-capability strong { font-size:16px; }.capabilities.section-soft { background:var(--canvas); }.business-showcase { margin-top:48px; }.business-rtm,.business-wide { display:grid; grid-template-columns:34fr 66fr; height:340px; overflow:hidden; border:1px solid var(--border); border-radius:8px; box-shadow:none; }.business-rtm { background:#FFFFFF; }.business-rtm-copy,.business-wide-copy { padding:40px; }.business-rtm-copy { background:#FFFFFF; }.business-wide { margin-top:18px; }.business-wide-copy { display:flex; flex-direction:column; align-items:flex-start; }.mobile-business { background:var(--canvas); }.ppt-business { background:#FFF5F5; }.business-wide-copy > span { display:block; color:var(--brand-red); font-size:11px; font-weight:700; letter-spacing:.12em; }.business-wide-copy .status { margin-top:10px; }.business-wide-copy h3 { margin:15px 0 10px; color:var(--text-primary); font-size:clamp(24px,2.2vw,31px); letter-spacing:-.05em; line-height:1.22; }.business-wide-copy > p { margin:0; color:var(--text-secondary); font-size:13px; line-height:1.65; }.business-wide-copy > p + p { margin-top:8px; }.business-wide-copy > p b { color:var(--text-primary); font-size:12px; }.business-wide-copy > a { display:inline-block; margin-top:auto; border-bottom:1px solid var(--brand-blue); color:var(--brand-blue); font-size:12px; padding-bottom:4px; }.business-wide .phone-stack { min-height:0; height:100%; margin:0; }.business-wide .phone { width:160px; height:250px; padding:14px 10px; border:3px solid var(--text-primary); border-radius:8px; box-shadow:none; }.business-wide .phone-list { left:28%; top:54px; transform:rotate(-4deg); }.business-wide .phone-form { right:22%; top:28px; transform:rotate(4deg); }.business-wide .phone-form strong { margin-top:38px; }.business-wide .ppt-pages { height:100%; margin:0 48px 0 0; align-self:stretch; }.business-wide .ppt-pages img { width:62%; border:1px solid var(--border); box-shadow:none; }.business-wide .ppt-pages img:first-child { top:34px; left:12%; }.business-wide .ppt-pages img:last-child { right:8%; bottom:28px; }
@media (max-width:1000px) { .business-rtm,.business-wide { grid-template-columns:36fr 64fr; }.business-rtm-copy,.business-wide-copy { padding:32px; }.business-wide .phone-list { left:12%; }.business-wide .phone-form { right:10%; }.business-wide .ppt-pages { margin-right:24px; } }
@media (max-width:760px) { .value-intro { display:block; }.value-intro > p { margin-top:18px; }.transformation-map { margin-top:36px; }.transform-head { display:none; }.transform-row { display:grid; grid-template-columns:28px 1fr; gap:9px 12px; min-height:0; padding:18px 0; }.transform-index { grid-row:1 / span 5; align-self:start; padding:3px 0 0 16px; }.transform-problem,.transform-asset,.transform-capability { grid-column:2; padding:0 18px 0 0; }.transform-arrow { grid-column:2; width:24px; min-height:18px; transform:rotate(90deg); place-items:center start; }.transform-asset { margin:0; padding:10px 12px; }.business-rtm,.business-wide { grid-template-columns:1fr; height:auto; }.business-rtm-copy,.business-wide-copy { min-height:244px; padding:28px 22px; }.business-rtm-preview { height:230px; }.business-wide .phone-stack { height:248px; }.business-wide .phone { width:144px; height:224px; }.business-wide .phone-list { left:8%; top:18px; }.business-wide .phone-form { right:8%; top:8px; }.business-wide .ppt-pages { height:236px; margin:0 18px 18px; }.business-wide .ppt-pages img { width:72%; }.business-wide .ppt-pages img:first-child { top:5px; left:4%; }.business-wide .ppt-pages img:last-child { right:0; bottom:0; } }
.hero,.evidence-strip { background:#FFFFFF; }.problem { background:var(--surface); }.transformation-map { background:#FFFFFF; border-color:var(--border); }.transform-head { background:var(--surface-subtle); border-bottom-color:var(--border); }.transform-row { border-bottom-color:var(--border); }.transform-asset { background:var(--surface-subtle); }.flow { background:var(--workspace-canvas); }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.hero-video,.reveal,.flow-step,.asset-card,.button { transition:none; }.hero-video { animation:none; } }

/* Hero title entrance: lines reserve their original space before animating. */
.hero-content { --hero-reveal-y:32px; --hero-reveal-duration:800ms; }.hero-title-line { display:block; }.hero-reveal { opacity:0; filter:blur(8px); transform:translateY(var(--hero-reveal-y)); will-change:opacity,transform,filter; }.hero-intro-ready .hero-reveal { animation:hero-stagger-reveal var(--hero-reveal-duration) cubic-bezier(.22,1,.36,1) both; }.hero-reveal-label { animation-delay:0ms!important; }.hero-reveal-cn { animation-delay:100ms!important; }.hero-reveal-intelligence { animation-delay:220ms!important; }.hero-reveal-platform { animation-delay:340ms!important; }.hero-reveal-subtitle { animation-delay:520ms!important; }.hero-reveal-details { animation-delay:650ms!important; } @keyframes hero-stagger-reveal { from { opacity:0; filter:blur(8px); transform:translateY(var(--hero-reveal-y)); } to { opacity:1; filter:blur(0); transform:translateY(0); } }
@media (max-width:760px) { .hero-content { --hero-reveal-y:20px; --hero-reveal-duration:600ms; } }
@media (prefers-reduced-motion:reduce) { .hero-reveal,.hero-intro-ready .hero-reveal { opacity:1; filter:none; transform:none; animation:none; will-change:auto; } }

/* Page rhythm and neutral surfaces */
body,.problem,.flow,.case,.foundation,.capabilities.section-soft { background:var(--surface); }.section,#value.section,#flow.section,#case.section,#foundation.section,#capabilities.section { min-height:0; padding-block:clamp(120px,8vw,160px); }.final-cta { padding-block:clamp(110px,8vw,130px); }.transformation-map,.workflow .flow-step,.shared-foundation,.case-display,.asset-card,.business-rtm,.business-wide { border-color:var(--border); box-shadow:none; }.transformation-map,.case-display,.asset-card,.business-rtm,.mobile-business,.ppt-business { background:var(--canvas); }.transform-head,.transform-asset,.workflow .flow-step,.shared-foundation { background:var(--surface-subtle); }.transform-head,.transform-row { border-color:var(--border); }.workflow { margin-top:clamp(72px,5vw,96px); }.workflow .flow-step { min-height:210px; padding:32px 28px; }.shared-foundation { margin-top:28px; }.case-head + .rtm-case { margin-top:clamp(72px,5vw,96px); min-height:0; }.asset-grid { margin-top:clamp(72px,5vw,88px); }.asset-card { min-height:188px; padding:32px 28px; }.business-showcase { margin-top:clamp(72px,5vw,88px); }.business-rtm,.business-wide { height:360px; }.business-rtm-copy,.business-wide-copy { background:transparent; padding:clamp(40px,4vw,56px); }.business-wide { margin-top:20px; }.ppt-business { background:var(--canvas); }.value-intro + .transformation-map { margin-top:clamp(72px,5vw,96px); }.foundation .section-intro > p { margin-top:32px; }.capabilities .section-intro > p { margin-top:32px; }
body,.problem,.flow,.case,.foundation,.capabilities.section-soft { background:var(--surface); }.workflow .flow-step { background:var(--canvas); }.live-frame { background:var(--workspace-canvas); }

/* GSAP-driven elements remain visible until scripting is available. */
.motion-title-mask { display:block; overflow:hidden; line-height:inherit; }.motion-title-line { display:block; transform-origin:left bottom; }.motion-copy-mask { overflow:hidden; }.motion-visual { overflow:hidden; }.gsap-motion .reveal { opacity:1; transform:none; transition:none; }
.reveal { opacity:1; transform:none; }
@media (max-width:760px) { .section { min-height:0; padding-block:76px; }.problem,.flow { min-height:0; }.workflow,.value-intro + .transformation-map,.case-head + .rtm-case,.asset-grid,.business-showcase { margin-top:48px; }.workflow .flow-step { min-height:0; padding:20px 18px 20px 62px; }.asset-card { min-height:150px; padding:24px 20px; }.business-rtm,.business-wide { height:auto; }.business-wide { margin-top:16px; }.final-cta { padding-block:76px; } }