:root {
  --h-bg: #07090d;
  --h-panel: #0e1117;
  --h-panel-2: #141821;
  --h-fg: #e6edf3;
  --h-soft: #c5cbd6;
  --h-dim: #6e7681;
  --h-line: rgba(255,255,255,0.08);
  --h-line-2: rgba(255,255,255,0.14);
  --h-ok: #3fb950;
  --h-warn: #d29922;
  --h-bad: #f85149;
  --h-info: #58a6ff;
  --h-violet: #a371f7;
  --h-pink: #ff7b9c;
  --h-orange: #ff9a3a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.design-h {
  background: var(--h-bg);
  background-image:
    radial-gradient(circle at 0% 0%, rgba(88,166,255,0.06), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(163,113,247,0.06), transparent 40%);
  color: var(--h-fg);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.design-h h1, .design-h h2, .design-h h3, .design-h h4 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; }
.design-h em { font-style: italic; color: var(--h-info); }
.design-h .mono, .design-h .h-eyebrow, .design-h .h-srv-id, .design-h .h-tag, .design-h .h-srv-meta, .design-h .h-srv-status, .design-h .h-panel-meta, .design-h .h-panel-title, .design-h .h-status-pill, .design-h .h-kpi-label, .design-h .h-kpi-pill, .design-h .h-stat span, .design-h .h-legend-tag, .design-h .h-legend-stops, .design-h .h-info-k, .design-h .h-step-n, .design-h .h-srv-chart-label { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* ===== NAV ===== */
.h-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 0.85rem clamp(1rem, 3vw, 2rem); background: rgba(7,9,13,0.85); backdrop-filter: blur(16px); border-bottom: 1px solid var(--h-line); }
.h-brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--h-fg); }
.h-brand svg { width: 24px; height: 24px; }
.h-brand > span:first-of-type { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.h-brand-tag { font-family: "JetBrains Mono"; font-size: 0.66rem; letter-spacing: 0.16em; padding: 0.18rem 0.45rem; border: 1px solid var(--h-line-2); border-radius: 4px; color: var(--h-dim); }
.h-nav-links { display: flex; gap: 1.5rem; }
.h-nav-links a { color: var(--h-soft); text-decoration: none; font-size: 0.88rem; font-weight: 500; transition: color 0.15s; }
.h-nav-links a:hover { color: var(--h-fg); }
@media (max-width: 900px) { .h-nav-links { display: none; } }
.h-nav-status { display: flex; align-items: center; gap: 0.8rem; }
.h-status-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.75rem; background: rgba(63,185,80,0.1); border: 1px solid rgba(63,185,80,0.3); border-radius: 999px; font-size: 0.74rem; color: var(--h-ok); letter-spacing: 0.04em; }
.h-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--h-ok); box-shadow: 0 0 10px var(--h-ok); animation: h-pulse 2s infinite; }
@media (max-width: 680px) { .h-status-pill { display: none; } }

/* ===== BUTTONS ===== */
.h-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.75rem 1.4rem; font-family: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; border: none; border-radius: 8px; text-decoration: none; transition: transform 0.2s, background 0.2s; }
.h-btn:hover { transform: translateY(-1px); }
.h-btn-sm { padding: 0.5rem 0.95rem; font-size: 0.82rem; }
.h-btn-primary { background: var(--h-info); color: #04070d; }
.h-btn-primary:hover { background: #79b8ff; }
.h-btn-ghost { background: transparent; color: var(--h-fg); border: 1px solid var(--h-line-2); }
.h-btn-ghost:hover { border-color: var(--h-fg); }
.h-btn-full { width: 100%; justify-content: center; }

/* ===== HERO ===== */
.h-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3rem; max-width: 1400px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem) clamp(4rem, 6vw, 6rem); align-items: center; }
@media (max-width: 1000px) { .h-hero { grid-template-columns: 1fr; gap: 2.5rem; } }
.h-tag { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.85rem; background: rgba(255,255,255,0.03); border: 1px solid var(--h-line); border-radius: 999px; font-size: 0.74rem; letter-spacing: 0.08em; color: var(--h-soft); margin-bottom: 1.6rem; }
.h-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--h-info); box-shadow: 0 0 10px var(--h-info); animation: h-pulse 1.8s infinite; }
.h-hero-title { font-size: clamp(2.4rem, 5.5vw, 4.4rem); margin-bottom: 1.4rem; }
.h-grad { background: linear-gradient(110deg, #58a6ff, #a371f7 60%, #ff7b9c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-hero-sub { color: var(--h-soft); font-size: clamp(1rem, 1.6vw, 1.12rem); max-width: 52ch; margin-bottom: 2rem; }
.h-hero-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.h-hero-legend { padding: 1rem 1.2rem; background: rgba(255,255,255,0.025); border: 1px solid var(--h-line); border-radius: 12px; max-width: 380px; }
.h-legend-tag { font-size: 0.7rem; letter-spacing: 0.12em; color: var(--h-dim); margin-bottom: 0.4rem; display: block; }
.h-legend-bar { height: 8px; border-radius: 4px; background: linear-gradient(to right, #d62828 0%, #ff8c00 25%, #fbbf24 45%, #84cc16 70%, #22c55e 90%, #06b6d4 100%); margin-bottom: 0.35rem; }
.h-legend-stops { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--h-dim); letter-spacing: 0.04em; }

/* ===== HEATMAP PANEL ===== */
.h-heatmap-panel { background: var(--h-panel); border: 1px solid var(--h-line); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6); }
.h-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.1rem; background: var(--h-panel-2); border-bottom: 1px solid var(--h-line); }
.h-panel-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; }
.h-panel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--h-warn); box-shadow: 0 0 8px var(--h-warn); }
.h-panel-title strong { font-weight: 600; letter-spacing: 0.06em; }
.h-panel-meta { display: flex; align-items: center; gap: 0.85rem; font-size: 0.74rem; color: var(--h-dim); }
.h-panel-live { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--h-bad); }
.h-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--h-bad); animation: h-blink 1.2s infinite; }

