.gh-demo-section { padding: 6rem 0; background: #f2f5f9; scroll-margin-top: 5.5rem; }
.gh-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-bottom: 2.5rem; }
.gh-intro h2 { color: #07152f; margin: 0; }
.gh-intro > p { color: #536580; line-height: 1.85; margin: 0; }
.gh-demo { --gh-navy: #07152f; --gh-blue: #3457ff; --gh-mint: #43dcca; --gh-line: #dce4f0; color: var(--gh-navy); background: #fff; border: 1px solid var(--gh-line); border-radius: 1.5rem; box-shadow: 0 1.5rem 4rem #142d5010; overflow: hidden; }
.gh-demo *, .gh-demo *::before, .gh-demo *::after { box-sizing: border-box; }
.gh-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.6rem; background: var(--gh-navy); color: #fff; }
.gh-topbar strong { display: flex; align-items: center; gap: .75rem; font: 700 1.15rem/1.4 Poppins, Arial, sans-serif; }
.gh-topbar svg { width: 1.7rem; height: 1.7rem; color: var(--gh-mint); }
.gh-simulation { color: #b9d6e1; font-size: .8rem; }
.gh-simulation::before, .gh-connection::before { content: ''; display: inline-block; width: .45rem; height: .45rem; margin-right: .5rem; border-radius: 50%; background: var(--gh-mint); }
.gh-body { padding: 1.6rem; }
.gh-toolbar, .gh-panel-heading, .gh-scene-heading, .gh-footer-controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.gh-toolbar { margin-bottom: 1.25rem; }
.gh-demo button { font: 600 .82rem/1.4 Poppins, Arial, sans-serif; color: #425874; background: #f5f7fb; border: 1px solid var(--gh-line); border-radius: .65rem; padding: .65rem .9rem; min-height: 44px; cursor: pointer; transition: background .18s, border-color .18s, color .18s; }
.gh-demo button:hover:not(:disabled) { background: #e9eeff; color: var(--gh-blue); border-color: #b7c6ff; }
.gh-demo button[aria-pressed="true"] { color: #fff; border-color: var(--gh-blue); background: var(--gh-blue); }
.gh-demo :is(button, input, summary):focus-visible { outline: 3px solid #3457ff; outline-offset: 4px; }
.gh-demo button:disabled, .gh-demo input:disabled { cursor: default; opacity: .55; }
.gh-zones { display: flex; gap: .5rem; }
.gh-connection { font-size: .8rem; font-weight: 600; color: #087c72; }
.gh-overview { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.25rem; }
.gh-scene-panel { background: #f6f9fd; border: 1px solid var(--gh-line); border-radius: 1rem; overflow: hidden; padding: .85rem 1rem; }
.gh-scene-heading { color: #536580; font-size: .76rem; }
.gh-scene-heading span:first-child { color: var(--gh-navy); font: 600 .9rem Poppins, Arial, sans-serif; }
.gh-scene { display: block; width: 100%; max-height: 250px; }
.gh-roof-window { transform-origin: 296px 48px; transition: transform .8s ease; }
.gh-demo.is-ventilating .gh-roof-window { transform: rotate(-14deg); }
.gh-fan { transform-box: fill-box; transform-origin: center; }
.gh-demo.is-ventilating .gh-fan { animation: gh-spin 2s linear infinite; }
.gh-heat { opacity: 0; transition: opacity .4s; }
.gh-demo.is-heating .gh-heat { opacity: 1; }
.gh-demo[data-weather="cold"] .gh-sun { fill: #b4c7e7; }
.gh-demo[data-weather="cold"] .gh-sun-halo { fill: #e3eaf6; }
.gh-demo[data-weather="hot"] .gh-sun-halo { animation: gh-sun 3s ease-in-out infinite; }
.gh-demo.is-paused *, .gh-demo.is-idle * { animation-play-state: paused !important; }
.gh-scenarios { display: flex; gap: .4rem; flex-wrap: wrap; }
.gh-scenarios button { flex: 1; font-size: .7rem; padding: .45rem .4rem; white-space: nowrap; }
.gh-scenarios button[aria-pressed="true"] { color: #096f66; background: #dff7f1; border-color: #a9e5d9; }
.gh-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; min-width: 0; }
.gh-metric { border: 1px solid var(--gh-line); border-radius: .9rem; padding: 1.05rem 1.1rem; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.gh-metric > span { color: #536580; font-size: .85rem; }
.gh-metric > div { display: flex; align-items: baseline; gap: .35rem; margin: .5rem 0; }
.gh-metric strong { font: 700 clamp(1.9rem, 3vw, 3rem)/1.1 Poppins, Arial, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.gh-metric > div > span { color: #536580; font-size: .9rem; }
.gh-metric small { color: #536580; font-size: .72rem; line-height: 1.5; }
.gh-temperature { background: #f0f3ff; border-color: #ced8ff; }
.gh-actuator strong { font-size: clamp(1.1rem, 1.6vw, 1.65rem); letter-spacing: -.02em; }
.gh-status { padding: .9rem 1rem; margin: 1.2rem 0; border-radius: .65rem; background: #ebf9f5; color: #126f60; font-size: .9rem; line-height: 1.5; }
.gh-status[data-level="warning"] { background: #fff3df; color: #875015; }
.gh-status[data-level="offline"] { background: #fff0ed; color: #963f37; }
.gh-demo.is-offline .gh-connection { color: #963f37; }
.gh-demo.is-offline .gh-connection::before { background: #c66756; }
.gh-demo.is-offline .gh-scene, .gh-demo.is-offline .gh-metrics { opacity: .6; }
.gh-detail-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.25rem; }
.gh-demo h3 { margin: 0; font: 700 .92rem/1.4 Poppins, Arial, sans-serif; letter-spacing: -.015em; }
.gh-panel-heading > span { color: #536580; font-size: .72rem; }
.gh-legend { display: flex; gap: 1.2rem; margin-top: .9rem; color: #536580; font-size: .73rem; }
.gh-legend span::before { content: ''; display: inline-block; width: 1rem; height: 0; border-top: 3px solid var(--gh-blue); margin-right: .4rem; vertical-align: middle; }
.gh-legend span+span::before { border-top: 2px dashed #0b9183; }
.gh-chart { width: 100%; height: auto; display: block; margin-top: 1rem; overflow: visible; }
.gh-chart text { font: 14px Arial, sans-serif; fill: #63748b; }
.gh-chart-grid path { stroke: #e5eaf3; fill: none; }
.gh-chart-target { stroke: #0b9183; stroke-width: 2; stroke-dasharray: 6 5; fill: none; }
.gh-chart-line { stroke: #3457ff; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; fill: none; }
.gh-chart-area { fill: #3457ff0c; }
.gh-chart-note, .gh-control-note { color: #536580; font-size: .75rem; line-height: 1.6; margin: .7rem 0 0; }
.gh-controls { padding: 1rem 1.15rem; border: 1px solid var(--gh-line); border-radius: 1rem; background: #fafbfe; }
.gh-controls .gh-panel-heading > span { color: var(--gh-blue); font-weight: 700; }
.gh-range-label { display: flex; justify-content: space-between; gap: 1rem; color: #435774; font-size: .8rem; margin: 1rem 0 .5rem; }
.gh-range-label output { color: var(--gh-navy); font-weight: 700; white-space: nowrap; }
.gh-demo input[type="range"] { display: block; width: 100%; height: 28px; accent-color: #3457ff; cursor: pointer; margin: 0; padding: 0; }
.gh-range-ends { display: flex; justify-content: space-between; color: #63748b; font-size: .68rem; }
.gh-auto { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; border-block: 1px solid var(--gh-line); padding: .8rem 0; cursor: pointer; position: relative; }
.gh-auto > span:first-child { flex: 1; font: 600 .8rem Poppins, Arial, sans-serif; }
.gh-auto small { display: block; font: 400 .72rem/1.5 Arial, sans-serif; color: #536580; margin-top: .3rem; }
.gh-auto input { position: absolute; right: 0; width: 44px; height: 28px; opacity: 0; cursor: pointer; }
.gh-switch { width: 44px; height: 25px; border-radius: 20px; background: #aebbd1; padding: 3px; flex-shrink: 0; }
.gh-switch::after { content: ''; display: block; background: #fff; width: 19px; height: 19px; border-radius: 50%; transition: transform .2s; }
.gh-auto input:checked + .gh-switch { background: #3457ff; }
.gh-auto input:checked + .gh-switch::after { transform: translateX(19px); }
.gh-auto input:focus-visible + .gh-switch { outline: 3px solid #3457ff; outline-offset: 4px; }
.gh-auto input:disabled + .gh-switch { opacity: .5; }
.gh-footer-controls { border-top: 1px solid var(--gh-line); padding-top: 1.2rem; margin-top: 1.4rem; flex-wrap: wrap; }
.gh-footer-controls > div { display: flex; gap: .6rem; flex-wrap: wrap; }
.gh-footer-controls button { font-size: .75rem; }
.gh-history { margin-top: 1.3rem; border-top: 1px solid var(--gh-line); }
.gh-history summary { cursor: pointer; padding: 1rem 0; list-style: none; color: #3457ff; font: 600 .82rem Poppins, Arial, sans-serif; display: flex; justify-content: space-between; }
.gh-history summary::-webkit-details-marker { display: none; }
.gh-history summary::after { content: '+'; }
.gh-history[open] summary::after { content: '−'; }
.gh-history-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-bottom: 1rem; }
.gh-demo table { width: 100%; border-collapse: collapse; font-size: .78rem; text-align: left; margin-top: .6rem; }
.gh-demo th, .gh-demo td { padding: .55rem .3rem; border-bottom: 1px solid var(--gh-line); }
.gh-demo th { font-weight: 600; color: #536580; }
.gh-events { padding: 0; margin: .7rem 0 0; list-style: none; }
.gh-events li { display: flex; gap: .8rem; padding: .55rem 0; font-size: .78rem; line-height: 1.5; border-bottom: 1px solid var(--gh-line); }
.gh-events time { color: #63748b; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.gh-disclaimer { color: #64758a; font-size: .73rem; line-height: 1.7; border-top: 1px solid var(--gh-line); padding-top: .85rem; margin: 0; }
.gh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes gh-spin { to { transform: rotate(360deg); } }
@keyframes gh-sun { 50% { opacity: .5; } }
@media (max-width: 980px) { .gh-intro { gap: 2rem; } .gh-overview, .gh-detail-grid { grid-template-columns: 1fr; } .gh-scene { max-height: 285px; } .gh-metrics { grid-template-columns: repeat(4,1fr); } .gh-metric { padding: 1rem; } .gh-metric > div { flex-wrap: wrap; } .gh-controls { grid-row: 1; } }
@media (max-width: 620px) { .gh-demo-section { padding: 4rem 0; } .gh-intro { grid-template-columns: 1fr; gap: 1.25rem; } .gh-intro h2 { font-size: 2.05rem; } .gh-body { padding: 1rem; } .gh-topbar { padding: 1rem; flex-wrap: wrap; gap: .4rem; } .gh-topbar strong { font-size: 1rem; } .gh-simulation { font-size: .68rem; } .gh-toolbar { flex-wrap: wrap; gap: .7rem; } .gh-connection { font-size: .72rem; } .gh-metrics { grid-template-columns: 1fr 1fr; } .gh-metric strong { font-size: 2rem; } .gh-actuator strong { font-size: 1.25rem; } .gh-metric > span { font-size: .74rem; } .gh-metric small { font-size: .68rem; } .gh-scene-panel { padding: .75rem; } .gh-scenarios { gap: .3rem; } .gh-scenarios button { white-space: normal; font-size: .64rem; } .gh-panel-heading { flex-wrap: wrap; gap: .4rem; } .gh-history-grid { grid-template-columns: 1fr; gap: 1.4rem; } .gh-footer-controls { gap: .6rem; } .gh-footer-controls > div { width: 100%; } .gh-footer-controls button { flex: 1; padding-inline: .65rem; } .gh-demo { border-radius: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .gh-demo *, .gh-demo *::before, .gh-demo *::after { animation: none !important; transition: none !important; } }
@media (max-width: 620px) { .gh-chart text { font-size: 24px; } }

.iot-service-hero .gh-hero-link { background: transparent; color: #fff; border: 1px solid #ffffff60; }
.iot-service-hero .gh-hero-link:hover { background: #ffffff14; }