:root {
 --blue: #087cf0; --blue-dark: #0966cd; --ink: #253042; --muted: #607086; --line: #e3eaf3; --pale-blue: #e1ebff; --soft-ease: cubic-bezier(.22,.61,.36,1);
 --specialty-lilac: #eee9fc; --specialty-apricot: #ffe5cc; --specialty-mint: #d8f2e9;
 color-scheme: light; color: var(--ink); background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "PingFang SC", Arial, sans-serif; font-synthesis: none; -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; }
body { margin: 0; min-width: 280px; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; border: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
img { max-width: 100%; display: block; }
p, h1, h2, h3, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
button:focus-visible, a:focus-visible { outline: 3px solid #2361d1; outline-offset: 4px; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.contact-section { padding: 36px 0 78px; background: #fff; }
.contact-card { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: center; padding: 44px 54px; border: 1px solid #e1ebed; border-radius: 30px; background: linear-gradient(120deg, #f1f7ff, #f5faf6); }
.contact-copy h2 { font-size: clamp(27px, 2.4vw, 35px); font-weight: 600; line-height: 1.55; margin: 12px 0 17px; }
.contact-description { color: #607086; font-size: 15px; line-height: 1.9; max-width: 460px; }
.contact-phones { display: flex; gap: 24px 38px; flex-wrap: wrap; margin-top: 30px; }
.contact-phones div { display: grid; gap: 9px; }
.contact-phones span { font-size: 14px; color: #596c83; }
.contact-phones a { font-size: clamp(21px, 2vw, 26px); font-weight: 600; color: #0966cd; font-variant-numeric: tabular-nums; white-space: nowrap; }
.contact-phones a:hover { text-decoration: underline; text-underline-offset: 5px; }
.contact-wechat { width: 100%; padding: 16px; border-radius: 22px; background: white; border: 1px solid #e4eee8; text-align: center; }
.contact-wechat img { width: 100%; height: auto; object-fit: contain; }
.contact-wechat figcaption { display: grid; gap: 7px; margin-top: 12px; }
.contact-wechat strong { font-size: 17px; font-weight: 600; color: #286952; }
.contact-wechat figcaption span { font-size: 12px; line-height: 1.7; color: #596e65; }
@media (max-width: 1000px) { .contact-card { gap: 30px; padding: 32px; grid-template-columns: minmax(0, 1fr) 270px; } }
@media (max-width: 700px) { .contact-card { grid-template-columns: 1fr; padding: 28px 22px; gap: 30px; border-radius: 23px; } .contact-wechat { max-width: 300px; justify-self: center; } .contact-phones { gap: 23px; flex-direction: column; } .contact-section { padding-bottom: 48px; } .header-contact { padding: 9px 7px; } .header-contact svg { display: none; } }
.container { width: min(1240px, calc(100% - 80px)); margin-inline: auto; }
.section-pad { padding-block: 100px; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 200; padding: 15px 22px; border-radius: 10px; background: white; color: var(--blue-dark); }
.skip-link:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--pale-blue); border-bottom: 1px solid #d1def5; }
.header-inner { height: 82px; display: flex; align-items: center; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; flex-shrink: 0; }
.brand > img { object-fit: contain; }
.brand-name { font-size: 23px; font-weight: 700; letter-spacing: -.7px; color: #1f3c60; }
.brand-description { font-size: 12px; color: #65758a; padding-left: 10px; border-left: 1px solid #dce4ec; }
#main-nav { margin-left: auto; display: flex; align-items: center; gap: 25px; }
#main-nav a { font-size: 14px; white-space: nowrap; padding: 13px 0; color: #435268; position: relative; transition: color .2s; }
#main-nav a::after { content: ""; position: absolute; bottom: 5px; left: 50%; right: 50%; height: 2px; background: var(--blue); transition: left .22s, right .22s; border-radius: 2px; }
#main-nav a:hover { color: var(--blue-dark); }
#main-nav a:hover::after { left: 0; right: 0; }
.header-tools { display: flex; align-items: center; gap: 7px; }
.header-contact { display: flex; align-items: center; justify-content: center; gap: 6px; background: #eff6ff; color: #365e88; padding: 10px; border-radius: 10px; font-size: 12px; white-space: nowrap; min-height: 38px; }
.header-contact svg { width: 17px; height: 17px; }
.header-contact:hover { background: #e1edfd; }
@keyframes mobileNavReveal { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { #main-nav.is-open { animation:none!important; } .menu-toggle span { transition:none!important; } }
.nav-icon { display: none; }
.menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 36px; height: 38px; border-radius: 8px; background: #eff6ff; }
.menu-toggle span { height: 2px; width: 20px; background: var(--ink); border-radius: 2px; margin-inline: auto; }
.eyebrow { color: #5b7798; font-size: 14px; letter-spacing: 1px; line-height: 1.7; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.eyebrow-line { width: 23px; height: 2px; background: var(--blue); }

/* Broad colour fields frame the product; original screenshots stay untouched. */
.hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(115deg, #f1fcff 0%, #e8f5ff 40%, #d9eaff 73%, #e9e8ff 100%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 9% 15%, #fffbedb0, transparent 50%), radial-gradient(ellipse at 60% 110%, #a9d9ff7a, transparent 60%); }
.hero-light { position: absolute; width: 60%; height: 110%; top: -25%; right: -4%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse, #b0c9ff95, transparent 66%); animation: atmosphere 8s ease-in-out infinite; }
.hero-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 40px; align-items: center; min-height: 620px; padding-block: 52px 56px; }
.hero-copy { padding-bottom: 10px; position: relative; z-index: 2; }
h1 { margin: 22px 0; font-size: clamp(38px, 3.9vw, 56px); font-weight: 700; letter-spacing: -1.8px; line-height: 1.35; }
h1 em { font-style: normal; color: var(--blue); }
.hero-description { max-width: 435px; color: #4e6581; font-size: 18px; line-height: 1.95; }
.hero-actions { display: flex; gap: 12px; margin-top: 33px; flex-wrap: wrap; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 50px; padding: 13px 22px; border: 1px solid transparent; border-radius: 8px; font-size: 15px; font-weight: 500; transition: transform .28s var(--soft-ease), background .28s, box-shadow .28s; }
.button svg { width: 19px; height: 19px; }
.button-primary { color: #fff; background: #0672de; box-shadow: 0 8px 18px #087cf01c; }
.button-primary:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 10px 20px #087cf027; }
.button-secondary { color: #2469b5; background: #fff; border-color: #fff; }
.button-secondary:hover { background: #f7fbff; transform: translateY(-2px); box-shadow: 0 8px 18px #087cf012; }
.button:active { transform: none; }
.hero-benefits { display: flex; flex-wrap: wrap; margin-top: 36px; color: #546d8b; font-size: 14px; gap: 13px 0; }
.hero-benefits span + span { border-left: 1px solid #b9cce1; margin-left: 15px; padding-left: 15px; }
.hero-visual { position: relative; min-width: 0; height: 500px; }
.hero-scene { position: absolute; right: 0; top: 0; width: 88%; overflow: hidden; border: 6px solid #ffffff8f; border-radius: 24px; box-shadow: 0 16px 40px #527e9b12; }
.hero-scene img { width: 100%; height: auto; aspect-ratio: 1.6; object-fit: cover; }
.hero-scene figcaption { position: absolute; top: 13px; right: 13px; font-size: 12px; color: white; background: #233d52b5; border-radius: 5px; padding: 5px 8px; }
.device-stage { position: relative; transform: perspective(1800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .32s var(--soft-ease); }
.hero-visual .device-stage { position: absolute; left: 0; bottom: 23px; width: 86%; z-index: 2; }
.screen-shell { padding: 9px; border: 1px solid #d7e5f4; background: #edf5ff; border-radius: 23px; box-shadow: 0 14px 32px #264d7808; }
.screen-inner { border: 1px solid #fff; border-radius: 15px; background: white; overflow: hidden; }
.device-shell { padding: 6px; border-radius: 15px; background: #eaf2ff; border-color: #bacfea; box-shadow: 0 17px 36px #2e5e9b24, 0 2px 0 #9aafce; }
.device-bezel { border-radius: 10px; }
.device-appbar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #ecf1f7; font-size: 12px; color: #3c597a; }
.device-appbar > span { display: flex; align-items: center; gap: 6px; }
.device-appbar small { margin-left: auto; font-size: 12px; color: #687e97; }
.image-button { display: block; position: relative; width: 100%; padding: 0; background: #fff; border: 0; }
.image-button:focus-visible { outline-offset: -4px; z-index: 3; }
.image-button > img { width: 100%; height: auto; object-fit: contain; }
.hero-image { padding: 5px; background: #f5f8fc; }
.hero-caption { position: absolute; right: 0; bottom: 2px; font-size: 12px; color: #4f6c8e; }
.expand-corner { display: flex; align-items: center; gap: 6px; position: absolute; right: 13px; bottom: 13px; padding: 8px 11px; border: 1px solid #dce6f5; background: #ffffffef; border-radius: 7px; font-size: 12px; color: #3c608a; opacity: 0; transform: translateY(3px); transition: opacity .18s, transform .18s; pointer-events: none; }
.expand-corner svg { width: 15px; height: 15px; }
.image-button:hover .expand-corner, .image-button:focus-visible .expand-corner { opacity: 1; transform: none; }

.workflow-section { padding-block: 80px 88px; }
.workflow-intro { text-align: center; margin-bottom: 38px; }
.workflow-intro .eyebrow { justify-content: center; }
.workflow-intro h2 { font-size: 34px; font-weight: 600; margin-top: 12px; letter-spacing: -.8px; }
.workflow-track { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.workflow-track li { min-width: 0; }
.capability-link { display: flex; align-items: center; flex-direction: column; height: 100%; padding: 27px 8px 24px; border: 1px solid transparent; border-radius: 22px; background: #f5f8fc; transition: transform .28s var(--soft-ease), background .28s, border-color .28s; text-align: center; }
.capability-link:hover { background: #eff6ff; border-color: #d7e6fa; transform: translateY(-4px); }
.feature-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; flex: 0 0 auto; box-shadow: inset 0 1px 0 #ffffffad; }
.feature-icon svg { width: 26px; height: 26px; }
.feature-icon.blue { background: linear-gradient(145deg, #e5f3ff, #cce5ff); color: var(--blue-dark); }
.feature-icon.teal { background: linear-gradient(145deg, #e2f8f3, #c7eee3); color: #228775; }
.feature-icon.lilac { background: linear-gradient(145deg, #f0eaff, #ddd5fa); color: #7b65cb; }
.feature-icon.peach { background: linear-gradient(145deg, #fff1e6, #ffe0cc); color: #bc713c; }
.capability-link .feature-icon { width: 62px; height: 62px; border-radius: 19px; margin-bottom: 18px; }
.capability-link .feature-icon svg { width: 32px; height: 32px; }
.capability-link strong { display: block; font-size: 18px; font-weight: 600; }
.capability-link p { color: var(--muted); margin-top: 10px; font-size: 14px; line-height: 1.65; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 42px; }
.section-heading h2, .scene-copy h2, .access-title h2 { font-size: clamp(28px, 2.75vw, 38px); line-height: 1.5; font-weight: 600; letter-spacing: -.9px; margin-top: 12px; }
.section-heading > p { color: var(--muted); font-size: 14px; line-height: 1.9; padding-bottom: 5px; max-width: 312px; }
/* Product stories: broad colour fields, untouched UI and one quiet annotation. */
.specialty-section { background: #fff; padding-top: 40px; }
.specialty-heading { text-align: center; margin-bottom: 62px; }
.specialty-heading .eyebrow { justify-content: center; color: #737394; }
.specialty-heading h2 { margin: 14px 0 16px; font-size: clamp(28px, 2.75vw, 38px); font-weight: 600; letter-spacing: -.9px; line-height: 1.5; }
.specialty-heading > p:last-child { font-size: 16px; color: var(--muted); line-height: 1.9; }
.mobile-break { display: none; }
.specialty-story { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); align-items: center; gap: 68px; margin-bottom: 86px; }
.specialty-story--reverse { grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr); }
.specialty-story--reverse .specialty-art { grid-column: 2; grid-row: 1; }
.specialty-story--reverse .specialty-copy { grid-column: 1; grid-row: 1; }
.specialty-art { position: relative; isolation: isolate; min-width: 0; padding: 26px 28px 100px; border-radius: 32px; }
.specialty-art::before { content: ""; position: absolute; z-index: -1; width: 54%; aspect-ratio: 1; top: 25px; right: 20px; border: 1px solid #ffffff70; border-radius: 50%; pointer-events: none; }
.specialty-art--lilac { background: linear-gradient(140deg, #d8e3fc, #ddd8fa 60%, var(--specialty-lilac)); }
.specialty-art--apricot { background: linear-gradient(145deg, #fff0dc, var(--specialty-apricot) 50%, #ffd3ac); padding-top: 34px; padding-bottom: 104px; }
.specialty-art-label { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #536480; margin-bottom: 22px; letter-spacing: .5px; }
.specialty-art-label > span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; opacity: .65; }
.specialty-label-dot { width: 7px; height: 7px; border-radius: 3px; background: #8899d6; box-shadow: 0 0 0 4px #ffffff80; }
.specialty-art--apricot .specialty-label-dot { background: #d59b67; }
.specialty-frame { position: relative; padding: 6px; border: 1px solid #ffffffc4; border-radius: 17px; background: #ffffff73; box-shadow: 0 16px 30px #575c9b13; }
.specialty-screen { border-radius: 11px; overflow: hidden; }
.specialty-screen > img { width: 100%; height: auto; object-fit: contain; border-radius: 10px; }
.specialty-float { position: absolute; pointer-events: none; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 13px; padding: 14px 18px; max-width: calc(100% - 36px); border: 1px solid #fff; border-radius: 16px; background: #fffffff5; box-shadow: 0 10px 24px #5a638b12; animation: specialty-float 6s ease-in-out infinite; }
.specialty-float .feature-icon { width: 42px; height: 42px; border-radius: 13px; }
.specialty-float .feature-icon svg { width: 25px; height: 25px; }
.specialty-float strong { font-size: 15px; font-weight: 600; line-height: 1.6; }
.specialty-float > span > span { display: block; font-size: 12px; color: #66758a; margin-top: 3px; }
.specialty-check { color: #78a896; width: 18px; height: 18px; margin-left: 4px; }
.specialty-prescription-tags { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; font-size: 13px; color: #96724b; }
.specialty-prescription-tags i { width: 3px; height: 3px; border-radius: 50%; background: #caa47b; }
.specialty-art--apricot .specialty-float { bottom: 15px; left: 28px; right: auto; }
.specialty-copy { min-width: 0; }
.specialty-copy .eyebrow { font-size: 13px; color: #7a6e9e; }
.specialty-story--reverse .specialty-copy .eyebrow { color: #90643e; }
.specialty-copy h3 { font-size: clamp(25px, 2.25vw, 31px); line-height: 1.55; font-weight: 600; letter-spacing: -.5px; margin: 12px 0 14px; }
.specialty-intro { font-size: 16px; line-height: 1.9; color: var(--muted); max-width: 410px; }
.specialty-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 23px; }
.specialty-points li { display: flex; align-items: flex-start; gap: 15px; }
.specialty-points .feature-icon { width: 48px; height: 48px; border-radius: 15px; }
.specialty-points h4 { margin: 0 0 5px; font-size: 16px; font-weight: 500; line-height: 1.7; }
.specialty-points p { font-size: 14px; line-height: 1.8; color: #68788a; }
.specialty-link { display: inline-flex; align-items: center; gap: 10px; color: #4676a5; font-size: 14px; margin-top: 28px; padding-block: 6px; }
.specialty-link svg { width: 18px; height: 18px; transition: transform .25s var(--soft-ease); }
.specialty-link:hover svg { transform: translateX(4px); }
.specialty-link:hover { color: var(--blue-dark); }
.specialty-support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.specialty-support-card { min-width: 0; padding: 32px 32px 26px; border-radius: 28px; }
.specialty-support-card--mint { background: linear-gradient(135deg, #eaf6ec, var(--specialty-mint)); }
.specialty-support-card--cream { background: linear-gradient(135deg, #fff5e8, #ffebdc); }
.specialty-card-heading { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #47685c; margin-bottom: 20px; }
.specialty-support-card--cream .specialty-card-heading { color: #855a39; }
.specialty-card-heading .feature-icon { width: 39px; height: 39px; border-radius: 12px; background: #ffffffcf; }
.specialty-card-heading .feature-icon svg { width: 24px; height: 24px; }
.specialty-support-card h3 { font-size: 27px; font-weight: 600; line-height: 1.5; letter-spacing: -.5px; }
.specialty-support-card > p { font-size: 14px; line-height: 1.9; color: #54675f; margin: 12px 0 24px; }
.specialty-mini-frame { padding: 6px; background: #ffffff78; border: 1px solid #fff; border-radius: 18px; box-shadow: 0 12px 26px #55746b0c; transition: transform .35s var(--soft-ease), box-shadow .35s; }
.specialty-mini-frame:hover { transform: translateY(-3px); box-shadow: 0 16px 30px #55746b14; }
.specialty-mini-frame .specialty-screen { display: flex; align-items: center; justify-content: center; aspect-ratio: 1.6; background: #fff; padding: 4px; }
.specialty-mini-frame img { max-height: 100%; width: auto; max-width: 100%; }
@keyframes specialty-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (max-width: 1200px) {
 .specialty-story { gap: 38px; }
 .specialty-art { padding-inline: 20px; }
 .specialty-points { gap: 18px; }
 .specialty-support-card { padding: 27px 24px 22px; }
}
@media (max-width: 800px) {
 .specialty-heading { margin-bottom: 36px; }
 .specialty-story, .specialty-story--reverse { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: 60px; }
 .specialty-story--reverse .specialty-art, .specialty-story--reverse .specialty-copy { grid-column: auto; grid-row: auto; }
 .specialty-copy { padding-inline: 8px; }
 .specialty-copy h3 { font-size: 28px; }
 .specialty-intro { max-width: none; }
 .specialty-points { gap: 18px; }
 .specialty-points li { align-items: center; }
 .specialty-link { margin-top: 18px; }
 .specialty-support-grid { gap: 18px; }
 .specialty-support-card { padding: 24px 20px 20px; }
 .specialty-support-card h3 { font-size: 23px; }
 .specialty-support-card > p { min-height: 54px; }
}
@media (max-width: 520px) {
 .specialty-section { padding-top: 24px; }
 .specialty-heading h2 { font-size: 28px; }
 .specialty-heading .mobile-break { display: initial; }
 .specialty-heading > p:last-child { font-size: 14px; }
 .specialty-heading .eyebrow { font-size: 12px; letter-spacing: .3px; }
 .specialty-art { padding: 18px 15px 80px; border-radius: 24px; }
 .specialty-art-label { font-size: 12px; margin-bottom: 15px; }
 .specialty-float { right: 10px; bottom: 12px; padding: 10px 12px; gap: 9px; border-radius: 13px; max-width: calc(100% - 20px); }
 .specialty-float .feature-icon { width: 34px; height: 34px; border-radius: 10px; }
 .specialty-float strong { font-size: 13px; }
 .specialty-float > span > span { font-size: 11px; }
 .specialty-check { display: none; }
 .specialty-art--apricot { padding-bottom: 89px; }
 .specialty-art--apricot .specialty-float { left: 15px; }
 .specialty-prescription-tags { font-size: 11px; gap: 7px; margin-top: 16px; }
 .specialty-copy { padding-inline: 2px; }
 .specialty-copy h3 { font-size: 25px; }
 .specialty-intro { font-size: 15px; }
 .specialty-points { margin-top: 23px; }
 .specialty-points h4 { font-size: 15px; }
 .specialty-points p { font-size: 13px; }
 .specialty-support-grid { grid-template-columns: minmax(0, 1fr); }
 .specialty-support-card > p { min-height: 0; }
 .specialty-card-heading { margin-bottom: 16px; }
}

/* The existing login visual suite, without its authentication component. */
.login-showcase { position: relative; isolation: isolate; overflow: clip; background: linear-gradient(180deg, #fff 0%, #f4f8ff 18%, #f4f8ff 78%, #f5f9ff 100%); }
.login-shell__bg, .login-shell__mesh, .login-shell__aurora { position: absolute; pointer-events: none; z-index: -1; }
.login-shell__bg { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .14; -webkit-mask-image: radial-gradient(ellipse at 62% 50%, #000 12%, #0009 45%, transparent 74%); mask-image: radial-gradient(ellipse at 62% 50%, #000 12%, #0009 45%, transparent 74%); }
.login-shell__mesh { inset: 0; background: radial-gradient(ellipse at 12% 35%, #a4cfff35, transparent 54%), radial-gradient(ellipse at 85% 65%, #d3c6ff40, transparent 58%); -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent); }
.login-shell__aurora { width: 470px; height: 470px; border-radius: 50%; background: radial-gradient(circle, #b4ccff65, transparent 68%); animation: login-aurora 10s ease-in-out infinite alternate; }
.login-shell__aurora--one { left: -160px; top: 0; }
.login-shell__aurora--two { right: 0; bottom: -170px; background: radial-gradient(circle, #b6e9e95e, transparent 68%); animation-delay: -5s; }
.login-board-showcase { --board-accent: #7668ca; --board-alt: #35b6a2; --board-warm: #f2bd89; --board-soft: #ede8ff; display: grid; grid-template-columns: minmax(0, 1fr) 254px; gap: 42px; align-items: center; padding: 18px 32px 18px 18px; background: #ffffff85; border: 1px solid #fff; border-radius: 32px; box-shadow: 0 16px 50px #5275970b; }
.login-board-showcase[data-active-board="hospital"] { --board-accent: #3483cf; --board-alt: #31b8c6; --board-warm: #9ce1bc; --board-soft: #e4f2ff; }
.login-board-showcase[data-active-board="review"] { --board-accent: #8766c5; --board-alt: #46b9a9; --board-warm: #f2cb8c; --board-soft: #eee8fc; }
.login-board-showcase[data-active-board="trace"] { --board-accent: #187fae; --board-alt: #37bdd1; --board-warm: #b2d9a5; --board-soft: #e1f4f9; }
.login-concept { position: relative; min-width: 0; overflow: hidden; padding: 26px; border: 1px solid #fff; border-radius: 23px; background: radial-gradient(ellipse at 0 0, #ffffffba, transparent 65%), linear-gradient(140deg, #edf2ff, var(--board-soft)); }
.login-concept::before { content: ""; position: absolute; inset: 10px; border: 1px solid #ffffff8c; border-radius: 17px; pointer-events: none; }
.login-concept__top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
.login-health-mark { display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid white; border-radius: 22px; background: #fff; box-shadow: 0 8px 22px #647db712; }
.login-health-mark img { width: 49px; height: 45px; object-fit: contain; }
.login-concept__meta { text-align: right; padding: 4px 3px; color: #63758b; }
.login-concept__meta strong { display: block; font-size: 30px; line-height: 1.3; color: #3c4861; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.login-concept__meta span { display: block; font-size: 12px; margin-top: 6px; }
.login-visual-panels { position: relative; height: 340px; margin-top: 18px; }
.login-concept__visual { position: absolute; inset: 0; }
[data-board-panel][hidden] { display: none !important; }
[data-board-panel]:not([hidden]) { animation: login-panel-enter .55s var(--soft-ease) both; }
.login-concept__blob { position: absolute; inset: 4% 9% 5% 12%; border-radius: 42% 58% 48% 52% / 58% 42% 54% 46%; background: radial-gradient(circle at 35% 28%, #ffffffb8, transparent 23%), linear-gradient(140deg, var(--board-accent), var(--board-warm) 48%, var(--board-alt)); opacity: .42; box-shadow: inset 12px 16px 36px #ffffff80; transform: rotate(-8deg); animation: login-blob-breathe 7s ease-in-out infinite; pointer-events: none; }
.login-concept__visual--hospital .login-concept__blob { border-radius: 58% 42% 62% 38% / 38% 54% 46% 62%; background: radial-gradient(circle at 68% 24%, #ffffffb8, transparent 23%), linear-gradient(132deg, var(--board-alt), var(--board-accent) 52%, var(--board-warm)); animation-duration: 7.4s; }
.login-concept__visual--review .login-concept__blob { border-radius: 64% 36% 44% 56% / 46% 64% 36% 54%; animation-duration: 8s; }
.login-concept__visual--trace .login-concept__blob { border-radius: 52% 48% 34% 66% / 48% 38% 62% 52%; background: radial-gradient(circle at 72% 68%, #ffffff94, transparent 24%), linear-gradient(145deg, var(--board-accent), var(--board-alt) 46%, var(--board-warm)); animation-duration: 6.8s; }
.login-concept__ribbon { position: absolute; height: 40px; width: 48%; border-radius: 100px; transform: rotate(-20deg); pointer-events: none; }
.login-concept__ribbon--one { top: 48px; left: 2%; background: linear-gradient(90deg, #ffffff10, #ffffffb0); }
.login-concept__ribbon--two { bottom: 32px; right: 6%; background: linear-gradient(90deg, #a2e5da45, #ffffffbd); }
.login-widget { position: absolute; z-index: 2; padding: 18px; border: 1px solid #fff; border-radius: 20px; background: #fff; box-shadow: 0 14px 34px #5969a415; }
.login-widget--main { width: 64%; height: 218px; left: 0; bottom: 22px; }
.login-widget--metric { top: 10px; right: 0; width: 164px; min-height: 112px; }
.login-widget--flow { bottom: 0; right: 0; width: 180px; min-height: 130px; }
.login-widget__head { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.login-widget__head strong { font-size: 16px; font-weight: 600; color: #3a4560; }
.login-widget__head span { display: block; font-size: 12px; margin-top: 4px; color: #63718a; }
.board-status { flex-shrink: 0; font-size: 12px; font-style: normal; color: #4b617b; background: #f2f6fb; padding: 5px 8px; border-radius: 6px; }
.login-widget--metric > span, .login-widget--flow > span { color: #62718a; font-size: 12px; }
.login-widget--metric > strong, .login-widget--flow > strong { display: block; margin-top: 7px; color: #35405b; font-size: 31px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; }
.login-widget strong small { font-size: 12px; color: #66738b; font-weight: 400; margin-left: 7px; }
.login-widget--metric > em { display: block; font-size: 12px; margin-top: 9px; font-style: normal; color: #337c72; }
.login-widget--flow > small { display: block; font-size: 12px; margin-top: 9px; color: #64748b; }
.login-widget__flowbar { height: 5px; background: #ebeff6; border-radius: 10px; margin-top: 12px; overflow: hidden; }
.login-widget__flowbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--board-accent), var(--board-alt)); border-radius: inherit; }
.login-trend-chart { width: 100%; height: 122px; margin-top: 7px; overflow: visible; stroke: none; }
.chart-grid { stroke: #e9edf4; stroke-width: 1; }
.chart-area { fill: url(#board-chart-fill); }
.chart-bars { fill: #efca9b; opacity: .46; }
.chart-line { fill: none; stroke: var(--board-accent); stroke-width: 2.5; }
.chart-line--alt { stroke: var(--board-alt); stroke-width: 2; }
.chart-labels { fill: #67778e; font-size: 11px; font-family: inherit; }
.chart-legend { display: flex; justify-content: center; gap: 22px; font-size: 12px; color: #64738a; margin-top: 3px; }
.chart-legend span::before { content: ""; display: inline-block; vertical-align: middle; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--board-accent); }
.chart-legend span:nth-child(2)::before { background: var(--board-alt); }
.chart-legend span:nth-child(3)::before { background: #d5a46b; }
.login-concept__visual--hospital .login-widget--main { left: auto; right: 0; top: 0; bottom: auto; }
.login-concept__visual--hospital .login-widget--metric { top: auto; bottom: 25px; left: 0; right: auto; }
.login-concept__visual--hospital .login-widget--flow { bottom: 0; right: 0; }
.login-queue { display: grid; gap: 20px; margin-top: 26px; }
.login-queue > div { display: grid; grid-template-columns: 52px minmax(0, 1fr) 30px; gap: 12px; align-items: center; font-size: 13px; color: #626e84; }
.login-queue i { height: 7px; background: #edf1f7; border-radius: 8px; overflow: hidden; }
.login-queue b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--board-accent), var(--board-alt)); }
.login-queue strong { font-size: 13px; text-align: right; color: #42526b; }
.login-concept__visual--review .login-widget--main { top: 22px; right: 0; left: auto; bottom: auto; }
.login-concept__visual--review .login-widget--metric { top: 0; left: 0; right: auto; }
.login-concept__visual--review .login-widget--flow { left: 20px; right: auto; bottom: 0; }
.login-review-content { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 16px; }
.login-review-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 118px; height: 118px; flex-shrink: 0; border-radius: 50%; background: radial-gradient(circle, #fff 56%, transparent 57%), conic-gradient(var(--board-accent) 0 95%, #e9edf5 95%); }
.login-review-ring strong { color: #43516d; font-size: 25px; line-height: 1.2; }
.login-review-ring strong small { margin-left: 1px; }
.login-review-ring span { color: #64748b; font-size: 12px; margin-top: 6px; }
.login-review-steps { display: grid; gap: 15px; font-size: 12px; color: #5e6c83; }
.login-review-steps i { display: inline-block; margin-right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--board-alt); }
.login-concept__visual--trace .login-widget--main { top: 32px; bottom: auto; }
.login-trace { display: grid; grid-template-columns: minmax(0, 1fr) 78px; gap: 14px; margin-top: 14px; }
.login-trace__scanner { position: relative; height: 130px; border: 1px solid #dfedf6; border-radius: 12px; background: #f6fbff; padding: 14px 12px; overflow: hidden; text-align: center; }
.login-trace__scanner > span { font-size: 13px; color: #4b6b83; }
.login-trace__barcode { height: 43px; margin-block: 8px; background: repeating-linear-gradient(90deg, #38566b 0 2px, transparent 2px 4px, #38566b 4px 5px, transparent 5px 8px, #38566b 8px 11px, transparent 11px 14px); }
.login-trace__scanner > small { font-size: 10px; white-space: nowrap; color: #597184; }
.login-trace__scanner > i { position: absolute; height: 2px; left: 10px; right: 10px; top: 38px; background: linear-gradient(90deg, transparent, #f084a5, transparent); box-shadow: 0 3px 11px #f084a530; animation: login-trace-scan 2.4s ease-in-out infinite; }
.login-trace__scanner > em { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, #ffffff99 50%, transparent 80%); transform: translateX(-100%); animation: login-trace-sweep 4.8s ease-in-out infinite; }
.login-trace__nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.login-trace__nodes > span { display: grid; place-items: center; align-content: center; gap: 7px; border-radius: 9px; background: #f0f7fb; color: #57728a; font-size: 12px; }
.login-trace__nodes i { width: 6px; height: 6px; border-radius: 50%; background: #58baa4; box-shadow: 0 0 0 4px #58baa418; animation: login-node-breathe 2.4s ease-in-out infinite; }
.login-trace__nodes > span:nth-child(2) i { background: #719edd; animation-delay: -.6s; }
.login-trace__nodes > span:nth-child(3) i { background: #60baca; animation-delay: -1.2s; }
.login-trace__nodes > span:nth-child(4) i { background: #b298d1; animation-delay: -1.8s; }
.login-concept__foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 23px; }
.board-preset { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #61718a; }
.board-preset i { width: 5px; height: 5px; border-radius: 50%; background: #8b9cb7; }
.board-signature { color: #7785a1; font-size: 10px; letter-spacing: 2px; }
.board-guide { min-width: 0; padding-block: 18px; }
.board-guide h3 { font-size: 30px; line-height: 1.55; font-weight: 600; letter-spacing: -.8px; margin-top: 15px; min-height: 94px; }
.board-guide__intro > p { color: #63718a; font-size: 14px; line-height: 1.95; margin-top: 14px; min-height: 55px; }
.board-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.board-tabs button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; background: #ffffff9c; border: 1px solid #e4eaf4; border-radius: 11px; color: #607086; font-size: 14px; transition: background .25s, border-color .25s, color .25s; }
.board-tabs button svg { width: 20px; height: 20px; }
.board-tabs button[aria-selected="true"] { color: #4c55a6; background: #eeeaff; border-color: #d7d4f6; }
[data-active-board="hospital"] .board-tabs button[aria-selected="true"], [data-active-board="trace"] .board-tabs button[aria-selected="true"] { color: #236e98; background: #e6f4fc; border-color: #c4e4f5; }
.board-tabs button:hover { background: #fff; border-color: #a3bad8; }
.board-detail-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; margin-top: 26px; color: #526fa0; }
.board-detail-link svg { width: 17px; height: 17px; transition: transform .25s; }
.board-detail-link:hover svg { transform: translateX(3px); }
.rotation-controls { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 38px; color: #60748e; margin-top: 18px; }
.gallery > .rotation-controls { grid-column: 2; margin-top: -25px; }
.rotation-counter { flex-shrink: 0; font-size: 12px; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.rotation-track { flex: 1; min-width: 28px; height: 3px; overflow: hidden; border-radius: 8px; background: #dfe8f3; }
.rotation-fill { display: block; width: 100%; height: 100%; border-radius: inherit; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #86b7ec, #8d9ee4); }
.rotation-status:empty { display: none; }
.rotation-status:not(:empty) { flex-basis: 100%; font-size: 12px; color: #976622; }
.rotation-controls:has(.rotation-status:not(:empty)) { flex-wrap: wrap; }
.gallery-horizontal > .rotation-controls { max-width: 1060px; margin: 16px auto 0; }
.gallery-horizontal .rotation-track { flex: none; width: min(180px, 35%); }
.gallery-horizontal > .rotation-controls { justify-content: center; }
.login-showcase:not(.is-in-view) *, .login-board-showcase:not([data-rotation-state="running"]) .login-concept * { animation-play-state: paused; }
/* A newly selected frame is readable immediately, even with all movement paused. */
.login-showcase:not(.is-in-view) [data-board-panel], .login-board-showcase:not([data-rotation-state="running"]) [data-board-panel] { animation: none; }
.gallery[data-rotation-state="running"] .gallery-tab[aria-selected="true"] .tab-icon svg { animation: category-breathe 3.2s ease-in-out infinite; transform-origin: center; }
.capability-link:hover .feature-icon svg, .capability-link:focus-visible .feature-icon svg { transform: translateY(-2px); }
.capability-link .feature-icon svg { transition: transform .35s var(--soft-ease); }
@keyframes category-breathe { 0%, 100% { opacity: .8; transform: scale(.98); } 50% { opacity: 1; transform: scale(1.045); } }
@keyframes login-aurora { from { transform: translate(-8px, 0) scale(.98); opacity: .5; } to { transform: translate(18px, 12px) scale(1.06); opacity: .85; } }
@keyframes login-blob-breathe { 0%, 100% { transform: translateY(0) rotate(-8deg) scale(.98); } 50% { transform: translateY(-6px) rotate(-5deg) scale(1.02); } }
@keyframes login-node-breathe { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes login-trace-scan { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(52px); opacity: 1; } }
@keyframes login-trace-sweep { 0%, 25% { transform: translateX(-100%); opacity: 0; } 60% { opacity: .6; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes login-panel-enter { from { opacity: .7; } to { opacity: 1; } }
.product-section { background: #f5f9ff; }
.product-section, .ai-section, .environment-section, .print-section { position: relative; isolation: isolate; overflow: clip; }
.product-section::before, .ai-section::before, .environment-section::before, .print-section::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.product-section::before { background: linear-gradient(135deg, #eff7ff, transparent 60%); }
.gallery { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 44px; align-items: center; }
.gallery-tabs { display: grid; gap: 12px; }
.gallery-tab { display: flex; align-items: center; gap: 14px; text-align: left; padding: 22px 17px; border: 1px solid transparent; border-radius: 13px; background: #ffffff80; min-width: 0; position: relative; transition: background .28s var(--soft-ease), border-color .28s, box-shadow .28s; }
.gallery-tab[aria-selected="true"] { background: white; border-color: #d7e6f8; box-shadow: 0 9px 26px #234d8510; }
.gallery-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; top: 27%; bottom: 27%; width: 3px; border-radius: 3px; background: var(--blue); }
.gallery-tab:hover { background: #fff; }
.tab-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #e8f2ff; color: #4b83bd; flex: 0 0 auto; }
.tab-icon svg { width: 22px; height: 22px; }
.gallery-tab[aria-selected="true"] .tab-icon { color: var(--blue-dark); background: #dceeff; }
.gallery-tab strong { font-size: 17px; font-weight: 600; display: block; line-height: 1.65; }
.tab-description { display: block; font-size: 14px; margin-top: 5px; color: var(--muted); line-height: 1.8; }
.gallery-panel { min-width: 0; position: relative; isolation: isolate; }
.gallery-panel::before { content: ""; position: absolute; z-index: -1; inset: -18px -18px 40px; border-radius: 32px; pointer-events: none; }
.product-section .gallery-panel::before { background: linear-gradient(145deg, #deefff, #e1ebff); }
.ai-section .gallery-panel::before { background: linear-gradient(135deg, #dce7fc, #e7ddfb); }
.print-section .gallery-panel::before { background: linear-gradient(135deg, #def1ed, #eaf2db); }
.gallery-panel .screen-shell { background: #ffffff8c; border-color: #ffffffde; box-shadow: 0 12px 28px #3c598b0b; }
.gallery-arrows { display: flex; justify-content: flex-end; gap: 8px; margin: 0 2px 12px; }
.gallery-arrows button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #dbe8f7; border-radius: 12px; background: #ffffffb8; color: #547da8; transition: background .25s, transform .25s var(--soft-ease); }
.gallery-arrows button:hover { background: #e1ebff; transform: translateY(-1px); }
.gallery-arrows button:active { transform: none; }
.gallery-arrows svg { width: 19px; height: 19px; }
.gallery-arrows [data-gallery-prev] svg { transform: rotate(180deg); }
.window-toolbar { display: flex; align-items: center; gap: 12px; height: 39px; padding: 0 14px; color: #56708b; border-bottom: 1px solid #eaf0f8; font-size: 12px; background: #fff; }
.window-dots { display: flex; gap: 4px; flex-shrink: 0; }
.window-dots i { width: 5px; height: 5px; border-radius: 100%; background: #c7d5e8; }
.window-dots i:first-child { background: #7daeea; }
.toolbar-meta { margin-left: auto; font-size: 12px; letter-spacing: 1px; color: #67829f; }
.gallery-launch { height: 550px; display: flex; align-items: center; justify-content: center; padding: 8px; background: #f8fbff; }
.gallery-launch > img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 12px; }
.gallery-annotation { display: flex; align-items: baseline; gap: 8px; padding: 20px 4px 0; }
.annotation-dot { width: 4px; height: 4px; border-radius: 50%; background: #6f98c7; flex-shrink: 0; }
.gallery-annotation p { color: #526a84; font-size: 14px; line-height: 1.85; }
.consultation-section { background: #fff; }
.scene-feature { display: grid; grid-template-columns: 1.18fr 1fr; gap: 76px; align-items: center; }
.photo-shell { border: 1px solid #dfe9ee; border-radius: 25px; padding: 8px; background: #f0f7f6; }
.photo-inner { position: relative; border-radius: 17px; overflow: hidden; background: #eef2f3; }
.photo-inner > img { width: 100%; height: auto; aspect-ratio: 1.6; object-fit: cover; }
.scene-carousel { position: relative; isolation: isolate; aspect-ratio: 1.6; background: #e8eef0; }
.hero-scene.scene-carousel { position: absolute; }
.scene-carousel > [data-scene-frame] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene-carousel > [data-scene-frame][hidden] { display: none !important; }
.scene-carousel > [data-scene-frame].is-switching { animation: scene-enter .65s var(--soft-ease) both; }
.scene-dots { position: absolute; z-index: 2; right: 13px; bottom: 12px; display: flex; align-items: center; gap: 1px; padding: 2px 5px; border: 1px solid #ffffff4f; border-radius: 25px; background: #24465845; backdrop-filter: blur(12px); }
.scene-dots button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: transparent; }
.scene-dots button span { width: 5px; height: 5px; border-radius: 20px; background: #ffffff9c; transition: width .3s var(--soft-ease), background .3s; }
.scene-dots button[aria-pressed="true"] span { width: 17px; background: #fff; }
.scene-dots button:hover { background: #ffffff20; }
.scene-dots button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.scene-carousel .rotation-controls { position: absolute; z-index: 2; bottom: 15px; left: 16px; display: flex; gap: 10px; min-height: 29px; margin: 0; max-width: 125px; padding: 6px 10px; border-radius: 20px; color: #fff; background: #24465845; backdrop-filter: blur(12px); }
.scene-carousel .rotation-counter { color: #fff; font-size: 11px; }
.scene-carousel .rotation-track { width: 35px; flex: 0 0 35px; background: #ffffff50; }
.scene-carousel .rotation-fill { background: #fff; }
.scene-carousel .rotation-controls:has(.rotation-status:not(:empty)) { max-width: calc(100% - 122px); border-radius: 12px; }
.scene-carousel .rotation-status:not(:empty) { color: #fff; font-size: 11px; line-height: 1.6; }
.hero-scene .scene-dots { top: 12px; bottom: auto; }
.hero-scene .rotation-controls { top: 16px; bottom: auto; }
@keyframes scene-enter { from { opacity: .55; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.photo-inner figcaption { position: absolute; right: 12px; bottom: 12px; font-size: 12px; color: white; padding: 5px 8px; border-radius: 5px; background: #233d52b5; }
.scene-copy h2 { margin: 14px 0 24px; max-width: 400px; }
.scene-copy > p:not(.eyebrow) { font-size: 16px; color: #526675; line-height: 2; }
.scene-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.scene-points span { padding: 8px 13px; border-radius: 6px; background: #edf7f4; color: #3a766b; font-size: 14px; }
.ai-section { background: #f1f6ff; }
.ai-section::before { background: linear-gradient(110deg, #eaf5ff, #f5f4ff 80%); }
.ai-section .gallery { grid-template-columns: 265px minmax(0, 1fr); }
.ai-section .gallery-tabs { gap: 9px; }
.ai-section .gallery-tab { padding-block: 13px; }
.ai-section .gallery-launch { height: 540px; padding: 12px; }
.ai-section .screen-shell { background: #e7edfc; border-color: #d9e3f6; }
.ai-orb { width: 36px; height: 36px; stroke: none; }
.ai-orb .orb-shape { transform-origin: 24px 24px; animation: orb-breathe 2.4s ease-in-out infinite; animation-play-state: paused; }
.ai-orb .orb-light { animation-delay: -1.2s; }
.ai-orb.is-in-view .orb-shape { animation-play-state: running; }
.ai-boundary { font-size: 14px; line-height: 1.9; color: #526987; margin-top: 26px; text-align: center; }
.environment-section { background: #fff; }
.environment-section::before { background: linear-gradient(160deg, transparent 60%, #fffaf1); }
.environment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.environment-card { padding: 15px 15px 23px; border-radius: 29px; background: #edf4ff; }
.environment-card:nth-child(2) { background: #eff6eb; }
.environment-card .photo-inner > img { aspect-ratio: 1.85; }
.environment-card .scene-carousel { aspect-ratio: 1.85; }
.environment-card:nth-child(2) .photo-shell { background: #f3f0fc; border-color: #e9e4f3; }
.environment-caption { display: flex; align-items: center; gap: 14px; padding: 21px 8px 0; }
.environment-caption h3 { font-size: 21px; font-weight: 600; }
.environment-caption p { font-size: 14px; line-height: 1.9; color: #607086; margin-top: 6px; }
.scene-disclosure { color: #526b80; font-size: 12px; line-height: 1.9; margin-top: 28px; text-align: right; }
.print-section { background: #f1f9f8; }
.print-section::before { background: linear-gradient(140deg, #eff8ff, #edf7f1); }
.print-section .section-heading { text-align: center; display: block; }
.print-section .eyebrow { justify-content: center; color: #54857d; }
.print-section .section-heading > p { max-width: none; margin-top: 13px; }
.gallery-horizontal { display: block; }
.gallery-horizontal .gallery-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 740px; margin: 0 auto 26px; gap: 12px; }
.gallery-horizontal .gallery-tab { justify-content: center; padding: 15px; }
.gallery-horizontal .gallery-tab[aria-selected="true"]::after { top: auto; bottom: 0; left: 28%; right: 28%; height: 3px; width: auto; }
.print-section .screen-shell { background: #e3f0ec; border-color: #d8e8e2; max-width: 1060px; margin-inline: auto; }
.print-section .gallery-launch { height: 635px; padding: 12px; background: #f9fcfb; }
.print-section .gallery-annotation { max-width: 1060px; margin-inline: auto; }
.print-scene-feature { display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; gap: 44px; max-width: 1060px; margin: 44px auto 0; padding: 16px; border: 1px solid #fff; border-radius: 28px; background: linear-gradient(120deg, #edf5ffb5, #fffdf5b5); }
.print-scene-feature .photo-shell { background: #ffffffb3; border-color: #e0e9ed; }
.print-scene-copy { padding: 20px 14px 20px 0; }
.print-scene-copy .feature-icon { margin-bottom: 22px; }
.print-scene-copy .eyebrow { justify-content: flex-start; font-size: 12px; }
.print-scene-copy h3 { font-size: clamp(22px, 2.1vw, 29px); font-weight: 600; line-height: 1.5; margin: 10px 0 14px; }
.print-scene-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.9; color: #637485; }
.print-scene-copy .scene-points { gap: 7px; margin-top: 20px; }
.print-scene-copy .scene-points span { font-size: 12px; padding: 7px 10px; background: #fff; color: #5a7888; }
.device-features { display: flex; justify-content: center; gap: 80px; margin: 34px 0 0; }
.device-features > div { display: flex; gap: 13px; align-items: center; }
.device-features strong { font-size: 14px; font-weight: 600; display: block; }
.device-features small { display: block; color: #526c7b; font-size: 14px; line-height: 1.8; margin-top: 5px; }
.access-section { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(110deg, #e9f7ff, #e6eeff 60%, #efedff); text-align: center; padding-block: 78px 72px; }
.access-light { position: absolute; inset: -45% 5%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse, #cce8ffb0, transparent 68%); animation: atmosphere 9s ease-in-out infinite; }
.access-title > img { margin: 0 auto 15px; width: 54px; height: 54px; border-radius: 14px; }
.access-title .eyebrow { justify-content: center; font-size: 12px; }
.access-title h2 { margin: 10px 0 12px; }
.access-title > p:last-child { color: #566e8a; font-size: 15px; }
.access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: min(780px, 100%); margin: 32px auto 0; }
.access-card { display: flex; align-items: center; gap: 16px; text-align: left; padding: 25px; border: 1px solid #fff; border-radius: 16px; background: #ffffffd9; transition: transform .28s var(--soft-ease), background .28s, box-shadow .28s; }
.access-card:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 12px 25px #234d8510; }
.access-card > span:nth-child(2) { flex: 1; min-width: 0; }
.access-card strong { display: block; font-size: 21px; font-weight: 600; }
.access-description { display: block; font-size: 12px; color: #60718a; margin-top: 7px; }
.access-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #eaf3ff; color: #4478b7; flex-shrink: 0; }
.access-arrow svg { width: 18px; height: 18px; }
.access-note { color: #526a85; font-size: 14px; margin-top: 24px; line-height: 1.9; }
.site-footer { padding-block: 34px 20px; }
.footer-top { display: flex; align-items: center; gap: 24px; }
.site-footer .brand-name { font-size: 19px; }
.footer-top p { font-size: 12px; color: #60738a; }
.back-top { margin-left: auto; color: #506f98; font-size: 12px; white-space: nowrap; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 25px; padding-top: 18px; border-top: 1px solid #eef1f6; color: #607185; font-size: 12px; line-height: 1.8; }
#image-dialog { border: 1px solid #dbe5f4; border-radius: 22px; padding: 8px; width: min(1380px, calc(100vw - 64px)); max-width: none; max-height: calc(100dvh - 64px); background: #edf4ff; box-shadow: 0 24px 70px #162c4b30; }
#image-dialog::backdrop { background: #142c4f70; backdrop-filter: blur(4px); }
.dialog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; background: #fff; border-radius: 15px 15px 0 0; }
.dialog-toolbar p { color: #577393; font-size: 12px; margin-bottom: 5px; }
.dialog-toolbar h2 { font-size: 18px; font-weight: 600; }
#dialog-close { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; font-size: 26px; color: #5c7596; background: #edf4fd; }
#dialog-close:hover { background: #e1ebff; }
.dialog-image-wrap { overflow: auto; max-height: calc(100dvh - 232px); padding: 16px; background: #f8fbff; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #a5bedb transparent; }
#dialog-image { width: 100%; max-width: none; min-width: 880px; height: auto; margin-inline: auto; }
#dialog-caption { color: #526c8b; font-size: 12px; padding: 12px 18px; line-height: 1.8; background: #fff; border-radius: 0 0 15px 15px; }
.dialog-open { overflow: hidden; }

.reveal { transition: opacity .3s ease, transform .3s var(--soft-ease); }
:where(html.motion-ready) .reveal:not(.is-visible) { opacity: 0; transform: translateY(12px); }
.reveal:focus-within { opacity: 1; transform: none; }
[data-ambient] { animation-play-state: paused; }
[data-ambient].is-in-view { animation-play-state: running; }
@keyframes orb-breathe { 0%, 100% { transform: scale(.91); opacity: .65; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes atmosphere { 0%, 100% { opacity: .45; transform: scale(.99); } 50% { opacity: .75; transform: scale(1.01); } }
@keyframes image-enter { from { opacity: .55; transform: translateX(calc(var(--slide-direction, 1) * 16px)); } to { opacity: 1; transform: none; } }
.gallery-panel.is-switching [data-gallery-image] { animation: image-enter .42s var(--soft-ease); }
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after { animation-play-state: paused !important; }
html.motion-paused .device-stage { transform: none !important; }
html.motion-paused .reveal { opacity: 1; transform: none; transition: none; }
html.motion-paused { scroll-behavior: auto; }

@media (max-width: 1200px) {
 .container { width: calc(100% - 64px); }
 .brand-description span { display: none; }
 .brand-name { font-size: 21px; }
 .brand > img { width: 38px; height: 36px; }
 #main-nav { gap: 18px; }
 .header-inner { gap: 18px; }
 .hero-grid { gap: 26px; min-height: 580px; }
 .hero-visual { height: 450px; }
 .hero-scene { width: 95%; }
 .hero-visual .device-stage { width: 91%; }
 .hero-description { font-size: 16px; }
 .hero-actions { gap: 9px; }
 .button { padding-inline: 15px; font-size: 14px; }
 .workflow-track { gap: 12px; }
 .capability-link strong { font-size: 16px; }
 .gallery, .ai-section .gallery { grid-template-columns: 230px minmax(0, 1fr); gap: 28px; }
 .gallery-horizontal { display: block; }
 .gallery-tab { gap: 11px; padding-inline: 14px; }
 .gallery-tab strong { font-size: 15px; }
 .gallery-launch, .ai-section .gallery-launch { height: 455px; }
 .scene-feature { gap: 42px; }
 .scene-copy > p:not(.eyebrow) { font-size: 14px; }
 .print-section .gallery-launch { height: 575px; }
}
@media (max-width: 1000px) and (min-width: 801px) {
 .header-inner { gap: 14px; }
 .brand-description { display: inline; padding-left: 7px; }
 #main-nav { gap: 11px; }
 #main-nav a { font-size: 14px; }
 .workflow-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .capability-link { padding-block: 23px; }
}
@media (max-width: 1100px) {
 .login-board-showcase { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 14px; }
 .login-concept { padding: 24px 30px; }
 .login-visual-panels { height: 325px; }
 .login-widget--main { width: 62%; max-width: 460px; }
 .login-widget--metric { right: 4%; width: 180px; }
 .login-widget--flow { right: 4%; width: 200px; }
 .board-guide { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: center; column-gap: 40px; padding: 10px 20px 14px; }
 .board-guide__intro { grid-row: span 3; }
 .board-guide h3 { font-size: 29px; min-height: 0; margin-top: 8px; }
 .board-guide__intro > p { min-height: 0; margin-top: 10px; }
 .board-tabs { margin-top: 0; }
 .board-guide .rotation-controls { margin-top: 10px; }
 .board-detail-link { margin-top: 12px; }
}
@media (max-width: 800px) {
 .container { width: calc(100% - 48px); }
 .section-pad { padding-block: 70px; }
 .header-inner { height: 72px; }
 .header-tools { margin-left: auto; }
 .menu-toggle { display: flex; }
 #main-nav { display: none; position: absolute; left: 24px; right: 24px; top: 71px; background: #fff; border: 1px solid #dce7f6; border-radius: 18px; padding: 12px; box-shadow: 0 14px 32px #24497518; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: calc(100dvh - 90px); overflow-y: auto; }
 #main-nav.is-open { display: grid; animation: mobileNavReveal .2s ease-out; }
 #main-nav a { display:flex; align-items:center; gap:9px; min-height:56px; padding:10px; border-radius:12px; background:#f7f9fd; font-size:14px; }
 #main-nav a[aria-current="location"] { color:#075ce6; background:#eaf2ff; box-shadow:inset 0 0 0 1px #d3e3ff; }
 #main-nav .nav-icon { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border-radius:10px; background:#e5edff; color:#577cba; }
 #main-nav .nav-icon svg { width:19px; height:19px; }
 #main-nav .nav-icon--0,#main-nav .nav-icon--3 { background:#e0f2ec; color:#429c85; }
 #main-nav .nav-icon--2,#main-nav .nav-icon--4 { background:#eee8fa; color:#8b75ba; }
 .menu-toggle span { transition:transform .2s; }
 .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(4px) rotate(45deg); }
 .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-4px) rotate(-45deg); }
 #main-nav a:hover { background: #f1f6ff; }
 #main-nav a::after { display: none; }
 .hero-grid { grid-template-columns: 1fr; gap: 37px; padding-block: 48px 36px; }
 .hero-copy { text-align: center; padding: 0; }
 .hero-copy .eyebrow, .hero-actions, .hero-benefits { justify-content: center; }
 h1 { font-size: 49px; margin-block: 18px; }
 .hero-description { margin-inline: auto; max-width: 430px; font-size: 16px; }
 .hero-actions { margin-top: 25px; }
 .hero-benefits { margin-top: 27px; }
 .hero-visual { width: min(570px, 100%); height: 450px; margin-inline: auto; }
 .hero-scene { width: 85%; }
 .hero-visual .device-stage { width: 84%; bottom: 23px; }
 .hero-caption { bottom: 0; }
 .workflow-section { padding-block: 55px 60px; }
 .workflow-intro h2 { font-size: 28px; }
 .workflow-track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
 .capability-link { padding: 23px 10px; }
 .section-heading { display: block; margin-bottom: 29px; }
 .section-heading h2, .scene-copy h2, .access-title h2 { font-size: 30px; }
 .section-heading > p { max-width: none; padding: 0; margin-top: 14px; }
 .gallery, .ai-section .gallery { display: block; }
 .gallery > .rotation-controls { margin-top: 15px; }
 .login-board-showcase { border-radius: 25px; }
 .login-concept { border-radius: 18px; padding: 22px; }
 .login-widget--main { max-width: none; width: 65%; }
 .login-widget--metric { right: 0; width: 158px; }
 .login-widget--flow { right: 0; width: 174px; }
 .board-guide { grid-template-columns: minmax(0, 1fr) 240px; gap: 0 20px; padding-inline: 12px; }
 .board-guide h3 { font-size: 25px; }
 .board-signature { display: none; }
 .gallery-tabs, .gallery-horizontal .gallery-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
 .gallery-tab { justify-content: center; padding: 14px 8px; gap: 9px; min-height: 72px; background: #ffffff90; }
 .gallery-tab[aria-selected="true"]::after { top: auto; bottom: 0; left: 28%; right: 28%; height: 3px; width: auto; }
 .tab-description { display: none; }
 .ai-section .gallery-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
 .ai-section .gallery-tab { flex-direction: column; gap: 7px; padding: 13px 4px; }
 .ai-section .gallery-tab strong { font-size: 13px; }
 .gallery-launch { height: 450px; }
 .ai-section .gallery-launch { height: 490px; }
 .scene-feature { grid-template-columns: 1fr; gap: 30px; }
 .scene-copy h2 { max-width: none; margin-bottom: 18px; }
 .scene-points { margin-top: 20px; }
 .environment-grid { gap: 20px; }
 .environment-caption { align-items: flex-start; gap: 10px; }
 .environment-caption h3 { font-size: 17px; }
 .environment-caption p { font-size: 13px; }
 .print-section .gallery-launch { height: 540px; }
 .print-scene-feature { gap: 24px; padding: 12px; }
 .print-scene-copy { padding-right: 8px; }
 .device-features { gap: 25px; }
 .device-features > div { align-items: flex-start; }
 .access-card { padding: 20px 16px; gap: 12px; }
 .access-card strong { font-size: 18px; }
 .access-arrow { width: 27px; height: 27px; }
 .footer-top { flex-wrap: wrap; gap: 15px; }
 .footer-top p { order: 3; flex-basis: 100%; }
 .footer-bottom { flex-direction: column; gap: 6px; }
}
@media (max-width: 520px) {
 html { scroll-padding-top: 86px; }
 .container { width: calc(100% - 36px); }
 .section-pad { padding-block: 55px; }
 .login-board-showcase { padding: 8px; gap: 12px; border-radius: 23px; }
 .login-concept { padding: 20px 15px 18px; border-radius: 17px; }
 .login-concept::before { inset: 6px; border-radius: 12px; }
 .login-health-mark { width: 53px; height: 53px; border-radius: 16px; }
 .login-health-mark img { width: 36px; height: 34px; }
 .login-concept__meta strong { font-size: 24px; }
 .login-concept__meta span { font-size: 11px; }
 .login-visual-panels { height: 356px; margin-top: 25px; }
 .login-widget { border-radius: 16px; padding: 14px; }
 .login-concept__visual .login-widget--main { top: 0; left: 0; right: 0; bottom: auto; width: 100%; height: 214px; }
 .login-concept__visual .login-widget--metric { top: 233px; left: 0; right: auto; bottom: auto; width: calc(50% - 6px); min-height: 114px; }
 .login-concept__visual .login-widget--flow { top: 233px; right: 0; left: auto; bottom: auto; width: calc(50% - 6px); min-height: 114px; }
 .login-widget__head strong { font-size: 15px; }
 .login-widget--metric > strong, .login-widget--flow > strong { font-size: 25px; }
 .login-widget strong small { font-size: 11px; margin-left: 3px; }
 .login-widget--metric > em, .login-widget--flow > small { font-size: 11px; line-height: 1.6; }
 .login-widget--flow > small { margin-top: 6px; }
 .login-widget__flowbar { margin-top: 8px; }
 .login-concept__blob { inset: 5% 0 0; }
 .login-concept__foot { padding-top: 14px; }
 .board-preset { font-size: 11px; gap: 5px; }
 .board-guide { display: flex; flex-direction: column; align-items: stretch; padding: 12px 12px 16px; }
 .board-guide .eyebrow { font-size: 12px; }
 .board-guide h3 { font-size: 24px; min-height: 38px; }
 .board-guide__intro > p { font-size: 13px; min-height: 50px; }
 .board-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }
 .board-tabs button { flex-direction: column; gap: 6px; font-size: 12px; padding: 11px 4px; border-radius: 10px; }
 .board-tabs button svg { width: 19px; height: 19px; }
 .board-guide .rotation-controls { margin-top: 12px; }
 .board-detail-link { justify-content: center; font-size: 12px; margin-top: 14px; }
 .rotation-controls { gap: 9px; }
 .login-shell__bg { opacity: .09; }
 .header-inner { height: 65px; gap: 8px; }
 .brand { gap: 7px; }
 .brand-name { font-size: 18px; }
 .brand > img { width: 32px; height: 30px; }
 .brand-description { font-size: 12px; padding-left: 7px; }
 #main-nav { top: 64px; left: 18px; right: 18px; }
 .hero-grid { padding: 35px 0 28px; gap: 30px; }
 .eyebrow { font-size: 12px; letter-spacing: .6px; }
 h1 { font-size: 38px; letter-spacing: -1px; margin-block: 16px; }
 .hero-description { font-size: 14px; line-height: 1.9; max-width: 310px; }
 .hero-actions { gap: 9px; margin-top: 23px; }
 .hero-actions .button { padding: 12px 13px; font-size: 13px; gap: 6px; min-height: 47px; }
 .hero-actions .button svg { width: 16px; height: 16px; }
 .hero-benefits { font-size: 12px; margin-top: 24px; }
 .hero-benefits span + span { margin-left: 11px; padding-left: 11px; }
 .hero-visual { height: clamp(325px, 75vw, 390px); }
 .hero-scene { width: 91%; border-width: 4px; border-radius: 17px; }
 .hero-scene img { aspect-ratio: 1.6; }
 .hero-scene figcaption { font-size: 12px; right: 8px; top: 8px; padding: 4px 6px; }
 .hero-visual .device-stage { width: 94%; bottom: 24px; }
 .device-shell { padding: 4px; border-radius: 12px; }
 .device-bezel { border-radius: 8px; }
 .device-appbar { padding: 6px 8px; }
 .device-appbar img { width: 16px; height: 15px; }
 .device-appbar small { display: none; }
 .hero-caption { font-size: 12px; }
 .workflow-section { padding-block: 42px 48px; }
 .workflow-intro { margin-bottom: 25px; }
 .workflow-intro h2 { font-size: 25px; line-height: 1.5; }
 .workflow-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
 .capability-link { border-radius: 18px; padding: 23px 8px 20px; }
 .capability-link strong { font-size: 16px; }
 .capability-link p { margin-top: 7px; }
 .section-heading h2, .scene-copy h2, .access-title h2 { font-size: 27px; letter-spacing: -.7px; }
 .section-heading > p { font-size: 14px; }
 .gallery-tab, .gallery-horizontal .gallery-tab { flex-direction: column; gap: 7px; padding: 12px 3px; min-height: 93px; }
 .gallery-tab strong { font-size: 13px; }
 .ai-section .gallery-tabs { gap: 4px; }
 .ai-section .gallery-tab { padding: 12px 1px; }
 .ai-section .gallery-tab strong { font-size: 12px; }
 .screen-shell { padding: 6px; border-radius: 18px; }
 .screen-inner { border-radius: 12px; }
 .window-toolbar { height: 35px; padding-inline: 9px; gap: 7px; }
 .toolbar-meta { display: none; }
 .gallery-launch { height: 300px; padding: 5px; }
 .ai-section .gallery-launch { height: 340px; padding: 5px; }
 .gallery-annotation { padding-top: 13px; }
 .gallery-annotation p { font-size: 12px; }
 .expand-corner { opacity: 1; transform: none; right: 7px; bottom: 7px; font-size: 12px; padding: 6px 8px; gap: 4px; }
 .expand-corner svg { width: 13px; height: 13px; }
 .photo-shell { padding: 6px; border-radius: 18px; }
 .photo-inner { border-radius: 12px; }
 .photo-inner figcaption { right: 8px; bottom: 8px; }
 .scene-copy > p:not(.eyebrow) { font-size: 14px; }
 .scene-points span { font-size: 12px; }
 .environment-grid { grid-template-columns: 1fr; gap: 28px; }
 .environment-caption { align-items: center; padding-top: 16px; }
 .environment-caption h3 { font-size: 19px; }
 .environment-caption p { font-size: 13px; }
 .scene-disclosure { text-align: left; margin-top: 22px; }
 .print-section .gallery-launch { height: 395px; padding: 6px; }
 .gallery-arrows { gap: 7px; margin-bottom: 10px; }
 .gallery-arrows button { width: 34px; height: 34px; border-radius: 10px; }
 .scene-carousel .rotation-controls { left: 10px; bottom: 12px; padding: 5px 8px; gap: 7px; }
 .hero-scene .rotation-controls { top: 12px; bottom: auto; }
 .scene-dots { right: 9px; bottom: 9px; }
 .hero-scene .scene-dots { top: 8px; bottom: auto; }
 .scene-dots button { width: 28px; height: 28px; }
 .print-scene-feature { grid-template-columns: 1fr; gap: 4px; margin-top: 30px; padding: 8px; border-radius: 22px; }
 .print-scene-copy { padding: 20px 17px 22px; }
 .print-scene-copy .feature-icon { float: right; margin: 0 0 12px 12px; }
 .ai-boundary { font-size: 12px; margin-top: 20px; text-align: left; }
 .device-features small, .access-note { font-size: 12px; }
 .device-features { flex-direction: column; gap: 20px; margin-top: 25px; }
 .device-features > div { align-items: center; }
 .access-title > p:last-child { font-size: 14px; }
 .access-grid { grid-template-columns: 1fr; gap: 13px; margin-top: 27px; }
 .access-card { padding: 22px; }
 .access-card strong { font-size: 20px; }
 .footer-top p { line-height: 1.9; }
 #image-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 36px); padding: 5px; border-radius: 16px; }
 .dialog-toolbar { padding: 12px; border-radius: 11px 11px 0 0; }
 .dialog-toolbar h2 { font-size: 14px; }
 .dialog-image-wrap { padding: 10px; max-height: calc(100dvh - 207px); }
 #dialog-image { min-width: 820px; }
 #dialog-caption { padding: 12px; border-radius: 0 0 11px 11px; }
}
@media (max-width: 350px) {
 .print-scene-copy h3 { clear: both; }
 .login-trace { grid-template-columns: minmax(0, 1fr) 52px; gap: 8px; }
 .login-trace__nodes { gap: 5px; }
 .login-trace__nodes > span { font-size: 11px; white-space: nowrap; }
 .header-inner .brand-description { display: inline; padding-left: 5px; }
 .header-inner { gap: 5px; }
 .brand { gap: 5px; }
 .brand-name { font-size: 17px; }
 .hero-visual { height: 288px; }
 .hero-actions .button { padding-inline: 10px; font-size: 12px; }
}
/* Explanatory cards live outside the screenshot: no buttons or clinical text are covered. */
.gallery-note-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 22px 10px 0; }
.gallery-note { position: relative; display: flex; align-items: flex-start; gap: 11px; min-width: 0; min-height: 108px; padding: 17px 16px; border: 1px solid #ffffffee; border-radius: 18px; background: #ffffffed; box-shadow: 0 7px 18px #38587e07; }
.gallery-note::before { content: ""; position: absolute; top: -7px; left: 32px; width: 13px; height: 13px; transform: rotate(45deg); background: #fff; border-radius: 3px 0 0; pointer-events: none; }
.gallery-note:nth-child(2)::before { left: auto; right: 32px; }
.gallery-note strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.65; color: #344c69; }
.gallery-note p { margin-top: 4px; font-size: 14px; line-height: 1.8; color: #536980; }
.note-mark { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #397bb9; background: #e8f2ff; }
.note-mark svg { width: 17px; height: 17px; }
.gallery-note:nth-child(2) .note-mark { background: #e6f5ee; color: #387a69; }
.ai-section .note-mark { background: #eee8fc; color: #7061a0; }
.gallery-annotation { min-height: 58px; padding-inline: 12px; }
.hero-image > img, #dialog-image { border-radius: 12px; }
.business-section { position: relative; isolation: isolate; overflow: clip; }
.business-section--clinic { background: #fff; }
.business-section--stock { background: linear-gradient(145deg, #fffaf5, #f7fbf8); }
.business-section--stock .eyebrow { color: #82644a; }
.business-gallery { --gallery-wash: #e1ebff; --gallery-wash-end: #e5f4ff; --gallery-accent: #326baf; }
.business-gallery[data-tone="teal"] { --gallery-wash: #d8f2e9; --gallery-wash-end: #e3f5ef; --gallery-accent: #287967; }
.business-gallery[data-tone="peach"] { --gallery-wash: #ffe5cc; --gallery-wash-end: #fff0e3; --gallery-accent: #986034; }
.business-gallery[data-tone="lilac"] { --gallery-wash: #e4dff7; --gallery-wash-end: #efe9fc; --gallery-accent: #745b9b; }
.business-gallery .gallery-panel::before { background: linear-gradient(135deg, var(--gallery-wash), var(--gallery-wash-end)); }
.business-gallery .gallery-tab[aria-selected="true"] { border-color: var(--gallery-wash); }
.business-gallery .gallery-tab[aria-selected="true"]::after { background: var(--gallery-accent); }
.business-gallery .gallery-tab[aria-selected="true"] .tab-icon { color: var(--gallery-accent); background: var(--gallery-wash); }
.business-gallery .tab-icon.teal { color: #327c6c; background: #e4f5ed; }
.business-gallery .tab-icon.peach { color: #a66c39; background: #fff0e0; }
.business-gallery .tab-icon.lilac { color: #7b69ab; background: #f0ebfc; }
.business-gallery .note-mark { color: var(--gallery-accent); background: var(--gallery-wash); }
.business-gallery .gallery-note:nth-child(2) .note-mark { color: var(--gallery-accent); background: var(--gallery-wash-end); }
.business-gallery .rotation-fill { background: var(--gallery-accent); }
.business-section--clinic .gallery-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; margin-bottom: 30px; gap: 12px; }
.business-section--clinic .gallery-tab { justify-content: flex-start; padding: 18px 13px; gap: 10px; background: #f6f8fc; }
.business-section--clinic .gallery-tab[aria-selected="true"] { background: #edf4ff; }
.business-section--clinic .gallery-tab strong { font-size: 17px; }
.business-section--clinic .tab-description { font-size: 14px; }
.business-section--clinic .gallery-panel { max-width: 1140px; margin-inline: auto; }
.business-section--clinic .gallery-launch { height: 560px; }
.business-section--clinic .gallery-note-strip { padding-inline: 20px; }
.business-section--stock .gallery-launch { height: 535px; }
.business-section--stock .gallery-annotation { min-height: 76px; }
@media (max-width: 1100px) {
 .business-section--clinic .gallery-tab { flex-direction: column; text-align: center; padding: 14px 7px; gap: 7px; }
 .business-section--clinic .gallery-launch { height: 455px; }
 .gallery-note-strip { padding-inline: 3px; gap: 10px; }
 .gallery-note { padding: 15px 12px; gap: 8px; }
}
@media (max-width: 800px) {
 .business-section--clinic .gallery-tabs { gap: 7px; margin-bottom: 20px; }
 .business-section--clinic .gallery-tab strong { font-size: 14px; }
 .business-section--clinic .tab-description { display: none; }
 .business-section--clinic .gallery-launch { height: 390px; }
 .business-section--stock .gallery-launch { height: 440px; }
 .business-section--clinic .gallery-note-strip { padding-inline: 3px; }
}
@media (max-width: 520px) {
 .gallery-note-strip { grid-template-columns: 1fr; padding-top: 15px; gap: 10px; }
 .gallery-note { min-height: 82px; padding: 13px; border-radius: 15px; }
 .gallery-note:nth-child(2)::before { display: none; }
 .gallery-note strong { font-size: 15px; }
 .gallery-note p { font-size: 14px; }
 .gallery-annotation { padding-inline: 3px; min-height: 88px; }
 .business-section--clinic .gallery-tabs { gap: 4px; }
 .business-section--clinic .gallery-tab { padding: 12px 1px; min-height: 80px; gap: 7px; border-radius: 10px; }
 .business-section--clinic .gallery-tab strong { font-size: 12px; white-space: nowrap; }
 .business-section--clinic .gallery-launch { height: 230px; padding: 5px; }
 .business-section--stock .gallery-launch { height: 310px; padding: 5px; }
 .business-section--stock .gallery-tab { flex-direction: column; padding-inline: 4px; }
 .business-section--stock .gallery-tab strong { font-size: 13px; }
}
/* Central pharmacy: photographic services, one shared prescription and distinct system roles. */
.central-section { background: linear-gradient(180deg, #f8fcfa, #fff 44%, #fff); }
.central-section::before { display: none; }
.central-section .section-heading .eyebrow, .central-intro .eyebrow { color: #477f72; }
.central-section .environment-grid { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: 62px; align-items: center; }
.central-visual { min-width: 0; padding: 13px 13px 0; border: 1px solid #dceddf; border-radius: 30px; background: linear-gradient(135deg, #d9eee5, #edf5df 68%, #fff2df); }
.central-visual .photo-shell { padding: 7px; border-color: #fff; background: #ffffffc9; box-shadow: 0 14px 35px #386a5510; }
.central-visual .scene-carousel { aspect-ratio: 1.5; }
.central-visual [data-scene-frame] { object-position: center top; }
/* Four photo controls remain available even when the loading status expands. */
.central-visual .rotation-controls:has(.rotation-status:not(:empty)) { left: 10px; bottom: 56px; max-width: calc(100% - 20px); background: #244658d9; }
.central-scene-caption { display: flex; align-items: flex-start; gap: 12px; min-height: 117px; padding: 21px 12px; }
.central-scene-mark { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: #447967; background: #ffffffbd; }
.central-scene-caption strong { font-size: 18px; line-height: 1.65; font-weight: 600; color: #304f47; }
.central-scene-caption p { font-size: 14px; line-height: 1.8; margin-top: 3px; color: #536b60; }
.central-intro h3 { margin: 14px 0 18px; font-size: clamp(30px, 3.1vw, 43px); line-height: 1.3; letter-spacing: -1px; }
.central-lead { font-size: 16px; line-height: 1.95; color: #5a6c6a; }
.central-service-points { display: grid; gap: 22px; list-style: none; padding: 0; margin: 28px 0 20px; }
.central-service-points li { display: flex; gap: 15px; align-items: flex-start; }
.central-section h4 { margin: 0; font-size: 18px; line-height: 1.6; font-weight: 600; }
.central-service-points p { margin-top: 3px; font-size: 14px; line-height: 1.8; color: var(--muted); }
.central-scope { border-left: 2px solid #b9d8c9; padding-left: 13px; font-size: 14px; line-height: 1.8; color: #61706b; }
.central-flow { margin-top: 54px; padding: 29px 32px 33px; border: 1px solid #e0eae5; border-radius: 24px; background: #f6faf8; }
.central-flow-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.central-flow-heading h3 { font-size: 21px; line-height: 1.6; }
.central-flow-heading > span { font-size: 14px; color: #657e71; }
.central-flow ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 29px 0 0; padding: 0; }
.central-flow li { position: relative; min-width: 0; }
.central-flow li:not(:last-child)::after { content: ""; position: absolute; height: 1px; left: 47px; right: -11px; top: 17px; background: linear-gradient(90deg, #bdd8ce, #dceae1); }
.central-step-number { display: grid; place-items: center; width: 35px; height: 35px; margin-bottom: 15px; border-radius: 12px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: #457263; background: #e3f1e9; }
.central-flow li:nth-child(2) .central-step-number { background: #e1ebff; color: #426996; }
.central-flow li:nth-child(3) .central-step-number { background: #fbead9; color: #956a43; }
.central-flow li:nth-child(4) .central-step-number { background: #eee8fa; color: #79639a; }
.central-flow strong { display: block; font-size: 16px; line-height: 1.7; font-weight: 600; }
.central-flow li p { margin-top: 5px; font-size: 14px; line-height: 1.8; color: #60736c; }
.central-systems { margin-top: 80px; }
.central-subheading h3 { margin-top: 9px; font-size: 29px; line-height: 1.5; }
.central-system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 29px; }
.central-role { min-width: 0; padding: 31px 31px 25px; border-radius: 26px; }
.central-role--clinic { background: linear-gradient(145deg, #e1ebff, #ebf3ff); }
.central-role--pharmacy { background: linear-gradient(145deg, #dff2ea, #f0f7e7); }
.central-role-heading { display: flex; align-items: center; gap: 13px; }
.central-role-heading .feature-icon { background: #ffffffc9; }
.central-role-heading > div > span { font-size: 13px; color: #58728d; display: block; margin-bottom: 1px; }
.central-role--pharmacy .central-role-heading > div > span { color: #577664; }
.central-role-heading h4 { font-size: 21px; }
.central-role > p { margin-top: 17px; font-size: 15px; line-height: 1.9; color: #546b83; }
.central-role--pharmacy > p { color: #556f60; }
.central-rx-frame { margin-top: 23px; padding: 7px; border: 1px solid #fff; border-radius: 18px; background: #ffffffc9; box-shadow: 0 10px 25px #2b63810a; }
.central-rx-label { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 10px 10px 14px; color: #4d6480; font-size: 14px; }
.central-rx-label > span:last-child { font-size: 12px; color: #637a92; }
.central-rx-image { display: block; width: 100%; padding: 0; overflow: hidden; border-radius: 12px; background: #fff; }
.central-rx-image > img { width: 100%; height: auto; border-radius: 12px; }
.central-duty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 23px 0 0; padding: 0; list-style: none; }
.central-duty-grid li { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 20px 5px; border: 1px solid #ffffffd1; border-radius: 16px; background: #ffffffa6; font-size: 14px; color: #45665b; }
.central-duty-grid svg { width: 25px; height: 25px; color: #548b75; }
.central-data-link { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px; margin-top: 18px; padding: 18px 20px; border: 1px solid #e4ece8; border-radius: 18px; background: #fbfdfc; }
.central-link-symbol { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: #e6f2ee; color: #488674; animation: central-breathe 4.8s ease-in-out infinite; }
.central-data-link strong { font-size: 15px; font-weight: 600; color: #46675d; }
.central-data-link ul { display: flex; flex-wrap: wrap; gap: 0; padding: 0; margin: 0; list-style: none; }
.central-data-link li { font-size: 14px; line-height: 1.8; color: #5c6f69; padding-inline: 15px; border-left: 1px solid #dde8e2; }
.central-trace { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 30px; padding: 34px; margin-top: 25px; border-radius: 24px; background: #f3f0fb; }
.central-trace > div { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 15px; }
.central-trace .feature-icon { grid-row: span 2; background: #ffffffb3; }
.central-trace h3 { font-size: 22px; line-height: 1.5; }
.central-trace p { margin-top: 6px; font-size: 14px; line-height: 1.9; color: #6d657d; }
.central-trace ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 0; padding: 0; }
.central-trace li { display: flex; align-items: center; gap: 9px; border-radius: 12px; padding: 12px 15px; background: #ffffffba; font-size: 14px; color: #5d576e; }
.central-trace li span { font-size: 12px; color: #877998; }
.central-coverage { margin-top: 76px; }
.central-coverage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; margin-top: 28px; }
.central-coverage-grid article { padding: 25px; border: 1px solid #e6edf7; border-radius: 22px; background: #f7faff; }
.central-coverage-grid article:nth-child(2) { background: #fff9f2; border-color: #f5e9db; }
.central-coverage-grid article:nth-child(3) { background: #f2faf6; border-color: #e2efe7; }
.central-coverage-grid .feature-icon { margin-bottom: 17px; }
.central-coverage-grid h4 { font-size: 20px; }
.central-coverage-grid p { font-size: 14px; line-height: 1.85; margin-top: 7px; color: var(--muted); }
.central-delivery { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 11px; padding-top: 28px; }
.central-delivery > svg { color: #538573; }
.central-delivery strong { font-size: 16px; font-weight: 500; }
.central-delivery strong span { color: #8b9991; padding-inline: 9px; font-size: 13px; }
.central-delivery p { margin-left: 10px; color: #6c7c74; font-size: 14px; line-height: 1.8; }
@keyframes central-breathe { 0%, 100% { box-shadow: 0 0 0 0 #88bcad00; } 50% { box-shadow: 0 0 0 6px #88bcad18; } }
@media (max-width: 1100px) {
 .central-section .environment-grid { gap: 30px; }
 .central-visual { padding: 9px 9px 0; border-radius: 24px; }
 .central-intro h3 { font-size: 33px; }
 .central-lead { font-size: 15px; }
 .central-service-points { gap: 17px; margin-block: 22px 17px; }
 .central-service-points li { gap: 12px; }
 .central-service-points h4 { font-size: 17px; }
 .central-scene-caption { min-height: 130px; padding-inline: 6px; }
 .central-flow { padding-inline: 25px; }
 .central-flow ol { gap: 18px; }
 .central-role { padding: 25px 23px; }
 .central-trace { grid-template-columns: 1fr 1fr; padding: 27px; }
 .central-coverage-grid { gap: 17px; }
}
@media (max-width: 800px) {
 .central-section .environment-grid { grid-template-columns: 1fr; gap: 32px; }
 .central-intro h3 br { display: none; }
 .central-scene-caption { min-height: 104px; }
 .central-service-points { grid-template-columns: 1fr; }
 .central-flow-heading { align-items: flex-start; }
 .central-flow ol { grid-template-columns: 1fr; gap: 0; }
 .central-flow li { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 0 17px; padding-bottom: 25px; }
 .central-flow li:last-child { padding-bottom: 0; }
 .central-step-number { grid-row: span 2; margin-bottom: 0; }
 .central-flow li:not(:last-child)::after { width: 1px; height: auto; left: 17px; right: auto; top: 43px; bottom: 8px; background: #c9dfd4; }
 .central-flow li p { margin-top: 2px; }
 .central-systems { margin-top: 54px; }
 .central-system-grid { gap: 16px; }
 .central-role { padding: 23px 18px; }
 .central-role-heading { gap: 9px; }
 .central-role-heading h4 { font-size: 18px; }
 .central-rx-label { flex-wrap: wrap; font-size: 13px; padding: 8px 5px; }
 .central-duty-grid { gap: 8px; }
 .central-duty-grid li { padding-block: 15px; }
 .central-trace { grid-template-columns: 1fr; gap: 23px; }
 .central-trace ol { justify-content: flex-start; }
 .central-coverage { margin-top: 53px; }
 .central-coverage-grid { gap: 12px; }
 .central-coverage-grid article { padding: 20px 17px; }
 .central-delivery p { margin-left: 0; }
}
@media (max-width: 520px) {
 .central-section .section-heading h2 { font-size: 28px; line-height: 1.5; }
 .central-visual { padding: 6px 6px 0; border-radius: 22px; }
 .central-visual .photo-shell { padding: 5px; }
 .central-scene-caption { min-height: 146px; padding: 17px 7px; gap: 9px; }
 .central-scene-caption strong { font-size: 16px; }
 .central-scene-mark { width: 30px; height: 30px; border-radius: 10px; }
 .central-scene-mark svg { width: 19px; height: 19px; }
 .central-intro h3 { font-size: 30px; }
 .central-lead .desktop-break { display: none; }
 .central-visual .rotation-controls { gap: 6px; padding-inline: 7px; }
 .central-flow { margin-top: 31px; padding: 23px; }
 .central-flow-heading { flex-direction: column; gap: 7px; }
 .central-flow-heading h3 { font-size: 20px; }
 .central-subheading h3 { font-size: 25px; }
 .central-system-grid { grid-template-columns: 1fr; }
 .central-role { border-radius: 22px; padding: 23px 20px; }
 .central-role-heading h4 { font-size: 20px; }
 .central-rx-label { justify-content: flex-start; }
 .central-data-link { justify-content: flex-start; gap: 10px; padding: 15px; }
 .central-data-link ul { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; }
 .central-data-link li { padding-inline: 10px; }
 .central-trace { padding: 24px 20px; gap: 21px; }
 .central-trace > div { column-gap: 12px; }
 .central-trace h3 { font-size: 20px; }
 .central-trace ol { gap: 8px; }
 .central-trace li { padding: 10px 12px; gap: 7px; }
 .central-coverage-grid { grid-template-columns: 1fr; gap: 12px; }
 .central-coverage-grid article { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 15px; padding: 22px; }
 .central-coverage-grid .feature-icon { grid-row: span 2; margin: 0; }
 .central-coverage-grid h4 { font-size: 19px; }
 .central-coverage-grid p { margin-top: 3px; }
 .central-delivery { gap: 9px; }
 .central-delivery p { text-align: center; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { animation: none !important; transition: none !important; }
 .reveal { opacity: 1 !important; transform: none !important; }
 .device-stage { transform: none !important; }
}