/* Hallmark v2 · built: the project · redesign: polish · theme: brand · genre: modern-minimal · signature: seven-brand arc */
/* critique: preserve the approved four-screen composition; add an editorial about and a useful contact finish. */
/* hero-review: skipped, existing-page polish; finish-review: independent subagent, ship; honor photos pending user supply */
/* waive: 29,42,66,80,83 — user explicitly selected the floating navigation, arc cards, illustrated samples and immersive photo switcher. */
:root{
  --paper:#fff;--paper-soft:#f3f5f7;--text:#14212b;--text-soft:#526170;
  --brand-blue:#1f6bff;--blue-action:#1756cb;--green-text:#176b35;--feishu-text:#2259d4;
  --night:#102433;--night-soft:#183341;--night-text:#f8fafb;--night-muted:#bfced7;
  --rule:#dce2e7;--rule-dark:#45616e;--focus:#ffcc66;--clear:transparent;
  --font-body:"Microsoft YaHei","PingFang SC","Segoe UI",system-ui,sans-serif;
  --page-width:1240px;--page-gutter:max(7%,calc((100% - var(--page-width))/2));
  --space-unit:var(--space-unit);--radius-control:24px;--radius-panel:8px;
}
html,body{overflow-x:clip}
:root{--field-edge:#7894a3;--placeholder:#a4b9c5}
button:disabled{opacity:.55;cursor:not-allowed}
.hero-btn-primary,.nav-cta{color:var(--paper)}
.nav-link{white-space:nowrap;flex-shrink:0}
.hero-actions{flex-wrap:wrap}
.hero-btn-ghost{background:var(--night);color:var(--paper);backdrop-filter:none}
.hero-btn-ghost:hover{background:var(--night-soft)}
.scroll-cue{background:var(--night);border-radius:var(--radius-control);padding:var(--space-2) var(--space-4);opacity:1}
.brand-cta{color:var(--paper)}
.brand-rail{background:color-mix(in srgb,var(--brand-accent) 72%,var(--night));backdrop-filter:none}
.brief-builder select,.brief-builder textarea{border-color:var(--field-edge)}
.brief-builder textarea::placeholder{color:var(--placeholder);opacity:1}
.hero-title,.about-statement h3,.contact-statement h3{text-wrap:balance}
body{font-family:var(--font-body)}
[hidden]{display:none!important}
h1,h2,h3{overflow-wrap:break-word;min-width:0}
.site-nav{position:absolute;top:20px}
.brand-cat{font-size:12px;letter-spacing:0;color:var(--text-soft)}
.brand-name,.brand-name.is-long{font-size:14px;letter-spacing:0;white-space:normal}
.brand-name.is-long{font-size:13px;line-height:1.3}
.brand-card[data-brand="ugreen"] .brand-name{color:var(--green-text)}
.brand-card[data-brand="feishu"] .brand-name{color:var(--feishu-text)}
.brand-head{min-height:40px;gap:var(--space-unit)}
.hero-subtitle{font-size:18px;font-weight:450;letter-spacing:0;line-height:1.7;margin-top:20px}
.hero-actions{margin-top:var(--space-6)}
.hero-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.hero-btn-primary,.nav-cta{background:var(--blue-action)}
.hero-btn:focus-visible,.brand-card:focus-visible{outline:3px solid var(--focus);outline-offset:6px}
.brand-card:focus-visible .card-face{outline:3px solid var(--night);outline-offset:3px}
.brand-section-name{display:none}
.brand-copy-wrap{top:40%}
.brand-media>img,.solution-feature>img{width:100%;height:100%;object-fit:cover;display:block}
.brand-media.is-device>svg{padding:12%;background:var(--paper-soft)}
.brand-tab small{font-size:13px;opacity:1}
.brand-products{font-size:14px;opacity:1}
.brand-note,.solution-note,.product-stage-foot{font-size:12px;opacity:1}
.product-stage{padding-top:var(--space-16);gap:28px}
.product-stage-heading h2{font-size:36px}
.product-stage-foot button{font-size:13px;color:var(--text-soft)}
.product-tile{border-radius:var(--radius-panel)}
.product-tile-label h3{font-size:17px}
.solution-glass{padding-top:var(--space-16)}
.solution-intro h2{font-size:36px}
.solution-description p{font-size:15px}
.solution-view-link{font-size:14px}
.solution-description{transition:opacity 220ms ease,visibility 220ms}
.solution-note{max-width:64%;color:var(--night-text)}
.brand-stage .products-cue{font-size:12px}
.motion-controls{position:fixed;z-index:1001;bottom:24px;left:28px;display:flex;gap:var(--space-2);align-items:center}
.motion-controls .tool-toggle{position:static;font-size:12px;background:var(--night);border:1px solid var(--rule-dark);color:var(--night-text);padding:var(--space-2) var(--space-4);min-height:36px}
body:not([data-active-screen=hero]) .motion-controls{display:none}
.motion-controls .tool-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:var(--space-unit)}
.demo-wrap{bottom:76px}
.demo-wrap #toggle-play{display:none}
.page-screen{height:100dvh;min-height:740px;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:clip;padding:var(--space-16) var(--page-gutter) var(--space-8);display:flex;flex-direction:column}
.about-stage{background:var(--paper);color:var(--text)}
.section-topline{display:flex;justify-content:space-between;gap:var(--space-6);align-items:center;border-bottom:1px solid var(--rule);padding-bottom:20px}
.section-topline h2{font-size:24px;line-height:1.4;font-weight:500;margin:0}
.section-topline p{font-size:14px;color:var(--text-soft);margin:0}
.about-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:80px;align-items:center;flex:1;padding-block:var(--space-8)}
.about-statement h3{font-size:clamp(42px,3.5vw,60px);font-weight:550;line-height:1.3;letter-spacing:-1.5px;margin:0 0 28px}
.about-statement h3 span{display:block}
.about-statement p{font-size:17px;line-height:1.9;max-width:420px;color:var(--text-soft);margin:0}
.service-list{margin:0}
.service-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);column-gap:var(--space-8);padding-block:28px;border-bottom:1px solid var(--rule)}
.service-row:first-child{padding-top:0}
.service-row dt{font-size:20px;line-height:1.6;font-weight:500}
.service-row dd{font-size:15px;line-height:1.85;color:var(--text-soft);margin:0}
.about-close{display:flex;justify-content:space-between;align-items:center;padding:var(--space-6) 0;border-top:1px solid var(--rule);gap:var(--space-6)}
.about-close p{font-size:24px;line-height:1.5;font-weight:450;margin:0}
.text-action{font-size:15px;line-height:1.6;display:inline-flex;align-items:center;gap:28px;padding:var(--space-3) 0;color:var(--blue-action);border:0;border-bottom:1px solid currentColor;background:var(--clear);text-decoration:none;cursor:pointer;white-space:nowrap}
.text-action:hover{text-decoration:underline;text-underline-offset:5px}
.screen-end{display:flex;align-items:center;justify-content:space-between;margin:20px 0 0;gap:var(--space-6);font-size:12px;line-height:1.7;color:var(--text-soft)}
.screen-end a{color:inherit;text-decoration:none}
.screen-end a:hover{text-decoration:underline}
.contact-stage{background:var(--night);color:var(--night-text)}
.contact-stage .section-topline{border-color:var(--rule-dark)}
.contact-stage .section-topline p{color:var(--night-muted)}
.contact-layout{flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:96px;align-items:center;padding-block:var(--space-8)}
.contact-statement h3{font-size:clamp(44px,3.7vw,64px);font-weight:500;line-height:1.3;letter-spacing:-1.5px;margin:0 0 28px}
.contact-statement h3 span{display:block}
.contact-statement>p{max-width:390px;color:var(--night-muted);font-size:17px;line-height:1.9;margin:0 0 28px}
.contact-stage .text-action{color:var(--night-text)}
.contact-primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);border-radius:var(--radius-control);min-height:48px;padding:var(--space-3) var(--space-6);background:var(--blue-action);color:var(--paper);text-decoration:none;font-size:16px}
.contact-primary:hover{background:var(--brand-blue)}
.brief-builder{width:100%}
.brief-builder h3{font-size:24px;font-weight:500;margin:0 0 var(--space-3);line-height:1.5}
.brief-builder>p{font-size:14px;color:var(--night-muted);line-height:1.8;margin:0 0 var(--space-6)}
.brief-builder label{display:block;font-size:14px;line-height:1.8;color:var(--night-muted);margin:0 0 var(--space-2)}
.brief-builder select,.brief-builder textarea{width:100%;font:inherit;font-size:16px;line-height:1.7;color:var(--night-text);background:var(--night-soft);border:1px solid var(--rule-dark);border-radius:var(--radius-panel);padding:var(--space-3) var(--space-4)}
.brief-builder select{margin-bottom:20px;min-height:48px}
.brief-builder textarea{height:112px;resize:vertical;min-height:80px;max-height:180px}
.brief-actions{display:flex;gap:var(--space-6);align-items:center;margin-top:var(--space-4);flex-wrap:wrap}
.brief-actions button{font:inherit;color:var(--night-text);font-size:15px;background:var(--clear);border:1px solid var(--rule-dark);border-radius:var(--radius-control);min-height:44px;padding:var(--space-2) var(--space-6);cursor:pointer}
.brief-actions button:hover{background:var(--night-soft)}
.brief-actions a{color:var(--night-muted);font-size:14px;text-underline-offset:5px}
#brief-status{min-height:24px;line-height:1.8;font-size:13px;color:var(--night-muted);margin:var(--space-3) 0 0}
.contact-stage .screen-end{color:var(--night-muted);border-top:1px solid var(--rule-dark);padding-top:20px;margin-top:0}
.contact-stage :is(a,button,input,select,textarea):focus-visible{outline:3px solid var(--focus);outline-offset:5px}
.about-stage :is(a,button):focus-visible{outline:3px solid var(--blue-action);outline-offset:5px}
a:active,button:active{filter:brightness(.94)}
@media(min-width:1700px){.page-screen{padding-top:80px;padding-bottom:var(--space-10)}.about-statement h3{font-size:60px}.contact-statement h3{font-size:64px}.about-layout,.contact-layout{gap:112px}.service-row{padding-block:var(--space-8)}.product-stage{padding-top:80px}.solution-glass{padding-top:80px}}
@media(max-height:820px) and (min-width:1000px){.page-screen{padding-top:var(--space-10);padding-bottom:var(--space-6)}.about-layout,.contact-layout{padding-block:var(--space-6);gap:var(--space-16)}.about-statement h3{font-size:44px}.contact-statement h3{font-size:48px}.service-row{padding-block:var(--space-6)}.about-close{padding-block:20px}.about-close p{font-size:22px}.product-stage{padding-top:var(--space-12)}.solution-glass{padding-top:var(--space-12)}.solution-tab{font-size:16px}.solution-intro p{font-size:15px}.solution-description p{font-size:14px}.solution-note{font-size:12px;bottom:12px}.hero-subtitle{font-size:17px}.brand-panel .brand-description{font-size:15px}.brand-tab small{font-size:12px}}
@media(max-width:999px){.page-screen{height:auto;min-height:100dvh;padding:var(--space-10) 6% 28px}.about-layout,.contact-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-10)}.about-layout{padding-block:var(--space-10)}.about-close p{font-size:20px}.about-close{align-items:flex-start}.screen-end{flex-wrap:wrap}.product-stage{padding-top:var(--space-12)}.solution-glass{padding-top:var(--space-12)}.brand-note{max-width:60%;font-size:11px}.solution-note{max-width:45%}.nav-links{gap:0;overflow:auto}.nav-link{padding-inline:6px}.site-nav{height:64px;gap:var(--space-2);padding-inline:var(--space-3)}.logo-text{font-size:16px}.hero-btn{font-size:14px}.motion-controls{left:16px;bottom:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.product-tile:hover .product-visual{transform:none}.brand-card:focus-visible .card-face,.brand-card:hover .card-face{transform:none}}
/* The complete information is readable before enhancement, including scripting disabled. */
html:not(.enhanced),html:not(.enhanced) body{height:auto;overflow-y:auto}
html:not(.enhanced) #page-scroll{height:auto;overflow:visible;scroll-snap-type:none}
html:not(.enhanced) .site-nav{position:relative;top:auto;margin:20px 0}
html:not(.enhanced) .hero{height:auto;min-height:0;max-height:none;padding:var(--space-6) 6% 56px}
html:not(.enhanced) .orbit{position:relative;inset:auto;transform:none;width:100%;height:auto;display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:var(--space-8)}
html:not(.enhanced) .brand-card{position:relative!important;left:auto;top:auto;margin:0;transform:none!important;opacity:1!important;pointer-events:auto!important}
html:not(.enhanced) .hero-content{position:relative;inset:auto;transform:none;width:100%;margin-top:var(--space-10)}
html:not(.enhanced) .hero-title{font-size:48px}
html:not(.enhanced) .brand-stage,html:not(.enhanced) .solution-stage,html:not(.enhanced) .product-stage{height:auto;min-height:0;padding:var(--space-12) 6%}
html:not(.enhanced) .brand-copy-wrap{position:relative;inset:auto;transform:none;width:100%;max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10)}
html:not(.enhanced) .brand-panel{position:relative;inset:auto;visibility:visible;opacity:1;transform:none;pointer-events:auto}
html:not(.enhanced) .brand-rail,html:not(.enhanced) .brand-media,html:not(.enhanced) .brand-stage::before,html:not(.enhanced) .brand-stage::after{display:none}
html:not(.enhanced) .product-mosaic{min-height:600px}
html:not(.enhanced) .solution-glass{position:relative;inset:auto;width:100%;padding:0;background:var(--clear);border:0;backdrop-filter:none}
html:not(.enhanced) .solution-selector{overflow:visible}
html:not(.enhanced) .solution-description{grid-template-rows:1fr;opacity:1;visibility:visible}
html:not(.enhanced) .solution-feature,html:not(.enhanced) .solution-note,html:not(.enhanced) .brand-note,html:not(.enhanced) .products-cue,html:not(.enhanced) .scroll-cue,html:not(.enhanced) .motion-controls,html:not(.enhanced) .demo-wrap{display:none}
html:not(.enhanced) .solution-all-link{position:relative;inset:auto;display:inline-flex;margin-top:var(--space-6)}
html:not(.enhanced) .brief-builder,html:not(.enhanced) .js-only{display:none}
.brief-builder select,.brief-builder textarea{border-color:var(--field-edge)}
.solution-arrow{width:16px;height:16px;transform:none}
.solution-arrow svg{display:block;width:16px;height:16px}
.solution-tab[aria-expanded=true] .solution-arrow{transform:rotate(90deg)}
.brand-card:focus-visible{outline:3px solid var(--night);outline-offset:calc(-1 * var(--space-unit))}
.home-anchor{position:absolute;top:0;width:1px;height:1px;pointer-events:none}
.about-statement h3{font-size:60px}
#brief-status[data-state=copied]{color:var(--night-text);font-weight:500}
@media(min-width:1700px){.about-statement h3{font-size:68px}}
@media(max-height:820px) and (min-width:1000px){.about-statement h3{font-size:52px}}
@media(max-width:999px){.about-statement h3{font-size:42px}}

/* Formal site controls: preserve pause and speed adjustment without demo labels. */
.motion-controls .tool-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;padding:var(--space-2)}
.motion-controls svg{display:block;flex-shrink:0}
#direct-pause .motion-play{display:none}
#direct-pause[aria-pressed="true"] .motion-play{display:block}
#direct-pause[aria-pressed="true"] .motion-pause{display:none}
.brief-dialog,.detail-dialog{overscroll-behavior:contain}
.site-skip-link{position:fixed;top:var(--space-4);left:var(--space-4);z-index:1200;transform:translateY(-200%);padding:var(--space-3) var(--space-4);background:var(--night);color:var(--night-text)}
.site-skip-link:focus-visible{transform:none;outline:3px solid var(--focus);outline-offset:var(--space-unit)}