/* Industrial automation sales page · remote QA 2026-09-04 */
.ai-page { background: var(--ink); color: var(--text); }
.ai-page main { overflow: hidden; }
.ai-page h1, .ai-page h2, .ai-page h3, .ai-page p { margin-top: 0; }
.ai-page em { color: var(--acid); font-style: normal; }
.ai-page svg { display: block; }
.ai-page .main-nav a.is-active { color: var(--acid); }
.ai-header-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--acid); border-radius: 6px; color: var(--acid); font: 700 13px/1 var(--font-body); transition: background .25s, color .25s, transform .25s var(--ease); }
.ai-header-cta:hover { background: var(--acid); color: var(--ink); transform: translateY(-2px); }

.ai-hero.hero { min-height: 820px; padding: 136px 0 96px; background: var(--ink); }
.ai-hero-grid { display: grid; grid-template-columns: minmax(520px, .95fr) minmax(560px, 1.05fr); gap: clamp(40px, 4vw, 68px); align-items: center; min-height: 610px; }
.ai-hero-copy { position: relative; z-index: 2; }
.ai-hero-copy h1 { max-width: 720px; margin: 24px 0 28px; color: var(--white); font: 700 clamp(54px, 4vw, 72px)/.94 var(--font-display); letter-spacing: -.06em; }
.ai-hero-copy h1 span, .ai-hero-copy h1 em { display: block; white-space: nowrap; }
.ai-hero-lead { max-width: 620px; margin-bottom: 34px; color: #d7dbd7; font: 400 clamp(18px, 1.6vw, 25px)/1.5 var(--font-body); }
.ai-hero-note { margin: 28px 0 0; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.45); color: var(--muted-light); font: 500 13px/1.5 var(--font-body); }
.ai-hero .hero-actions { flex-wrap: wrap; }
.ai-hero .button { min-height: 58px; padding-right: 18px; padding-left: 18px; gap: 16px; font-size: 12px; }
.ai-hero-visual.hero-visual { --pointer-x: 0px; --pointer-y: 0px; --scroll-y: 0px; align-self: center; display: block; margin: 0; transform: translate3d(var(--pointer-x), calc(var(--pointer-y) + var(--scroll-y)), 0); }
.ai-demo-frame { overflow: hidden; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; background: linear-gradient(145deg, rgba(18,22,21,.96), rgba(5,7,6,.98)); box-shadow: 0 36px 90px rgba(0,0,0,.4), 0 0 0 1px rgba(232,255,56,.03) inset; }
.ai-demo-header { display: flex; justify-content: space-between; align-items: center; min-height: 58px; padding: 0 24px; border-bottom: 1px solid rgba(255,255,255,.14); color: #d8dcd8; font: 600 12px/1 var(--font-body); text-transform: uppercase; letter-spacing: .12em; }
.ai-live { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan); }
.ai-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px rgba(56,214,220,.8); animation: aiPulse 1.6s ease-in-out infinite; }
.ai-demo-body { display: grid; grid-template-columns: minmax(0, 1fr) 164px; }
.ai-demo-main { padding: 25px; }
.ai-order-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ai-order-head small, .ai-warehouse-mini small { display: block; margin-bottom: 5px; color: #89908b; font: 600 10px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .1em; }
.ai-order-head strong { color: var(--white); font: 700 24px/1.1 var(--font-display); }
.ai-order-head > span { color: var(--acid); font: 700 12px/1 var(--font-body); }
.ai-process-line { display: flex; align-items: center; gap: 0; margin: 22px 0 24px; }
.ai-process-line i { position: relative; flex: 1; height: 2px; background: rgba(255,255,255,.15); }
.ai-process-line i::before { content: ""; position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border: 2px solid #6c716d; border-radius: 50%; background: var(--ink); transform: translateY(-50%); }
.ai-process-line i.is-done { background: var(--acid); }
.ai-process-line i.is-done::before, .ai-process-line i.is-active::before { border-color: var(--acid); background: var(--acid); box-shadow: 0 0 15px rgba(232,255,56,.65); }
.ai-process-line i.is-active::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--acid), transparent); animation: aiFlow 2s linear infinite; }
.ai-machine-row { display: grid; grid-template-columns: 44px 122px 1fr; gap: 13px; align-items: center; min-height: 76px; border-top: 1px solid rgba(255,255,255,.13); }
.ai-machine-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; color: #9da39e; }
.ai-machine-icon svg { width: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ai-machine-row small { display: block; margin-bottom: 4px; color: #8f9690; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.ai-machine-row strong { color: var(--acid); font-size: 13px; }
.ai-machine-row strong.is-cyan { color: var(--cyan); }
.ai-wave { height: 34px; overflow: hidden; }
.ai-wave i { display: block; width: 150%; height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='34' viewBox='0 0 200 34'%3E%3Cpath d='M0 18h18l7-8 8 16 9-21 8 25 8-13h19l7-7 7 14 8-10 8 4h18l8-8 7 14 8-8 8 2h35' fill='none' stroke='%23e8ff38' stroke-width='2'/%3E%3C/svg%3E") repeat-x center/200px 34px; animation: aiWave 4s linear infinite; }
.ai-flat-line { height: 1px; background: linear-gradient(90deg, var(--cyan), rgba(56,214,220,.08)); }
.ai-progress-meta { display: flex; justify-content: space-between; margin: 18px 0 9px; color: #969c97; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.ai-progress-meta strong { color: var(--white); }
.ai-demo-progress { height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.13); }
.ai-demo-progress i { display: block; width: 68%; height: 100%; background: var(--acid); box-shadow: 0 0 15px rgba(232,255,56,.5); transition: width .8s var(--ease); }
.ai-warehouse-mini { padding: 25px 18px; border-left: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.018); }
.ai-warehouse-mini > strong { display: block; color: var(--cyan); font: 700 44px/1 var(--font-display); }
.ai-warehouse-mini > span { display: block; margin: 5px 0 20px; color: #aeb4af; font-size: 11px; line-height: 1.4; }
.ai-warehouse-mini svg { width: 100%; margin: 10px 0 28px; fill: none; stroke: #555c57; stroke-width: 1.5; }
.ai-warehouse-mini b { color: var(--cyan); font: 700 19px/1 var(--font-display); }
.ai-demo-caption { display: block; margin-top: 12px; color: #747a75; font: 500 10px/1.4 var(--font-body); text-align: right; }

.ai-questions { padding: clamp(74px, 8vw, 120px) 0; border-top: 1px solid rgba(255,255,255,.12); background: var(--ink); color: var(--white); }
.ai-questions h2 { max-width: 700px; margin: 0 0 56px; font: 700 clamp(42px, 4.5vw, 72px)/1 var(--font-display); letter-spacing: -.045em; }
.ai-question-rail { display: grid; grid-template-columns: repeat(6, 1fr); }
.ai-question-rail p { position: relative; min-height: 144px; margin: 0; padding: 28px 24px 10px 0; border-right: 1px solid rgba(255,255,255,.18); color: #d2d6d2; font: 500 15px/1.65 var(--font-body); }
.ai-question-rail p:not(:first-child) { padding-left: 24px; }
.ai-question-rail p::before { content: ""; position: absolute; top: 0; left: 0; width: 18px; height: 2px; background: var(--acid); }

.ai-flow { padding: var(--section) 0; background: var(--white); }
.ai-split-heading, .ai-dark-heading { display: grid; grid-template-columns: 1fr .72fr; gap: 11vw; align-items: end; margin-bottom: 70px; }
.ai-split-heading h2, .ai-dark-heading h2 { margin: 16px 0 0; font: 700 clamp(46px, 5.1vw, 82px)/.98 var(--font-display); letter-spacing: -.052em; }
.ai-split-heading > p, .ai-dark-heading > p { max-width: 590px; margin-bottom: 4px; color: var(--muted); font: 400 18px/1.65 var(--font-body); }
.ai-flow-track { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); margin: 0; padding: 0; list-style: none; }
.ai-flow-track::before { content: ""; position: absolute; top: 64px; right: 7%; left: 7%; height: 1px; background: #cbd600; }
.ai-flow-track::after { content: ""; position: absolute; top: 61px; left: 7%; width: 62px; height: 7px; border-radius: 50%; background: var(--acid); filter: blur(2px); box-shadow: 0 0 18px rgba(195,213,0,.75); animation: aiTrack 5s linear infinite; }
.ai-flow-track li { position: relative; z-index: 1; padding: 0 clamp(10px, 1.3vw, 22px); }
.ai-flow-track li > span { display: block; margin-bottom: 20px; color: var(--cyan); font: 700 11px/1 var(--font-body); }
.ai-flow-track li > i { display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 22px; border: 1px solid #cbd600; border-radius: 50%; background: var(--white); color: var(--text); }
.ai-flow-track svg { width: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ai-flow-track h3 { margin-bottom: 11px; font: 700 15px/1.2 var(--font-display); }
.ai-flow-track p { margin: 0; color: var(--muted); font: 400 12px/1.55 var(--font-body); }

.ai-operations { padding: var(--section) 0 110px; background: var(--ink); color: var(--white); }
.ai-dark-heading h2 { color: var(--white); }
.ai-dark-heading > p { color: #aeb4af; }
.ai-operations-grid { display: grid; grid-template-columns: .82fr .78fr 1.2fr; gap: 18px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.22); }
.ai-operations-grid > section > h3 { margin-bottom: 15px; color: #929994; font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .12em; }
.ai-machine-card, .ai-operations-grid > section:last-child { border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
.ai-machine-card { padding: 18px; margin-bottom: 12px; }
.ai-machine-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ai-machine-card-head span { font: 700 17px/1 var(--font-display); }
.ai-machine-card-head b, .ai-queue-list b { padding: 5px 8px; border: 1px solid var(--acid); border-radius: 5px; color: var(--acid); font-size: 10px; }
.ai-machine-card-head b.is-paused { border-color: #ff8a35; color: #ff8a35; }
.ai-machine-card p { display: flex; justify-content: space-between; margin: 7px 0; color: #888f89; font-size: 11px; }
.ai-machine-card p strong { color: #d5d9d5; font-weight: 600; }
.ai-bar { height: 4px; margin-top: 18px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.13); }
.ai-bar i { display: block; width: var(--progress); height: 100%; background: var(--acid); }
.ai-machine-card:not(.is-running) .ai-bar i { background: #ff8a35; }
.ai-queue-list { margin: 0; padding: 0; list-style: none; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; }
.ai-queue-list li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; min-height: 73px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ai-queue-list li:last-child { border-bottom: 0; }
.ai-queue-list li > span { color: var(--cyan); font: 700 15px/1 var(--font-display); }
.ai-queue-list strong, .ai-queue-list small { display: block; }
.ai-queue-list strong { margin-bottom: 4px; font-size: 12px; }
.ai-queue-list small { color: #858c87; font-size: 9px; }
.ai-queue-list b { border-color: #696f6b; color: #b7bcb8; white-space: nowrap; }
.ai-queue-list .is-active b { border-color: var(--acid); color: var(--acid); }
.ai-queue-list b.is-attention { border-color: #ff8a35; color: #ff8a35; }
.ai-operations-grid > section:last-child { padding: 18px; }
.ai-current-head { display: flex; justify-content: space-between; align-items: start; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.15); }
.ai-current-head h3 { margin-bottom: 4px; font: 700 24px/1 var(--font-display); }
.ai-current-head small { color: #858c87; }
.ai-current-head > strong { color: var(--acid); font: 700 21px/1 var(--font-display); }
.ai-current-progress { height: 3px; margin: 18px 0 12px; background: rgba(255,255,255,.14); }
.ai-current-progress i { display: block; width: 72%; height: 100%; background: var(--acid); }
.ai-variation-row { display: grid; grid-template-columns: 1fr .78fr .58fr .72fr; gap: 10px; align-items: center; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 11px; }
.ai-variation-row b { font-weight: 500; }
.ai-variation-row small { color: #a8aea9; }
.ai-variation-row em { justify-self: end; color: #b2b7b3; font-size: 9px; font-style: normal; }
.ai-variation-row em.is-running { color: var(--acid); }
.ai-current-footer { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; margin-top: 18px; color: #858c87; font-size: 10px; }
.ai-current-footer strong { color: #d8ddd8; }
.ai-demo-caption--dark { color: #737973; }

.ai-complex-orders { padding: var(--section) 0; background: var(--white); }
.ai-complex-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 10vw; align-items: center; }
.ai-complex-copy h2, .ai-continuity-title h2, .ai-alerts-copy h2, .ai-logistics-heading h2, .ai-reports-copy h2, .ai-governance h2, .ai-diagnostic h2 { margin: 18px 0 28px; font: 700 clamp(42px, 4.6vw, 76px)/1 var(--font-display); letter-spacing: -.05em; }
.ai-complex-copy > p { max-width: 520px; color: var(--muted); font: 400 17px/1.7 var(--font-body); }
.ai-complex-copy ul { margin: 30px 0 0; padding: 0; list-style: none; }
.ai-complex-copy li { padding: 13px 0; border-top: 1px solid var(--line); font-weight: 600; }
.ai-complex-copy li::before { content: "+"; margin-right: 12px; color: #b8cc00; }
.ai-order-story { border: 1px solid #cfd2ce; border-radius: 16px; background: #f7f8f5; box-shadow: 0 26px 60px rgba(6,8,7,.08); }
.ai-order-story header { display: flex; align-items: flex-end; justify-content: space-between; padding: 24px 28px; border-bottom: 1px solid #d9ddd8; }
.ai-order-story header small { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.ai-order-story header strong { font: 700 32px/1 var(--font-display); }
.ai-order-story header > span { color: var(--muted); font-size: 12px; }
.ai-order-total { padding: 24px 28px; }
.ai-order-total > span { color: var(--muted); font-size: 11px; }
.ai-order-total > strong { float: right; font-size: 13px; }
.ai-order-total > div { height: 5px; margin-top: 14px; border-radius: 99px; background: #dfe2de; }
.ai-order-total i { display: block; width: 72%; height: 100%; border-radius: inherit; background: var(--acid); }
.ai-order-story article { display: grid; grid-template-columns: 34px 1fr auto; gap: 16px; align-items: center; padding: 19px 28px; border-top: 1px solid #d9ddd8; }
.ai-order-story article > span { color: var(--cyan); font: 700 16px/1 var(--font-display); }
.ai-order-story article strong, .ai-order-story article small { display: block; }
.ai-order-story article small { margin-top: 5px; color: var(--muted); }
.ai-order-story article b { font: 700 17px/1 var(--font-display); }
.ai-order-story footer { display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; background: var(--ink); color: var(--white); border-radius: 0 0 15px 15px; }
.ai-order-story footer span { font-weight: 600; }
.ai-order-story footer i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--acid); color: var(--ink); font-style: normal; }

.ai-continuity { padding: var(--section) 0; background: var(--ink); color: var(--white); }
.ai-continuity-title { display: grid; grid-template-columns: 60px 1fr .8fr; gap: 28px; align-items: start; }
.ai-continuity-title > span, .ai-alerts-copy > span, .ai-logistics-heading > span { color: var(--acid); font: 700 20px/1 var(--font-display); }
.ai-continuity-title h2 { margin-top: 0; color: var(--white); }
.ai-continuity-title p { max-width: 520px; color: #aeb4af; font: 400 17px/1.7 var(--font-body); }
.ai-before-after { display: grid; grid-template-columns: 1fr 70px 1fr; gap: 22px; align-items: center; margin-top: 60px; }
.ai-before-after article { padding: 28px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: rgba(255,255,255,.025); }
.ai-before-after article > small { display: block; margin-bottom: 22px; color: #a6aca7; font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; }
.ai-before-after article > div:first-of-type { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.ai-before-after strong { color: var(--acid); font: 700 52px/1 var(--font-display); }
.ai-before-after article span { color: #d6dad6; font-weight: 600; }
.ai-before-after article b { margin-left: auto; color: #aab0ab; font: 500 11px/1 var(--font-body); }
.ai-before-after > i { display: grid; place-items: center; width: 52px; height: 52px; margin: auto; border-radius: 50%; background: var(--acid); color: var(--ink); font: 700 24px/1 var(--font-body); font-style: normal; }
.ai-dot-progress { display: grid !important; grid-template-columns: repeat(20, 1fr); gap: 5px !important; margin-top: 26px; }
.ai-dot-progress i { height: 6px; border-radius: 99px; background: #555b56; }
.ai-dot-progress i.is-done { background: var(--acid); box-shadow: 0 0 8px rgba(232,255,56,.3); }

.ai-alerts { padding: var(--section) 0; background: var(--white); }
.ai-alerts-grid { display: grid; grid-template-columns: .62fr 1.38fr; gap: 8vw; align-items: center; }
.ai-alerts-copy h2 { margin-top: 10px; }
.ai-alerts-copy p { max-width: 470px; color: var(--muted); font: 400 17px/1.7 var(--font-body); }
.ai-monitor { display: grid; grid-template-columns: 1.18fr .9fr .72fr; align-items: stretch; border: 1px solid #d4d8d3; border-radius: 16px; background: #f5f6f3; box-shadow: 0 24px 60px rgba(6,8,7,.08); }
.ai-camera { position: relative; min-height: 260px; overflow: hidden; border-radius: 15px 0 0 15px; background: linear-gradient(145deg, #2b302c, #080b09); }
.ai-camera::before, .ai-camera::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.13); }
.ai-camera::before { inset: 34px; transform: perspective(500px) rotateX(58deg) translateY(26px); background: repeating-linear-gradient(90deg, transparent 0 36px, rgba(255,255,255,.07) 37px 38px); }
.ai-camera::after { top: 50%; left: 50%; width: 82px; height: 82px; border: 7px solid #5e6660; border-radius: 50%; transform: translate(-50%,-48%); box-shadow: 0 0 0 20px #252b27, 0 0 0 21px #666e68; }
.ai-camera-line { position: absolute; z-index: 2; top: 25%; bottom: 25%; left: 50%; width: 8px; border-radius: 8px; background: #89918b; transform: translateX(-50%); }
.ai-camera span { position: absolute; z-index: 3; bottom: 17px; left: 17px; display: flex; align-items: center; gap: 7px; color: var(--white); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.ai-camera span i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); animation: aiPulse 1.6s ease-in-out infinite; }
.ai-event, .ai-event-time { display: flex; flex-direction: column; justify-content: center; padding: 26px; border-left: 1px solid #d4d8d3; }
.ai-event small, .ai-event-time small { margin-bottom: 15px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.ai-event strong { font: 700 21px/1.2 var(--font-display); }
.ai-event p { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.ai-event-time strong { color: #1fb6c2; font: 700 clamp(25px, 2.4vw, 38px)/1 var(--font-display); }
.ai-event-time span { margin-top: 13px; color: var(--muted); font-size: 11px; }

.ai-logistics { padding: var(--section) 0; background: var(--mineral); }
.ai-logistics-heading { display: grid; grid-template-columns: 54px 1fr .72fr; gap: 32px; align-items: start; margin-bottom: 60px; }
.ai-logistics-heading h2 { margin-top: 0; }
.ai-logistics-heading > p { max-width: 540px; color: var(--muted); font: 400 17px/1.7 var(--font-body); }
.ai-logistics-board { overflow: hidden; border: 1px solid #cbd0ca; border-radius: 16px; background: var(--white); box-shadow: 0 28px 70px rgba(6,8,7,.08); }
.ai-logistics-board > header { display: grid; grid-template-columns: .55fr 1.15fr 1.15fr .7fr; padding: 28px 32px; border-bottom: 1px solid #d7dbd6; }
.ai-logistics-board > header > div { padding: 0 26px; border-right: 1px solid #d7dbd6; }
.ai-logistics-board > header > div:first-child { padding-left: 0; }
.ai-logistics-board > header > div:last-child { padding-right: 0; border-right: 0; }
.ai-logistics-board header small, .ai-delivery-options > div > small { display: block; margin-bottom: 10px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.ai-logistics-board header strong { font: 700 clamp(22px, 2.5vw, 39px)/1 var(--font-display); }
.ai-status-acid { display: inline-block; padding: 10px 13px; border-radius: 7px; background: var(--acid); font-size: clamp(16px, 1.8vw, 26px) !important; }
.ai-delivery-options { display: grid; grid-template-columns: 1.05fr .75fr 1.2fr; gap: 0; padding: 28px 32px 34px; }
.ai-delivery-options > div { padding: 0 28px; border-right: 1px solid #d7dbd6; }
.ai-delivery-options > div:first-child { padding-left: 0; }
.ai-delivery-options > div:last-child { padding-right: 0; border-right: 0; }
.ai-delivery-options > div:first-child { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ai-delivery-options > div:first-child > small { grid-column: 1 / -1; }
.ai-delivery-options button { appearance: none; font-family: var(--font-body); }
.ai-delivery-options > div:first-child button { display: flex; gap: 12px; align-items: center; min-height: 84px; padding: 14px; border: 1px solid #cbd0ca; border-radius: 8px; background: var(--white); color: var(--text); text-align: left; cursor: pointer; transition: border-color .25s, box-shadow .25s, transform .25s; }
.ai-delivery-options > div:first-child button:hover, .ai-delivery-options > div:first-child button.is-active { border-color: #aabe00; box-shadow: 0 0 0 2px rgba(232,255,56,.35); transform: translateY(-2px); }
.ai-delivery-options svg { width: 27px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ai-delivery-options button span, .ai-delivery-options button strong, .ai-delivery-options button small { display: block; }
.ai-delivery-options button strong { margin-bottom: 4px; }
.ai-delivery-options button small { color: var(--muted); font-size: 10px; }
.ai-receiver label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.ai-receiver input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #cbd0ca; border-radius: 6px; color: var(--text); font: 500 12px var(--font-body); }
.ai-receiver button { width: 100%; height: 42px; margin-top: 8px; border: 0; border-radius: 6px; background: var(--ink); color: var(--white); font: 700 11px var(--font-body); cursor: pointer; }
.ai-receiver p { min-height: 14px; margin: 7px 0 0; color: #5e6d00; font-size: 10px; }
.ai-delivery-flow ol { display: grid; grid-template-columns: repeat(4, 1fr); margin: 28px 0 0; padding: 0; list-style: none; }
.ai-delivery-flow li { position: relative; color: #8b928c; font-size: 9px; text-align: center; }
.ai-delivery-flow li::before { content: ""; position: absolute; z-index: 0; top: 12px; left: -50%; width: 100%; height: 2px; background: #d8dcd7; }
.ai-delivery-flow li:first-child::before { display: none; }
.ai-delivery-flow i { position: relative; z-index: 1; display: grid; place-items: center; width: 25px; height: 25px; margin: 0 auto 10px; border: 2px solid #cbd0ca; border-radius: 50%; background: var(--white); color: var(--ink); font-style: normal; }
.ai-delivery-flow .is-done, .ai-delivery-flow .is-active { color: var(--text); font-weight: 600; }
.ai-delivery-flow .is-done i, .ai-delivery-flow .is-active i { border-color: var(--acid); background: var(--acid); }
.ai-delivery-flow .is-active::before { background: var(--acid); }

.ai-reports { padding: var(--section) 0; background: var(--white); }
.ai-reports-layout { display: grid; grid-template-columns: .52fr 1.48fr; gap: 6vw; align-items: start; }
.ai-reports-copy { position: sticky; top: 130px; }
.ai-reports-copy p:last-child { max-width: 430px; color: var(--muted); font: 400 17px/1.7 var(--font-body); }
.ai-report-panel { padding: 28px; border: 1px solid #ced2cd; border-radius: 15px; background: #f8f9f6; box-shadow: 0 24px 60px rgba(6,8,7,.07); }
.ai-report-filters { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; }
.ai-report-filters label { color: var(--muted); font: 600 10px/1 var(--font-body); }
.ai-report-filters select { width: 100%; height: 42px; margin-top: 7px; padding: 0 32px 0 10px; border: 1px solid #cbd0ca; border-radius: 5px; background: var(--white); color: var(--text); font: 500 11px var(--font-body); }
.ai-report-filters button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 1px solid var(--text); border-radius: 5px; background: transparent; color: var(--text); font: 700 11px var(--font-body); cursor: pointer; }
.ai-report-filters svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ai-report-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin: 26px 0; padding: 22px 0; border-top: 1px solid #d9ddd8; border-bottom: 1px solid #d9ddd8; }
.ai-report-summary > div { padding: 0 22px; border-right: 1px solid #d9ddd8; }
.ai-report-summary > div:first-child { padding-left: 0; }
.ai-report-summary > div:last-child { border-right: 0; }
.ai-report-summary small, .ai-report-summary span { display: block; color: var(--muted); font-size: 10px; }
.ai-report-summary strong { display: block; margin: 6px 0 2px; font: 700 clamp(25px, 2.5vw, 38px)/1 var(--font-display); }
.ai-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.ai-charts article { min-width: 0; }
.ai-charts h3 { margin-bottom: 18px; font: 700 11px/1 var(--font-body); }
.ai-bars { display: flex; align-items: flex-end; gap: 7px; height: 130px; padding: 10px 5px 0; border-bottom: 1px solid #cfd4ce; background: repeating-linear-gradient(to top, transparent 0 31px, #e4e7e3 32px 33px); }
.ai-bars i { flex: 1; height: var(--bar); min-width: 5px; background: var(--cyan); border-radius: 3px 3px 0 0; transform: scaleY(0); transform-origin: bottom; animation: aiBarIn .8s var(--ease) forwards; animation-delay: var(--delay); }
.ai-charts article:nth-child(2) .ai-bars i { background: var(--acid); }
.ai-charts article:nth-child(3) .ai-bars i { background: var(--text); }
.ai-report-status { min-height: 15px; margin: 12px 0 -4px; color: #277c84; font-size: 10px; text-align: right; }

.ai-governance { padding: 100px 0; background: var(--ink); color: var(--white); }
.ai-governance-grid { display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); gap: 0; }
.ai-governance-grid > div { padding-right: 48px; }
.ai-governance h2 { margin-top: 13px; color: var(--white); font-size: clamp(38px, 3.5vw, 60px); }
.ai-governance-grid > div > p:last-child { color: #9ea49f; line-height: 1.6; }
.ai-governance article { padding: 10px 32px; border-left: 1px solid rgba(255,255,255,.2); }
.ai-governance article i { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 24px; color: var(--cyan); }
.ai-governance article svg { width: 44px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ai-governance article h3 { font: 700 20px/1.15 var(--font-display); }
.ai-governance article p { color: #9ea49f; font-size: 13px; line-height: 1.6; }

.ai-implementation { padding: var(--section) 0; background: var(--white); }
.ai-implementation-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.ai-implementation-track::before { content: ""; position: absolute; top: 26px; right: 10%; left: 10%; height: 1px; background: rgba(56,214,220,.65); }
.ai-implementation-track li { position: relative; z-index: 1; padding: 0 clamp(20px, 3vw, 48px); border-right: 1px solid var(--line); }
.ai-implementation-track li:last-child { border-right: 0; }
.ai-implementation-track li > span { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 28px; border: 10px solid #e4f8f9; border-radius: 50%; background: var(--cyan); color: var(--white); font: 700 13px/1 var(--font-display); box-sizing: border-box; }
.ai-implementation-track h3 { font: 700 22px/1.15 var(--font-display); }
.ai-implementation-track p { color: var(--muted); font-size: 13px; line-height: 1.65; }

.ai-diagnostic { padding: var(--section) 0; background: var(--ink); color: var(--white); }
.ai-diagnostic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; align-items: center; }
.ai-diagnostic h2 { color: var(--white); }
.ai-diagnostic-copy > p:last-of-type { max-width: 580px; color: #aeb4af; font: 400 17px/1.7 var(--font-body); }
.ai-diagnostic-copy > a { display: inline-block; margin-top: 24px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.3); color: var(--white); font-weight: 600; }
.ai-diagnostic-copy > a span { color: var(--acid); }
.ai-diagnostic-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 30px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(255,255,255,.03); }
.ai-diagnostic-form .is-wide { grid-column: 1 / -1; }
.ai-diagnostic-form label { display: block; margin-bottom: 8px; color: #cbd0cb; font: 600 11px/1 var(--font-body); }
.ai-diagnostic-form input, .ai-diagnostic-form select { width: 100%; height: 51px; padding: 0 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; background: #0c100e; color: var(--white); font: 500 13px var(--font-body); }
.ai-diagnostic-form select { padding-right: 34px; }
.ai-diagnostic-form input:focus, .ai-diagnostic-form select:focus { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ai-diagnostic-form .button { border: 0; cursor: pointer; }
.ai-form-status { margin: -4px 0 0; color: #8f9690; font-size: 11px; }
.ai-footer { background: #020302; }

@keyframes aiPulse { 0%,100% { opacity: .45; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes aiFlow { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes aiWave { to { transform: translateX(-200px); } }
@keyframes aiTrack { from { transform: translateX(0); } to { transform: translateX(calc(86vw - 150px)); } }
@keyframes aiBarIn { to { transform: scaleY(1); } }

@media (max-width: 1240px) {
  .ai-hero-grid { grid-template-columns: minmax(460px, .95fr) minmax(500px, 1.05fr); gap: 34px; }
  .ai-hero-copy h1 { font-size: clamp(52px, 5vw, 64px); }
  .ai-flow-track { overflow-x: auto; grid-template-columns: repeat(7, 170px); margin-right: calc(var(--gutter) * -1); padding-bottom: 20px; }
  .ai-flow-track::before { right: auto; width: 1060px; }
  .ai-operations-grid { grid-template-columns: 1fr 1fr; }
  .ai-operations-grid > section:last-child { grid-column: 1 / -1; }
  .ai-reports-layout { grid-template-columns: .45fr 1.55fr; gap: 4vw; }
}

@media (max-width: 1000px) {
  .ai-header-cta { margin-left: auto; margin-right: 16px; }
  .ai-hero.hero { min-height: 0; padding-bottom: 120px; }
  .ai-hero-grid { grid-template-columns: 1fr; }
  .ai-hero-copy { max-width: 760px; }
  .ai-hero-copy h1 { max-width: 820px; font-size: clamp(58px, 9vw, 88px); }
  .ai-hero-visual { width: min(820px, 100%); }
  .ai-question-rail { grid-template-columns: repeat(3, 1fr); }
  .ai-question-rail p:nth-child(3) { border-right: 0; }
  .ai-question-rail p:nth-child(n+4) { margin-top: 28px; }
  .ai-split-heading, .ai-dark-heading { grid-template-columns: 1fr; gap: 24px; }
  .ai-complex-grid, .ai-alerts-grid, .ai-reports-layout, .ai-diagnostic-grid { grid-template-columns: 1fr; gap: 54px; }
  .ai-reports-copy { position: static; }
  .ai-continuity-title, .ai-logistics-heading { grid-template-columns: 48px 1fr; }
  .ai-continuity-title p, .ai-logistics-heading > p { grid-column: 2; }
  .ai-monitor { grid-template-columns: 1fr 1fr; }
  .ai-camera { grid-row: span 2; }
  .ai-event-time { border-top: 1px solid #d4d8d3; }
  .ai-logistics-board > header { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .ai-logistics-board > header > div:nth-child(2) { border-right: 0; }
  .ai-logistics-board > header > div:nth-child(3) { padding-left: 0; }
  .ai-delivery-options { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .ai-delivery-options > div:nth-child(2) { border-right: 0; }
  .ai-delivery-flow { grid-column: 1 / -1; padding-left: 0 !important; border-top: 1px solid #d7dbd6; padding-top: 28px !important; }
  .ai-governance-grid { grid-template-columns: 1fr 1fr; gap: 45px 0; }
  .ai-governance article:nth-of-type(2) { border-left: 0; }
}

@media (max-width: 900px) {
  .ai-page .main-nav { padding-top: 100px; }
  .ai-page .main-nav a { font-size: 27px; }
  .ai-header-cta { display: none; }
}

@media (max-width: 720px) {
  .ai-hero.hero { padding-top: 118px; }
  .ai-hero-copy h1 { font-size: clamp(50px, 14vw, 72px); }
  .ai-hero-lead { font-size: 17px; }
  .ai-hero .hero-actions { display: grid; }
  .ai-hero .button { width: 100%; }
  .ai-demo-body { grid-template-columns: 1fr; }
  .ai-warehouse-mini { display: grid; grid-template-columns: 1fr auto; align-items: center; border-top: 1px solid rgba(255,255,255,.13); border-left: 0; }
  .ai-warehouse-mini svg { display: none; }
  .ai-warehouse-mini > span { margin: 0; }
  .ai-machine-row { grid-template-columns: 40px 105px 1fr; }
  .ai-question-rail { grid-template-columns: 1fr 1fr; }
  .ai-question-rail p:nth-child(3) { border-right: 1px solid rgba(255,255,255,.18); }
  .ai-question-rail p:nth-child(even) { border-right: 0; }
  .ai-question-rail p:nth-child(n+3) { margin-top: 28px; }
  .ai-operations-grid { grid-template-columns: 1fr; }
  .ai-operations-grid > section:last-child { grid-column: auto; }
  .ai-continuity-title, .ai-logistics-heading { grid-template-columns: 1fr; gap: 12px; }
  .ai-continuity-title p, .ai-logistics-heading > p { grid-column: auto; }
  .ai-before-after { grid-template-columns: 1fr; }
  .ai-before-after > i { transform: rotate(90deg); }
  .ai-monitor { grid-template-columns: 1fr; }
  .ai-camera { grid-row: auto; min-height: 250px; border-radius: 15px 15px 0 0; }
  .ai-event, .ai-event-time { border-top: 1px solid #d4d8d3; border-left: 0; }
  .ai-logistics-board > header { grid-template-columns: 1fr; }
  .ai-logistics-board > header > div { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid #d7dbd6; }
  .ai-logistics-board > header > div:last-child { padding-bottom: 0; border-bottom: 0; }
  .ai-delivery-options { grid-template-columns: 1fr; }
  .ai-delivery-options > div { padding: 26px 0; border-right: 0; border-bottom: 1px solid #d7dbd6; }
  .ai-delivery-options > div:first-child { padding-top: 0; }
  .ai-delivery-options > div:last-child { border-bottom: 0; }
  .ai-delivery-flow { grid-column: auto; border-top: 0; }
  .ai-report-filters { grid-template-columns: 1fr 1fr; }
  .ai-report-filters button { justify-content: center; }
  .ai-charts { grid-template-columns: 1fr; gap: 32px; }
  .ai-governance-grid { grid-template-columns: 1fr; }
  .ai-governance-grid > div { padding-right: 0; }
  .ai-governance article, .ai-governance article:nth-of-type(2) { padding: 30px 0; border-top: 1px solid rgba(255,255,255,.2); border-left: 0; }
  .ai-implementation-track { grid-template-columns: 1fr 1fr; gap: 42px 0; }
  .ai-implementation-track::before { display: none; }
  .ai-implementation-track li:nth-child(2) { border-right: 0; }
}

@media (max-width: 520px) {
  .ai-hero-copy h1 { letter-spacing: -.055em; }
  .ai-hero-copy h1 span, .ai-hero-copy h1 em { white-space: normal; }
  .ai-demo-main { padding: 18px; }
  .ai-demo-header { padding: 0 18px; }
  .ai-machine-row { grid-template-columns: 38px 1fr; }
  .ai-machine-row .ai-wave, .ai-machine-row .ai-flat-line { display: none; }
  .ai-question-rail { grid-template-columns: 1fr; }
  .ai-question-rail p, .ai-question-rail p:not(:first-child), .ai-question-rail p:nth-child(3) { min-height: auto; margin-top: 24px; padding: 24px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .ai-flow-track { grid-template-columns: repeat(7, 150px); }
  .ai-variation-row { grid-template-columns: 1fr auto; }
  .ai-variation-row small, .ai-variation-row em { justify-self: start; }
  .ai-order-story header, .ai-order-total, .ai-order-story article, .ai-order-story footer { padding-right: 20px; padding-left: 20px; }
  .ai-before-after article > div:first-of-type { align-items: flex-start; flex-direction: column; }
  .ai-before-after article b { margin-left: 0; }
  .ai-delivery-options > div:first-child { grid-template-columns: 1fr; }
  .ai-report-panel { padding: 20px; }
  .ai-report-filters { grid-template-columns: 1fr; }
  .ai-report-summary { grid-template-columns: 1fr; gap: 18px; }
  .ai-report-summary > div, .ai-report-summary > div:first-child { padding: 0 0 18px; border-right: 0; border-bottom: 1px solid #d9ddd8; }
  .ai-report-summary > div:last-child { padding-bottom: 0; border-bottom: 0; }
  .ai-implementation-track { grid-template-columns: 1fr; }
  .ai-implementation-track li { padding: 0 0 28px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ai-diagnostic-form { grid-template-columns: 1fr; padding: 22px; }
  .ai-diagnostic-form .is-wide { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-live i, .ai-wave i, .ai-process-line i.is-active::after, .ai-flow-track::after { animation: none !important; }
  .ai-bars i { transform: scaleY(1); animation: none !important; }
}