:root {
  --ink: #171716;
  --paper: #f5f3ed;
  --acid: #d4fb54;
  --line: #cfcdc6;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }

.site-header {
  align-items: center; background: #101918; border-bottom: 1px solid #31423e; color: #d6ede5; display: flex;
  height: 70px; justify-content: space-between; padding: 0 clamp(24px, 4vw, 68px); position: relative; z-index: 5;
}
.logo { font-size: 22px; font-weight: 800; letter-spacing: -.09em; }
.logo span { font-family: var(--mono); font-size: 9px; letter-spacing: 0; margin-left: 2px; vertical-align: top; }
.navigation { display: flex; gap: 3px; margin-left: 105px; }
.navigation a, .header-status, footer p, .socials a { font-family: var(--mono); font-size: 10px; }
.navigation a { border: 1px solid transparent; color: #9ab0a8; padding: 8px 10px; transition: background .2s, color .2s; }
.navigation a:hover { background: #1e2c29; border-color: #31423e; color: var(--acid); }
.header-status { align-items: center; color: #9ab0a8; display: flex; gap: 7px; }
.header-status i { animation: pulse 1.8s infinite; background: var(--acid); border-radius: 50%; height: 6px; width: 6px; }
.after-hours-duty { background: #4b3520; border: 1px solid #e4a44d; color: #f4d49a; cursor: pointer; font-family: var(--mono); font-size: 8px; letter-spacing: .04em; margin-left: auto; margin-right: 24px; padding: 8px 10px; }
.after-hours-duty::before { background: #e4a44d; border-radius: 50%; content: ""; display: inline-block; height: 5px; margin-right: 6px; width: 5px; }
.menu-toggle { display: none; }

.hero {
  min-height: calc(100vh - 70px); overflow: hidden;
}
.hero-copy { align-self: center; max-width: 380px; padding: 60px 35px 92px 0; }
.eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .02em; margin: 0 0 28px; text-transform: uppercase; }
h1, h2 { font-size: clamp(49px, 6.25vw, 108px); font-weight: 600; letter-spacing: -.075em; line-height: .92; margin: 0; }
em { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.09em; }
.intro { font-size: 16px; line-height: 1.6; margin: 42px 0 31px; max-width: 390px; }
.text-link { border-bottom: 1px solid var(--ink); display: inline-block; font-family: var(--mono); font-size: 11px; padding-bottom: 6px; }
.text-link span { font-size: 15px; margin-left: 12px; }
.hero-art { background: #101918; color: #d6ede5; display: grid; font-family: var(--mono); grid-template-columns: 104px 1fr; grid-template-rows: 48px 1fr 35px; min-height: 720px; overflow: hidden; position: relative; }
.scada-topbar { align-items: center; border-bottom: 1px solid #31423e; display: flex; font-size: 9px; gap: 9px; grid-column: 1 / -1; justify-content: flex-start; letter-spacing: .04em; padding: 0 18px; }
.system-dot { animation: pulse 1.8s infinite; background: var(--acid); border-radius: 50%; height: 7px; width: 7px; }
.scada-clock { color: #8caaa1; margin-left: auto; }
.scada-sidebar { border-right: 1px solid #31423e; display: flex; flex-direction: column; font-size: 9px; gap: 10px; letter-spacing: .04em; padding: 29px 10px; }
.scada-sidebar a, .scada-sidebar button, .scada-sidebar span { color: #779087; padding: 7px 5px; }
.scada-sidebar button { background: transparent; border: 0; cursor: pointer; font-family: var(--mono); font-size: 9px; letter-spacing: .04em; text-align: left; }
.scada-sidebar a:hover, .scada-sidebar button:hover, .scada-sidebar .active { background: #1d2c28; color: var(--acid); }
.scada-sidebar b { background: var(--acid); border-radius: 10px; color: #101918; float: right; font-size: 8px; padding: 1px 4px; }
.scada-dashboard { min-width: 0; padding: 26px clamp(18px, 3vw, 42px) 19px; }
.scada-screen { display: none; }.scada-screen.active { display: block; animation: screen-in .28s ease-out; }
.dashboard-heading { align-items: end; display: flex; justify-content: space-between; }
.dashboard-heading p, .trend-title, .process-label { color: #8caaa1; font-size: 8px; letter-spacing: .07em; margin: 0; }
.dashboard-heading h2 { font-family: var(--mono); font-size: clamp(17px, 1.8vw, 25px); font-weight: 500; letter-spacing: -.06em; line-height: 1.2; margin-top: 5px; }
.dashboard-heading h2 span { color: var(--acid); font-size: 8px; letter-spacing: .08em; margin-left: 8px; vertical-align: middle; }
.dashboard-metrics { display: flex; gap: 18px; }
.dashboard-metrics span { color: #8caaa1; font-size: 8px; }
.dashboard-metrics strong { color: #d6ede5; display: block; font-size: 12px; font-weight: 400; margin-top: 3px; }
.process-canvas { border: 1px solid #31423e; height: 47%; margin-top: 22px; min-height: 190px; overflow: hidden; position: relative; }
.front-security-overview { height: auto; min-height: 280px; padding: 16px; }.front-security-title { align-items: center; display: flex; justify-content: space-between; position: relative; z-index: 1; }.front-security-title span { color: #8caaa1; font-size: 8px; letter-spacing: .06em; }.front-security-title b { background: #213d32; color: #6ce6b6; font-size: 7px; font-weight: 400; padding: 5px 6px; }.front-security-layout { align-items: center; display: grid; gap: 15px; grid-template-columns: .62fr 1.2fr 1fr; margin-top: 28px; position: relative; z-index: 1; }.front-threat, .front-machine, .front-line { background: #172722; border: 1px solid #3e6056; min-width: 0; padding: 12px 8px; text-align: center; }.front-threat span, .front-machine span, .front-line span { color: #8caaa1; display: block; font-size: 7px; }.front-threat strong, .front-machine strong, .front-line strong { color: #d6ede5; display: block; font-size: 10px; font-weight: 400; margin: 6px 0 4px; }.front-threat { border-color: #a85a53; position: relative; }.front-threat strong { color: #ff9b8d; }.front-threat i { background: #d6514f; border-radius: 50%; color: #fff1ed; font-size: 10px; font-style: normal; height: 17px; line-height: 17px; position: absolute; right: -7px; top: -8px; width: 17px; }.front-protected-line { align-items: center; display: flex; gap: 10px; }.security-stack { align-items: center; display: flex; flex-direction: column; gap: 3px; }.security-stack span { background: #233832; border: 1px solid #4b7468; color: #c4d9d0; font-size: 7px; padding: 6px 5px; }.security-stack i { background: #6ce6b6; height: 8px; width: 1px; }.security-stack .front-firewall { background: #213d32; border-color: #6ce6b6; color: #6ce6b6; }.vismatik-machine { border-color: #6ce6b6; flex: 1; }.vismatik-machine small, .front-line small { color: #6ce6b6; font-size: 7px; }.front-unprotected-lines { display: grid; gap: 9px; }.front-line { border-color: #756347; position: relative; }.front-line::before { background: #d6514f; content: ""; height: 1px; left: -18px; position: absolute; top: 50%; width: 18px; }.front-line .stopped-text { display: block; left: 0; opacity: 0; position: absolute; right: 0; top: 18px; }.front-line.line-one { animation: line-one-fails 0s 3.2s forwards; }.front-line.line-two { animation: line-two-fails 0s 6.2s forwards; }.front-line.line-one .running-text { animation: text-hide 0s 3.2s forwards; }.front-line.line-two .running-text { animation: text-hide 0s 6.2s forwards; }.front-line.line-one .stopped-text { animation: text-show 0s 3.2s forwards; }.front-line.line-two .stopped-text { animation: text-show 0s 6.2s forwards; }.front-alarm-popup { align-items: center; background: #39241f; border: 1px solid #d6514f; bottom: 15px; display: flex; gap: 9px; left: 16px; opacity: 0; padding: 9px; position: absolute; right: 16px; transform: translateY(12px); z-index: 2; }.front-alarm-popup strong { color: #ffd0c5; font-size: 8px; }.front-alarm-popup p { color: #e5b6a8; font-family: var(--sans); font-size: 10px; line-height: 1.35; margin: 3px 0 0; }.front-alarm-bell { align-items: center; animation: alarm-pulse 1s infinite; background: #d6514f; border-radius: 50%; color: #fff1ed; display: flex; font-size: 13px; height: 24px; justify-content: center; width: 24px; }.front-alarm-popup button, .front-alarm-popup a { background: #e4a44d; border: 0; color: #1b1811; cursor: pointer; font-family: var(--mono); font-size: 7px; padding: 7px; text-align: center; white-space: nowrap; }.front-alarm-popup a { background: #293f38; color: #c9e6d8; }.front-security-overview:not(.secured) .front-alarm-popup { animation: front-alarm-show .35s 7s forwards; }.front-security-overview.secured .front-line { animation: none; border-color: #4d806f; }.front-security-overview.secured .front-line .running-text { display: block; opacity: 1; }.front-security-overview.secured .front-line .stopped-text { display: none; }.front-security-overview.secured .front-alarm-popup { background: #213d32; border-color: #6ce6b6; opacity: 1; transform: none; }.front-security-overview.secured .front-alarm-bell { background: #6ce6b6; color: #102019; }.front-security-overview.secured .front-alarm-popup strong { color: #d4f1e3; }.front-security-overview.secured .front-alarm-popup p { color: #b5d6c7; }.front-security-overview.secured .front-firewall-action { background: #6ce6b6; }.front-security-overview.secured .front-firewall-action { font-size: 0; }.front-security-overview.secured .front-firewall-action::after { content: "FIREWALL AKTIV"; font-size: 7px; }
.grid-overlay { background-image: linear-gradient(#23312e 1px, transparent 1px), linear-gradient(90deg, #23312e 1px, transparent 1px); background-size: 26px 26px; inset: 0; opacity: .6; position: absolute; }
.machine, .pipe, .process-label { position: absolute; z-index: 1; }
.tank { border: 2px solid #a4c4b9; border-radius: 9px 9px 2px 2px; height: 43%; top: 24%; width: 15%; }
.tank i { background: #6ce6b6; bottom: 0; display: block; height: 64%; left: 0; opacity: .75; position: absolute; right: 0; }
.tank span, .tank small { background: #101918; font-size: 9px; left: 50%; padding: 3px 5px; position: absolute; transform: translateX(-50%); white-space: nowrap; }
.tank span { top: -25px; }.tank small { bottom: -26px; color: var(--acid); }
.tank-left { left: 9%; }.tank-right { right: 9%; }.tank-right i { height: 82%; }
.pipe { background: #a4c4b9; height: 3px; top: 45%; }
.pipe::before, .pipe::after { background: #6ce6b6; border-radius: 50%; content: ""; height: 8px; position: absolute; top: -2px; width: 8px; }
.pipe::before { animation: flow 2s linear infinite; }.pipe::after { animation: flow 2s .9s linear infinite; }
.pipe-one { left: 24%; width: 18%; }.pipe-two { right: 24%; width: 18%; }
.pump { border: 2px solid var(--acid); border-radius: 50%; height: 55px; left: calc(50% - 27px); top: calc(45% - 26px); width: 55px; }
.pump i { border: 1px solid #6ce6b6; border-radius: 50%; inset: 10px; position: absolute; }.pump i::after { background: #6ce6b6; content: ""; height: 1px; left: 50%; position: absolute; top: 50%; transform: rotate(45deg); width: 30px; }
.pump span { color: #d6ede5; font-size: 9px; left: 50%; position: absolute; top: 67px; transform: translateX(-50%); white-space: nowrap; }
.label-one { left: 10%; top: 12%; }.label-two { left: calc(50% - 18px); top: 12%; }.label-three { right: 11%; top: 12%; }
.hmi-controls { align-items: center; border: 1px solid #31423e; display: flex; gap: 6px; margin-top: 17px; padding: 8px; }
.hmi-controls > span { color: #8caaa1; font-size: 8px; letter-spacing: .06em; }
.hmi-controls .control-spacer { flex: 1; }
.hmi-button { background: #172521; border: 1px solid #3c514b; color: #9ab0a8; cursor: pointer; font-family: var(--mono); font-size: 8px; letter-spacing: .05em; padding: 7px 9px; }
.hmi-button:hover, .hmi-button.selected { background: #253c34; border-color: #6ce6b6; color: #d6ede5; }
.hmi-button.start-button { background: #bfe943; border-color: var(--acid); color: #101918; }
.hmi-button.start-button.is-stopped { background: #e4a44d; border-color: #e4a44d; }
.analytics-grid { display: grid; gap: 12px; grid-template-columns: .82fr 1.18fr; margin-top: 12px; }
.data-panel, .motor-panel { border: 1px solid #31423e; min-width: 0; padding: 11px; }
.panel-heading { align-items: center; color: #8caaa1; display: flex; font-size: 8px; justify-content: space-between; letter-spacing: .06em; }
.panel-heading b { background: #263f36; color: #6ce6b6; font-size: 7px; font-weight: 400; padding: 3px 5px; }
.panel-heading b.healthy { background: #213d32; }
.data-source { align-items: center; display: flex; gap: 8px; margin: 15px 0; }
.source-icon { align-items: center; background: #233832; border: 1px solid #497165; color: #6ce6b6; display: flex; font-size: 13px; height: 25px; justify-content: center; width: 25px; }
.data-source strong { display: block; font-size: 9px; font-weight: 400; }.data-source small { color: #779087; display: block; font-size: 7px; margin-top: 4px; }
.data-stat { border-top: 1px solid #31423e; display: grid; gap: 3px; padding-top: 9px; }.data-stat span, .data-stat small { color: #779087; font-size: 7px; letter-spacing: .05em; }.data-stat strong { color: #d6ede5; font-size: 14px; font-weight: 400; }
.motor-content { align-items: center; display: flex; gap: 12px; margin: 11px 0 10px; }
.motor-icon { align-items: center; background: #1b2c28; border: 1px solid #608a7d; display: flex; height: 37px; justify-content: center; position: relative; width: 58px; }.motor-icon::before, .motor-icon::after { background: #608a7d; content: ""; height: 10px; position: absolute; width: 3px; }.motor-icon::before { left: -4px; }.motor-icon::after { right: -4px; }.motor-icon i { background: #6ce6b6; height: 20px; margin: 1px; opacity: .75; width: 3px; }
.motor-stats { display: grid; gap: 6px; }.motor-stats span { color: #779087; font-size: 7px; }.motor-stats strong { color: #d6ede5; display: inline-block; font-size: 9px; font-weight: 400; margin-left: 4px; }
.vibration-row { align-items: center; border-top: 1px solid #31423e; display: flex; gap: 7px; padding-top: 8px; }.vibration-row span { color: #779087; font-size: 7px; }.vibration-row strong { font-size: 12px; font-weight: 400; margin-left: auto; }.vibration-row strong small { color: #779087; font-size: 7px; }.vibration-row em { color: #6ce6b6; font-family: var(--mono); font-size: 7px; font-style: normal; }
.vibration-chart { border-top: 1px solid #263834; height: 28px; margin-top: 7px; padding-top: 5px; }.vibration-chart svg { height: 100%; width: 100%; }.vibration-chart polyline { fill: none; stroke: #70c9f7; stroke-width: 2; }
.trend-panel { border: 1px solid #31423e; margin-top: 17px; padding: 12px 14px 8px; }
.trend-title { display: flex; justify-content: space-between; }.trend-title strong { color: var(--acid); font-size: 9px; font-weight: 400; }
.trend-chart { border-bottom: 1px solid #31423e; height: 45px; margin-top: 8px; position: relative; }.trend-chart i { border-top: 1px dashed #263834; display: block; height: 15px; }.trend-chart svg { height: 100%; inset: 0; overflow: visible; position: absolute; width: 100%; }.trend-chart polyline { fill: none; stroke: #6ce6b6; stroke-width: 2; }.trend-chart .trend-target { stroke: #e4a44d; stroke-dasharray: 4 4; stroke-width: 1; }
.service-code { border: 1px solid #31423e; color: #8caaa1; font-size: 8px; padding: 7px 9px; }
.service-layout { display: grid; gap: 16px; grid-template-columns: .78fr 1.22fr; margin-top: 30px; }
.service-copy { border: 1px solid #31423e; padding: 18px; }.service-copy p { font-family: var(--sans); font-size: 13px; line-height: 1.6; margin: 0; }
.service-list { border-top: 1px solid #31423e; display: grid; gap: 8px; margin-top: 22px; padding-top: 15px; }.service-list span { color: #8caaa1; font-size: 8px; letter-spacing: .05em; }.service-list span::before { color: #6ce6b6; content: "✓"; margin-right: 7px; }
.service-visual { background-color: #14211f; border: 1px solid #31423e; height: 265px; overflow: hidden; position: relative; }.visual-title { color: #8caaa1; font-size: 8px; left: 14px; letter-spacing: .06em; position: absolute; top: 13px; }
.protocol-panel { border: 1px solid #31423e; margin-top: 16px; padding: 12px; }.protocol-heading { color: #8caaa1; display: flex; font-size: 8px; justify-content: space-between; letter-spacing: .05em; }.protocol-heading b { background: #213d32; color: #6ce6b6; font-size: 7px; font-weight: 400; padding: 3px 5px; }.protocol-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; }.protocol-grid div { align-items: center; border-top: 1px solid #31423e; display: flex; gap: 7px; min-width: 0; padding: 10px 8px; }.protocol-grid div:nth-child(2) { border-left: 1px solid #31423e; }.protocol-grid div:last-child { grid-column: 1 / -1; }.protocol-grid span { color: #8caaa1; font-size: 7px; }.protocol-grid strong { color: #d6ede5; font-size: 9px; font-weight: 400; }.protocol-grid i { color: #e4a44d; font-size: 13px; font-style: normal; }.protocol-panel p { color: #8caaa1; font-family: var(--sans); font-size: 11px; margin: 8px 0 0; }
.controller { align-items: center; background: #263f36; border: 1px solid #6ce6b6; color: #d6ede5; display: flex; flex-direction: column; font-size: 13px; height: 56px; justify-content: center; left: calc(50% - 28px); position: absolute; top: calc(50% - 28px); width: 56px; }.controller small { color: #8caaa1; font-size: 7px; margin-top: 3px; }
.signal { background: #6ce6b6; height: 1px; position: absolute; transform-origin: left; width: 33%; }.signal-one { left: 27%; top: 50%; transform: rotate(-35deg); }.signal-two { left: 54%; top: 50%; transform: rotate(35deg); }.signal-three { left: 27%; top: 50%; transform: rotate(35deg); }
.io { background: #1b2c28; border: 1px solid #527b6e; color: #d6ede5; font-size: 9px; padding: 10px 8px; position: absolute; }.io-one { left: 12%; top: 28%; }.io-two { right: 12%; top: 28%; }.io-three { left: 12%; bottom: 22%; }
.camera-lens { border: 7px solid #263f36; border-radius: 50%; box-shadow: 0 0 0 1px #6ce6b6; height: 70px; left: 14%; position: absolute; top: 37%; width: 70px; }.camera-lens::after { background: #70c9f7; border-radius: 50%; content: ""; inset: 13px; position: absolute; }.camera-beam { border-bottom: 1px dashed #70c9f7; left: 29%; position: absolute; top: 51%; width: 38%; }.inspection-part { align-items: center; border: 2px solid #e2e6e2; display: flex; height: 58px; justify-content: center; position: absolute; right: 15%; top: 39%; transform: rotate(45deg); width: 58px; }.inspection-part i { background: #e2e6e2; height: 10px; margin: 3px; width: 10px; }.inspection-result { background: #213d32; color: #6ce6b6; font-size: 9px; padding: 7px 9px; position: absolute; right: 12%; top: 70%; }
.recipe-picker { background: #192925; border: 1px solid #3d5c53; bottom: 12px; left: 12px; padding: 8px; position: absolute; }.recipe-picker > span { color: #8caaa1; display: block; font-size: 7px; }.recipe-picker strong { color: #d6ede5; display: block; font-size: 9px; font-weight: 400; margin: 4px 0 7px; }.recipe-picker button { background: #223530; border: 1px solid #3d5c53; color: #8caaa1; cursor: pointer; font-family: var(--mono); font-size: 7px; padding: 5px; }.recipe-picker button.selected { border-color: #6ce6b6; color: #6ce6b6; }
.vision-integration { border: 1px solid #31423e; margin-top: 16px; padding: 12px; }.vision-integration p { color: #b8c8c2; font-family: var(--sans); font-size: 12px; line-height: 1.55; margin: 9px 0 0; }.vision-interface-diagrams { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 13px; }.interface-diagram { background: #172622; border: 1px solid #314b43; min-width: 0; padding: 10px; }.interface-title { color: #8caaa1; font-size: 7px; letter-spacing: .06em; }.interface-flow { align-items: center; display: flex; justify-content: space-between; margin: 12px 4px 10px; }.interface-node { border: 1px solid #5f8d7e; color: #d6ede5; font-size: 8px; padding: 7px 6px; text-align: center; }.interface-node small { color: #8caaa1; display: block; font-size: 6px; margin-top: 3px; }.plc-node { border-color: #70c9f7; }.interface-line { background: #6ce6b6; height: 1px; position: relative; width: 28%; }.interface-line::after { background: #6ce6b6; border-radius: 50%; box-shadow: 9px 0 #6ce6b6, 18px 0 #6ce6b6; content: ""; height: 4px; left: 2px; position: absolute; top: -1px; width: 4px; }.data-line { background: #70c9f7; }.data-line::after { background: #70c9f7; box-shadow: 9px 0 #70c9f7, 18px 0 #70c9f7; }.signal-pills, .data-pills { display: flex; flex-wrap: wrap; gap: 4px; }.signal-pills span, .data-pills span { background: #223530; color: #9eb9ae; font-size: 7px; padding: 4px 5px; }.signal-pills .signal-ok { color: #6ce6b6; }.signal-pills .signal-nok { color: #ff9b8d; }.data-pills span { color: #9bd4f2; }
.vision-data-grid { display: grid; gap: 12px; grid-template-columns: 1.2fr .8fr; margin-top: 12px; }.diameter-panel, .vision-error-panel { border: 1px solid #31423e; padding: 12px; }.diameter-value { align-items: baseline; display: flex; gap: 5px; margin-top: 12px; }.diameter-value strong { color: #d6ede5; font-size: 19px; font-weight: 400; }.diameter-value > span { color: #8caaa1; font-size: 8px; }.diameter-value small { color: #779087; font-size: 7px; margin-left: auto; }.diameter-chart { border-bottom: 1px solid #31423e; height: 48px; margin-top: 7px; position: relative; }.diameter-chart i { border-top: 1px dashed #2c423b; display: block; height: 16px; }.diameter-chart svg { height: 100%; inset: 0; position: absolute; width: 100%; }.diameter-chart polyline { fill: none; stroke: #70c9f7; stroke-width: 2; }.diameter-chart line { stroke: #e4a44d; stroke-dasharray: 3 3; stroke-width: 1; }
.trend-alarm { animation: alarm-pulse 2s infinite; background: #d6514f; border: 1px solid #ffaaa5; border-radius: 50%; cursor: pointer; height: 16px; padding: 0; position: absolute; top: 3px; width: 16px; z-index: 1; }.trend-alarm::before { color: #fff1ed; content: "\1F514"; font-size: 9px; left: 2px; position: absolute; top: 1px; }.trend-alarm:hover { background: #f06a65; transform: scale(1.2); }.alarm-diameter { left: 37%; }.alarm-focus { left: 64%; top: 18px; }.alarm-position { left: 82%; top: 7px; }@keyframes alarm-pulse { 50% { box-shadow: 0 0 0 4px rgba(214, 81, 79, .2); } }
.panel-heading b.warning { background: #4b3520; color: #e4a44d; }.fault-image { background: #20332e; border: 1px solid #486960; cursor: pointer; height: 79px; margin-top: 11px; overflow: hidden; padding: 0; position: relative; text-align: left; width: 100%; }.fault-image > span { color: #b1cbc1; font-family: var(--mono); font-size: 7px; left: 8px; position: absolute; top: 7px; }.fault-image > i { border: 1px solid #d2e4dd; height: 35px; left: calc(50% - 18px); position: absolute; top: 22px; transform: rotate(45deg); width: 35px; }.fault-image > b { color: #ff8e71; font-family: var(--sans); font-size: 27px; font-weight: 400; position: absolute; right: 15%; top: 19px; }.fault-image small { bottom: 7px; color: #f0b2a2; font-family: var(--mono); font-size: 6px; left: 8px; position: absolute; }.vision-error-panel > p { color: #8caaa1; font-family: var(--sans); font-size: 10px; margin: 8px 0 0; }
.vision-dialog { background: #14211f; border: 1px solid #6b8e82; color: #d6ede5; max-width: 420px; padding: 0; width: calc(100% - 40px); }.vision-dialog::backdrop { background: rgba(5, 11, 9, .76); }.dialog-heading { border-bottom: 1px solid #31423e; color: #8caaa1; display: flex; font-family: var(--mono); font-size: 8px; justify-content: space-between; padding: 12px; }.vision-dialog-close { background: transparent; border: 0; color: #e4a44d; cursor: pointer; font-family: var(--mono); font-size: 8px; }.dialog-image { background: #20332e; height: 190px; margin: 14px; position: relative; }.dialog-part { align-items: center; border: 2px solid #d2e4dd; display: flex; height: 90px; justify-content: center; left: calc(50% - 45px); position: absolute; top: 45px; transform: rotate(45deg); width: 90px; }.dialog-part i { background: #d2e4dd; height: 14px; margin: 5px; width: 14px; }.dialog-image > b { color: #ff8e71; font-family: var(--sans); font-size: 68px; font-weight: 400; position: absolute; right: 17%; top: 43px; }.dialog-image > span { background: #542a24; bottom: 10px; color: #ffd0c5; font-family: var(--mono); font-size: 8px; left: 10px; padding: 6px; position: absolute; }.vision-dialog > p { color: #b8c8c2; font-family: var(--sans); font-size: 13px; line-height: 1.55; margin: 0; padding: 0 14px 16px; }
.process-bars { bottom: 27px; display: flex; gap: 23px; left: 28px; position: absolute; right: 28px; top: 52px; }.process-bars span { align-items: end; background: linear-gradient(to top, #6ce6b6 var(--value), #21332f var(--value)); color: #8caaa1; display: flex; flex: 1; font-size: 8px; justify-content: center; padding-bottom: 8px; writing-mode: vertical-rl; }.process-bars span:nth-child(3) { background: linear-gradient(to top, #e4a44d var(--value), #21332f var(--value)); }.process-gain { color: #6ce6b6; font-size: 22px; position: absolute; right: 18px; top: 35px; }.process-gain small { color: #8caaa1; display: block; font-size: 7px; margin-top: 4px; }
.cabinet { border: 2px solid #678078; height: 116px; position: absolute; top: 56px; width: 78px; }.cabinet span, .cabinet small { color: #8caaa1; font-size: 7px; left: 50%; position: absolute; transform: translateX(-50%); white-space: nowrap; }.cabinet span { top: -17px; }.cabinet small { bottom: -18px; }.cabinet i { background: #53635e; display: block; height: 8px; margin: 14px auto; width: 52px; }.cabinet-old { border-color: #6d6555; left: 19%; }.cabinet-old i { background: #846e4a; }.cabinet-new { border-color: #6ce6b6; right: 19%; }.cabinet-new i { background: #6ce6b6; box-shadow: 0 0 8px rgba(108, 230, 182, .45); }.retrofit-arrow { color: #e4a44d; font-size: 28px; left: calc(50% - 8px); position: absolute; top: 94px; }.retrofit-status { background: #213d32; bottom: 18px; color: #6ce6b6; font-size: 8px; left: 50%; padding: 6px 9px; position: absolute; transform: translateX(-50%); white-space: nowrap; }
.tilt-platform { border-bottom: 8px solid #b9d1c7; height: 94px; left: 17%; position: absolute; top: 71px; transform: rotate(-18deg); width: 52%; }.tilt-platform i { background: #6ce6b6; bottom: -16px; height: 16px; left: 14%; position: absolute; width: 5px; }.inclination-sensor { background: #213d32; border: 1px solid #6ce6b6; color: #9ac8b8; font-size: 7px; left: 48%; padding: 6px; position: absolute; text-align: center; top: -22px; transform: rotate(18deg); }.inclination-sensor strong { color: #6ce6b6; display: block; font-size: 12px; font-weight: 400; margin-top: 3px; }.tilt-axis { background: #e4a44d; border-radius: 50%; bottom: 47px; height: 15px; left: 16%; position: absolute; width: 15px; }.tilt-readout { background: #192925; border: 1px solid #3c5b51; bottom: 16px; padding: 7px 9px; position: absolute; right: 14px; }.tilt-readout span, .tilt-readout small { color: #8caaa1; display: block; font-size: 7px; }.tilt-readout strong { color: #6ce6b6; display: block; font-size: 20px; font-weight: 400; margin: 3px 0; }
.rd-comparison { align-items: stretch; display: grid; grid-template-columns: 1fr 34px 1fr; margin-top: 16px; }.rd-option { border: 1px solid #31423e; padding: 14px; }.rd-option > span { color: #8caaa1; font-size: 7px; letter-spacing: .05em; }.rd-option strong { color: #d6ede5; display: block; font-size: 13px; font-weight: 400; margin: 8px 0; }.rd-option p { color: #9db1a9; font-family: var(--sans); font-size: 11px; line-height: 1.5; margin: 0; }.legacy-option { border-color: #735f40; }.sensor-option { border-color: #4d806f; }.rd-arrow { align-items: center; color: #e4a44d; display: flex; font-size: 22px; justify-content: center; }.rd-insight { align-items: start; border-left: 2px solid #70c9f7; display: flex; gap: 13px; margin-top: 14px; padding: 5px 0 5px 11px; }.rd-insight b { color: #70c9f7; font-size: 8px; font-weight: 400; letter-spacing: .04em; white-space: nowrap; }.rd-insight span { color: #b8c8c2; font-family: var(--sans); font-size: 12px; line-height: 1.5; }
.rd-advisory { border: 1px solid #31423e; margin-top: 16px; padding: 12px; }.rd-advisory-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 12px; }.rd-advisory-card { background: #172622; border: 1px solid #385248; padding: 13px; }.rd-advisory-card strong { color: #d6ede5; font-size: 12px; font-weight: 400; }.rd-advisory-card p { color: #b5c4be; font-family: var(--sans); font-size: 11px; line-height: 1.5; margin: 8px 0 0; }.rd-advisory-tags { display: flex; gap: 5px; margin-top: 12px; }.rd-advisory-tags span { background: #1f3831; color: #70c9f7; font-size: 7px; padding: 5px; }.machine-interface { align-items: center; border-top: 1px solid #385248; display: flex; gap: 7px; justify-content: space-between; margin-top: 12px; padding-top: 11px; }.machine-interface span { border: 1px solid #668579; color: #c4d5cf; font-size: 7px; padding: 7px 5px; }.machine-interface i { color: #e4a44d; font-size: 7px; font-style: normal; position: relative; text-align: center; }.machine-interface i::before, .machine-interface i::after { background: #e4a44d; content: ""; height: 1px; position: absolute; top: 50%; width: 10px; }.machine-interface i::before { right: calc(100% + 5px); }.machine-interface i::after { left: calc(100% + 5px); }.rd-advisory-note { border-left: 2px solid #e4a44d; color: #c7b897; font-family: var(--sans); font-size: 11px; line-height: 1.5; margin: 12px 0 0; padding-left: 10px; }.rd-practice { align-items: center; border: 1px solid #31423e; display: flex; gap: 10px; margin-top: 12px; padding: 10px; }.rd-practice > span { color: #8caaa1; font-size: 7px; margin-right: auto; }.rd-practice strong { color: #6ce6b6; font-size: 8px; font-weight: 400; }.rd-practice i { background: #6ce6b6; height: 1px; width: 17px; }
.cyber-demo { background: #15221f; border: 1px solid #46665c; margin-top: 14px; padding: 12px; }.cyber-demo > p { color: #b8c8c2; font-family: var(--sans); font-size: 11px; line-height: 1.55; margin: 10px 0; }.cyber-demo > p strong { color: #70c9f7; font-weight: 600; }.cyber-controls { display: flex; flex-wrap: wrap; gap: 7px; }.cyber-controls button { background: #21342f; border: 1px solid #4d7669; color: #b8d1c7; cursor: pointer; font-family: var(--mono); font-size: 8px; padding: 8px 9px; }.cyber-controls .firewall-toggle.active, .cyber-controls .cyber-scenario.active { background: #213d32; border-color: #6ce6b6; color: #6ce6b6; }.cyber-status { border-left: 2px solid #6ce6b6; color: #b4d8c9; font-size: 8px; margin-top: 10px; padding-left: 8px; }.cyber-network { align-items: center; display: flex; margin-top: 14px; }.threat-node, .firewall-node, .machine-node { background: #1a2b27; border: 1px solid #527b6f; min-width: 0; padding: 9px 7px; text-align: center; }.threat-node span, .firewall-node span, .machine-node span { color: #8caaa1; display: block; font-size: 6px; }.threat-node strong, .firewall-node strong, .machine-node strong { color: #d6ede5; display: block; font-size: 8px; font-weight: 400; margin: 5px 0 3px; }.threat-node { border-color: #98564f; }.threat-node strong { color: #ff9b8d; }.firewall-node { border-color: #6ce6b6; }.firewall-node small, .machine-node small { color: #6ce6b6; font-size: 6px; }.cyber-line { background: #6ce6b6; height: 1px; min-width: 12px; position: relative; width: 100%; }.cyber-line::after { background: #6ce6b6; border-radius: 50%; content: ""; height: 4px; left: 45%; position: absolute; top: -1px; width: 4px; }.attack-line { background: #d6514f; }.attack-line::after { background: #d6514f; }.switch-conflict { align-items: center; border: 1px solid #86584d; display: none; gap: 8px; margin-top: 12px; padding: 9px; position: relative; }.switch-title { color: #f0b2a2; font-size: 7px; left: 9px; position: absolute; top: 7px; }.switch-device, .switch-core { background: #2d2923; border: 1px solid #806348; margin-top: 15px; padding: 7px; text-align: center; }.switch-device span, .switch-core span { color: #c9ac82; display: block; font-size: 6px; }.switch-device strong, .switch-core strong { color: #f1dbc0; display: block; font-size: 8px; font-weight: 400; margin: 4px 0; }.switch-device small, .switch-core small { color: #b79b72; font-size: 6px; }.switch-bus { background: #e4a44d; height: 1px; min-width: 10px; position: relative; width: 100%; }.switch-bus::after { background: #d6514f; border-radius: 50%; content: ""; height: 5px; left: 48%; position: absolute; top: -2px; width: 5px; }.conflict-marker { background: #d6514f; color: #fff1ed; font-size: 7px; padding: 4px; position: absolute; right: 8px; top: 7px; }.cyber-note { border-top: 1px solid #31423e; color: #91aaa1 !important; font-size: 10px !important; padding-top: 10px; }.cyber-demo[data-incident="on"] .machine-one { border-color: #d6514f; }.cyber-demo[data-incident="on"] .machine-one strong { color: #ff9b8d; }.cyber-demo[data-incident="on"] .machine-one small { color: #ff9b8d; }.cyber-demo[data-firewall="off"][data-incident="on"] .firewall-node { border-color: #d6514f; }.cyber-demo[data-firewall="off"][data-incident="on"] .firewall-node small { color: #ff9b8d; }.cyber-demo[data-firewall="off"][data-incident="on"] .machine-two { border-color: #e4a44d; }.cyber-demo[data-firewall="off"][data-incident="on"] .machine-two strong, .cyber-demo[data-firewall="off"][data-incident="on"] .machine-two small { color: #f5c476; }.cyber-demo[data-scenario="conflict"] .switch-conflict { display: flex; }.cyber-demo[data-scenario="conflict"][data-incident="on"] .switch-device-a, .cyber-demo[data-scenario="conflict"][data-incident="on"] .switch-device-b { border-color: #d6514f; }
.it-ot-bridge { border: 1px solid #31423e; margin-top: 14px; padding: 12px; }.it-ot-bridge > p { color: #b8c8c2; font-family: var(--sans); font-size: 11px; line-height: 1.55; margin: 10px 0; }.bridge-map { align-items: stretch; display: grid; grid-template-columns: 1fr 1.2fr 1fr; margin-top: 13px; }.bridge-side, .bridge-guideline { background: #172622; border: 1px solid #385248; padding: 12px; text-align: center; }.bridge-side span, .bridge-guideline span { color: #8caaa1; display: block; font-size: 7px; letter-spacing: .05em; }.bridge-side strong, .bridge-guideline strong { color: #d6ede5; display: block; font-size: 10px; font-weight: 400; margin: 8px 0 6px; }.bridge-side small, .bridge-guideline small { color: #88a39a; font-size: 7px; }.bridge-guideline { border-color: #70c9f7; position: relative; }.bridge-guideline i { background: #70c9f7; height: 1px; left: 12%; position: absolute; right: 12%; top: 45%; }.bridge-guideline i::before, .bridge-guideline i::after { background: #70c9f7; border-radius: 50%; content: ""; height: 5px; position: absolute; top: -2px; width: 5px; }.bridge-guideline i::before { left: 0; }.bridge-guideline i::after { right: 0; }.bridge-principles { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); margin-top: 12px; }.bridge-principles div { border-top: 1px solid #385248; padding: 9px 5px 0; }.bridge-principles span { color: #70c9f7; font-size: 8px; }.bridge-principles strong { color: #d6ede5; display: block; font-size: 10px; font-weight: 400; margin: 5px 0; }.bridge-principles p { color: #9fb4ab; font-family: var(--sans); font-size: 10px; line-height: 1.45; margin: 0; }.bridge-note { border-left: 2px solid #70c9f7; color: #b9cfc5 !important; margin: 12px 0 0 !important; padding-left: 10px; }
.support-intro { border-left: 2px solid #70c9f7; color: #c2d2cc; font-family: var(--sans); font-size: 13px; line-height: 1.55; margin-top: 28px; max-width: 710px; padding-left: 12px; }.support-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-top: 20px; }.support-card { border: 1px solid #31423e; padding: 16px; }.urgent-card { border-color: #9a5b45; }.project-card { border-color: #4e806f; }.support-card-top { color: #8caaa1; display: flex; font-size: 8px; justify-content: space-between; letter-spacing: .05em; }.support-card-top b { background: #4b3520; color: #e4a44d; font-size: 7px; font-weight: 400; padding: 3px 5px; }.project-card .support-card-top b { background: #213d32; color: #6ce6b6; }.support-card > strong { color: #d6ede5; display: block; font-size: 17px; font-weight: 400; margin: 22px 0 10px; }.support-card p { color: #a9bbb4; font-family: var(--sans); font-size: 12px; line-height: 1.55; margin: 0; }.support-tags { border-top: 1px solid #31423e; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding-top: 12px; }.support-tags span { background: #1d2d29; color: #8caaa1; font-size: 7px; padding: 5px; }.support-flow { align-items: center; border: 1px solid #31423e; display: flex; justify-content: center; margin-top: 14px; padding: 10px; }.support-flow span { color: #8caaa1; font-size: 8px; }.support-flow i { background: #6ce6b6; height: 1px; margin: 0 12px; width: 34px; }
.booking-panel { border: 1px solid #31423e; margin-top: 14px; padding: 12px; }.booking-options { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; }.booking-options div { min-height: 92px; padding: 11px; }.booking-options div + div { border-left: 1px solid #31423e; }.booking-options span { color: #8caaa1; display: block; font-size: 7px; letter-spacing: .05em; }.booking-options strong { color: #d6ede5; display: block; font-size: 13px; font-weight: 400; margin: 9px 0 6px; }.booking-options small { color: #92a8a0; font-family: var(--sans); font-size: 10px; line-height: 1.35; }.booking-options .booking-value { background: #1b2d28; }.booking-options .booking-value strong { color: #6ce6b6; }.booking-note { border-top: 1px solid #31423e; color: #b8c8c2; font-family: var(--sans); font-size: 11px; line-height: 1.5; margin: 0; padding: 11px; }
.service-kpis { border: 1px solid #31423e; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; }.service-kpis div { padding: 13px; }.service-kpis div + div { border-left: 1px solid #31423e; }.service-kpis span { color: #8caaa1; display: block; font-size: 7px; letter-spacing: .04em; }.service-kpis strong { color: #d6ede5; display: block; font-size: 17px; font-weight: 400; margin-top: 6px; }
.service-bottom { align-items: center; color: #8caaa1; display: flex; font-family: var(--sans); font-size: 12px; justify-content: space-between; margin-top: 18px; }.service-bottom button { background: #bfe943; border: 0; color: #101918; cursor: pointer; font-family: var(--mono); font-size: 8px; padding: 9px 10px; }
.duty-nav { border-top: 1px solid #31423e !important; color: #e4a44d !important; margin-top: auto; padding-top: 13px !important; }.duty-nav::before { background: #e4a44d; border-radius: 50%; content: ""; display: inline-block; height: 5px; margin-right: 6px; width: 5px; }
.duty-alert { align-items: center; background: #2a261c; border: 1px solid #8a6a38; display: flex; gap: 15px; margin-top: 30px; padding: 18px; }.alert-mark { align-items: center; border: 1px solid #e4a44d; border-radius: 50%; color: #e4a44d; display: flex; font-size: 18px; height: 32px; justify-content: center; width: 32px; }.duty-alert strong { color: #f4d9a2; font-size: 10px; letter-spacing: .05em; }.duty-alert p { color: #c0ad81; font-family: var(--sans); font-size: 13px; line-height: 1.5; margin: 6px 0 0; }
.duty-grid { border: 1px solid #31423e; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; }.duty-grid div { min-height: 108px; padding: 15px; }.duty-grid div + div { border-left: 1px solid #31423e; }.duty-grid span, .duty-grid small { color: #8caaa1; display: block; font-size: 7px; letter-spacing: .05em; }.duty-grid strong { color: #e4a44d; display: block; font-size: 15px; font-weight: 400; margin: 11px 0 7px; }.duty-notice { border-left: 2px solid #e4a44d; color: #bcb49d; font-family: var(--sans); font-size: 12px; line-height: 1.55; margin-top: 16px; padding: 4px 0 4px 12px; }.duty-screen .service-bottom a, .duty-screen .service-bottom button { background: #e4a44d; border: 0; color: #101918; cursor: pointer; font-family: var(--mono); font-size: 8px; padding: 9px 10px; }
.scada-footer { border-top: 1px solid #31423e; display: flex; font-size: 8px; gap: 20px; grid-column: 1 / -1; letter-spacing: .05em; padding: 11px 17px; }.scada-footer span::before { background: #6ce6b6; border-radius: 50%; content: ""; display: inline-block; height: 5px; margin-right: 5px; width: 5px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(212, 251, 84, .15); } }
@keyframes flow { from { left: 0; } to { left: 100%; } }
@keyframes screen-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes line-one-fails { to { background: #39241f; border-color: #d6514f; } }@keyframes line-two-fails { to { background: #39241f; border-color: #d6514f; } }@keyframes text-hide { to { opacity: 0; } }@keyframes text-show { to { opacity: 1; } }@keyframes front-alarm-show { to { opacity: 1; transform: translateY(0); } }

.work-section { padding: 140px clamp(24px, 8.5vw, 140px) 150px; }
.section-heading { display: grid; grid-template-columns: 1fr 2.15fr .9fr; margin-bottom: 75px; }
.section-heading h2, .statement h2 { font-size: clamp(42px, 5vw, 80px); }
.section-heading .text-link { align-self: end; justify-self: end; }
.projects { display: grid; gap: 76px 34px; grid-template-columns: 1.25fr .75fr; }
.project-featured { grid-row: span 2; }
.project-image { display: block; height: 0; overflow: hidden; padding-bottom: 113%; position: relative; }
.project-featured .project-image { padding-bottom: 124%; }
.image-terracotta { background: #c64e31; color: #ffc67c; }
.kyst-wordmark { font-size: clamp(65px, 12vw, 190px); font-weight: 800; left: 8%; letter-spacing: -.12em; position: absolute; top: 7%; }
.sun { background: #ffbe67; border-radius: 50%; height: 45%; position: absolute; right: -6%; top: 30%; width: 45%; }
.image-terracotta p { bottom: 7%; font-family: Georgia, serif; font-size: clamp(18px, 2vw, 30px); left: 8%; line-height: 1.05; margin: 0; max-width: 210px; position: absolute; }
.image-blue { background: #075bbf; color: #f2f1e9; }
.takt-symbol { font-family: Georgia, serif; font-size: clamp(130px, 18vw, 300px); left: 13%; line-height: .7; position: absolute; top: 14%; }
.takt-wordmark { bottom: 14%; font-size: clamp(42px, 5.7vw, 82px); font-weight: 800; left: 10%; letter-spacing: -.1em; position: absolute; }
.image-blue p { bottom: 7%; font-family: var(--mono); font-size: 10px; margin: 0; position: absolute; right: 10%; text-transform: uppercase; }
.image-paper { background: #e4dfd4; }
.forma-shape { background: #eb6555; border-radius: 50% 50% 5% 5%; height: 67%; left: 16%; position: absolute; top: 13%; transform: rotate(42deg); width: 67%; }
.forma-wordmark { bottom: 11%; font-size: clamp(28px, 4vw, 62px); font-weight: 800; left: 9%; letter-spacing: -.1em; line-height: .8; position: absolute; }
.forma-wordmark span { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.project-meta { align-items: start; border-top: 1px solid var(--ink); display: flex; justify-content: space-between; padding-top: 13px; }
.project-meta h3 { font-size: 15px; font-weight: 700; margin: 0 0 5px; }
.project-meta p, .project-meta span { font-family: var(--mono); font-size: 9px; margin: 0; text-transform: uppercase; }

.statement { background: var(--ink); color: var(--paper); padding: 124px clamp(24px, 8.5vw, 140px) 112px; }
.statement h2 { margin-left: 16.2%; }
.statement-detail { align-items: end; display: flex; justify-content: space-between; margin-left: 51%; margin-top: 62px; }
.statement-copy { max-width: 315px; }
.statement-detail p { font-size: 15px; line-height: 1.55; margin: 0; }
.statement-detail p + p { font-family: var(--mono); font-size: 10px; line-height: 1.6; margin-top: 22px; text-transform: uppercase; }
.round-link { align-items: center; background: var(--acid); border-radius: 50%; color: var(--ink); display: flex; font-family: var(--mono); font-size: 24px; height: 74px; justify-content: center; transition: transform .25s; width: 74px; }
.round-link:hover { transform: rotate(45deg); }

.contact { padding: 134px clamp(24px, 8.5vw, 140px) 140px; }
.contact h2 { margin-left: 16.2%; }
.contact-email { background: transparent; border: 0; border-bottom: 2px solid var(--ink); cursor: pointer; display: inline-block; font-family: var(--sans); font-size: clamp(20px, 2.5vw, 40px); letter-spacing: -.06em; margin: 64px 0 0 16.2%; padding-bottom: 8px; text-align: left; }
.contact-email span { font-family: var(--mono); font-size: .8em; margin-left: 18px; }
.contact-dialog { background: #14211f; border: 1px solid #6b8e82; color: #d6ede5; max-width: 460px; padding: 0; width: calc(100% - 40px); }.contact-dialog::backdrop { background: rgba(5, 11, 9, .76); }.contact-dialog-content { padding: 17px; }.contact-dialog-content > p { color: #b8c8c2; font-family: var(--sans); font-size: 13px; line-height: 1.5; margin: 0 0 14px; }.contact-channel { align-items: center; border: 1px solid #385248; display: grid; grid-template-columns: 92px 1fr 18px; margin-top: 8px; padding: 13px; transition: background .2s, border-color .2s; }.contact-channel:hover { background: #20342e; border-color: #6ce6b6; }.contact-channel span { color: #8caaa1; font-family: var(--mono); font-size: 8px; }.contact-channel strong { color: #d6ede5; font-family: var(--sans); font-size: 14px; font-weight: 500; }.contact-channel i { color: #6ce6b6; font-family: var(--mono); font-size: 14px; font-style: normal; }.phone-channel { border-left: 2px solid #70c9f7; }.whatsapp-channel { border-left: 2px solid #6ce6b6; }.linkedin-channel { border-left: 2px solid #70c9f7; }.mail-channel { border-left: 2px solid #e4a44d; }
footer { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: space-between; margin: 0 clamp(24px, 4vw, 68px); padding: 26px 0 31px; }
footer p { margin: 0; }
.socials { display: flex; gap: 20px; }
.socials a { border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

@media (max-width: 700px) {
  .site-header { height: 62px; padding: 0 20px; }
  .navigation, .header-status, .after-hours-duty { display: none; }
  .menu-toggle { background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; gap: 5px; padding: 8px; }
  .menu-toggle span:not(.sr-only) { background: var(--ink); display: block; height: 1px; width: 21px; }
  .navigation.is-open { background: #101918; display: flex; flex-direction: column; gap: 4px; left: 0; margin: 0; padding: 20px; position: absolute; right: 0; top: 62px; }
  .navigation.is-open a { padding: 12px; }
  .hero { display: flex; flex-direction: column; min-height: 0; padding: 0; }
  .hero-copy { padding: 68px 24px 74px; }
  .hero-art { grid-template-columns: 72px 1fr; min-height: 720px; }
  .scada-sidebar { font-size: 7px; gap: 6px; padding: 22px 6px; }
  .scada-sidebar a, .scada-sidebar span { padding: 5px 3px; }
  .dashboard-metrics { gap: 8px; }
  .dashboard-metrics span { font-size: 7px; }
  .dashboard-metrics strong { font-size: 9px; }
  .hmi-controls { flex-wrap: wrap; }
  .hmi-controls > span:first-child { width: 100%; }
  .analytics-grid { grid-template-columns: 1fr; }
  .front-security-layout { grid-template-columns: 1fr; }
  .front-protected-line { justify-content: center; }
  .front-unprotected-lines { grid-template-columns: 1fr 1fr; }
  .front-line::before { display: none; }
  .front-alarm-popup { align-items: start; flex-wrap: wrap; }
  .service-layout { grid-template-columns: 1fr; }
  .service-visual { height: 220px; }
  .vision-data-grid { grid-template-columns: 1fr; }
  .vision-interface-diagrams { grid-template-columns: 1fr; }
  .protocol-grid { grid-template-columns: 1fr; }
  .protocol-grid div:nth-child(2) { border-left: 0; }
  .service-bottom { align-items: start; flex-direction: column; gap: 12px; }
  .duty-grid { grid-template-columns: 1fr; }
  .duty-grid div + div { border-left: 0; border-top: 1px solid #31423e; }
  .rd-comparison { grid-template-columns: 1fr; gap: 8px; }
  .rd-arrow { transform: rotate(90deg); }
  .rd-insight { flex-direction: column; gap: 6px; }
  .rd-advisory-grid { grid-template-columns: 1fr; }
  .rd-practice { align-items: start; flex-direction: column; }
  .rd-practice i { transform: rotate(90deg); }
  .cyber-network { align-items: stretch; flex-direction: column; }
  .cyber-line { height: 14px; min-height: 14px; width: 1px; }
  .cyber-line::after { left: -1px; top: 45%; }
  .bridge-map, .bridge-principles { grid-template-columns: 1fr; }
  .support-grid { grid-template-columns: 1fr; }
  .support-flow i { margin: 0 6px; width: 12px; }
  .booking-options { grid-template-columns: 1fr 1fr; }
  .booking-options div:nth-child(3) { border-left: 0; border-top: 1px solid #31423e; }
  .booking-options div:nth-child(4) { border-top: 1px solid #31423e; }
  .work-section { padding: 85px 24px; }
  .section-heading { display: block; margin-bottom: 52px; }
  .section-heading h2 { margin-bottom: 32px; }
  .section-heading .text-link { float: right; }
  .projects { display: block; }
  .project { margin-bottom: 54px; }
  .project-featured .project-image { padding-bottom: 112%; }
  .statement { padding: 80px 24px; }
  .statement h2, .contact h2 { margin-left: 0; }
  .statement-detail { margin-left: 0; margin-top: 42px; }
  .statement-copy { max-width: 240px; }
  .contact { padding: 82px 24px; }
  .contact-email { margin-left: 0; margin-top: 47px; }
  footer { align-items: flex-start; flex-wrap: wrap; gap: 20px; margin: 0 24px; }
  footer p { order: 3; width: 100%; }
}