:root {
  --bg: #0b1117;
  --bg-soft: #101820;
  --panel: #151f29;
  --panel-2: #192630;
  --line: #293945;
  --text: #f1f6f8;
  --muted: #9aabb6;
  --accent: #23bca2;
  --accent-light: #55d6be;
  --accent-dark: #0f7668;
  --warning: #f3c969;
  --shell: min(1180px, calc(100% - 40px));
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { width: var(--shell); margin-inline: auto; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 14px; color: #071713; background: var(--accent-light); border-radius: 8px; }

.launch-banner { position: fixed; inset: 0 0 auto; z-index: 40; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 18px; color: #251b05; background: linear-gradient(90deg,#e8b94f,#f3c969 46%,#e8b94f); border-bottom: 1px solid #ffd979; box-shadow: 0 5px 20px rgba(0,0,0,.22); font-size: 12px; }
.launch-banner strong { padding: 2px 9px; color: #fff7df; background: #7d520d; border-radius: 999px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.launch-banner span { font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.launch-banner p { margin: 0; font-weight: 650; }
.site-header { position: fixed; inset: 40px 0 auto; z-index: 30; border-bottom: 1px solid transparent; transition: background .25s, border-color .25s, backdrop-filter .25s; }
.site-header.scrolled { background: rgba(11,17,23,.84); border-color: rgba(85,214,190,.13); backdrop-filter: blur(18px); }
.nav-wrap { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand img { filter: drop-shadow(0 7px 14px rgba(35,188,162,.18)); }
.brand span { display: grid; line-height: 1.05; }
.brand strong { font-size: 20px; letter-spacing: -.02em; }
.brand small { margin-top: 5px; color: var(--muted); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: 29px; color: #c6d1d7; font-size: 14px; }
.main-nav a { transition: color .2s; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--accent-light); }
.main-nav .nav-cta { padding: 10px 17px; color: #071713; font-weight: 700; background: var(--accent); border-radius: 999px; }
.nav-toggle { display: none; border: 0; background: transparent; padding: 8px; }
.nav-toggle > span:not(.sr-only) { display: block; width: 24px; height: 2px; margin: 5px; background: var(--text); }

.hero { position: relative; min-height: 980px; padding: 190px 0 70px; overflow: hidden; background: radial-gradient(circle at 50% -10%, #16332f 0, #0b1117 48%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 220px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .22; pointer-events: none; }
.hero-glow-one { width: 520px; height: 520px; right: -260px; top: 140px; background: radial-gradient(circle, var(--accent), transparent 68%); }
.hero-glow-two { width: 300px; height: 300px; left: -170px; top: 470px; background: radial-gradient(circle, #2c7ba0, transparent 70%); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .91fr 1.09fr; align-items: center; gap: 54px; }
.eyebrow, .section-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--accent-light); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow i { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 6px rgba(35,188,162,.1); }
.hero h1 { max-width: 660px; margin: 22px 0 24px; font-size: clamp(47px, 5.4vw, 78px); line-height: .98; letter-spacing: -.055em; }
.hero h1 em { color: var(--accent-light); font-style: normal; }
.hero-copy > p { max-width: 600px; margin: 0; color: #b1c0c8; font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 13px; padding: 0 22px; border: 1px solid transparent; border-radius: 12px; font-weight: 750; transition: transform .2s, border-color .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #071713; background: var(--accent); box-shadow: 0 14px 34px rgba(35,188,162,.16); }
.button-primary:hover { background: var(--accent-light); }
.button-ghost { color: #d9e4e9; background: rgba(255,255,255,.025); border-color: var(--line); }
.button-ghost:hover { border-color: #48616e; background: rgba(255,255,255,.05); }
.hero-checks { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 28px 0 0; color: #879aa5; font-size: 13px; list-style: none; }
.hero-checks li::before { content: "✓"; margin-right: 7px; color: var(--accent); font-weight: 900; }

.hero-reference-card { aspect-ratio: 1.55; overflow: hidden; border: 1px solid #38505c; border-radius: 18px; background: #0b1117; box-shadow: 0 34px 80px rgba(0,0,0,.48), 0 0 0 8px rgba(255,255,255,.018); transform: perspective(1300px) rotateY(-3deg) rotateX(1deg); }
.hero-reference-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }

.app-window { overflow: hidden; border: 1px solid #38505c; border-radius: 18px; background: #111820; box-shadow: 0 34px 80px rgba(0,0,0,.48), 0 0 0 8px rgba(255,255,255,.018); transform: perspective(1300px) rotateY(-4deg) rotateX(1deg); }
.app-titlebar, .app-toolbar, .app-status { display: flex; align-items: center; }
.app-titlebar { height: 34px; justify-content: space-between; padding: 0 12px; color: #8da0aa; background: #0c1218; font-size: 9px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #455864; }
.window-dots i:first-child { background: #e26b68; }.window-dots i:nth-child(2) { background: #e3b85c; }.window-dots i:last-child { background: var(--accent); }
.mode-pill { padding: 3px 7px; color: var(--accent-light); background: rgba(35,188,162,.12); border-radius: 20px; }
.app-toolbar { height: 50px; gap: 9px; padding: 0 13px; border-block: 1px solid #273742; background: #151e26; }
.app-toolbar b { margin-right: 6px; color: var(--accent-light); font-size: 13px; }.app-toolbar > span { height: 22px; border-left: 1px solid #33454f; }
.app-toolbar i { width: 27px; height: 24px; border: 1px solid #33454f; border-radius: 5px; background: #1b2730; }
.app-toolbar button { margin-left: auto; padding: 6px 11px; color: #071713; font-size: 9px; font-weight: 800; border: 0; border-radius: 5px; background: var(--accent); }
.app-body { display: grid; grid-template-columns: 176px 1fr; height: 420px; }
.app-sidebar { position: relative; overflow: hidden; padding: 9px 8px 62px; border-right: 1px solid #283842; background: #141d25; }
.app-sidebar strong { display: block; margin: 2px 0 5px; color: #d4dfe4; font-size: 9px; }
.tool-section { margin-bottom: 3px; }.tool-section small { display: block; margin-bottom: 2px; color: #a5b4bc; font-size: 5.5px; font-weight: 800; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 3px; margin-bottom: 3px; }
.tool-grid span { min-width: 0; padding: 2px 3px; overflow: hidden; color: #a7b5bc; font-size: 5.4px; line-height: 8px; white-space: nowrap; text-overflow: ellipsis; border: 1px solid #2b3b45; border-radius: 3px; background: #18232c; }
.tool-grid .active { color: #071713; border-color: var(--accent); background: var(--accent); }
.mock-pages { position: absolute; right: 8px; bottom: 7px; left: 8px; padding-top: 5px; border-top: 1px solid #273742; }
.mock-pages strong { margin-bottom: 3px; }.page { margin: 2px 0; padding: 3px 5px; color: #778b96; font-size: 6px; border-radius: 3px; }.page.active { color: #ddf9f3; background: rgba(35,188,162,.13); }
.canvas-stage { position: relative; overflow: hidden; background: #0e141a; }
.canvas-grid { position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(#1a252d 1px, transparent 1px), linear-gradient(90deg,#1a252d 1px, transparent 1px); background-size: 18px 18px; }
.process-title { position: absolute; top: 18px; left: 22px; color: #dfe9ed; font-size: 13px; font-weight: 750; }
.process-title small { display: block; margin-top: 3px; color: #657b86; font-size: 6px; font-weight: 800; letter-spacing: .12em; }
.connection-chip { position: absolute; top: 18px; right: 17px; display: flex; align-items: center; gap: 5px; padding: 5px 8px; color: #79dfcc; font-size: 6px; font-weight: 900; letter-spacing: .08em; border: 1px solid rgba(85,214,190,.32); border-radius: 20px; background: rgba(35,188,162,.08); }
.connection-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-light); box-shadow: 0 0 0 3px rgba(85,214,190,.1); }
.tank { position: absolute; width: 76px; height: 126px; border: 3px solid #708691; border-radius: 14px 14px 22px 22px; background: linear-gradient(to top, rgba(35,188,162,.7) var(--level), rgba(20,31,40,.8) var(--level)); box-shadow: inset 0 0 20px rgba(35,188,162,.12); }
.tank::before, .tank::after { content: ""; position: absolute; left: 50%; width: 38px; border-top: 3px solid #708691; transform: translateX(-50%); }.tank::before { top: -10px; }.tank::after { bottom: -10px; }
.tank span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.tank-one { --level: 72%; left: 38px; top: 92px; }.tank-two { --level: 48%; left: 216px; top: 92px; }
.pipe { position: absolute; z-index: 1; background: #69808b; box-shadow: 0 0 0 1px rgba(120,151,163,.08); }
.pipe-main { left: 114px; top: 181px; width: 102px; height: 5px; }
.pipe-drop { left: 146px; top: 181px; width: 5px; height: 83px; }
.pipe-out { left: 292px; top: 181px; width: 83px; height: 5px; }
.pipe-return { left: 337px; top: 181px; width: 5px; height: 108px; }
.plant-symbol { position: absolute; z-index: 2; width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 7px 11px rgba(0,0,0,.24)); }
.plant-pump-one { left: 121px; top: 226px; }.plant-pump-two { left: 354px; top: 274px; width: 48px; height: 48px; }
.plant-motor { left: 220px; top: 277px; width: 56px; height: 56px; }.plant-valve { left: 169px; top: 158px; width: 43px; height: 43px; }
.plant-pressure { left: 302px; top: 134px; width: 38px; height: 38px; }.plant-temperature { left: 352px; top: 194px; width: 36px; height: 36px; }
.process-value { position: absolute; z-index: 3; min-width: 72px; padding: 7px 9px; color: var(--accent-light); font-size: 14px; font-weight: 800; border: 1px solid #30454e; border-radius: 7px; background: rgba(15,24,31,.92); box-shadow: 0 8px 18px rgba(0,0,0,.16); }.process-value small { color: #8599a3; font-size: 7px; font-weight: 500; }
.value-volume { left: 23px; top: 244px; }.value-pressure { right: 21px; top: 72px; }.value-temperature { right: 21px; top: 112px; }
.alarm-chip { position: absolute; z-index: 3; right: 18px; bottom: 70px; padding: 6px 9px; color: #ff9fa6; font-size: 7px; font-weight: 900; letter-spacing: .06em; border: 1px solid rgba(224,82,94,.42); border-radius: 6px; background: rgba(224,82,94,.1); }
.action-control { position: absolute; z-index: 3; bottom: 23px; padding: 9px 12px; color: #071713; font-size: 8px; font-weight: 900; border-radius: 7px; background: var(--accent); box-shadow: 0 10px 24px rgba(35,188,162,.18); }
.action-one { left: 23px; }.action-two { left: 112px; background: #4da3ff; box-shadow: 0 10px 24px rgba(77,163,255,.18); }
.selection-corner { position: absolute; right: 22px; bottom: 26px; width: 10px; height: 10px; border: 2px solid #0b1117; background: var(--accent-light); }
.app-status { height: 25px; padding-left: 12px; color: #6f838e; font-size: 8px; border-top: 1px solid #273742; background: #111920; }

.stat-strip { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 72px; padding: 24px 0; border-block: 1px solid rgba(85,214,190,.15); }
.stat-strip div { display: grid; padding-left: 28px; border-left: 1px solid #2a3a44; }.stat-strip div:first-child { padding-left: 0; border-left: 0; }
.stat-strip strong { color: var(--accent-light); font-size: 25px; letter-spacing: -.03em; }.stat-strip span { color: #81939d; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }

.section { padding: 116px 0; }
.split { display: grid; grid-template-columns: .88fr 1.12fr; gap: 76px; align-items: center; }
.section h2, .contact h2 { margin: 15px 0 22px; font-size: clamp(37px, 4.2vw, 58px); line-height: 1.05; letter-spacing: -.045em; }
.section-copy > p, .section-head > p, .sps-grid > div > p { color: var(--muted); font-size: 17px; }
.feature-lines { display: grid; gap: 25px; margin-top: 40px; }
.feature-lines article { display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.feature-lines article > span { display: grid; width: 38px; height: 38px; place-items: center; color: var(--accent-light); font-size: 11px; font-weight: 800; border: 1px solid rgba(35,188,162,.32); border-radius: 10px; background: rgba(35,188,162,.07); }
.feature-lines h3 { margin: 0 0 5px; font-size: 17px; }.feature-lines p { margin: 0; color: var(--muted); font-size: 14px; }
.editor-card { padding: 15px; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(145deg,#18242d,#101820); box-shadow: 0 28px 65px rgba(0,0,0,.32); }
.editor-card img { width: 100%; border-radius: 15px; }

.features { background: #0e151c; border-block: 1px solid rgba(255,255,255,.03); }
.section-head { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 70px; margin-bottom: 50px; }
.section-head h2 { max-width: 760px; margin-bottom: 0; }.section-head > p { margin: 0 0 7px; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.feature-card { min-height: 245px; padding: 29px; border: 1px solid #253640; border-radius: 18px; background: linear-gradient(145deg,#141f28,#111920); transition: transform .25s, border-color .25s; }
.feature-card:hover { transform: translateY(-5px); border-color: #3b5660; }
.card-icon { display: grid; width: 43px; height: 43px; place-items: center; margin-bottom: 34px; color: var(--accent-light); font-size: 19px; font-weight: 900; border: 1px solid rgba(35,188,162,.3); border-radius: 11px; background: rgba(35,188,162,.08); }
.feature-card h3 { margin: 0 0 10px; font-size: 19px; }.feature-card p { margin: 0; color: var(--muted); font-size: 14px; }
.accent-card { border-color: rgba(35,188,162,.4); background: linear-gradient(145deg,rgba(35,188,162,.14),#111920 62%); }

.libraries { background: #0e151c; border-bottom: 1px solid rgba(255,255,255,.035); }
.library-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.library-card { min-height: 300px; padding: 28px; border: 1px solid #2b3d47; border-radius: 18px; background: linear-gradient(145deg,#16222b,#101820); }
.library-number { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 44px; color: #071713; border-radius: 11px; background: var(--accent); font-size: 11px; font-weight: 900; }
.library-card small { color: var(--accent-light); font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.library-card h3 { margin: 9px 0 12px; font-size: 22px; line-height: 1.15; }.library-card p { margin: 0; color: var(--muted); font-size: 14px; }
.automation-card { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; margin-top: 18px; padding: 38px; border: 1px solid rgba(35,188,162,.4); border-radius: 20px; background: radial-gradient(circle at 15% 0,rgba(35,188,162,.15),transparent 40%),#111a22; }
.automation-copy h3 { max-width: 560px; margin: 12px 0; font-size: 29px; line-height: 1.12; }.automation-copy p { margin: 0; color: var(--muted); font-size: 14px; }
.automation-flow { display: grid; gap: 9px; padding: 0; margin: 0; list-style: none; }
.automation-flow li { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #2b3d47; border-radius: 11px; background: rgba(11,17,23,.58); }
.automation-flow li > span { display: grid; width: 30px; height: 30px; place-items: center; color: #071713; border-radius: 50%; background: var(--accent-light); font-size: 10px; font-weight: 900; }
.automation-flow strong, .automation-flow small { display: block; }.automation-flow strong { font-size: 13px; }.automation-flow small { margin-top: 2px; color: var(--muted); font-size: 10px; }

.warehouse { overflow: hidden; background: radial-gradient(circle at 82% 30%,rgba(35,188,162,.12),transparent 34%),#0b1117; }
.warehouse-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 76px; align-items: center; }
.warehouse-copy > p { max-width: 620px; color: var(--muted); font-size: 17px; }
.warehouse-points { display: grid; gap: 13px; padding: 0; margin: 34px 0 0; list-style: none; }
.warehouse-points li { display: grid; gap: 3px; padding: 16px 18px; border-left: 3px solid var(--accent); background: rgba(255,255,255,.025); }
.warehouse-points strong { font-size: 15px; }.warehouse-points span { color: var(--muted); font-size: 13px; }
.warehouse-panel { padding: 22px; border: 1px solid #38505c; border-radius: 20px; background: linear-gradient(145deg,#17232c,#101820); box-shadow: 0 30px 70px rgba(0,0,0,.34); }
.warehouse-panel-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid var(--line); font-weight: 800; }
.warehouse-panel-head small { padding: 5px 9px; color: var(--accent-light); border: 1px solid rgba(35,188,162,.35); border-radius: 999px; font-size: 8px; letter-spacing: .11em; }
.warehouse-order { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 18px; padding: 15px; border: 1px solid #2b3d47; border-radius: 12px; background: #101820; }
.warehouse-order small, .warehouse-route small, .warehouse-result small { display: block; color: #738791; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.warehouse-order strong, .warehouse-route strong, .warehouse-result strong { display: block; margin-top: 3px; font-size: 13px; }
.status-ready { flex: 0 0 auto; padding: 5px 9px; color: #071713; border-radius: 999px; background: var(--accent-light); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.warehouse-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 12px; margin: 16px 0; }
.warehouse-route div { padding: 16px; border: 1px solid #2b3d47; border-radius: 12px; background: #131e26; }
.warehouse-route div:last-child { border-color: rgba(35,188,162,.48); }.warehouse-route > i { align-self: center; color: var(--accent-light); font-size: 23px; font-style: normal; }
.warehouse-route span { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; }
.warehouse-progress { height: 4px; overflow: hidden; border-radius: 999px; background: #25343e; }.warehouse-progress span { display: block; width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--accent-dark),var(--accent-light)); }
.warehouse-result { display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 15px; border: 1px solid rgba(35,188,162,.28); border-radius: 12px; background: rgba(35,188,162,.07); }
.warehouse-result > span { display: grid; width: 30px; height: 30px; place-items: center; color: #071713; border-radius: 50%; background: var(--accent); font-weight: 900; }
.warehouse-tech { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }.warehouse-tech span { padding: 5px 8px; color: #8fa1aa; border: 1px solid #2b3d47; border-radius: 7px; font-size: 9px; }

.symbols { overflow: hidden; }
.state-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; margin: 0 0 24px; color: #b6c3ca; font-size: 13px; }
.state-legend span { display: inline-flex; align-items: center; gap: 8px; }
.state-legend i { width: 11px; height: 11px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.035); }
.state-off { background: #a7b0b8; }.state-on { background: #55d6be; }.state-fault { background: #e0525e; }.state-manual { background: #4da3ff; }
.symbol-stage { position: relative; display: grid; justify-items: center; max-width: 780px; margin-inline: auto; padding: 22px 22px 16px; border: 1px solid #2b3d47; border-radius: 24px; background: radial-gradient(circle at 50% 18%,rgba(35,188,162,.09),transparent 43%),#101820; box-shadow: 0 25px 65px rgba(0,0,0,.24); }
.symbol-stage img { width: min(100%,640px); height: auto; max-height: 650px; object-fit: contain; transition: opacity .18s ease; }
.symbol-stage img.switching { opacity: .18; }
.symbol-stage figcaption { margin-top: 13px; color: #91a3ad; font-size: 13px; text-align: center; }
.category-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 28px; }
.category-row button { padding: 8px 14px; color: #91a3ad; font: inherit; font-size: 12px; border: 1px solid #2a3a44; border-radius: 999px; background: #111920; cursor: pointer; transition: color .2s,border-color .2s,background .2s,transform .2s; }
.category-row button:hover { color: #dce7eb; border-color: #48606b; transform: translateY(-1px); }
.category-row button.active { color: #071512; border-color: var(--accent); background: var(--accent-light); font-weight: 800; }
.category-row button:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }

.sps { background: linear-gradient(135deg,#0e171d,#101c23); border-block: 1px solid #1f303a; }
.sps-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 86px; align-items: center; }
.notice { display: grid; grid-template-columns: 34px 1fr; gap: 12px; margin-top: 30px; padding: 16px; color: #d9c99d; border: 1px solid rgba(243,201,105,.35); border-radius: 12px; background: rgba(243,201,105,.07); }
.notice > span { display: grid; width: 28px; height: 28px; place-items: center; color: #271f0d; font-weight: 900; border-radius: 50%; background: var(--warning); }.notice p { margin: 0; font-size: 13px; }
.signal-flow { display: grid; grid-template-columns: 1fr; justify-items: stretch; }
.driver-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.driver-grid .flow-node { min-height: 128px; }
.flow-node { padding: 20px 22px; border: 1px solid #30434d; border-radius: 13px; background: #131e26; box-shadow: 0 16px 34px rgba(0,0,0,.2); }
.flow-node small { display: block; color: #71858f; font-size: 9px; font-weight: 800; letter-spacing: .13em; }.flow-node strong { display: block; margin: 4px 0; }.flow-node span { color: var(--muted); font-size: 12px; }
.flow-node.active { border-color: rgba(35,188,162,.6); background: linear-gradient(120deg,rgba(35,188,162,.13),#131e26); }.flow-node.active small, .flow-node.active strong { color: var(--accent-light); }
.flow-node.muted { opacity: .68; border-style: dashed; }
.signal-flow > i { position: relative; width: 2px; height: 33px; margin-left: 42px; background: #35505a; }.signal-flow > i span { position: absolute; bottom: -1px; left: -3px; width: 8px; height: 8px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); }

.section-head.compact { grid-template-columns: 1fr; }
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; padding: 0; margin: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; min-height: 205px; padding: 0 30px 0 0; }.steps li:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 58px; right: 20px; border-top: 1px dashed #34505a; }
.steps li > span { position: relative; z-index: 2; display: grid; width: 44px; height: 44px; place-items: center; color: #071713; font-weight: 900; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 7px var(--bg); }
.steps h3 { margin: 26px 0 8px; font-size: 18px; }.steps p { margin: 0; color: var(--muted); font-size: 14px; }

.contact { padding: 40px 0 110px; }
.contact-card { display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 54px 58px; border: 1px solid rgba(35,188,162,.35); border-radius: var(--radius); background: radial-gradient(circle at 80% 0,rgba(35,188,162,.18),transparent 42%),#131e25; }
.contact-card h2 { margin-bottom: 13px; }.contact-card p { max-width: 700px; margin: 0; color: var(--muted); }.contact-card .button { flex: 0 0 auto; }
.site-footer { padding: 34px 0; color: #748892; border-top: 1px solid #22313a; background: #090e13; font-size: 12px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr auto auto; align-items: center; gap: 28px; }.footer-brand strong { color: var(--text); }.footer-grid p { margin: 0; }.footer-grid nav { display: flex; gap: 18px; }.footer-grid a:hover { color: var(--accent-light); }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; transition-delay: var(--delay,0ms); }
[data-reveal].visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .main-nav { gap: 17px; }
  .hero { min-height: auto; padding-top: 170px; }
  .hero-grid, .split, .sps-grid, .warehouse-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: 62px; }.hero-copy { text-align: center; }.hero-copy > p, .hero h1 { margin-inline: auto; }.eyebrow, .hero-actions, .hero-checks { justify-content: center; }
  .app-window, .hero-reference-card { max-width: 720px; margin-inline: auto; transform: none; }
  .feature-grid { grid-template-columns: repeat(2,1fr); }.section-head { grid-template-columns: 1fr; gap: 18px; }.section-head > p { max-width: 680px; }
  .library-grid { grid-template-columns: 1fr; }.library-card { min-height: auto; }.library-number { margin-bottom: 25px; }.automation-card { grid-template-columns: 1fr; gap: 32px; }
  .driver-grid .flow-node { min-height: auto; }
  .steps { grid-template-columns: repeat(2,1fr); gap: 35px 0; }.steps li:nth-child(2)::after { display: none; }
  .contact-card { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  :root { --shell: min(100% - 28px, 620px); }
  .launch-banner { min-height: 52px; align-items: center; gap: 7px; padding: 6px 10px; text-align: center; line-height: 1.15; }
  .launch-banner strong { padding-inline: 7px; font-size: 8px; }
  .launch-banner span { font-size: 10px; }
  .launch-banner p { max-width: 170px; font-size: 9px; }
  .site-header { inset: 52px 0 auto; }
  .nav-wrap { min-height: 68px; }
  .nav-toggle { display: block; cursor: pointer; }
  .main-nav { position: absolute; top: 68px; left: 14px; right: 14px; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: 10px; border: 1px solid #2c3d47; border-radius: 14px; background: rgba(16,24,32,.98); box-shadow: 0 20px 50px rgba(0,0,0,.42); }
  .main-nav.open { display: flex; }.main-nav a { padding: 12px; }.main-nav .nav-cta { margin-top: 6px; text-align: center; }
  .hero { padding-top: 160px; }.hero h1 { font-size: clamp(44px,14vw,66px); }.hero-copy > p { font-size: 16px; }
  .app-body { grid-template-columns: 110px 1fr; height: 330px; }.app-sidebar { padding: 6px 5px 48px; }.app-sidebar strong { font-size: 7px; }.tool-section { margin-bottom: 1px; }.tool-section small { margin-bottom: 1px; font-size: 4.5px; }.tool-grid { grid-template-columns: 1fr 1fr; gap: 1px 2px; max-height: none; margin-bottom: 1px; }.tool-grid span { padding: 1px 2px; font-size: 4.3px; line-height: 6px; }.mock-pages { right: 5px; bottom: 5px; left: 5px; }.page { font-size: 5px; }
  .process-title { top: 14px; left: 13px; font-size: 10px; }.connection-chip { display: none; }
  .tank { transform: scale(.68); transform-origin: top left; }.tank-one { left: 18px; top: 76px; }.tank-two { left: 138px; top: 76px; }
  .pipe-main { left: 72px; top: 138px; width: 66px; }.pipe-drop { left: 93px; top: 138px; height: 66px; }.pipe-out { left: 190px; top: 138px; width: 27px; }.pipe-return { left: 214px; top: 138px; height: 76px; }
  .plant-pump-one { left: 73px; top: 188px; width: 40px; height: 40px; }.plant-valve { left: 105px; top: 122px; width: 34px; height: 34px; }.plant-motor { left: 145px; top: 220px; width: 43px; height: 43px; }
  .plant-pump-two, .plant-pressure, .plant-temperature, .value-pressure, .value-temperature { display: none; }
  .value-volume { left: 12px; top: 205px; min-width: 61px; font-size: 11px; }.alarm-chip { right: 10px; bottom: 55px; }
  .action-control { bottom: 13px; padding: 7px 9px; font-size: 7px; }.action-one { left: 12px; }.action-two { left: 82px; }
  .stat-strip { grid-template-columns: 1fr 1fr; gap: 22px 0; }.stat-strip div:nth-child(3) { padding-left: 0; border-left: 0; }
  .section { padding: 84px 0; }.section h2, .contact h2 { font-size: 39px; }.feature-grid, .driver-grid { grid-template-columns: 1fr; }.feature-card { min-height: auto; }.card-icon { margin-bottom: 23px; }
  .warehouse-route { grid-template-columns: 1fr; }.warehouse-route > i { justify-self: center; transform: rotate(90deg); }
  .automation-card { padding: 27px; }.automation-copy h3 { font-size: 25px; }
  .symbol-stage { padding: 14px 12px 12px; }.symbol-stage img { max-height: 520px; }.steps { grid-template-columns: 1fr; }.steps li { min-height: 170px; }.steps li::after { display: none; }
  .contact-card { padding: 35px 27px; }.footer-grid { grid-template-columns: 1fr; }.footer-grid nav { order: 4; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

.legal-page { background: #0b1117; }
.legal-back { min-height: 40px; padding-inline: 15px; font-size: 13px; }
.legal-content { max-width: 860px; min-height: 75vh; padding-top: 190px; padding-bottom: 100px; }
.legal-content h1 { margin: 12px 0 34px; font-size: clamp(40px,7vw,70px); line-height: 1; letter-spacing: -.05em; overflow-wrap: anywhere; hyphens: auto; }
.legal-content h2 { margin: 38px 0 10px; font-size: 21px; }
.legal-content p { color: #a8b7bf; }
.legal-content p a { color: var(--accent-light); text-decoration: underline; text-decoration-color: rgba(85,214,190,.38); text-underline-offset: 3px; }
.legal-content p a:hover { text-decoration-color: var(--accent-light); }
.legal-warning { margin: 0 0 42px; padding: 20px; color: #e5d6a8; border: 1px solid rgba(243,201,105,.4); border-radius: 13px; background: rgba(243,201,105,.07); }
.legal-warning strong { color: var(--warning); }.legal-warning p { margin: 5px 0 0; color: #cbbb8d; }