/* Quiet depth: motion belongs to the visitor, never to an autoplay timer. */
.software-site { --ease-out: cubic-bezier(.23,1,.32,1); }
.software-site .btn { transition: transform 160ms var(--ease-out), background-color 160ms ease, box-shadow 160ms ease; }
.software-site .btn:active, .gallery-arrow:active, .gallery-picker button:active { transform: scale(.97); }
.software-site .site-header { background: #07111beb; }
.system-hero { text-align: center; padding: 76px 0 54px; position: relative; }
.system-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0, #49d4c410, transparent 65%); pointer-events: none; z-index: -1; }
.system-hero .eyebrow { justify-content: center; margin-bottom: 25px; }
.system-hero h1 { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.12; letter-spacing: -.055em; font-weight: 620; }
.system-hero h1 em { color: #76dbd3; }
.system-lead { color: #aabcc8; font-size: 16px; line-height: 1.8; margin: 24px auto 0; max-width: 660px; }
.system-hero .actions { justify-content: center; margin-top: 28px; }
.hero-reassurance { font-size: 11px; color: #8fa7b7; margin-top: 20px; }
.hero-reassurance span { padding: 0 12px; color: #557c89; }
.software-site .system-preview { margin: 30px 0 0!important; gap: 0; }
.gallery-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.gallery-heading .eyebrow { margin-bottom: 10px; font-size: 9px; }
.gallery-heading h2 { font-size: 27px; letter-spacing: -.035em; line-height: 1.25; }
.gallery-heading>p { color: #8fa7b7; font-size: 11px; text-align: right; }
.mobile-break { display: none; }
.gallery-stage { display: grid; gap: 24px; padding: 28px 24px; max-width: 1440px; width: 100%; margin: auto; }
.gallery-slide { min-width: 0; margin: 0; }
.gallery-image { display: block; border: 1px solid #456271; border-radius: 12px; overflow: hidden; background: #0b1726; box-shadow: 0 25px 60px #0005; cursor: zoom-in; }
.gallery-image img { width: 100%; height: auto; display: block; aspect-ratio: 32/21; object-fit: contain; }
.screen-bar { height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: #112330; color: #a1b8c4; font-size: 10px; border-bottom: 1px solid #9fe1e010; }
.screen-dots { color: #46606e; font-size: 9px; letter-spacing: 3px; }
.screen-fallback { padding-top: 20px; }
.screen-fallback p { color: var(--muted); }
.gallery-ready .screen-fallback { display: none; }
.gallery-ready .gallery-stage { position: relative; display: block; height: clamp(280px, 49vw, 664px); overflow: hidden; perspective: 1400px; touch-action: pan-y; cursor: grab; }
.gallery-ready .gallery-slide { position: absolute; top: 34px; left: 50%; width: min(70%, 890px); transition: transform 260ms var(--ease-out), opacity 220ms ease; transform-origin: 50% 50%; }
.gallery-ready .gallery-slide[data-position="center"] { transform: translateX(-50%); opacity: 1; z-index: 3; }
.gallery-ready .gallery-slide[data-position="left"] { transform: translateX(-113%) scale(.83) rotateY(12deg); opacity: .55; z-index: 1; }
.gallery-ready .gallery-slide[data-position="right"] { transform: translateX(13%) scale(.83) rotateY(-12deg); opacity: .55; z-index: 1; }
.gallery-ready .gallery-slide:not([data-position="center"]) .gallery-image { cursor: pointer; }
.gallery-ready.is-dragging .gallery-stage { cursor: grabbing; }
.gallery-ready.is-dragging .gallery-image { cursor: grabbing; }
.gallery-ready.is-instant .gallery-slide { transition: none; }
.gallery-controls { display: flex; justify-content: center; gap: 24px; align-items: center; }
.gallery-controls[hidden], .gallery-caption[hidden] { display: none; }
.gallery-arrow { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 1px solid #55738166; border-radius: 50%; background: #0e202bb3; color: #d5e8ed; font-size: 21px; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out); }
.gallery-picker { display: flex; border: 1px solid #8ba8b324; background: #10222db3; padding: 5px; border-radius: 100px; gap: 4px; backdrop-filter: blur(12px); }
.gallery-picker button { border: 0; background: transparent; color: #9fb4c1; border-radius: 100px; padding: 11px 18px; font-size: 12px; line-height: 1.25; cursor: pointer; min-height: 44px; transition: color 150ms ease, background-color 150ms ease, transform 150ms var(--ease-out); }
.gallery-picker button[aria-pressed="true"] { color: #bdf8ed; background: #26615f55; }
.gallery-caption { display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: 890px; padding: 27px 0 0; min-height: 122px; }
.gallery-caption h3 { font-size: 19px; letter-spacing: -.025em; }
.gallery-caption p { font-size: 13px; color: #9bb0be; max-width: 570px; margin-top: 8px; }
.gallery-tour { border: 0; padding: 12px 0; background: transparent; white-space: nowrap; cursor: pointer; }
.gallery-tour span { margin-left: 10px; }
.system-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; border-top: 1px solid var(--border); padding: 56px 0 72px; margin-top: 64px; }
.benefit-number { display: block; color: #63b8b6; font: 11px monospace; margin-bottom: 20px; }
.system-benefits h2 { font-size: 20px; letter-spacing: -.025em; margin-bottom: 14px; }
.system-benefits p { color: #91a9b9; font-size: 13px; line-height: 1.85; }
.system-mobile { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; padding: 65px 80px 0; background: linear-gradient(120deg,#10263190,#0c172380); border: 1px solid #3a5c664a; border-radius: 20px; overflow: hidden; }
.mobile-copy { padding-bottom: 65px; }
.mobile-copy h2 { font-size: clamp(30px,3.3vw,44px); }
.mobile-copy>p:not(.eyebrow) { margin-top: 24px; color: #a1b7c4; max-width: 430px; line-height: 1.85; }
.mobile-copy ul { padding: 0; list-style: none; color: #bccfd8; font-size: 12px; line-height: 2.4; margin: 24px 0; }
.mobile-copy li::before { content: '✓'; color: var(--accent); margin-right: 10px; }
.mobile-copy>small { display: block; font-size: 10px; color: #809cae; margin-top: 17px; }
.mobile-device { width: 280px; margin: 0 auto -70px; padding: 7px; border: 1px solid #6d87957a; background: #091019; border-radius: 32px; box-shadow: 0 25px 60px #0007; transform: rotate(3deg); }
.mobile-device img { display: block; width: 100%; height: auto; border-radius: 6px 6px 24px 24px; }
.device-top { height: 23px; display: flex; justify-content: center; align-items: center; gap: 6px; }
.device-top span { display: block; width: 38px; height: 4px; background: #243c48; border-radius: 5px; }
.device-top i { width: 4px; height: 4px; background: #243c48; border-radius: 50%; }
.mobile-device figcaption { display: none; }
.system-origin { display: flex; gap: 25px; align-items: center; padding-block: 76px; max-width: 920px; }
.system-origin>img { flex: 0 0 42px; }
.system-origin .eyebrow { margin-bottom: 10px; font-size: 9px; }
.system-origin h2 { font-size: 26px; }
.system-origin p:last-child { color: #92a9b8; font-size: 13px; max-width: 710px; margin-top: 14px; }
.software-site .plan-card { background: linear-gradient(135deg,#18343c95,#0c1a25dd); border-color: #66928c70; }
.software-site .plan-card>small { font-size: 11px; line-height: 1.8; }
.plan-explanation { max-width: 410px; margin-top: 24px; font-size: 12px; color: #95acba; }
.software-site .faq-list summary { transition: color 150ms ease; }
.system-final { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 48px 0 76px; }
.system-final h2 { font-size: 36px; }
.system-final p:not(.eyebrow) { color: #95acba; font-size: 13px; margin-top: 18px; }
.final-actions { display: grid; gap: 20px; justify-items: start; }
.screen-dialog { width: min(1180px,calc(100% - 40px)); max-height: calc(100dvh - 40px); padding: 22px; border: 1px solid #51707d; border-radius: 16px; color: var(--text); background: #0c1823; box-shadow: 0 24px 100px #0009; overflow: auto; }
.screen-dialog::backdrop { background: #020a12de; backdrop-filter: blur(8px); }
.dialog-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding-bottom: 18px; }
.dialog-heading .eyebrow { font-size: 9px; margin-bottom: 8px; }
.dialog-heading h2 { font-size: 24px; }
.dialog-image { text-align: center; background: #080f19; border: 1px solid var(--border); border-radius: 8px; overflow: auto; }
.dialog-image img { width: auto; height: auto; max-width: 100%; max-height: 62dvh; vertical-align: middle; }
.dialog-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; }
.dialog-bottom p { color: #c0d1dc; font-size: 13px; max-width: 760px; }
.dialog-bottom small { display: block; font-size: 11px; color: #829dad; margin-top: 6px; }
.dialog-nav { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.dialog-nav>span { font-size: 11px; color: #a5c0cd; margin-right: 10px; font-variant-numeric: tabular-nums; }
body.screen-open { overflow: hidden; }
@media(hover:hover) and (pointer:fine) {
    .gallery-arrow:hover { background: #193641; border-color: #7ba5ad; }
    .gallery-picker button:hover { color: #e5f7f5; }
    .software-site .faq-list summary:hover { color: var(--accent); }
    .gallery-slide[data-position="center"] .gallery-image:hover { border-color: #73b6b7; }
}
@media(hover:none) { .software-site .btn:hover { transform: none; } }
@media(max-width:900px) {
    .system-hero { padding-top: 56px; }
    .gallery-controls { gap: 14px; }
    .gallery-picker button { padding-inline: 12px; }
    .gallery-caption { gap: 25px; }
    .system-benefits { gap: 25px; }
    .system-mobile { padding: 45px 36px 0; gap: 24px; }
    .mobile-device { width: 230px; }
    .mobile-copy { padding-bottom: 45px; }
}
@media(max-width:600px) {
    .system-hero { padding: 42px 0 36px; }
    .system-hero .eyebrow { font-size: 8px; letter-spacing: .12em; }
    .system-hero h1 { font-size: clamp(33px,8.4vw,45px); }
    .system-lead { font-size: 14px; margin-top: 20px; }
    .system-lead br { display: none; }
    .system-hero .actions { gap: 10px; }
    .hero-reassurance { font-size: 9px; }
    .hero-reassurance span { padding-inline: 4px; }
    .gallery-heading { align-items: start; flex-direction: column; gap: 12px; }
    .gallery-heading h2 { font-size: 24px; }
    .gallery-heading>p { text-align: left; font-size: 10px; }
    .gallery-heading>p br { display: none; }
    .gallery-ready .gallery-stage { height: calc(56.44vw + 80px); }
    .gallery-ready .gallery-slide { width: 86%; top: 24px; }
    .screen-bar { height: 27px; font-size: 8px; padding-inline: 10px; }
    .screen-dots { font-size: 7px; }
    .gallery-controls { gap: 7px; width: calc(100% - 24px); }
    .gallery-picker { padding: 3px; gap: 0; flex: 1; justify-content: center; }
    .gallery-picker button { font-size: 10px; padding: 8px 9px; }
    .gallery-controls .gallery-arrow { width: 36px; height: 44px; flex-basis: 36px; border-color: transparent; }
    .gallery-caption { align-items: start; flex-direction: column; gap: 7px; padding-top: 23px; }
    .gallery-caption h3 { font-size: 19px; }
    .gallery-caption p { font-size: 12px; }
    .system-benefits { grid-template-columns: 1fr; gap: 28px; padding: 35px 0 44px; margin-top: 36px; }
    .system-benefits article { display: grid; grid-template-columns: 25px 1fr; gap: 0 15px; }
    .benefit-number { margin: 4px 0 0; grid-row: span 2; }
    .system-benefits h2 { font-size: 19px; margin-bottom: 9px; }
    .system-mobile { grid-template-columns: 1fr; gap: 0; padding: 32px 24px 0; }
    .mobile-copy { padding-bottom: 30px; }
    .mobile-copy h2 { font-size: 30px; }
    .mobile-copy>p:not(.eyebrow) { font-size: 13px; margin-top: 18px; }
    .mobile-device { width: 240px; max-width: 100%; margin-bottom: -180px; transform: rotate(2deg); }
    .system-origin { padding-block: 50px; align-items: start; gap: 16px; }
    .system-origin>img { width: 30px; flex-basis: 30px; }
    .system-origin h2 { font-size: 24px; }
    .system-final { align-items: start; flex-direction: column; padding: 12px 0 50px; gap: 26px; }
    .system-final h2 { font-size: 31px; }
    .screen-dialog { width: calc(100% - 20px); padding: 15px; max-height: calc(100dvh - 24px); }
    .dialog-heading h2 { font-size: 20px; }
    .dialog-bottom { flex-direction: column; align-items: start; gap: 18px; }
    .dialog-nav { width: 100%; justify-content: end; }
    .dialog-nav>span { margin-right: auto; }
}
@media(prefers-reduced-motion:reduce) {
    html { scroll-behavior: auto; }
    .software-site *, .software-site *::before, .software-site *::after { transition: none!important; animation: none!important; scroll-behavior: auto!important; }
    .gallery-ready .gallery-slide[data-position="left"] { transform: translateX(-113%) scale(.83); }
    .gallery-ready .gallery-slide[data-position="right"] { transform: translateX(13%) scale(.83); }
    .mobile-device { transform: none; }
}