.h-heatmap { position: relative; aspect-ratio: 4 / 3; background: #0a0d12; overflow: hidden; }

/* Floor plan */
.h-floor { position: absolute; inset: 4%; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); gap: 2px; }
.h-room { background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.05); }

/* Heat blobs - the "heatmap" effect */
.h-blob { position: absolute; border-radius: 50%; filter: blur(36px); pointer-events: none; mix-blend-mode: screen; animation: h-breathe 5s ease-in-out infinite; }
.h-blob-1 { top: 12%; left: 14%; width: 30%; height: 35%; background: radial-gradient(circle, #22c55e 0%, #06b6d4 35%, transparent 75%); }
.h-blob-2 { top: 18%; left: 52%; width: 28%; height: 36%; background: radial-gradient(circle, #84cc16 0%, #fbbf24 50%, transparent 80%); animation-delay: -1.2s; }
.h-blob-3 { top: 56%; left: 8%; width: 32%; height: 38%; background: radial-gradient(circle, #22c55e 0%, #84cc16 50%, transparent 80%); animation-delay: -2.5s; }
.h-blob-4 { top: 52%; left: 40%; width: 26%; height: 32%; background: radial-gradient(circle, #fbbf24 0%, #ff8c00 55%, transparent 80%); animation-delay: -0.8s; }
.h-blob-5 { top: 64%; left: 62%; width: 30%; height: 34%; background: radial-gradient(circle, #ff8c00 0%, #d62828 65%, transparent 80%); animation-delay: -3.2s; }
.h-blob-6 { top: 8%; left: 78%; width: 22%; height: 28%; background: radial-gradient(circle, #d62828 0%, transparent 80%); opacity: 0.7; animation-delay: -1.8s; }

/* AP markers */
.h-ap { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: rgba(7,9,13,0.85); border: 2px solid var(--h-info); display: grid; place-items: center; box-shadow: 0 0 14px rgba(88,166,255,0.6); z-index: 5; transform: translate(-50%, -50%); }
.h-ap::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--h-info); opacity: 0.5; animation: h-radar 2.5s infinite ease-out; }
.h-ap::after { content: ""; position: absolute; inset: -16px; border-radius: 50%; border: 1px solid var(--h-info); opacity: 0.25; animation: h-radar 2.5s infinite ease-out 0.4s; }
.h-ap span { font-family: "JetBrains Mono"; font-size: 0.6rem; font-weight: 700; color: var(--h-info); letter-spacing: 0.04em; position: absolute; top: 32px; white-space: nowrap; background: rgba(7,9,13,0.85); padding: 0.1rem 0.35rem; border: 1px solid var(--h-line-2); border-radius: 3px; }
.h-ap-1 { top: 24%; left: 22%; }
.h-ap-2 { top: 28%; left: 60%; }
.h-ap-3 { top: 18%; left: 84%; }
.h-ap-4 { top: 64%; left: 18%; }
.h-ap-5 { top: 60%; left: 48%; }
.h-ap-6 { top: 72%; left: 76%; }

/* Scan line sweep */
.h-scan-line { position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, transparent, var(--h-info), transparent); box-shadow: 0 0 20px var(--h-info); opacity: 0.7; animation: h-sweep 6s linear infinite; pointer-events: none; }

.h-panel-foot { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--h-line); }
.h-stat { padding: 0.85rem 1rem; border-right: 1px solid var(--h-line); display: flex; flex-direction: column; gap: 0.1rem; }
.h-stat:last-child { border-right: none; }
.h-stat span { font-size: 0.7rem; color: var(--h-dim); letter-spacing: 0.06em; }
.h-stat strong { font-family: "JetBrains Mono"; font-size: 1.08rem; font-weight: 700; color: var(--h-fg); }
@media (max-width: 540px) { .h-panel-foot { grid-template-columns: repeat(2, 1fr); } .h-stat:nth-child(2) { border-right: none; } }

/* ===== SECTIONS ===== */
.h-section { max-width: 1400px; margin: 0 auto; padding: clamp(4rem, 7vw, 6rem) clamp(1rem, 3vw, 2rem); }
.h-section-head { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.h-eyebrow { display: inline-block; padding: 0.3rem 0.85rem; background: rgba(255,255,255,0.04); border: 1px solid var(--h-line); border-radius: 4px; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--h-info); margin-bottom: 1.2rem; }
.h-eyebrow-light { background: rgba(255,255,255,0.06); color: var(--h-soft); }
.h-section-head h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); }

/* ===== KPIs ===== */
.h-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .h-kpis { grid-template-columns: repeat(2, 1fr); } }
.h-kpi { padding: 1.2rem 1.3rem; background: var(--h-panel); border: 1px solid var(--h-line); border-radius: 12px; transition: border-color 0.2s, transform 0.25s; }
.h-kpi:hover { transform: translateY(-3px); border-color: var(--h-line-2); }
.h-kpi-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.h-kpi-label { font-size: 0.7rem; letter-spacing: 0.12em; color: var(--h-dim); }
.h-kpi-pill { font-size: 0.66rem; letter-spacing: 0.08em; padding: 0.18rem 0.45rem; border-radius: 4px; font-weight: 700; }
.h-pill-ok   { background: rgba(63,185,80,0.12); color: var(--h-ok); border: 1px solid rgba(63,185,80,0.3); }
.h-pill-warn { background: rgba(210,153,34,0.12); color: var(--h-warn); border: 1px solid rgba(210,153,34,0.3); }
.h-kpi strong { display: block; font-family: "JetBrains Mono"; font-size: 2.1rem; font-weight: 700; line-height: 1; margin-bottom: 0.7rem; }
.h-kpi strong i { font-style: normal; font-size: 0.55em; color: var(--h-dim); }
.h-kpi-bar { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.h-kpi-bar span { display: block; height: 100%; background: var(--h-ok); border-radius: 3px; transition: width 1s ease-out; }
.h-kpi-warn .h-kpi-bar span { background: var(--h-warn); }

/* ===== SERVICES ===== */
.h-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .h-services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .h-services { grid-template-columns: 1fr; } }
.h-srv { padding: 1.5rem 1.5rem; background: var(--h-panel); border: 1px solid var(--h-line); border-radius: 12px; transition: transform 0.25s, border-color 0.25s; position: relative; }
.h-srv:hover { transform: translateY(-4px); border-color: var(--h-line-2); }
.h-srv[data-c="green"]  { --c: #3fb950; }
.h-srv[data-c="cyan"]   { --c: #39c5cf; }
.h-srv[data-c="orange"] { --c: #ff9a3a; }
.h-srv[data-c="pink"]   { --c: #ff7b9c; }
.h-srv[data-c="amber"]  { --c: #d29922; }
.h-srv[data-c="teal"]   { --c: #2cb88e; }
.h-srv[data-c="violet"] { --c: #a371f7; }
.h-srv::before { content: ""; position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 2px; background: var(--c, var(--h-info)); border-radius: 0 0 2px 2px; opacity: 0.85; }
.h-srv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.h-srv-id { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--h-dim); }
.h-srv-status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.66rem; letter-spacing: 0.08em; color: var(--c, var(--h-info)); }
.h-srv-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--h-info)); box-shadow: 0 0 8px currentColor; animation: h-blink 2s infinite; }
.h-srv h3 { font-size: 1.18rem; margin-bottom: 0.55rem; }
.h-srv p { color: var(--h-soft); font-size: 0.92rem; margin-bottom: 1rem; min-height: 4em; }
.h-srv-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.74rem; color: var(--h-dim); padding-top: 0.9rem; border-top: 1px solid var(--h-line); }
.h-srv-feature { grid-column: span 2; }
@media (max-width: 900px) { .h-srv-feature { grid-column: auto; } }
.h-srv-chart { margin-bottom: 0.8rem; color: var(--c, var(--h-info)); padding: 0.8rem; background: rgba(255,255,255,0.025); border: 1px solid var(--h-line); border-radius: 8px; position: relative; }
.h-srv-chart svg { width: 100%; height: 56px; display: block; }
.h-srv-chart-label { position: absolute; top: 0.55rem; right: 0.8rem; font-size: 0.66rem; letter-spacing: 0.08em; color: var(--h-dim); }

/* ===== STEPS ===== */
.h-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 800px) { .h-steps { grid-template-columns: repeat(2, 1fr); } }
.h-step { padding: 1.5rem 1.4rem; background: var(--h-panel); border: 1px solid var(--h-line); border-radius: 12px; transition: transform 0.25s, border-color 0.25s; }
.h-step:hover { transform: translateY(-3px); border-color: var(--h-info); }
.h-step-n { font-size: 0.82rem; color: var(--h-info); letter-spacing: 0.08em; }
.h-step h4 { font-size: 1.05rem; margin: 0.55rem 0 0.35rem; }
.h-step p { color: var(--h-soft); font-size: 0.88rem; }

/* ===== CTA ===== */
.h-cta-section { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(5rem, 9vw, 8rem); }
.h-cta-card { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: clamp(2rem, 4vw, 3rem); background: linear-gradient(160deg, rgba(88,166,255,0.07), rgba(163,113,247,0.05)); border: 1px solid var(--h-line); border-radius: 18px; }
@media (max-width: 860px) { .h-cta-card { grid-template-columns: 1fr; gap: 2rem; } }
.h-cta-left h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin: 0.6rem 0 1rem; }
.h-cta-left > p { color: var(--h-soft); margin-bottom: 1.6rem; }
.h-cta-info { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.h-cta-info li { display: grid; grid-template-columns: 80px 1fr; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid var(--h-line); }
.h-cta-info li:last-child { border-bottom: 1px solid var(--h-line); }
.h-info-k { font-size: 0.7rem; letter-spacing: 0.12em; color: var(--h-dim); text-transform: uppercase; }
.h-info-v { color: var(--h-fg); font-size: 0.92rem; }

.h-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-content: start; }
.h-form input, .h-form select, .h-form textarea { background: rgba(0,0,0,0.35); border: 1px solid var(--h-line); border-radius: 8px; padding: 0.75rem 0.9rem; color: var(--h-fg); font-family: inherit; font-size: 0.92rem; outline: none; transition: border-color 0.2s; }
.h-form input:focus, .h-form select:focus, .h-form textarea:focus { border-color: var(--h-info); }
.h-form textarea { grid-column: 1 / -1; resize: vertical; }
.h-form-msg { grid-column: 1 / -1; font-size: 0.86rem; color: var(--h-ok); min-height: 1.2rem; }

/* ===== FOOTER ===== */
.h-footer { max-width: 1400px; margin: 0 auto; padding: 2rem clamp(1rem, 3vw, 2rem); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--h-line); font-size: 0.84rem; color: var(--h-dim); }

/* ===== SWITCHER ===== */
.h-switcher { position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 0.2rem; padding: 0.4rem 0.5rem 0.4rem 0.85rem; background: rgba(14,17,23,0.92); backdrop-filter: blur(14px); border: 1px solid var(--h-line-2); border-radius: 999px; }
.h-switcher > span { font-family: "JetBrains Mono"; font-size: 0.68rem; letter-spacing: 0.14em; color: var(--h-dim); margin-right: 0.3rem; }
.h-switcher a { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--h-dim); text-decoration: none; font-size: 0.78rem; font-weight: 700; transition: background 0.2s, color 0.2s; }
.h-switcher a:hover { color: var(--h-fg); background: rgba(255,255,255,0.05); }
.h-switcher a.active { background: var(--h-info); color: #04070d; }

/* ===== KEYFRAMES ===== */
@keyframes h-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.5; } }
@keyframes h-blink { 50% { opacity: 0.3; } }
@keyframes h-breathe { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes h-radar { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes h-sweep { 0% { transform: translateX(0); } 100% { transform: translateX(calc(100vw)); } }

@media (prefers-reduced-motion: reduce) {
  .h-blob, .h-ap::before, .h-ap::after, .h-scan-line, .h-pulse-dot, .h-tag-dot, .h-srv-status span { animation: none; }
}