/* The homepage network: real text, local SVG, transform-only node motion. */
.hero { grid-template-columns:1fr 1.05fr; gap:48px; }
.hero h1 { font-size:clamp(40px,4.25vw,64px); }
.network-demo { --net-green:#34634f; --net-manual:#9e593b; margin:0; min-width:0; padding:26px; border:1px solid #d8e1dd; border-radius:24px; background:linear-gradient(145deg,#fff 0%,#f0f5f1 70%,#e7efeb 100%); box-shadow:0 22px 65px #193e2910; }
.network-top { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:11px; font-weight:650; color:#52685c; }
.network-live { display:flex; align-items:center; gap:6px; flex-shrink:0; letter-spacing:.12em; font-size:10px; }
.network-live i { width:6px; height:6px; border-radius:50%; background:var(--net-green); }
.network-copy { display:grid; margin-top:22px; }
.network-copy>div { grid-area:1/1; transition:opacity .35s; }
.network-copy>div[aria-hidden=true] { opacity:0; visibility:hidden; }
.network-heading { font-size:clamp(19px,1.85vw,25px); line-height:1.25; letter-spacing:-.035em; font-weight:600; }
.network-description { max-width:420px; min-height:3.2em; margin-top:7px; color:#526459; font-size:13px; line-height:1.6; }
.network-graph { position:relative; height:326px; margin:12px 0 16px; isolation:isolate; }
.network-orbit { position:absolute; left:50%; top:50%; border:1px solid #487d6020; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.network-orbit-a { width:48%; height:62%; }
.network-orbit-b { width:78%; height:88%; border-style:dashed; }
.network-wires { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.network-wires path { fill:none; stroke:#afbdba; stroke-width:1; vector-effect:non-scaling-stroke; }
.network-wires [data-network-links] path { stroke:#659b7e; stroke-width:1.3; }
.network-node { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; gap:4px; width:90px; min-height:35px; padding:7px 5px; border:1px solid #cedbd3; border-radius:8px; background:#fff; box-shadow:0 4px 12px #24413308; color:#304c3c; font-size:11px; line-height:1.25; font-weight:600; text-align:center; z-index:2; }
.network-node i { position:absolute; top:-4px; right:-4px; display:grid; place-items:center; width:13px; height:13px; border-radius:50%; background:var(--net-green); color:#fff; font-size:8px; font-style:normal; opacity:0; }
.network-manual { background:#faeadd; border-color:#e7c9b4; color:#82452b; }
.network-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:116px; height:116px; display:grid; place-items:center; background:#fff; border:1px solid #d2dfd7; border-radius:50%; box-shadow:0 6px 35px #315f4121,0 0 0 8px #ffffff70; z-index:3; }
.network-core img { width:81px; height:auto; }
.network-core-ring { position:absolute; inset:-9px; border:1px solid #6d947466; border-radius:50%; }
.network-legend { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; font-size:10px; color:#596b60; }
.network-legend>span { display:flex; align-items:center; gap:5px; }
.network-legend i { width:7px; height:7px; border:1px solid #8fae9a; border-radius:2px; background:#fff; }
.network-legend>span+span i { background:#f1d4bf; border-color:#c89270; }
.network-results { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:18px; }
.network-results>span { background:#e5ede7; border:1px solid #d5e0d8; border-radius:8px; padding:10px; font-size:10px; line-height:1.35; color:#37533f; transition:background .45s,color .45s; }
.network-results b { display:block; margin-bottom:5px; font-size:17px; font-weight:500; line-height:1; }
.network-demo[data-stage="3"] .network-results>span { background:#173c2f; border-color:#173c2f; color:#fff; }
.network-demo[data-stage="3"] .network-node i { opacity:1; }
.network-demo[data-stage="3"] .network-manual { opacity:0; }
.network-controls { margin-top:19px; border-top:1px solid #ccd9d0; padding-top:5px; }
.network-controls[hidden] { display:block!important; visibility:hidden; }
.network-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.network-steps button { padding:9px 3px; border:0; border-top:2px solid transparent; background:none; color:#576b5e; font-size:10px; font-weight:600; line-height:1.25; min-height:48px; }
.network-step-number { display:block; margin-bottom:4px; font-size:9px; opacity:.8; }
.network-steps button[aria-current=step] { color:#173c2f; border-top-color:#34634f; }
.network-steps button:hover { background:#dfebe2; border-radius:0 0 4px 4px; }
.network-playback { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:7px; }
.network-example { font-size:9px; line-height:1.4; color:#5e7065; }
.network-playback>div { display:flex; gap:4px; flex-shrink:0; }
.network-playback button { border:1px solid #becfc3; border-radius:5px; background:#ffffff80; min-height:36px; padding:6px 9px; font-size:10px; color:#244734; }
.network-playback button:hover { background:#fff; }
.network-fallback { font-size:12px; color:#526459; margin-top:15px; }
.network-demo.is-enhanced .network-node { will-change:transform,opacity; }
.network-demo[data-playing=true] .network-core-ring { animation:network-breathe 2.8s ease-in-out infinite; }
.network-demo[data-playing=true]:not([data-stage="0"]) [data-network-links] path { stroke-dasharray:4 8; animation:network-stream 1.6s linear infinite; }
@keyframes network-breathe { 50% { transform:scale(1.065); opacity:.4; } }
@keyframes network-stream { to { stroke-dashoffset:-24; } }
@media(min-width:1500px) { .hero h1 { font-size:68px; } .network-graph { height:360px; } }
@media(max-width:1100px) { .hero { gap:32px; } .network-demo { padding:20px; } .network-node { width:82px; font-size:10px; } .network-core { width:100px; height:100px; } .network-core img { width:70px; } }
@media(max-width:900px) { .hero { grid-template-columns:1fr; } .network-demo { width:100%; max-width:620px; } .network-node { width:96px; font-size:12px; } .network-heading { font-size:25px; } .network-graph { height:340px; } }
@media(max-width:600px) {
 .hero { gap:0; } .hero h1 { font-size:clamp(32px,8.6vw,45px); }
 .hero .network-demo { order:6; margin-top:28px; }
 .network-demo { padding:19px 14px 12px; border-radius:18px; }
 .network-top { font-size:10px; gap:6px; }
 .network-copy { margin-top:19px; }
 .network-heading { font-size:21px; }
 .network-description { font-size:12px; min-height:4.8em; }
 .network-graph { height:310px; margin-block:2px 16px; }
 .network-node { width:80px; font-size:10px; min-height:34px; padding:7px 3px; }
 .network-core { width:90px; height:90px; } .network-core img { width:64px; }
 .network-results { gap:5px; margin-top:14px; } .network-results>span { padding:9px 7px; font-size:10px; }
 .network-example { max-width:140px; }
 .network-playback button { min-height:44px; padding-inline:8px; }
}
@media(max-width:360px) { .network-node { width:72px; font-size:9px; } .network-demo { padding-inline:10px; } .network-heading { font-size:19px; } .network-core { width:82px; height:82px; } .network-core img { width:60px; } .network-steps button { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { .network-demo *, .network-demo *::before, .network-demo *::after { animation:none!important; transition:none!important; } }

/* Static positions also work under the production Content Security Policy. */
.network-node[data-network-node="booking"] { --x:20%;--y:12%; }
.network-node[data-network-node="pms"] { --x:50%;--y:8%; }
.network-node[data-network-node="payment"] { --x:80%;--y:12%; }
.network-node[data-network-node="copy"] { --x:50%;--y:50%; }
.network-node[data-network-node="checkin"] { --x:84%;--y:40%; }
.network-node[data-network-node="mail"] { --x:50%;--y:50%; }
.network-node[data-network-node="access"] { --x:80%;--y:70%; }
.network-node[data-network-node="excel"] { --x:50%;--y:50%; }
.network-node[data-network-node="invoice"] { --x:50%;--y:88%; }
.network-node[data-network-node="reporting"] { --x:20%;--y:70%; }
.network-node[data-network-node="follow"] { --x:50%;--y:50%; }
.network-node[data-network-node="guest"] { --x:16%;--y:40%; }