:root {
  --bg: oklch(97.5% 0.006 235);
  --surface: oklch(100% 0 0);
  --surface-2: oklch(94.8% 0.009 235);
  --fg: oklch(19% 0.018 245);
  --muted: oklch(45% 0.018 240);
  --border: oklch(86% 0.012 235);
  --header: oklch(21% 0.026 245);
  --header-2: oklch(27% 0.028 245);
  --steel: oklch(46% 0.105 245);
  --signal: oklch(56% 0.145 152);
  --alarm: oklch(62% 0.16 58);
  --accent: oklch(46% 0.105 245);
  --font-display: "Segoe UI", "Roboto", Arial, system-ui, sans-serif;
  --font-body: "Segoe UI", "Roboto", Arial, system-ui, sans-serif;
  --font-mono: "Inconsolata", "Consolas", "JetBrains Mono", ui-monospace, monospace;
  --shadow: 0 16px 44px oklch(18% 0.02 245 / 0.09);
  --wrap: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: linear-gradient(90deg, oklch(92% 0.006 235 / 0.42) 1px, transparent 1px), linear-gradient(180deg, oklch(92% 0.006 235 / 0.42) 1px, transparent 1px), var(--bg);
  background-size: 32px 32px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: geometricPrecision;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.wrap { width: min(var(--wrap), calc(100% - 40px)); margin-inline: auto; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.service-bar { background: var(--header); color: oklch(94% 0.008 235); border-bottom: 1px solid oklch(36% 0.03 245); font-size: 13px; }
.service-bar .wrap, .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.service-bar .wrap { min-height: 38px; }
.service-list, .contact-list, .nav-list { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; list-style: none; }
.service-list li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--signal); vertical-align: 1px; }
.contact-list a { color: oklch(86% 0.02 235); }
.site-header { position: sticky; top: 0; z-index: 10; background: linear-gradient(180deg, var(--header-2), var(--header)); color: white; border-bottom: 3px solid var(--steel); box-shadow: 0 12px 24px oklch(12% 0.02 245 / 0.16); }
.site-header .wrap { min-height: 78px; }
.logo { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; min-width: 0; }
.logo-mark { display: block; width: 46px; height: 46px; object-fit: contain; }
.logo-title { display: block; font-weight: 800; letter-spacing: 0.02em; line-height: 1.05; text-transform: uppercase; }
.logo-subtitle { display: block; margin-top: 3px; color: oklch(77% 0.025 235); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.nav-list { justify-content: center; gap: 6px; }
.nav-list a { display: block; padding: 10px 12px; color: oklch(91% 0.012 235); border: 1px solid transparent; font-size: 14px; font-weight: 600; }
.nav-list a:hover, .nav-list a:focus-visible { border-color: oklch(54% 0.05 245); background: oklch(100% 0 0 / 0.05); outline: none; }
.header-cta, .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--steel); background: var(--steel); color: white; font-weight: 800; white-space: nowrap; }
.hero { padding: 42px 0 34px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, oklch(100% 0 0 / 0.92), oklch(95% 0.008 235 / 0.82)), var(--bg); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 0.86fr); gap: 34px; align-items: stretch; }
.kicker, .section-label { color: var(--steel); font-family: var(--font-mono); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.kicker::before { content: ""; width: 36px; height: 2px; background: var(--steel); }
h1 { max-width: 850px; margin: 0; font-family: var(--font-display); font-size: clamp(38px, 5vw, 68px); line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; }
.lead { max-width: 800px; margin: 22px 0 28px; color: oklch(32% 0.018 245); font-size: clamp(18px, 2vw, 22px); line-height: 1.45; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0; }
.btn { min-height: 46px; padding: 0 18px; }
.btn.secondary { background: var(--surface); color: var(--fg); border-color: var(--border); }
.hero-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); background: var(--surface); }
.hero-meta div { padding: 15px 16px; border-right: 1px solid var(--border); }
.hero-meta div:last-child { border-right: 0; }
.hero-meta strong { display: block; margin-bottom: 2px; font-size: 19px; line-height: 1.1; }
.hero-meta span { display: block; color: var(--muted); font-size: 12px; }
.scada-panel { min-height: 532px; border: 1px solid oklch(68% 0.035 245); background: var(--header); color: oklch(92% 0.008 235); box-shadow: var(--shadow); display: grid; grid-template-rows: auto 1fr auto; }
.panel-top, .panel-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid oklch(38% 0.03 245); font-family: var(--font-mono); font-size: 12px; }
.panel-bottom { border-top: 1px solid oklch(38% 0.03 245); border-bottom: 0; color: oklch(78% 0.02 235); }
.status-dot { display: inline-flex; align-items: center; gap: 8px; color: oklch(88% 0.02 235); }
.status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px oklch(56% 0.145 152 / 0.13); }
.panel-body { display: grid; grid-template-columns: minmax(250px, 1.08fr) minmax(190px, 0.92fr); gap: 12px; padding: 14px; }
.mimic { position: relative; min-height: 390px; border: 1px solid oklch(40% 0.026 245); background: linear-gradient(90deg, oklch(36% 0.027 245 / 0.52) 1px, transparent 1px), linear-gradient(180deg, oklch(36% 0.027 245 / 0.52) 1px, transparent 1px), oklch(24% 0.025 245); background-size: 28px 28px; overflow: hidden; }
.pipe { position: absolute; background: oklch(69% 0.025 235); box-shadow: inset 0 0 0 1px oklch(84% 0.015 235 / 0.45); }
.pipe.h1 { left: 52px; right: 52px; top: 82px; height: 8px; }
.pipe.h2 { left: 52px; right: 52px; top: 230px; height: 8px; }
.pipe.v1 { left: 72px; top: 82px; height: 156px; width: 8px; }
.pipe.v2 { right: 72px; top: 82px; height: 156px; width: 8px; }
.node { position: absolute; width: 74px; min-height: 48px; padding: 7px; border: 1px solid oklch(62% 0.04 245); background: oklch(29% 0.03 245); font-family: var(--font-mono); font-size: 10px; line-height: 1.2; box-shadow: 0 8px 18px oklch(12% 0.02 245 / 0.16); }
.node strong { display: block; color: white; font-size: 11px; }
.node em { display: block; margin-top: 4px; color: var(--signal); font-style: normal; }
.node.warn em { color: var(--alarm); }
.n1 { left: 28px; top: 50px; } .n2 { right: 28px; top: 50px; } .n3 { right: 28px; top: 206px; } .n4 { left: 28px; top: 206px; }
.tank { position: absolute; left: 50%; top: 126px; width: 104px; height: 122px; transform: translateX(-50%); border: 2px solid oklch(78% 0.025 235); border-radius: 52px 52px 12px 12px; background: linear-gradient(180deg, oklch(36% 0.03 245), oklch(28% 0.03 245)); }
.tank::after { content: "P-204"; position: absolute; left: 18px; right: 18px; top: 44px; padding: 3px 0; background: var(--signal); color: oklch(14% 0.02 145); text-align: center; font-family: var(--font-mono); font-size: 11px; font-weight: 800; }
.alarm-line { position: absolute; left: 18px; right: 18px; bottom: 16px; display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 8px 10px; border: 1px solid oklch(66% 0.13 58); background: oklch(36% 0.06 58 / 0.28); color: oklch(88% 0.08 75); font-family: var(--font-mono); font-size: 11px; }
.trend-stack { display: grid; gap: 10px; grid-template-rows: 224px auto; }
.trend-card, .event-card { border: 1px solid oklch(40% 0.026 245); background: oklch(24% 0.025 245); padding: 12px; }
.trend-title, .event-title { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: oklch(86% 0.02 235); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; }
.bars { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 4px; height: 142px; margin-top: 18px; padding-top: 16px; border-top: 1px solid oklch(38% 0.03 245); background: linear-gradient(180deg, oklch(38% 0.03 245 / 0.38) 1px, transparent 1px); background-size: 100% 36px; }
.bars span { display: block; min-height: 18px; background: var(--steel); }
.bars span:nth-child(4n) { background: var(--signal); } .bars span:nth-child(9) { background: var(--alarm); }
.events { display: grid; gap: 7px; font-family: var(--font-mono); font-size: 11px; }
.events div { display: grid; grid-template-columns: 52px 1fr; gap: 8px; color: oklch(79% 0.018 235); }
.events b { color: var(--alarm); font-weight: 800; }
section { padding: 52px 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(260px, 0.38fr); gap: 32px; align-items: end; margin-bottom: 24px; }
.section-label { margin: 0 0 8px; }
h2 { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -0.026em; text-wrap: balance; }
.section-note { margin: 0; color: var(--muted); font-size: 15px; }
.roles, .solutions-grid { display: grid; border: 1px solid var(--border); background: var(--surface); }
.roles { grid-template-columns: repeat(3, 1fr); }
.role, .solution { padding: 24px; border-right: 1px solid var(--border); }
.role:last-child, .solution:last-child { border-right: 0; }
.role h3, .solution h3, .card h3, .support-box h3, .news h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.15; letter-spacing: -0.015em; }
.role p, .solution p, .card p, .support-box p, .news p { margin: 0; color: var(--muted); font-size: 14px; }
.tag { display: inline-flex; margin-bottom: 16px; padding: 4px 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--steel); font-family: var(--font-mono); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.solutions-grid { grid-template-columns: repeat(4, 1fr); }
.solution { min-height: 238px; display: grid; align-content: start; gap: 18px; }
.solution-spec { display: grid; gap: 5px; margin-top: 4px; font-family: var(--font-mono); color: oklch(34% 0.025 245); font-size: 12px; }
.solution-spec span { display: flex; justify-content: space-between; gap: 12px; border-top: 1px dashed var(--border); padding-top: 5px; }
.catalog-grid, .docs-grid, .news-grid { display: grid; gap: 12px; }
.catalog-grid { grid-template-columns: repeat(4, 1fr); }
.docs-grid, .news-grid { grid-template-columns: repeat(3, 1fr); }
.card, .news, .support-box, .support-kpi div { border: 1px solid var(--border); background: var(--surface); padding: 18px; }
.card-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 18px; color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.filetype, .card-link { color: var(--steel); font-weight: 800; }
.card-link { display: inline-flex; margin-top: 18px; font-size: 13px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); background: var(--surface); }
table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 14px; }
th, td { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { background: var(--surface-2); color: oklch(32% 0.022 245); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 700; }
.protocol { font-family: var(--font-mono); color: var(--steel); white-space: nowrap; }
.result-ok { color: oklch(39% 0.12 152); font-weight: 800; }
.doc-card { min-height: 176px; display: grid; align-content: space-between; }
.doc-meta { margin-top: 18px; color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.support { background: linear-gradient(180deg, var(--surface), var(--surface-2)); border-block: 1px solid var(--border); }
.support-layout, .contact-panel { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 18px; align-items: stretch; }
.support-box { padding: 22px; }
.reg-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.reg-list li { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 14px; }
.reg-list b { color: var(--alarm); font-family: var(--font-mono); font-size: 12px; }
.support-kpi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.support-kpi strong { display: block; color: var(--steel); font-family: var(--font-mono); font-size: 24px; line-height: 1.1; }
.support-kpi span { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; }
.news-date { display: block; margin-bottom: 12px; color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.contact { padding-bottom: 70px; }
.contact-panel { grid-template-columns: 0.84fr 1.16fr; gap: 0; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.contact-aside { padding: 28px; background: var(--header); color: white; }
.contact-aside p { color: oklch(78% 0.02 235); }
.contact-lines { display: grid; gap: 12px; margin-top: 28px; font-family: var(--font-mono); font-size: 13px; }
.contact-lines span { display: block; padding-top: 12px; border-top: 1px solid oklch(40% 0.026 245); }
form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 28px; }
label { display: grid; gap: 6px; color: oklch(32% 0.022 245); font-size: 13px; font-weight: 700; }
input, select, textarea { width: 100%; min-height: 44px; border: 1px solid var(--border); background: var(--surface-2); color: var(--fg); padding: 10px 12px; border-radius: 0; }
textarea { min-height: 112px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--steel); box-shadow: 0 0 0 3px oklch(46% 0.105 245 / 0.14); outline: none; }
.span-2 { grid-column: span 2; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.form-foot p { max-width: 420px; margin: 0; color: var(--muted); font-size: 12px; }
footer { background: var(--header); color: oklch(82% 0.018 235); padding: 24px 0; font-size: 13px; }
footer .wrap { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; border-top: 1px solid oklch(42% 0.026 245); padding-top: 22px; }
.footer-company { display: grid; gap: 6px; }
.footer-company strong { color: white; font-size: 14px; }
.footer-company span, .footer-links span { display: block; }
.footer-links { display: grid; gap: 6px; text-align: right; font-family: var(--font-mono); }
@media (max-width: 1040px) {
  .service-bar .wrap, .site-header .wrap { align-items: flex-start; flex-direction: column; padding: 10px 0; }
  .nav-list { justify-content: flex-start; flex-wrap: wrap; }
  .hero-grid, .section-head, .support-layout, .contact-panel { grid-template-columns: 1fr; }
  .solutions-grid, .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .solution:nth-child(2) { border-right: 0; }
  .solution { border-bottom: 1px solid var(--border); }
  .solution:nth-child(n+3) { border-bottom: 0; }
  .docs-grid, .news-grid, .roles { grid-template-columns: 1fr; }
  .role { border-right: 0; border-bottom: 1px solid var(--border); }
  .role:last-child { border-bottom: 0; }
}
@media (max-width: 720px) {
  .wrap { width: min(100% - 28px, var(--wrap)); }
  .service-list, .contact-list, .hero-actions, footer .wrap { flex-direction: column; align-items: flex-start; }
  .site-header { position: static; }
  .hero-meta, .panel-body, .solutions-grid, .catalog-grid, .support-kpi, form { grid-template-columns: 1fr; }
  .hero-meta div { border-right: 0; border-bottom: 1px solid var(--border); }
  .hero-meta div:last-child { border-bottom: 0; }
  .mimic { min-height: 310px; }
  .panel-top, .panel-bottom, .form-foot { align-items: flex-start; flex-direction: column; }
  .solution, .solution:nth-child(n+3) { border-right: 0; border-bottom: 1px solid var(--border); }
  .solution:last-child { border-bottom: 0; }
  .span-2 { grid-column: auto; }
}

/* Local honeypot pages */
.page-hero { padding: 46px 0 26px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, oklch(100% 0 0 / 0.9), oklch(95% 0.008 235 / 0.78)); }
.page-hero h1 { max-width: 980px; }
.page-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 18px; align-items: start; }
.page-card { border: 1px solid var(--border); background: var(--surface); padding: 22px; }
.page-card h3 { margin: 0 0 10px; font-size: 21px; }
.page-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.page-list li { padding-top: 10px; border-top: 1px solid var(--border); }
.login-shell { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 36px 0; }
.login-panel { width: min(100% - 28px, 460px); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.login-panel .login-head { padding: 22px 24px; background: var(--header); color: white; }
.login-panel h1 { margin: 0; font-size: 30px; letter-spacing: -0.02em; }
.login-panel p { margin: 10px 0 0; color: oklch(78% 0.02 235); }
.login-panel form { display: grid; grid-template-columns: 1fr; padding: 24px; }
.login-message { margin: 0 24px 0; padding: 12px 14px; border-left: 4px solid var(--alarm); background: oklch(96% 0.03 58); color: oklch(35% 0.09 58); }
.login-panel .btn { width: 100%; }
@media (max-width: 760px) { .page-grid { grid-template-columns: 1fr; } .page-hero { padding-top: 34px; } }