.subpage--it { --it-space:80px; --it-soft:#ecefe8; --it-card-gap:24px; }
.subpage--it .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.it-hero { padding-bottom:42px; overflow:hidden; }
.it-hero .breadcrumbs { padding-bottom:30px; }
.it-hero-grid { display:grid; grid-template-columns: .88fr 1.12fr; align-items:center; gap:8px; }
.it-hero-copy { position:relative; z-index:2; }
.it-hero .eyebrow { font-size:10px; letter-spacing:1.5px; }
.it-hero h1 { font-size:clamp(46px,4.15vw,62px); line-height:1.05; letter-spacing:-2.5px; }
.it-hero h1>span { display:block; }
.it-hero-subtitle { max-width:440px; margin-top:26px; color:var(--green); font-size:21px; line-height:1.35; font-weight:550; letter-spacing:-.3px; }
.it-hero-lead { max-width:470px; margin-top:18px; font-size:16px; line-height:1.7; color:var(--muted); }
.it-hero .subpage-actions { margin-top:25px; }
.it-hero .button { font-size:13px; }
.it-hero-call { display:flex; flex-wrap:wrap; align-items:center; gap:9px 20px; margin-top:19px; }
.it-hero-call>a { font-size:19px; font-weight:650; color:var(--green); white-space:nowrap; }
.it-hero-call>a:hover { text-decoration:underline; text-underline-offset:4px; }
.it-hero-call>a>span { color:var(--red); margin-right:5px; }
.it-hero-call>span { font-size:11px; color:var(--muted); }
.it-scene { margin:0 -25px 0 -18px; min-width:0; position:relative; }
.it-scene-stage { position:relative; width:100%; aspect-ratio:3/2; }
.it-scene-image { width:100%; height:auto; display:block; }
.it-scene-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.it-routes { opacity:0; stroke:var(--red); stroke-width:3; stroke-dasharray:6 13; }
.it-routes path { opacity:0; }
.it-scene[data-phase="0"] #it-route-network,.it-scene[data-phase="1"] #it-route-document,.it-scene[data-phase="1"] #it-route-backup,.it-scene[data-phase="2"] #it-route-sensor { opacity:.65; }
.it-scene.is-animated .it-routes { opacity:1; }
.it-server-lights { opacity:0; fill:#aaffd5; }
.it-packets>*,.it-moving-document { opacity:0; }
.it-sensor-alert,.it-backup-check { opacity:0; }
.it-scene-label { position:absolute; z-index:3; display:flex; align-items:center; gap:9px; padding:14px 16px; background:#fff; border:1px solid #e4e7df; border-radius:10px; box-shadow:0 8px 24px #173f390d; font-size:13px; font-weight:600; color:var(--green); text-decoration:none; transition:border-color .3s,box-shadow .3s; white-space:nowrap; }
.it-label-dot { width:6px; height:6px; border-radius:50%; background:var(--red); flex-shrink:0; }
.it-scene-label .arrow { font-size:14px; margin-left:6px; color:var(--green-link); }
.it-scene-label--servers { left:41%; top:1%; }
.it-scene-label--systems { left:0; top:31%; }
.it-scene-label--iot { right:0; top:29%; }
.it-scene-label:hover { border-color:var(--green-link); }
.it-scene[data-phase="0"] .it-scene-label--servers,.it-scene[data-phase="1"] .it-scene-label--systems,.it-scene[data-phase="2"] .it-scene-label--iot { border-color:var(--red); box-shadow:0 0 0 4px #fa203a10,0 8px 24px #173f3910; }
.it-reading,.it-task,.it-backup-label { position:absolute; z-index:2; pointer-events:none; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 5px 15px #173f390d; opacity:0; }
.it-reading { right:2%; top:45%; padding:8px 11px; }
.it-reading>span { font-size:9px; color:var(--muted); display:block; }
.it-reading strong { display:block; margin-top:2px; font-size:20px; line-height:1.2; color:var(--green); }
.it-reading small { font-size:13px; }
.it-reading.is-alert strong { color:var(--red-ink); }
.it-task { left:12%; top:42%; display:flex; align-items:center; gap:7px; padding:9px 12px; color:var(--red-ink); font-size:11px; font-weight:600; }
.it-task-mark { background:var(--red); color:#fff; border-radius:50%; width:15px; height:15px; display:grid; place-items:center; }
.it-backup-label { right:10%; top:76%; padding:8px 10px; font-size:11px; color:var(--green); }
.it-backup-label>span { margin-left:8px; }
.it-scene figcaption { padding:0 18px 0 28px; }
.it-scene-phases { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:0; margin:0; list-style:none; }
.it-scene-phases li { border-top:2px solid var(--line); padding-top:12px; color:var(--muted); font-size:11px; font-weight:550; transition:color .2s,border-color .2s; }
.it-scene-phases li>span { color:var(--red-ink); margin-right:7px; font-size:9px; }
.it-scene-phases li.is-current { color:var(--green); border-color:var(--red); }
.it-scene-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; margin-top:4px; }
.it-scene-bottom>p { color:var(--muted); font-size:10px; }
.it-motion-toggle { background:none; border:0; min-height:44px; padding:8px 0 8px 10px; flex-shrink:0; color:var(--green-link); font-size:10px; text-decoration:underline; text-underline-offset:3px; }
.it-motion-toggle[hidden] { display:none; }
.it-section-nav { border-block:1px solid var(--line); }
.it-section-nav .container { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 24px; }
.it-section-nav a { display:flex; align-items:center; min-height:62px; font-size:13px; font-weight:550; color:var(--green-link); }
.it-section-nav a:hover { text-decoration:underline; text-underline-offset:5px; }
.it-section { padding-block:var(--it-space); }
.it-section-heading { display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:end; margin-bottom:38px; }
.subpage--it main h2 { font-size:clamp(31px,3.1vw,44px); line-height:1.1; letter-spacing:-1.3px; }
.it-section-heading>p { color:var(--muted); font-size:16px; line-height:1.7; }
.it-section-heading>.text-link { justify-self:end; }
.it-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block:1px solid var(--line); }
.it-modes article { padding:28px 30px 28px 0; }
.it-modes article+article { border-left:1px solid var(--line); padding-left:30px; }
.it-modes article:last-child { padding-right:0; }
.it-number { display:block; color:var(--red-ink); font-size:11px; letter-spacing:1px; margin-bottom:18px; }
.it-modes h3 { font-size:22px; line-height:1.25; letter-spacing:-.5px; }
.it-modes p { font-size:14px; line-height:1.7; color:var(--muted); margin-top:13px; }
.it-scope { padding-top:0; }
.it-scope-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--it-card-gap); }
.it-scope-grid article { border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:28px; display:flex; flex-direction:column; scroll-margin-top:28px; }
.it-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.it-icon { width:31px; height:33px; stroke:var(--green); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.it-card-top>a { display:grid; place-items:center; width:44px; height:44px; margin:-8px -10px -8px 0; color:var(--green-link); border-radius:50%; }
.it-card-top>a:hover { background:var(--it-soft); }
.it-scope h3 { font-size:22px; letter-spacing:-.5px; line-height:1.22; }
.it-scope-grid article>p { font-size:14px; line-height:1.7; color:var(--muted); margin-top:16px; }
.it-scope-details { padding:0; list-style:none; margin:18px 0 20px; }
.it-scope-details li { display:flex; gap:8px; font-size:13px; line-height:1.6; color:var(--green-link); margin-top:8px; }
.it-scope-details li:before { content:"—"; color:var(--red-ink); }
.it-tags { list-style:none; padding:0; margin:auto 0 0; display:flex; flex-wrap:wrap; gap:6px; }
.it-tags li { font-size:10px; color:var(--green); background:var(--it-soft); padding:5px 8px; border-radius:4px; }
.it-scope-grid article>.it-card-note { font-size:11px; line-height:1.6; border-top:1px solid var(--line); padding-top:14px; }
.it-scope-grid .text-link { font-size:12px; margin-top:19px; }
.it-automation { background:var(--green); color:#fff; }
.it-automation .eyebrow { color:#b5d4c8; }
.it-ai-top { display:grid; grid-template-columns:1.1fr .9fr; gap:90px; align-items:center; }
.it-ai-top h2 { font-size:clamp(35px,3.5vw,49px); }
.it-ai-lead { max-width:530px; margin-top:24px; line-height:1.75; color:#d1e0d8; font-size:16px; }
.it-workflow { border:1px solid #70948a; padding:23px 26px; border-radius:var(--radius); }
.it-workflow>.eyebrow { font-size:9px; letter-spacing:1.3px; margin-bottom:17px; }
.it-workflow ol { list-style:none; padding:0; margin:0; }
.it-workflow li { position:relative; display:flex; gap:18px; align-items:center; padding:13px 0; }
.it-workflow li+li { border-top:1px solid #ffffff20; }
.it-workflow li>span:first-child { font-size:10px; color:#b8d6c9; }
.it-workflow strong { font-size:15px; font-weight:500; }
.it-flow-arrow { margin-left:auto; color:#b8d6c9; }
.it-ai-examples { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:35px; margin-top:48px; }
.it-ai-examples article { border-top:1px solid #70948a; padding-top:24px; }
.it-ai-examples h3 { font-size:21px; letter-spacing:-.5px; }
.it-ai-examples p { color:#d1e0d8; font-size:14px; line-height:1.75; margin-top:14px; }
.it-ai-boundary { margin-top:30px; padding-top:23px; border-top:1px solid #70948a; font-size:12px; line-height:1.7; color:#c0d8cc; max-width:1000px; }
.it-ai-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px 34px; margin-top:28px; }
.it-ai-actions .text-link { color:#fff; font-size:13px; }
.it-ai-actions .button { font-size:13px; }
.it-process ol { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; margin:40px 0 0; }
.it-process li { display:flex; flex-direction:column; border-top:1px solid var(--line); padding-top:19px; }
.it-process-number { display:flex; justify-content:space-between; color:var(--red-ink); font-size:12px; margin-bottom:21px; }
.it-process h3 { font-size:20px; letter-spacing:-.5px; line-height:1.3; }
.it-process li>p { font-size:14px; color:var(--muted); line-height:1.7; margin:13px 0 20px; }
.it-process-result { display:block; margin-top:auto; font-size:11px; color:var(--green); font-weight:600; border-left:2px solid var(--red); padding-left:10px; }
.it-cooperation { padding-top:10px; }
.it-cooperation-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:75px; }
.it-cooperation article { border-top:1px solid var(--line); padding:22px 0; }
.it-cooperation article h3 { font-size:19px; }
.it-cooperation article p { font-size:14px; line-height:1.75; color:var(--muted); margin-top:10px; }
.it-prepare { align-self:start; border-radius:var(--radius); background:var(--it-soft); padding:32px; }
.it-prepare h3 { font-size:23px; letter-spacing:-.5px; }
.it-prepare ul { list-style:none; padding:0; margin:24px 0; display:grid; gap:16px; }
.it-prepare li { display:flex; gap:12px; font-size:14px; color:var(--green); line-height:1.6; }
.it-prepare li>span { color:var(--green-link); }
.it-prepare>p { font-size:12px; color:#53635b; line-height:1.7; }
.it-prepare>.button { margin-top:22px; font-size:12px; padding-inline:18px; }
.it-faq { border-top:1px solid var(--line); padding-block:64px; }
.subpage--it .contact { padding-block:72px; }
@media(min-width:1600px) { .it-scene { margin-right:-45px; } }
@media(max-width:1100px) { .it-hero-grid { grid-template-columns:.9fr 1.1fr; } .it-hero h1 { font-size:44px; letter-spacing:-1.9px; } .it-hero .eyebrow { font-size:9px; letter-spacing:1px; } .it-hero-subtitle { font-size:19px; } .it-hero-lead { font-size:15px; } .it-scene-label { padding:12px; font-size:11px; gap:6px; } .it-scope-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .it-ai-top,.it-cooperation-grid { gap:40px; } }
@media(max-width:900px) { .it-hero-grid { grid-template-columns:1fr; gap:38px; } .it-hero-copy { max-width:680px; } .it-hero h1 { font-size:clamp(45px,7vw,61px); letter-spacing:-2.2px; } .it-hero h1>span:nth-child(1),.it-hero h1>span:nth-child(2) { display:inline; } .it-hero h1>span:nth-child(1):after { content:" "; } .it-hero-subtitle { max-width:590px; font-size:22px; } .it-hero-lead { max-width:620px; font-size:16px; } .it-scene { width:100%; max-width:750px; justify-self:center; margin:0; } .it-scene-label { padding:14px 16px; font-size:13px; } .it-section-heading { gap:30px; } .it-modes article { padding-right:20px; } .it-modes article+article { padding-left:20px; } .it-modes h3 { font-size:19px; } .it-section-nav .container { justify-content:flex-start; gap:0 24px; } .it-section-nav a { min-height:48px; } .it-process ol { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:30px; } }
@media(max-width:650px) { .subpage--it { --it-space:52px; --it-card-gap:16px; } .it-hero { padding-bottom:25px; } .it-hero .breadcrumbs { padding-block:23px 29px; } .it-hero h1 { font-size:clamp(34px,9.2vw,52px); letter-spacing:-1.5px; line-height:1.09; } .it-hero h1>span:nth-child(1),.it-hero h1>span:nth-child(2) { display:block; } .it-hero h1>span:nth-child(1):after { content:none; } .it-hero-subtitle { font-size:20px; margin-top:21px; } .it-hero-lead { font-size:15px; margin-top:15px; } .it-hero-call { gap:8px 15px; } .it-hero-call>span { font-size:11px; } .it-hero .subpage-actions { margin-top:22px; } .it-hero-grid { gap:36px; } .it-scene { width:calc(100% + 20px); max-width:none; } .it-scene-label { font-size:10px; padding:10px 9px; min-height:44px; gap:5px; border-radius:7px; } .it-scene-label .arrow { font-size:12px; margin-left:2px; } .it-scene-label--servers { top:-3%; left:38%; } .it-scene-label--systems { top:25%; left:0; } .it-scene-label--iot { top:27%; } .it-reading { top:52%; padding:5px 8px; } .it-reading>span { font-size:8px; } .it-reading strong { font-size:16px; } .it-reading small { font-size:10px; } .it-task { top:48%; left:4%; font-size:9px; padding:7px; } .it-backup-label { font-size:9px; padding:6px 8px; top:79%; } .it-scene figcaption { padding:10px 10px 0; } .it-scene-phases { gap:8px; } .it-scene-phases li { font-size:10px; line-height:1.4; } .it-scene-phases li>span { display:block; margin-bottom:5px; } .it-scene-bottom { align-items:center; gap:8px; } .it-scene-bottom>p { font-size:9px; max-width:175px; line-height:1.5; } .it-motion-toggle { font-size:9px; padding-left:0; } .it-section-nav .container { gap:0 22px; padding-block:8px; } .it-section-nav a { font-size:12px; min-height:40px; } .it-section-heading { grid-template-columns:1fr; gap:21px; margin-bottom:27px; } .it-section-heading>p { font-size:15px; } .it-section-heading>.text-link { justify-self:start; } .subpage--it main h2 { font-size:32px; letter-spacing:-.9px; } .it-modes { grid-template-columns:1fr; } .it-modes article,.it-modes article+article { padding:25px 0; border-left:0; } .it-modes article+article { border-top:1px solid var(--line); } .it-number { margin-bottom:12px; } .it-modes h3 { font-size:22px; } .it-scope-grid { grid-template-columns:1fr; } .it-scope-grid article { padding:24px; } .it-ai-top { grid-template-columns:1fr; gap:30px; } .it-ai-lead { font-size:15px; margin-top:20px; } .it-ai-examples { grid-template-columns:1fr; gap:25px; margin-top:33px; } .it-ai-actions { gap:24px; } .it-ai-actions .text-link { line-height:1.6; } .it-process ol { grid-template-columns:1fr; gap:27px; margin-top:28px; } .it-process h3 { font-size:22px; } .it-process-number { margin-bottom:12px; } .it-cooperation { padding-top:0; } .it-cooperation-grid { grid-template-columns:1fr; gap:20px; } .it-prepare { padding:24px; } .it-faq,.subpage--it .contact { padding-block:48px; } }
@media(prefers-reduced-motion:reduce) { .it-scene * { transition:none!important; animation:none!important; } }