:root { --ink: #24262b; --muted: #686a72; --accent: #c42032; --paper: #f7f7f8; --line: #e5e5e8; --ease: .25s cubic-bezier(.2,.65,.3,1); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 74px; }
body { margin: 0; color: var(--ink); background: #fff; font: 15px/1.8 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
h1,h2,h3,p,dl,dd { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a,button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.container { width: min(100%,1200px); margin: 0 auto; padding: 0 24px; }
.skip-link { position: fixed; left: 20px; top: -80px; padding: 12px 20px; background: #fff; color: var(--accent); z-index: 200; }
.skip-link:focus { top: 12px; }
.header { position: fixed; top: 0; inset-inline: 0; z-index: 100; background: #24262b; border-top: 0; border-bottom: 1px solid #f2c4ca15; color: #f6f6f6; }
.header.scrolled { box-shadow: 0 5px 22px #0c0c0d22; }
.header { transition: box-shadow .25s ease; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 73px; }
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo img { width: 100px; height: 36px; object-fit: cover; filter: grayscale(1) invert(1) brightness(1.7); mix-blend-mode: lighten; }
.logo-name { font-size: 17px; font-weight: 700; padding-left: 12px; border-left: 1px solid #e0e0e125; white-space: nowrap; }
.nav { display: flex; gap: 26px; align-items: center; }
.nav-link { position: relative; padding: 10px 0; font-size: 13px; color: #b9b9bc; transition: color var(--ease); white-space: nowrap; }
.nav-link::after { content: ''; position: absolute; bottom: 2px; height: 2px; width: 100%; left: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--ease); }
.nav-link.active { color: #f8f8f8; }
.nav-link.active::after { transform: scaleX(1); }
.menu-toggle { display: none; border: 0; background: transparent; width: 42px; height: 42px; padding: 10px; cursor: pointer; }
.menu-toggle span { display: block; background: #f6f6f6; height: 2px; margin: 5px 0; transition: transform var(--ease),opacity var(--ease); }
.menu-toggle.active span:first-child { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:last-child { transform: translateY(-7px) rotate(-45deg); }
.section-tag { display: block; color: var(--accent); font-size: 11px; letter-spacing: 2px; font-weight: 600; margin-bottom: 18px; }
.hero { position: relative; margin-top: 74px; background: #24262b; overflow: hidden; color: #f8f8f9; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 78% 38%,#a8263566,transparent 48%),radial-gradient(ellipse at 10% 0%,#821e292b,transparent 45%); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .17; background-image: radial-gradient(#d29fa5 1px,transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(90deg,transparent,black 65%,transparent); }
.hero-atmosphere { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.hero-atmosphere span { position: absolute; width: 740px; height: 140px; right: -90px; top: 20px; border-radius: 50%; filter: blur(70px); background: #d64a5a40; transform: rotate(-25deg); animation: atmosphere 15s ease-in-out infinite alternate; }
.hero-atmosphere span:nth-child(2) { top: 220px; right: -70px; background: #b6293a2d; animation-delay: -5s; }
.hero-atmosphere span:nth-child(3) { top: 390px; right: 40px; background: #d4435432; animation-delay: -9s; }
.hero.visual-paused .hero-atmosphere span,.hero.visual-paused .orbit-card { animation-play-state: paused; }
@keyframes atmosphere { to { transform: translate(-50px,40px) rotate(-15deg) scale(1.12); opacity: .6; } }
.hero-content { position: relative; display: grid; grid-template-columns: 1.04fr 1fr; gap: 28px; align-items: center; padding-top: 58px; padding-bottom: 40px; min-height: 610px; }
.hero-copy { z-index: 2; padding-bottom: 6px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #d8a9ae; font-size: 11px; letter-spacing: 1.2px; margin-bottom: 26px; }
.hero-eyebrow > span { width: 6px; height: 6px; background: #e89aa3; border-radius: 50%; box-shadow: 0 0 10px #e58b9680; }
.hero-eyebrow i { height: 11px; width: 1px; background: #49494d; margin: 0 2px; }
.hero h1 { font-size: clamp(40px,4.8vw,62px); line-height: 1.22; font-weight: 700; letter-spacing: -2px; }
.hero h1 span { display: inline-block; color: #eba7af; background: linear-gradient(110deg,#e2e2e4 3%,#e99ca5 58%,#f2c4ca 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-subtitle { max-width: 435px; margin-top: 26px; color: #b4b4b8; font-size: 15px; line-height: 1.95; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 28px; font-size: 13px; font-weight: 600; padding: 12px 23px; border: 1px solid transparent; border-radius: 7px; transition: background var(--ease),color var(--ease),border-color var(--ease),box-shadow var(--ease); }
.hero-btn.primary { background: #c42032; color: #fff; box-shadow: 0 3px 12px #d02f4222; }
.hero-btn.outline { border-color: #d7d7d8; background: transparent; }
.hero .hero-btn.primary { background: linear-gradient(120deg,#c42032,#aa2636); box-shadow: 0 3px 22px #d02f423b,inset 0 1px #ffffff28; }
.hero .hero-btn.outline { border-color: #ffffff26; background: #ffffff04; color: #f1f1f1; }
.hero-proof { display: flex; gap: 36px; margin-top: 38px; }
.hero-proof > span { display: flex; flex-direction: column; color: #a3a3a8; font-size: 10px; letter-spacing: .4px; }
.hero-proof strong { font-size: 24px; font-weight: 550; color: #f6f6f7; letter-spacing: -.6px; margin-bottom: 4px; line-height: 1.3; }
.hero-proof strong span { color: #eaa3ab; font-size: 16px; margin-left: 4px; }
.hero-visual { position: relative; width: 100%; min-width: 0; aspect-ratio: 1.03; }
.hero-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.orbit-halo { position: absolute; width: 69%; height: 69%; left: 15.5%; top: 15%; border-radius: 50%; background: radial-gradient(circle,#8a283313 20%,#d956660a 65%,transparent 75%); border: 1px solid #e99da60d; box-shadow: 0 0 90px #da5c6b0b; }
.sphere-core { position: absolute; top: 49%; left: 50%; transform: translate(-50%,-50%); width: 250px; padding: 28px 12px; text-align: center; background: radial-gradient(ellipse,#2b2b2edd 15%,#2b2b2e80 55%,transparent 72%); }
.core-kicker { display: block; color: #d2a1a7; font-size: 7px; letter-spacing: 1.6px; }
.sphere-core strong { display: block; color: #fff; font-size: 23px; font-weight: 650; letter-spacing: .2px; margin: 12px 0; }
.sphere-core strong span { font-weight: 350; color: #eba6ae; }
.core-caption { display: block; color: #d8939b; font-size: 10px; letter-spacing: 2px; }
.orbit-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid #edaeb62b; border-radius: 10px; color: #f2f2f3; background: linear-gradient(125deg,#29292beb,#1e1e20e8); backdrop-filter: blur(16px); box-shadow: 0 12px 36px #0c0c0c35,inset 0 1px #ffffff07; animation: module-float 8s ease-in-out infinite alternate; }
.orbit-card strong { display: block; font-size: 12px; font-weight: 500; white-space: nowrap; }
.orbit-card div > span { display: block; color: #a2a2a6; font-size: 9px; white-space: nowrap; margin-top: 3px; }
.orbit-card > i { width: 4px; height: 4px; border-radius: 50%; background: #e899a2; margin-left: 4px; }
.orbit-icon { width: 30px; height: 32px; display: grid; place-items: center; border-radius: 6px; color: #edafb6; background: #b5445126; border: 1px solid #e7949e1c; }
.orbit-icon svg { width: 18px; height: 18px; }
.orbit-erp { left: 2%; top: 12%; }
.orbit-bi { right: -2%; top: 25%; animation-delay: -3s; }
.orbit-oms { left: -4%; bottom: 20%; animation-delay: -6s; }
.orbit-crm { right: 3%; bottom: 6%; animation-delay: -2s; }
.orbit-bi .orbit-icon { color: #efb6bd; background: #d851611c; border-color: #e898a220; }
.orbit-oms .orbit-icon { color: #e58a95; background: #bd2b3c1c; border-color: #e3818d20; }
.sphere-caption { display: flex; align-items: center; justify-content: center; gap: 8px; position: absolute; width: 100%; bottom: -17px; color: #8d8d92; font-size: 9px; letter-spacing: 1px; }
.sphere-caption i { width: 4px; height: 4px; background: #77777d; border-radius: 50%; }
@keyframes module-float { to { transform: translateY(-8px); } }
.hero-bottom { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 22px; padding-bottom: 24px; border-top: 1px solid #f0bcc217; font-size: 11px; color: #96969c; }
.hero-bottom > div { display: flex; align-items: center; gap: 24px; }
.hero-bottom i { width: 3px; height: 3px; border-radius: 50%; background: #606064; }
.hero-bottom a { display: flex; gap: 24px; color: #d4a1a7; }

.section { padding: 88px 0; }
.section-header h2 { font-size: clamp(26px,2.7vw,34px); font-weight: 650; line-height: 1.5; letter-spacing: -.5px; }
.section-desc { margin-top: 16px; font-size: 14px; color: var(--muted); }
.section-header-center { text-align: center; }
.text-link { display: inline-flex; align-items: center; gap: 24px; font-size: 13px; font-weight: 600; color: var(--accent); padding: 6px 0; }
.products { padding: 72px 0; }
.products .container { max-width: 1008px; }
.products .section-header { margin-bottom: 28px; }
.products .section-header h2 { font-size: 28px; }
.products .section-tag { margin-bottom: 10px; }
.products .section-desc { margin-top: 8px; font-size: 13px; }
.product-overview { display: grid; grid-template-columns: 1fr 1.4fr; align-items: center; gap: 32px; padding: 32px; border: 1px solid #e6e6e7; border-radius: 12px; overflow: hidden; margin-bottom: 22px; background: radial-gradient(ellipse at 100% 0%,#eeeeef88,transparent 60%),linear-gradient(115deg,#fcfcfd,#f7f7f8); transition: transform var(--ease),box-shadow var(--ease),border-color var(--ease); }
.overview-eyebrow { display: block; color: #7a7a80; font-size: 10px; font-weight: 500; letter-spacing: 1.6px; margin-bottom: 18px; }
.overview-copy h3 { font-size: 28px; font-weight: 650; line-height: 1.5; letter-spacing: -.6px; color: #3c3c3f; }
.overview-copy > p { font-size: 13px; color: #75757c; margin-top: 14px; line-height: 1.85; }
.overview-principles { display: flex; flex-wrap: wrap; gap: 8px 15px; margin-top: 25px; color: #8c424b; font-size: 10px; }
.overview-principles span { display: inline-flex; align-items: center; gap: 6px; }
.overview-principles span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #d76572; }
.platform-map { min-width: 0; }
.map-caption { text-align: center; color: #7d7d84; font-size: 10px; letter-spacing: 2px; margin-bottom: 12px; }
.platform-scenes { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.platform-scenes > span { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 10px; color: #66666b; }
.platform-scenes svg { width: 22px; height: 22px; color: #bd4755; }
.map-connector { display: block; width: 100%; height: 26px; overflow: visible; }
.map-connector path { stroke: #eeb3ba; stroke-width: 1; vector-effect: non-scaling-stroke; }
.map-connector circle { fill: #d86f7b; }
.platform-core { display: flex; align-items: center; gap: 13px; padding: 15px 18px; border-radius: 8px; color: #fff; background: linear-gradient(110deg,#841e2a,#c02b3d); box-shadow: 0 5px 16px #a6263516; }
.platform-mark { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; color: #f7f7f7; background: #ffffff12; border: 1px solid #ffffff24; border-radius: 8px; font-size: 10px; font-weight: 700; letter-spacing: .3px; }
.platform-core strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.5; }
.platform-core div > span { display: block; font-size: 10px; color: #e8e8ea; margin-top: 3px; letter-spacing: .4px; }
.core-description { margin-left: auto; padding-left: 14px; border-left: 1px solid #ffffff28; font-size: 9px; color: #eaeaeb; white-space: nowrap; line-height: 1.9; }
.platform-capabilities { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.platform-capabilities > div { border: 1px solid #e6e6e8; border-radius: 7px; background: #ffffffc9; text-align: center; padding: 10px 5px; }
.platform-capabilities strong { display: block; color: #872b36; font-size: 12px; font-weight: 550; }
.platform-capabilities span { display: block; color: #7e7e84; font-size: 9px; margin-top: 3px; }
@media (max-width:900px) {
    .product-overview { grid-template-columns: 1fr 1.5fr; padding: 26px; gap: 24px; }
    .overview-copy h3 { font-size: 25px; }
    .platform-core { padding: 14px; gap: 10px; }
    .core-description { display: none; }
}
@media (max-width:640px) {
    .product-overview { grid-template-columns: 1fr; gap: 28px; padding: 24px 20px; }
    .overview-copy h3 { font-size: 26px; }
    .overview-eyebrow { margin-bottom: 12px; }
    .overview-copy > p { margin-top: 12px; }
    .overview-principles { margin-top: 16px; }
    .platform-map { border-top: 1px solid #e8e8e9; padding-top: 22px; }
    .platform-scenes { gap: 4px; }
    .platform-scenes > span { font-size: 9px; }
    .platform-core strong { font-size: 16px; }
    .platform-core div > span { font-size: 9px; }
}
.product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.product-card { display: flex; flex-direction: column; border: 1px solid #e7e7e5; border-radius: 10px; overflow: hidden; transition: transform var(--ease),box-shadow var(--ease),border-color var(--ease); }
.product-card { position: relative; }
.product-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(220px circle at var(--spotlight-x,50%) var(--spotlight-y,0%),#d5475710,transparent 75%); transition: opacity .3s ease; }
.product-card.has-spotlight::after { opacity: 1; }
.product-img { aspect-ratio: 1242/699; overflow: hidden; background: #f6f6f6; }
.product-img img { width: 100%; height: 100%; object-fit: contain; }
.product-body { padding: 16px 18px 18px; }
.product-body h3 { font-size: 17px; font-weight: 650; margin-bottom: 8px; }
.product-body p { font-size: 13px; color: var(--muted); line-height: 1.75; }
.product-body .product-capabilities { font-size: 11.5px; color: #77777e; line-height: 1.8; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #ededea; }
.products-contact { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 28px; }
.products-contact p { font-size: 13px; color: var(--muted); }
.about { background: var(--paper); }
.about-layout { display: grid; grid-template-columns: 1fr 1.65fr; gap: 72px; }
.about .text-link { margin-top: 22px; }
.about-story > p { color: var(--muted); font-size: 14px; line-height: 2; }
.about-story .about-intro { font-size: 18px; color: var(--ink); line-height: 1.85; margin-bottom: 22px; }
.about-facts { display: grid; grid-template-columns: 1.2fr .8fr 1.2fr; gap: 28px; align-items: end; margin-top: 38px; padding-top: 28px; border-top: 1px solid #e6e6e8; }
.about-facts strong { display: block; font-size: 40px; font-weight: 650; letter-spacing: -1.5px; line-height: 1.2; }
.about-facts strong span { font-size: 23px; margin-left: 3px; color: var(--accent); }
.about-facts p { color: var(--muted); font-size: 11px; margin-top: 10px; }
.about-principle p { line-height: 2.2; font-size: 12px; }
.features-layout { display: grid; grid-template-columns: 1fr 1.65fr; gap: 72px; }
.feature-row { display: flex; gap: 28px; padding: 25px 0; border-top: 1px solid var(--line); }
.feature-row:last-child { border-bottom: 1px solid var(--line); }
.row-number { font-size: 12px; color: #a6a8a6; padding-top: 4px; }
.feature-row h3 { font-size: 19px; font-weight: 600; margin-bottom: 9px; }
.feature-row p { font-size: 14px; color: var(--muted); }
.feature-note { display: block; margin-top: 12px; color: #86868b; font-size: 11px; }
.customers { background: #fbfbfc; padding-top: 64px; padding-bottom: 64px; }
.client-stage { position: relative; isolation: isolate; overflow: hidden; width: min(calc(100% - 48px),1152px); padding: 42px; border: 1px solid #48484c; border-radius: 20px; background: radial-gradient(ellipse at 90% 0%,#b72a3a66,transparent 56%),radial-gradient(ellipse at 0% 100%,#4a4a4d45,transparent 55%),#24262b; box-shadow: 0 18px 48px #3e3e4112; }
.client-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: .18; background-image: radial-gradient(#e69aa3 1px,transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(110deg,transparent 25%,#000 100%); }
.client-stage::after { content: ''; position: absolute; width: 560px; height: 210px; right: -130px; top: -140px; border: 1px solid #e3869124; border-radius: 50%; box-shadow: 0 0 0 38px #e3869107,0 0 0 76px #e3869105; transform: rotate(-15deg); pointer-events: none; z-index: -1; }
.client-stage .section-tag { color: #eaa5ad; display: flex; align-items: center; gap: 10px; }
.client-stage .section-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #eba5ad; box-shadow: 0 0 12px #e48a9480; }
.client-stage h2 { color: #eaeaeb; background: linear-gradient(110deg,#f6f6f6,#edadb5); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: clamp(26px,2.7vw,32px); }
.customer-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 32px; }
.customer-heading .section-desc { margin: 0; flex-shrink: 0; font-size: 12px; line-height: 1.9; color: #d8acb1; border-left: 1px solid #df717e45; padding-left: 18px; }
.client-window { overflow: hidden; pointer-events: none; user-select: none; padding: 12px 0; scrollbar-width: none; mask-image: linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent); -webkit-mask-image: linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent); }
.client-window::-webkit-scrollbar { display: none; }
.client-track { display: block; width: 100%; }
.client-group { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 16px; }
.client-logo-card { width: 100%; height: 112px; display: flex; align-items: center; justify-content: center; padding: 18px 24px; border: 1px solid #fff; border-radius: 12px; background: linear-gradient(160deg,#fff,#f7f7f9); box-shadow: 0 6px 18px #090a0f18; }
.client-logo { width: 100%; display: flex; align-items: center; justify-content: center; }
.client-logo svg { display: block; width: 160px; max-width: 100%; height: 66px; overflow: hidden; }
.client-logo img { display: block; width: 180px; max-width: 100%; height: 72px; object-fit: contain; }
.client-clone[hidden] { display: none; }
.client-marquee.is-animated .client-track { display: flex; width: max-content; animation: client-drift var(--client-duration,85s) linear infinite; animation-delay: var(--client-delay,0s); will-change: transform; }
.client-marquee.is-animated .client-group { display: flex; flex: none; padding-right: 16px; }
.client-marquee.is-animated .client-logo-card { flex: none; width: 228px; }
.client-marquee.is-idle .client-track { animation-play-state: paused; }
@keyframes client-drift { to { transform: translateX(-50%); } }
.client-footer { margin-top: 22px; padding-top: 20px; border-top: 1px solid #ffffff12; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.client-signature { display: inline-flex; align-items: center; gap: 10px; color: #a5a5ae; font-size: 10px; letter-spacing: .08em; }
.client-signature > span { width: 5px; height: 5px; border-radius: 50%; background: #d76877; box-shadow: 0 0 10px #cf586455; }
.client-signature i { color: #575862; font-style: normal; }
.service { position: relative; overflow: hidden; background: radial-gradient(ellipse at 90% 0%,#891f2b55,transparent 58%),#26272b; color: #f8f8f9; }
.service .section-tag { color: #eaa4ac; }
.service .section-desc { color: #bcbcc0; max-width: 480px; }
.service-heading { max-width: 650px; }
.service-steps { list-style: none; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px; padding: 0; margin: 42px 0 0; }
.service-steps li { border-top: 1px solid #ffffff30; padding-top: 22px; }
.step-number { font-size: 12px; color: #b7b7ba; }
.service-steps h3 { font-size: 18px; font-weight: 600; margin: 16px 0 10px; }
.service-steps p { color: #bcbcc0; font-size: 13px; }
.contact { background: radial-gradient(ellipse at 0% 50%,#f3f3f455,transparent 70%),#fbfbfb; }
.contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 100px; }
.contact h2 { font-size: clamp(29px,3vw,38px); line-height: 1.5; font-weight: 650; }
.contact-layout > div > p { color: var(--muted); font-size: 14px; margin-top: 22px; }
.contact-phone { border-bottom: 1px solid #e6e6e8; padding-bottom: 24px; }
.contact-phone > span:not(.phone-number) { display: block; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.contact-phone .phone-number { font-size: clamp(24px,3vw,36px); font-weight: 600; letter-spacing: -1px; white-space: nowrap; }
.contact-details dl { padding-top: 22px; }
.contact-details dl > div { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 10px 0; font-size: 13px; }
.contact-details dt { color: #76767d; }
.footer { background: #202125; color: #c6c6c9; }
.footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1.4fr auto; gap: 40px; padding-top: 52px; padding-bottom: 40px; }
.footer-main.footer-main--compact { grid-template-columns: 1.6fr 1fr auto; gap: 64px; padding-top: 44px; padding-bottom: 36px; }
.footer-main--compact .footer-qrcode { justify-self: end; }
.footer-wordmark { display: flex; gap: 16px; align-items: center; color: #fff; font-size: 27px; line-height: 1.2; font-weight: 750; letter-spacing: 1px; }
.footer-wordmark span { font-size: 15px; font-weight: 500; letter-spacing: 1px; border-left: 1px solid #ffffff40; padding-left: 16px; }
.footer-brand p { margin-top: 20px; font-size: 12px; line-height: 1.9; }
.footer h2 { color: #efeff0; font-size: 12px; font-weight: 500; margin-bottom: 16px; }
.footer-links a { display: block; font-size: 12px; padding: 4px 0; }
.footer-contact .phone-number { font-size: 18px; color: #fff; }
.footer-contact p { font-size: 12px; margin-top: 13px; }
.footer-qrcode img { width: 100px; height: 100px; border: 6px solid #fff; }
.footer-qrcode p { font-size: 11px; margin-top: 9px; text-align: center; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 20px; padding-bottom: 24px; border-top: 1px solid #ffffff1c; font-size: 11px; color: #b8b8bc; }
.footer-beian { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-beian a { display: inline-flex; align-items: center; gap: 6px; }
.footer-beian img { width: 14px; height: auto; }
.back-to-top { position: fixed; right: 24px; bottom: 24px; width: 38px; height: 38px; border: 1px solid #deded8; background: #fff; color: var(--ink); border-radius: 3px; font-size: 19px; opacity: 0; visibility: hidden; transition: opacity var(--ease),background var(--ease); cursor: pointer; z-index: 90; }
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px #39393c18; }
.back-to-top::before { content: ''; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: conic-gradient(#c42032 var(--reading-progress,0deg),#e7e7e8 0); mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
.company-page { margin-top: 74px; }
.company-heading { padding: 40px 0 60px; color: #f6f6f7; background: radial-gradient(ellipse at 85% 40%,#8d202d66,transparent 65%),#24262b; }
.company-back { display: inline-block; color: #b7b7ba; font-size: 12px; margin-bottom: 32px; }
.company-heading h1 { font-size: clamp(34px,4vw,52px); line-height: 1.4; font-weight: 650; }
.company-heading h1 span { color: #edaeb6; }
.company-heading .section-tag { color: #e899a2; }
.company-heading p { color: #b7b7ba; margin-top: 20px; font-size: 14px; }
.company-article { display: grid; grid-template-columns: 240px 1fr; gap: 80px; padding-top: 64px; padding-bottom: 80px; }
.company-aside { align-self: start; position: sticky; top: 110px; }
.company-aside h2 { font-size: 19px; font-weight: 600; }
.company-aside p { color: var(--muted); font-size: 13px; margin: 16px 0 24px; }
.company-copy section { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.company-copy .section-tag { margin-bottom: 8px; }
.company-copy h2 { font-size: 22px; font-weight: 600; margin-bottom: 16px; }
.company-copy p { color: var(--muted); font-size: 15px; line-height: 2; }
.error-page { min-height: 100svh; background: var(--paper); display: flex; flex-direction: column; justify-content: space-between; padding: 36px max(24px,calc((100vw - 1056px)/2)); }
.error-brand { font-weight: 700; font-size: 18px; }
.error-page h1 { font-size: clamp(27px,4vw,46px); line-height: 1.5; font-weight: 650; }
.error-page p { color: var(--muted); margin: 16px 0 28px; }
.error-page .section-tag { font-size: 16px; }
.error-footer { font-size: 12px; }
@media (hover:hover) and (pointer:fine) {
    .nav-link:hover { color: #fff; }
    .hero-btn.primary:hover { background: #a12433; box-shadow: 0 6px 24px #d02f422e; }
    .hero .hero-btn.primary:hover { background: linear-gradient(120deg,#d64d5d,#c52d3f); }
    .hero .hero-btn.outline:hover { color: #f8f8f8; border-color: #d07882; background: #ffffff08; }
    .hero-btn.outline:hover { border-color: var(--accent); color: var(--accent); }
    .text-link:hover { color: #c63142; }
    .product-card:hover,.product-overview:hover { transform: translateY(-3px); border-color: #f3c9ce; box-shadow: 0 8px 24px #ae535e16; }
    .footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width:1024px) {
    .nav { gap: 18px; }
    .logo img { width: 88px; }
    .about-layout,.features-layout { gap: 44px; }
    .about-facts { grid-template-columns: 1fr 1fr; }
    .about-principle { grid-column: 1/-1; }
    .contact-layout { gap: 48px; }
    .footer-main { gap: 24px; }
    .footer-bottom { flex-direction: column; gap: 12px; }
    .company-article { grid-template-columns: 200px 1fr; gap: 48px; }
}
@media (max-width:768px) {
    .header-inner { height: 65px; }
    .menu-toggle { display: block; }
    .nav { display: none; position: absolute; top: 100%; inset-inline: 0; padding: 14px 24px 20px; background: #212123; border-bottom: 1px solid #ecabb325; flex-direction: column; align-items: stretch; gap: 0; }
    .nav.open { display: flex; }
    .nav-link { padding: 12px 0; }
    .nav-link::after { display: none; }
    .hero,.company-page { margin-top: 66px; }
    .section { padding: 56px 0; }
    .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
    .about-layout,.features-layout,.contact-layout { grid-template-columns: 1fr; gap: 30px; }
    .about .text-link { margin-top: 18px; }
    .about-story .about-intro { font-size: 17px; }
    .about-facts { margin-top: 26px; }
    .about-principle { grid-column: auto; }
    .about-facts { grid-template-columns: 1fr 1fr; }
    .customer-heading { flex-direction: column; align-items: flex-start; gap: 18px; }
    .service-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px; }
    .contact h2 { font-size: 32px; }
    .contact-phone .phone-number { font-size: 30px; }
    .footer-main { grid-template-columns: 1fr 1fr; gap: 30px; padding-top: 40px; padding-bottom: 32px; }
    .footer-brand { grid-column: 1/-1; }
    .footer-qrcode { justify-self: start; }
    .company-article { grid-template-columns: 1fr; gap: 36px; padding-top: 40px; padding-bottom: 56px; }
    .company-aside { position: static; border-bottom: 1px solid var(--line); padding-bottom: 26px; }
}
@media (max-width:480px) {
    .container { padding-left: 20px; padding-right: 20px; }
    .product-grid { grid-template-columns: 1fr; }
    .products .section-header h2 { font-size: 26px; }
    .products-contact { flex-direction: column; align-items: flex-start; gap: 10px; }
    .about-facts strong { font-size: 36px; }
    .about-principle { grid-column: 1/-1; }
    .feature-row { gap: 20px; }
    .feature-row h3 { font-size: 18px; }
    .client-logo svg { height: 56px; }
    .client-logo img { height: 62px; }
    .service-steps { gap: 24px; }
    .service-steps h3 { font-size: 17px; }
    .service-steps p { font-size: 12px; }
    .contact-details dl > div { grid-template-columns: 44px 1fr; gap: 16px; }
    .contact-phone .phone-number { font-size: 29px; }
    .footer-main { column-gap: 24px; }
    .footer-contact p { font-size: 11px; }
    .footer-beian { flex-direction: column; gap: 8px; }
    .back-to-top { right: 16px; bottom: 16px; }
}
@media (max-width:360px) {
    .logo img { width: 80px; }
    .logo-name { font-size: 15px; }
    .contact-phone .phone-number { font-size: 25px; }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior: auto; }
    *,*::before,*::after { transition: none !important; animation: none !important; }
    .product-card:hover,.product-overview:hover { transform: none; }
}
@media (max-width:1024px) {
    .hero-content { grid-template-columns: 1fr 1fr; gap: 14px; min-height: 560px; padding-top: 46px; padding-bottom: 46px; }
    .hero h1 { font-size: 49px; }
    .hero-eyebrow { font-size: 9px; letter-spacing: .6px; }
    .hero-subtitle { font-size: 14px; }
    .orbit-card { padding: 10px 12px; gap: 8px; }
    .orbit-card strong { font-size: 11px; }
    .orbit-card div > span { font-size: 8px; }
    .orbit-icon { width: 26px; height: 28px; }
}
@media (max-width:768px) {
    .hero-content { grid-template-columns: 1fr; gap: 24px; padding-top: 44px; padding-bottom: 44px; min-height: auto; }
    .hero-copy { max-width: 540px; }
    .hero h1 { font-size: clamp(39px,7vw,52px); }
    .hero-eyebrow { margin-bottom: 22px; font-size: 10px; }
    .hero-subtitle { max-width: 440px; margin-top: 20px; }
    .hero-actions { margin-top: 26px; }
    .hero-proof { margin-top: 28px; }
    .hero-visual { width: min(100%,500px); justify-self: center; margin-top: 2px; }
    .hero-bottom > div { gap: 14px; }
    .hero-bottom > a { font-size: 10px; gap: 10px; }
}
@media (max-width:480px) {
    .hero-content { gap: 12px; padding-top: 38px; padding-bottom: 35px; }
    .hero h1 { font-size: 42px; letter-spacing: -1px; }
    .hero-eyebrow { font-size: 9px; gap: 7px; }
    .hero-subtitle { font-size: 13px; }
    .hero .hero-btn { padding: 11px 20px; gap: 22px; }
    .hero-proof { gap: 32px; }
    .hero-proof strong { font-size: 22px; }
    .hero-visual { aspect-ratio: 1.04; margin-top: 4px; }
    .sphere-core { width: 200px; }
    .sphere-core strong { font-size: 18px; margin: 8px 0; }
    .core-kicker { font-size: 6px; letter-spacing: .8px; }
    .core-caption { font-size: 8px; letter-spacing: 1px; }
    .orbit-card { padding: 9px; gap: 7px; border-radius: 8px; }
    .orbit-card strong { font-size: 10px; }
    .orbit-card div > span { font-size: 7px; }
    .orbit-card > i { display: none; }
    .orbit-erp { left: 0; top: 12%; }
    .orbit-bi { right: 0; top: 28%; }
    .orbit-oms { left: -1%; bottom: 18%; }
    .orbit-crm { right: 0; bottom: 3%; }
    .hero-bottom { font-size: 9px; gap: 12px; padding-top: 18px; padding-bottom: 20px; }
    .hero-bottom > div { gap: 8px; }
    .hero-bottom > a { font-size: 0; gap: 0; }
    .hero-bottom > a span { font-size: 14px; }
}
@media (max-width:360px) {
    .hero h1 { font-size: 38px; }
    .hero-eyebrow { letter-spacing: .2px; }
    .orbit-icon { width: 23px; height: 25px; }
    .orbit-card { padding: 7px; gap: 5px; }
    .orbit-card strong { font-size: 9px; }
}
@media (prefers-reduced-motion:reduce) {
    .hero-atmosphere span,.orbit-card { animation: none; }
}

/* One-time entrance motion; only armed below the viewport by motion.js. */
.will-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease var(--reveal-delay,0ms),transform .55s cubic-bezier(.2,.65,.3,1) var(--reveal-delay,0ms); }
.will-reveal.is-revealed { opacity: 1; transform: none; }
.hero-btn > span[aria-hidden],.text-link > span[aria-hidden] { display: inline-block; transition: transform .2s ease; }
.hero-btn:active { transform: translateY(1px); }
.feature-row { position: relative; }
.feature-row::before { content: ''; position: absolute; top: 0; left: 0; height: 1px; width: 46px; background: #c42032; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
@media (hover:hover) and (pointer:fine) {
    .hero-btn:hover > span[aria-hidden],.text-link:hover > span[aria-hidden] { transform: translate(3px,-2px); }
    .product-card.will-reveal.is-revealed:hover { transform: translateY(-3px); }
    .feature-row:hover::before { transform: scaleX(1); }
    .back-to-top:hover { background: #f6f6f6; }
}
@media (min-width:1025px) {
    .features-layout > .section-header { align-self: start; position: sticky; top: 115px; }
}
@media (max-width:768px) {
    .nav.open { animation: menu-enter .22s ease both; }
    @keyframes menu-enter { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion:reduce) {
    .will-reveal { opacity: 1; transform: none; }
    .product-card.will-reveal.is-revealed:hover { transform: none; }
    .client-marquee .client-track { animation: none !important; transform: none !important; }
    .client-marquee .client-clone { display: none; }
    .client-marquee .client-track { display: block; width: 100%; }
    .client-marquee .client-group { display: grid; padding-right: 0; }
    .client-marquee .client-logo-card { width: 100%; }
    .client-marquee .client-window { mask-image: none; -webkit-mask-image: none; }
    .hero-btn:hover > span[aria-hidden],.text-link:hover > span[aria-hidden],.hero-btn:active { transform: none; }
}
@media print {
    .will-reveal { opacity: 1 !important; transform: none !important; }
    .client-window { overflow: visible !important; mask-image: none; -webkit-mask-image: none; }
    .client-track { display: block !important; width: 100% !important; animation: none !important; transform: none !important; }
    .client-group { display: grid !important; grid-template-columns: repeat(3,1fr); padding: 0 !important; }
    .client-logo-card { width: auto !important; }
    .client-clone,.client-footer { display: none !important; }
}
@media (max-width:1024px) {
    .client-stage { padding: 32px; }
}
@media (max-width:640px) {
    .customers { padding: 40px 0; }
    .client-stage { width: 100%; padding: 32px 20px; border-radius: 0; border-left: 0; border-right: 0; }
    .customer-heading { gap: 16px; margin-bottom: 26px; }
    .customer-heading .section-desc { padding-left: 12px; }
    .client-logo-card { height: 100px; padding: 16px 20px; }
    .client-marquee.is-animated .client-logo-card { width: 190px; }
    .client-group { gap: 12px; }
    .client-marquee.is-animated .client-group { padding-right: 12px; }
    .client-footer { margin-top: 16px; padding-top: 16px; }
    .client-signature { gap: 7px; font-size: 9px; letter-spacing: 0; }
    .client-signature i { display: none; }
    .client-window { mask-image: linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent); -webkit-mask-image: linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent); }
}

/* INCA brand direction: red, white and neutral gray. */
.header { background: #fff; color: #24262b; border-bottom-color: #e8e8eb; }
.header.scrolled { box-shadow: 0 5px 22px #20212509; }
.logo img { filter: none; mix-blend-mode: normal; }
.logo-name { border-left-color: #dedee3; }
.nav-link { color: #65676e; }
.nav-link.active { color: var(--accent); }
.menu-toggle span { background: #303138; }
.hero { color: #25262b; background: #fafafb; }
.hero::before { background: radial-gradient(ellipse at 78% 38%,#dedee64d,transparent 50%),radial-gradient(ellipse at 15% 0%,#c4203205,transparent 50%); }
.hero::after { background-image: radial-gradient(#999ba7 1px,transparent 1px); opacity: .13; }
.hero-atmosphere span { background: #c420320d; }
.hero-atmosphere span:nth-child(2) { background: #888b9812; }
.hero-atmosphere span:nth-child(3) { background: #d2a2a90c; }
.hero-eyebrow { color: #72747c; }
.hero-eyebrow > span { background: #c42032; box-shadow: 0 0 8px #c4203220; }
.hero-eyebrow i { background: #d5d5db; }
.hero h1 span { color: #c42032; background-image: linear-gradient(110deg,#a11828,#d33242); }
.hero-subtitle { color: #696b73; }
.hero-btn.primary,.hero .hero-btn.primary { background: linear-gradient(120deg,#cd2638,#af1b2c); box-shadow: 0 4px 15px #bf233021,inset 0 1px #ffffff15; }
.hero .hero-btn.outline { color: #494b53; background: #ffffff80; border-color: #d6d7dd; }
.hero-proof > span { color: #73757c; }
.hero-proof strong { color: #32333a; }
.hero-proof strong span { color: #c42032; }
.orbit-halo { border-color: #d6d7df66; background: radial-gradient(circle,#dedee610,transparent 72%); box-shadow: 0 0 90px #85879307; }
.sphere-core { background: radial-gradient(ellipse,#fafafbf2 15%,#fafafbb8 55%,transparent 72%); }
.core-kicker,.core-caption { color: #747680; }
.sphere-core strong { color: #bd2637; }
.sphere-core strong span { color: #5d5f69; }
.orbit-card { color: #393b43; background: linear-gradient(125deg,#ffffffed,#f7f7faeb); border-color: #dedee7; box-shadow: 0 10px 30px #3536410d,inset 0 1px #fff; }
.orbit-card div > span { color: #747681; }
.orbit-card > i { background: #ca4050; }
.orbit-icon,.orbit-bi .orbit-icon,.orbit-oms .orbit-icon { color: #b52c3c; background: #c4203209; border-color: #c4203218; }
.sphere-caption { color: #757782; }
.sphere-caption i { background: #aaaab4; }
.hero-bottom { color: #73757d; border-top-color: #e3e3e9; }
.hero-bottom a { color: #656772; }
.hero-bottom i { background: #c2c3cb; }
.product-overview { background: radial-gradient(ellipse at 100% 0%,#c4203205,transparent 60%),linear-gradient(115deg,#fdfdfe,#f5f5f7); border-color: #e4e4e9; }
.overview-copy h3 { color: #34353d; }
.overview-eyebrow,.map-caption,.overview-copy > p,.overview-principles,.platform-scenes > span { color: #73747c; }
.overview-principles span::before { background: #c34c58; }
.platform-scenes svg { color: #a13947; }
.map-connector path { stroke: #d8c1c6; }
.map-connector circle { fill: #ba5360; }
.platform-core { background: linear-gradient(110deg,#ae1b2d,#ce3446); box-shadow: 0 5px 16px #a6223512; }
.platform-mark,.platform-core div > span,.core-description { color: #fff1f2; }
.platform-capabilities > div { border-color: #e5dfe2; }
.platform-capabilities strong { color: #85414a; }
.platform-capabilities span { color: #7c757b; }
.product-body .product-capabilities { color: #97515a; }
.feature-note { color: #91636b; }
.client-stage { border-color: #393a41; background: radial-gradient(ellipse at 95% 0%,#c4203214,transparent 60%),radial-gradient(ellipse at 0% 100%,#ffffff06,transparent 55%),#27282e; box-shadow: 0 18px 48px #25262b12; }
.client-stage::before { background-image: radial-gradient(#d2d2da 1px,transparent 1px); opacity: .1; }
.client-stage::after { border-color: #dc677330; box-shadow: 0 0 0 38px #ffffff03,0 0 0 76px #ffffff02; }
.client-stage .section-tag { color: #e2a7ae; }
.client-stage .section-tag::before { background: #df6b79; box-shadow: 0 0 12px #c4203230; }
.client-stage h2 { color: #f5f5f7; background: none; -webkit-text-fill-color: currentColor; }
.customer-heading .section-desc { color: #bcbcc5; border-left-color: #d96b783d; }
.service { background: radial-gradient(ellipse at 90% 0%,#c420320c,transparent 60%),#2b2c32; }
.service .section-tag { color: #e4acb4; }
.contact { background: #f7f7f9; }
.footer { background: #202125; }
.company-heading { color: #292a31; background: radial-gradient(ellipse at 85% 40%,#c4203206,transparent 65%),#f7f7f9; }
.company-heading h1 span,.company-heading .section-tag { color: #be2335; }
.company-back,.company-heading p { color: #72747c; }
@media (hover:hover) and (pointer:fine) {
    .nav-link:hover { color: #b91f32; }
    .hero-btn.primary:hover,.hero .hero-btn.primary:hover { background: linear-gradient(120deg,#b71f30,#981727); box-shadow: 0 6px 20px #bf233026; }
    .hero .hero-btn.outline:hover { color: #b92132; border-color: #bd5b65; background: #fff; }
}
@media (max-width:768px) {
    .nav { background: #fff; border-bottom-color: #e4e4e9; }
    .footer-main.footer-main--compact { grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 36px; padding-bottom: 28px; }
}

/* Natural pharmacy imagery with restrained brand accents. */
.header-inner { width: min(100%,1400px); }
.hero.hero-scene { background: #f4f6f7; color: #272c33; }
.hero-scene-main { position: relative; isolation: isolate; overflow: hidden; }
.hero-scene-image { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; margin: 0; object-fit: cover; object-position: right center; z-index: -2; }
.hero.hero-scene::before { display: none; }
.hero.hero-scene::after { display: none; }
.hero-scene .hero-content { width: min(100%,1440px); min-height: clamp(520px,33.333333vw,760px); padding-top: 36px; padding-bottom: 36px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
.hero-scene .hero-copy { position: relative; max-width: 570px; padding-bottom: 0; }
.hero-scene .hero-eyebrow { color: #666c74; margin-bottom: 25px; letter-spacing: 1.2px; font-size: 11px; }
.hero-scene .hero-eyebrow > span { background: #b7253c; box-shadow: none; }
.hero-scene .hero-eyebrow i { background: #cbd0d5; }
.hero-scene h1 { font-size: clamp(44px,4.4vw,64px); letter-spacing: -1.6px; line-height: 1.25; text-shadow: none; font-weight: 700; }
.hero-scene h1 span { color: #b7253c; background: none; -webkit-text-fill-color: currentColor; }
.hero-scene .hero-subtitle { color: #555e68; margin-top: 25px; font-size: 16px; line-height: 1.95; max-width: 470px; }
.hero-scene .hero-actions { margin-top: 29px; }
.hero.hero-scene .hero-btn.primary { background: #b7253c; color: #fff; border-color: #b7253c; box-shadow: 0 5px 16px #9b21351a; }
.hero.hero-scene .hero-btn.outline { color: #363e47; border-color: #cbd0d5; background: #ffffff73; }
.hero-scene .hero-proof { margin-top: 32px; padding-top: 0; border-top: 0; gap: 34px; max-width: 390px; }
.hero-scene .hero-proof > span { color: #6a727b; font-size: 11px; }
.hero-scene .hero-proof > span + span { padding-left: 34px; border-left: 1px solid #cbd0d580; }
.hero-scene .hero-proof strong { color: #313a44; font-size: 27px; font-weight: 600; }
.hero-scene .hero-proof strong span { color: #b7253c; }
.hero-scene-bottom { position: relative; background: #f7f9fb; border-top: 1px solid #dfe4e6; }
.hero-scene .hero-bottom { width: min(100%,1400px); padding-top: 16px; padding-bottom: 16px; border-top: 0; color: #59626b; font-size: 12px; }
.hero-scene .hero-bottom i { background: #b9c0c6; }
.hero-scene .hero-bottom a { color: #7c3946; font-weight: 500; }
.products { background: #fafbfc; padding-top: 56px; }
.products .section-tag { color: #a52b3e; font-weight: 600; }
.products .section-title::after { content: none; }
.product-overview { border-color: #e0e4e8; background: linear-gradient(115deg,#fff,#f2f5f7); box-shadow: 0 6px 24px #24354b05; }
.platform-core { background: linear-gradient(110deg,#a72439,#c03246); box-shadow: 0 5px 15px #8a233618; }
.product-card { border-color: #e2e6e9; box-shadow: 0 4px 16px #24354b06; }
@media (hover:hover) and (pointer:fine) {
    .hero.hero-scene .hero-btn.primary:hover { background: #9e1d32; border-color: #9e1d32; color: #fff; box-shadow: 0 7px 20px #8a21352b; }
    .hero.hero-scene .hero-btn.outline:hover { color: #a52037; border-color: #b96978; background: #fff; }
}
@media (min-width:1800px) {
    .hero-scene .hero-content { padding-top: 36px; padding-bottom: 36px; }
}
@media (max-width:1024px) and (min-width:769px) {
    .hero-scene .hero-content { min-height: 510px; }
    .hero.hero-scene::before { background: linear-gradient(90deg,#f7f8f9 0%,#f7f8f9ed 32%,#f7f8f9b3 46%,transparent 66%); }
    .hero-scene .hero-subtitle { font-size: 14px; }
}
@media (max-width:768px) {
    html { scroll-padding-top: 66px; }
    .hero-scene .hero-content { display: block; min-height: 670px; padding-top: 36px; padding-bottom: 250px; }
    .hero-scene-image { inset: auto 0 0; width: 100%; height: 270px; margin: 0; object-fit: cover; object-position: right center; mask-image: linear-gradient(180deg,transparent,#000 22%); -webkit-mask-image: linear-gradient(180deg,transparent,#000 22%); }
    .hero.hero-scene::before { background: linear-gradient(180deg,#f5f7f8 0%,#f5f7f8 40%,#f5f7f875 60%,transparent 77%); }
    .hero-scene .hero-copy { max-width: 520px; }
    .hero-scene h1 { font-size: clamp(40px,8vw,54px); }
    .hero-scene .hero-eyebrow { font-size: 10px; margin-bottom: 20px; }
    .hero-scene .hero-subtitle { font-size: 13px; margin-top: 20px; }
    .hero-scene .hero-actions { margin-top: 24px; }
    .hero-scene .hero-proof { margin-top: 26px; max-width: 335px; gap: 28px; }
    .hero-scene .hero-proof > span + span { padding-left: 28px; }
    .hero-scene .hero-proof strong { font-size: 24px; }
    .hero-scene-bottom { background: #f5f7f9eb; }
    .hero-scene .hero-bottom { font-size: 10px; padding-top: 13px; padding-bottom: 13px; gap: 10px; }
    .hero-scene .hero-bottom > div { gap: 10px; }
    .hero-scene .hero-bottom a { color: #8f3e4d; }
}

/* Light surfaces retain the existing dots, orbital lines and logo motion. */
.client-stage { border-color: #dfe5eb; background: radial-gradient(ellipse at 95% 0%,#eadfe54d,transparent 58%),linear-gradient(135deg,#f7f9fb,#eef2f6); box-shadow: 0 14px 40px #25364a0b; }
.client-stage::before { background-image: radial-gradient(#9ba9b7 1px,transparent 1px); opacity: .23; }
.client-stage::after { border-color: #b9738326; box-shadow: 0 0 0 38px #a9b8c40b,0 0 0 76px #a9b8c407; }
.client-stage .section-tag { color: #a63b4d; }
.client-stage .section-tag::before { background: #b7253c; box-shadow: 0 0 0 4px #b7253c0b; }
.client-stage h2 { color: #2c3540; }
.customer-heading .section-desc { color: #687480; border-left-color: #cbd3dd; }
.client-logo-card { background: #fff; border-color: #e4e9ee; box-shadow: 0 5px 16px #25364a08; }
.client-footer { border-top-color: #d9e0e8; }
.client-signature { color: #737f8b; }
.client-signature i { color: #a0aab3; }
.client-signature > span { background: #b7253c; box-shadow: none; }
.service { isolation: isolate; color: #2c3540; background: linear-gradient(115deg,#f4f6f8,#edf1f5); border-top: 1px solid #e5e9ee; border-bottom: 1px solid #e2e7ed; }
.service::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(#a8b4bf 1px,transparent 1px); background-size: 26px 26px; opacity: .2; mask-image: linear-gradient(90deg,transparent 35%,#000); }
.service::after { content: ''; position: absolute; width: 650px; height: 280px; right: -80px; top: -160px; border: 1px solid #becbd73d; border-radius: 50%; transform: rotate(-16deg); box-shadow: 0 0 0 36px #becbd70c,0 0 0 72px #becbd709; z-index: -1; pointer-events: none; }
.service .section-tag { color: #a63b4d; }
.service .section-desc,.service-steps p { color: #67737f; }
.service-steps { gap: 20px; }
.service-steps li { padding: 22px; background: #ffffffc9; border: 1px solid #dfe5ec; border-radius: 10px; }
.step-number { color: #b23c50; font-weight: 600; }
.footer { background: #eef1f4; color: #5c6874; border-top: 1px solid #dfe5eb; }
.footer-wordmark { color: #b7253c; }
.footer-wordmark span { color: #394550; border-left-color: #cbd4dd; }
.footer h2,.footer-contact .phone-number { color: #34414d; }
.footer-bottom { color: #6b7783; border-top-color: #d7dfe7; }
@media (hover:hover) and (pointer:fine) { .footer a:hover { color: #a72439; } }
@media (max-width:480px) { .service-steps { gap: 12px; } .service-steps li { padding: 18px 14px; } }
