/* ABMART / spatial data experience. Decoration never intercepts input. */
:root { --font-body: 'Be Vietnam Pro', system-ui, sans-serif; --font-display: 'Be Vietnam Pro', system-ui, sans-serif; --text-secondary: #a9b6cb; --scene-x: 0px; --scene-y: 0px; --scene-travel: 0px; }
body::before { display: none; }
.scene-atmosphere { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; background: #060b17; contain: strict; }
.atmosphere-orb { position: absolute; width: min(100vw, 1050px); height: min(100vw, 1050px); border-radius: 50%; will-change: transform; }
.orb-cyan { top: -40%; left: -35%; background: radial-gradient(ellipse, rgba(0, 194, 218, .22), rgba(0, 166, 202, .055) 44%, transparent 68%); transform: translate3d(var(--scene-x), calc(var(--scene-y) - var(--scene-travel)), 0); }
.orb-violet { right: -30%; bottom: -30%; background: radial-gradient(ellipse, rgba(119, 65, 225, .22), rgba(82, 41, 177, .06) 43%, transparent 68%); transform: translate3d(calc(var(--scene-x) * -.7), calc(var(--scene-y) * -.6 + var(--scene-travel)), 0); }
.atmosphere-grid { position: absolute; inset: 52% -35% -50%; background-image: linear-gradient(rgba(76, 164, 194, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(76, 164, 194, .18) 1px, transparent 1px); background-size: 72px 72px; transform-origin: center top; transform: perspective(700px) rotateX(61deg) translate3d(calc(var(--scene-x) * .3), var(--scene-travel), 0); mask-image: linear-gradient(transparent, #000 24%, #000 65%, transparent); opacity: .5; will-change: transform; }
.atmosphere-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 35%, rgba(3, 8, 18, .36)); }
.circuit-canvas { position: fixed; width: 100%; height: 100vh; height: 100dvh; z-index: 1; will-change: auto; }
/* Wires belong to the document, so native scrolling keeps every anchor fixed. */
.circuit-network { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.wire-track { stroke-width: 1; opacity: .22; }
.is-active .wire-track { stroke-width: 1.7; opacity: .58; }
.wire-packet { animation: dataWireFlow var(--flow-duration) linear var(--flow-delay) infinite; animation-play-state: paused; }
.is-onscreen .wire-packet { animation-play-state: running; }
.circuit-network.is-paused .wire-packet { animation-play-state: paused; }
.wire-tail { stroke-width: 2; opacity: .25; }
.wire-light { stroke-width: 1.7; opacity: .75; }
.wire-head { stroke: #e7fdff; stroke-width: 2.7; }
.wire-port-ring { stroke-width: 1; opacity: .3; }
.wire-port { stroke-width: 0; opacity: .8; }
.is-active .wire-port-ring { opacity: .65; }
.is-active .wire-port { fill: #d8fcff; opacity: 1; }
@keyframes dataWireFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: var(--flow-end); } }
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; z-index: 1100; }
.reading-progress span { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #00d5e9, #56e9f2 60%, #b48cff); box-shadow: 0 0 12px #00d5e999; }
.site-header { background: rgba(5, 11, 22, .72); border-bottom-color: rgba(133, 183, 217, .12); }
.site-header.scrolled { background: rgba(5, 11, 22, .92); box-shadow: 0 12px 40px #0003; }
.brand-logo { gap: 11px; }
.logo-mark { width: 46px; height: 46px; flex: 0 0 46px; background: none; border: 0; border-radius: 0; box-shadow: none; }
.logo-mark img { display: block; width: 100%; height: 100%; }
.brand-logo:hover .logo-mark { transform: translateY(-1px); box-shadow: none; }
.logo-wordmark { display: block; width: 157px; height: auto; }
.logo-title { display: block; position: relative; }
.logo-title::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 42%, rgba(180, 252, 255, .55) 47%, #ffffff 50%, rgba(225, 203, 255, .7) 53%, transparent 58%); background-size: 350% 100%; background-position: 130% 0; -webkit-mask: url('../assets/brand/abmart-wordmark.svg') center / 100% 100% no-repeat; mask: url('../assets/brand/abmart-wordmark.svg') center / 100% 100% no-repeat; animation: brandWordShine 2s ease-in-out infinite; }
@keyframes brandWordShine { 0%,10% { background-position: 130% 0; opacity: 0; } 15% { opacity: .85; } 85% { background-position: -30% 0; opacity: .85; } 95%,100% { background-position: -30% 0; opacity: 0; } }
.logo-sub { margin-top: 4px; font-size: .51rem; letter-spacing: .115em; color: #93a9bf; }
.footer-logo .logo-mark { width: 51px; height: 51px; flex-basis: 51px; }
.core-ready .orbit-label { left: 0; top: 0; right: auto; bottom: auto; animation: none; transition: opacity .25s ease; will-change: transform; }
.hero-section { padding-top: 145px; padding-bottom: 125px; min-height: min(960px, 100svh); }
.hero-layout { grid-template-columns: 1.1fr 1fr; gap: 28px; }
.hero-heading { font-size: clamp(2.8rem, 4.7vw, 4.5rem); line-height: 1.15; letter-spacing: -.055em; font-weight: 700; }
.hero-description { max-width: 570px; font-size: 1rem; line-height: 1.85; }
.badge-tag { font-size: .68rem; letter-spacing: .07em; padding: 8px 13px; background: #02d9e70c; border-color: #6bdae630; }
.hero-commitments { font-size: .85rem; border-color: #9cb9d518; }
.commitment-item { font-size: .8rem; }
.hero-visual { transform: translate3d(0, var(--hero-shift, 0px), 0) rotateX(var(--hero-angle, 0deg)); transform-origin: center; }
.canvas-card { max-width: 550px; height: 550px; border: 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 48%, #0bcddd12, transparent 66%); box-shadow: none; overflow: visible; }
.canvas-card::before { content: ''; position: absolute; inset: 8%; border: 1px solid #68d6e51c; border-radius: 50%; box-shadow: 0 0 0 35px #40d7e604, 0 0 0 70px #40d7e603; transform: rotateX(20deg); }
#hero-3d-canvas { position: relative; z-index: 1; }
.webgl-unavailable::after { content: ''; position: absolute; inset: 30%; border: 1px solid #6ee8e8; background: linear-gradient(135deg, #04c7d12b, #8b5cf630); transform: rotate(45deg); box-shadow: 0 0 65px #00d6e62b, inset 0 0 35px #22d3ee30; }
.canvas-meta { bottom: 14px; left: 15%; right: 15%; flex-direction: column; gap: 4px; text-align: center; }
.status-indicator { font-size: .72rem; letter-spacing: .025em; }
.canvas-hint { font-size: .65rem; font-style: normal; letter-spacing: .12em; color: #88a1ba; }
.orbit-label { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid #68d6e536; border-radius: 10px; background: #071323e8; box-shadow: 0 7px 25px #0004; font-size: .72rem; letter-spacing: .025em; color: #d6f5fa; animation: orbitalFloat 7s ease-in-out infinite; pointer-events: none; }
.orbit-label i { width: 5px; height: 5px; background: #51e5ed; border-radius: 50%; box-shadow: 0 0 10px #00dce9; }
.orbit-web { left: 1%; top: 22%; }
.orbit-app { right: 0; top: 52%; animation-delay: -2s; border-color: #a788ec55; }
.orbit-app i { background: #b797f5; box-shadow: 0 0 10px #a47fe9; }
.orbit-data { left: 8%; bottom: 19%; animation-delay: -4s; }
@keyframes orbitalFloat { 0%,100% { translate: 0 -5px; } 50% { translate: 0 5px; } }
.scroll-cue { position: absolute; left: 50%; bottom: 29px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; z-index: 2; color: #98afc5; font-size: .68rem; letter-spacing: .14em; white-space: nowrap; padding: 10px; }
.scroll-cue-line { width: 36px; height: 1px; background: #326977; position: relative; overflow: hidden; }
.scroll-cue-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #7af6f9, transparent); animation: cueTravel 2.4s ease-in-out infinite; }
@keyframes cueTravel { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.section { padding: clamp(82px, 9vw, 130px) 0; }
.section-header { position: relative; margin-bottom: 72px; }
.section-tag { font-size: .69rem; letter-spacing: .2em; }
.section-title { font-size: clamp(1.85rem, 3.3vw, 2.8rem); letter-spacing: -.035em; line-height: 1.24; }
.section-lead { font-size: .97rem; line-height: 1.85; }
.section-header::before { content: ''; display: block; margin: 0 auto 25px; width: 34px; height: 2px; background: linear-gradient(90deg, #32dae7, #ae7cec); box-shadow: 0 0 18px #24cbd755; }
.about-card, .service-item, .solution-card, .step-card { background: linear-gradient(145deg, rgba(18, 32, 53, .91), rgba(8, 17, 33, .94)); border-color: rgba(139, 184, 213, .15); box-shadow: 0 16px 40px -22px #0009, inset 0 1px #e2f8ff06; backdrop-filter: none; }
.services-grid { gap: 48px 36px; }
.service-item { padding: 52px 30px 32px; }
.service-header { align-items: flex-start; gap: 15px; }
.service-title { font-size: 1.3rem; line-height: 1.4; }
.service-number { font-size: 1.6rem; line-height: 1.4; }
.card-port-indicator { top: 14px; right: 17px; padding: 3px 8px; border-color: #4fa8bd30; }
.port-label { font-size: .57rem; }
.service-item.is-flow-active { border-color: #48deec88; box-shadow: 0 12px 46px -20px #00cce533, inset 0 1px #82e2ed28; }
.service-item.is-flow-active .port-pulse { background: #e0fdff; box-shadow: 0 0 14px #00ecff; }
.service-item.is-flow-active .port-label { color: #87e8ee; }
.step-card.is-flow-active { border-color: #7bd1df80; }
.contact-box { background: linear-gradient(140deg, rgba(15, 41, 56, .96), rgba(22, 18, 47, .97)); box-shadow: 0 0 100px -55px #22d3ee66; }
.btn { min-height: 46px; border-radius: 12px; }
.btn-primary { background: linear-gradient(115deg, #45eff0, #00bcd9); box-shadow: 0 5px 26px #00cde52e; }
.btn-secondary { background: #122237a8; border-color: #a0c4dc35; }
.motion-ready .motion-item { opacity: 0; translate: 0 56px; rotate: x 3deg; transition: opacity .7s ease, translate .9s cubic-bezier(.16,1,.3,1), rotate .9s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s, background .3s, transform .18s ease-out; transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms, 0ms, 0ms; }
.motion-ready .motion-item.is-inview { opacity: 1; translate: 0 0; rotate: x 0deg; }
.motion-ready .motion-item:focus-within { opacity: 1; translate: 0 0; rotate: x 0deg; }
.motion-ready .section-header.motion-item { translate: 0 36px; }
.motion-ready .section-header.motion-item.is-inview { translate: 0 0; }
.site-footer { background: #060b17e8; }
@media (min-width: 1600px) { .container { max-width: 1360px; } }
@media (max-width: 1024px) {
  .hero-layout { grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; }
  .hero-visual { order: initial; }
  .hero-heading { font-size: 2.5rem; }
  .hero-buttons { justify-content: flex-start; }
  .hero-commitments { align-items: flex-start; }
  .canvas-card { height: 430px; }
}
@media (max-width: 767px) {
  .container { padding-left: 26px; padding-right: 26px; }
  .hero-section { padding-top: 117px; padding-bottom: 67px; min-height: auto; }
  .hero-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; text-align: left; }
  .hero-content { display: contents; }
  .hero-heading { order: 1; font-size: clamp(2rem, 8.8vw, 3.2rem); line-height: 1.2; margin: 0; }
  .hero-heading .text-gradient-purple { text-wrap: balance; }
  .hero-description { order: 2; font-size: .88rem; line-height: 1.8; margin: 0; }
  .badge-tag { order: 0; justify-self: start; font-size: .55rem; padding: 8px 10px; gap: 7px; margin: 0; max-width: 100%; }
  .badge-dot { flex-shrink: 0; width: 5px; height: 5px; }
  .hero-buttons { order: 3; gap: 10px; flex-wrap: nowrap; margin: 0; }
  .hero-buttons .btn { flex: 1; font-size: .76rem; padding: 14px 10px; min-height: 48px; gap: 7px; }
  .hero-buttons svg { width: 16px; }
  .hero-commitments { order: 5; padding-top: 18px; gap: 8px; }
  .commitment-item { font-size: .71rem; gap: 8px; }
  .commitment-item svg { width: 15px; height: 15px; }
  .hero-visual { order: 4; margin-top: -6px; width: calc(100% + 12px); justify-self: center; transform: none; }
  .canvas-card { width: 100%; height: min(105vw, 410px); max-width: 410px; }
  .canvas-meta { bottom: 6%; }
  .status-indicator { font-size: .64rem; }
  .canvas-hint { font-size: .57rem; }
  .orbit-label { padding: 7px 9px; font-size: .62rem; }
  .orbit-web { left: 0; top: 20%; }
  .orbit-app { right: -1%; top: 55%; }
  .orbit-data { left: 1%; bottom: 21%; }
  .hero-conduit-anchor { bottom: -20px; height: 30px; }
  .scroll-cue { bottom: 10px; font-size: .6rem; }
  .section { padding: 72px 0; }
  .section-header { margin-bottom: 54px; text-align: left; }
  .section-header::before { margin-left: 0; margin-bottom: 21px; }
  .section-tag { font-size: .61rem; letter-spacing: .16em; }
  .section-title { font-size: clamp(1.8rem, 7.3vw, 2.2rem); line-height: 1.25; }
  .section-lead { font-size: .88rem; }
  .about-grid, .services-grid, .solutions-grid, .process-steps { gap: 34px; }
  .about-card, .solution-card { padding: 28px 23px; border-radius: 19px; }
  .service-item { padding: 47px 22px 27px; border-radius: 20px; }
  .service-header { gap: 12px; }
  .service-title { font-size: 1.16rem; }
  .service-number { font-size: 1.35rem; }
  .service-intro, .card-desc, .solution-desc, .step-desc { font-size: .88rem; line-height: 1.8; }
  .service-checklist li { font-size: .83rem; }
  .service-tags span { font-size: .66rem; }
  .step-card { padding: 27px 24px; }
  .step-number { font-size: 2rem; }
  .contact-box { padding: 33px 21px; border-radius: 22px; }
  .contact-heading { font-size: 1.85rem; }
  .contact-sub, .contact-note, .form-status-box { font-size: .85rem; }
  .contact-grid { gap: 30px; }
  .method-value, .footer-info-text { overflow-wrap: anywhere; }
  .form-input, .form-textarea, .form-select { font-size: 16px; }
  .mobile-toggle { width: 44px; height: 44px; }
  .orb-cyan { width: 150vw; height: 150vw; left: -75%; top: -15%; }
  .orb-violet { width: 150vw; height: 150vw; right: -85%; bottom: -10%; }
  .atmosphere-grid { background-size: 65px 65px; opacity: .36; }
  .motion-ready .motion-item { translate: 0 38px; rotate: x 2deg; }
  .motion-ready .motion-item.is-inview { translate: 0 0; rotate: x 0deg; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-title::after { animation: none; display: none; }
  .wire-packet { animation: none; display: none; }
  .scene-atmosphere { --scene-x: 0px !important; --scene-y: 0px !important; --scene-travel: 0px !important; }
  .hero-visual { transform: none; }
  .motion-ready .motion-item { opacity: 1; translate: none; rotate: none; transition: none; }
  .orbit-label, .scroll-cue-line::after { animation: none; }
}