/* ===== The vGuest system — scroll-driven, warm, logo-rich diagram ===== */
.vsys { position: relative; height: 300vh; background: #f6f3ed; color: #1a1410; transition: background-color .8s ease; }
.vsys.stage-1 { background: #f8efe5; }
.vsys.stage-2 { background: #f7ece4; }
.vsys-sticky {
  position: sticky; top: 0; height: 100vh; min-height: 640px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(20px, 3vh, 40px) clamp(20px, 5vw, 56px); overflow: hidden;
}

/* ambient glow behind the core */
.vsys-glow {
  position: absolute; z-index: 0; left: 50%; top: 54%; width: min(780px, 82%); height: 320px;
  transform: translate(-50%, -50%); border-radius: 50%; filter: blur(64px); opacity: .55; pointer-events: none;
  background: radial-gradient(closest-side, rgba(240,140,70,.42), rgba(240,140,70,0));
  transition: background .8s ease; animation: vsys-breathe 7s ease-in-out infinite;
}
.vsys.stage-1 .vsys-glow { background: radial-gradient(closest-side, rgba(233,122,86,.42), rgba(233,122,86,0)); }
.vsys.stage-2 .vsys-glow { background: radial-gradient(closest-side, rgba(214,108,70,.40), rgba(214,108,70,0)); }
@keyframes vsys-breathe { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity:.5; } 50% { transform: translate(-50%,-50%) scale(1.07); opacity:.62; } }

/* head */
.vsys-head { position: relative; z-index: 2; text-align: center; max-width: 800px; }
.vsys-eyebrow { display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:#c2592b; margin-bottom:12px; }
.vsys-head h2 { font-family:"Cairo",sans-serif; font-weight:800; letter-spacing:-.02em; font-size:clamp(25px,3.3vw,42px); line-height:1.05; margin:0; }

/* journey steps */
.vsys-steps { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; max-width:680px; margin:clamp(18px,3vh,32px) 0 clamp(6px,1.4vh,16px); }
.vsys-steps-track { position:absolute; left:16.6%; right:16.6%; top:9px; height:2px; background:#e7ddce; border-radius:2px; }
.vsys-steps-fill { position:absolute; left:0; top:0; height:100%; background:#d9612e; border-radius:2px; transition:width .55s cubic-bezier(.4,0,.2,1); }
.vsys-step { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:24px; }
.vsys-step::before { content:""; position:absolute; top:3px; left:50%; transform:translateX(-50%); width:13px; height:13px; border-radius:50%; background:#fbf8f3; border:2px solid #d8ccbd; transition:all .4s; z-index:2; }
.vsys-step.on::before, .vsys-step.done::before { border-color:#d9612e; background:#d9612e; box-shadow:0 0 0 4px rgba(217,97,46,.15); }
.vsys-step-tag { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#b3a899; transition:color .4s; }
.vsys-step.on .vsys-step-tag { color:#c2592b; }
.vsys-step-title { font-size:13px; font-weight:700; color:#bcb1a2; margin-top:2px; transition:color .4s; }
.vsys-step.on .vsys-step-title { color:#1a1410; }

/* diagram canvas — fixed aspect so wires/dashes scale uniformly (no distortion) */
.vsys-diagram { position:relative; z-index:1; width:100%; max-width:1000px; aspect-ratio: 1000 / 470; }
.vsys-wires { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.wire-base { fill:none; stroke:#e6dccd; stroke-width:1.4; }
.wire-flow { fill:none; stroke:#e58c4f; stroke-width:2.6; stroke-linecap:round; stroke-dasharray:5 16; opacity:0; transition:opacity .5s; }
.wire-flow.on { opacity:.95; animation:vsys-dash .9s linear infinite; }
.wire-flow.out { stroke:#cf6a35; }
@keyframes vsys-dash { to { stroke-dashoffset:-21; } }

/* omnichannel in */
.vsys-channels { position:absolute; top:0; left:0; right:0; height:40px; z-index:3; }
.vsys-chan { position:absolute; top:0; transform:translateX(-50%); display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px 7px 9px; border-radius:999px; white-space:nowrap;
  background:#fff; border:1px solid #ece5db; box-shadow:0 2px 8px rgba(40,28,16,.05);
  font-size:12.5px; font-weight:600; color:#9a8f81; opacity:.62; transition:all .45s; }
.vsys-chan img, .vsys-glyph { width:17px; height:17px; flex:0 0 auto; }
.vsys-chan img { object-fit:contain; filter:grayscale(1); opacity:.55; transition:all .45s; }
.vsys-glyph { display:grid; place-items:center; color:#b3a899; transition:color .45s; }
.vsys-glyph svg { width:17px; height:17px; }
.vsys-chan.on { opacity:1; color:#332d27; border-color:#f0ddcd; box-shadow:0 8px 20px rgba(190,90,30,.14); transform:translateX(-50%) translateY(-1px); }
.vsys-chan.on img { filter:none; opacity:1; }
.vsys-chan.on .vsys-glyph { color:#34c759; }

/* the AI layer */
.vsys-core { position:absolute; left:6%; right:6%; top:50%; transform:translateY(-50%); z-index:3;
  padding:clamp(18px,2.3vh,26px) clamp(20px,3vw,34px); border-radius:22px;
  background:linear-gradient(150deg,#1d4b80 0%,#163D6A 52%,#11304f 100%);
  border:1px solid rgba(255,255,255,.10); box-shadow:0 26px 60px rgba(22,61,106,.32); }
.vsys-core-top { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.vsys-core-badge { display:inline-flex; align-items:center; gap:10px; font-size:clamp(16px,1.8vw,21px); font-weight:800; color:#fff; }
.vsys-core-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:#fff; background:linear-gradient(135deg,#f59e4d,#d9612e); box-shadow:0 6px 14px rgba(190,90,30,.3); }
.vsys-core-mark svg { width:18px; height:18px; }
.vsys-loop { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800; letter-spacing:.03em; color:rgba(255,255,255,.62); padding:5px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.18); transition:all .5s; }
.vsys-loop::before { content:"\21BB"; font-size:14px; line-height:1; display:inline-block; }
.vsys-core.improving .vsys-loop { color:#8fe6c4; border-color:rgba(46,211,163,.45); background:rgba(46,211,163,.16); }
.vsys-core.improving .vsys-loop::before { animation:vsys-spin 2.4s linear infinite; }
@keyframes vsys-spin { to { transform:rotate(360deg); } }
.vsys-caps { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.vsys-caps .cap { font-size:12.5px; font-weight:700; color:rgba(255,255,255,.7); padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); transition:all .5s; }
.vsys-caps .cap.on { color:#ffd9b8; background:rgba(245,158,77,.20); border-color:rgba(245,158,77,.42); }
.vsys-caps .cap.learn { opacity:.5; }
.vsys-caps .cap.learn.on { opacity:1; color:#8fe6c4; background:rgba(46,211,163,.18); border-color:rgba(46,211,163,.4); }

/* human in the loop */
.vsys-human { position:absolute; right:clamp(12px,2vw,24px); top:-23px; display:flex; align-items:center; gap:9px;
  padding:6px 13px 6px 6px; border-radius:999px; background:#fff; border:1px solid #f0e2d5; box-shadow:0 12px 26px rgba(60,30,10,.14);
  opacity:0; transform:translateY(8px) scale(.96); transition:all .45s; pointer-events:none; }
.vsys-human.on { opacity:1; transform:none; }
.vsys-ava { width:28px; height:28px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff; background:linear-gradient(135deg,#f0883e,#d9612e); }
.vsys-human-t { display:flex; flex-direction:column; line-height:1.18; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#c2592b; }
.vsys-human-t b { font-size:11.5px; font-weight:700; letter-spacing:0; text-transform:none; color:#6b6258; }

/* connected to the real hotel stack */
.vsys-systems { position:absolute; bottom:0; left:0; right:0; height:104px; z-index:2; }
.vsys-sys { position:absolute; bottom:0; transform:translateX(-50%); width:clamp(190px,24vw,250px);
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  padding:13px 16px 14px; border-radius:15px; background:#fff; border:1px solid #ece5db; box-shadow:0 2px 8px rgba(40,28,16,.04);
  opacity:.55; transition:all .5s; }
.vsys-sys-tag { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#a99e90; transition:color .5s; }
.vsys-sys-logos { display:flex; align-items:center; gap:11px; height:20px; }
.vsys-sys-logo { height:18px; width:auto; max-width:40px; object-fit:contain; filter:grayscale(1); opacity:.5; transition:all .5s; }
.vsys-wm { font-size:12.5px; font-weight:800; letter-spacing:-.01em; color:#b3a899; transition:color .5s; }
.vsys-sys small { font-size:11px; color:#a59a8c; line-height:1.3; transition:color .5s; }
.vsys-sys.on { opacity:1; border-color:#f1d9c8; box-shadow:0 18px 40px rgba(190,90,30,.16); transform:translateX(-50%) translateY(-6px); }
.vsys-sys.on .vsys-sys-tag { color:#c2592b; }
.vsys-sys.on .vsys-sys-logo { filter:none; opacity:1; }
.vsys-sys.on .vsys-wm { color:#332d27; }
.vsys-sys.on small { color:#6b6258; }

/* caption */
.vsys-caption { position:relative; z-index:2; text-align:center; max-width:660px; margin-top:clamp(12px,2.2vh,24px); min-height:74px; }
.vsys-cap-tag { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#c2592b; margin-bottom:8px; }
.vsys-caption p { margin:0; font-size:clamp(14.5px,1.3vw,17px); line-height:1.55; color:#5f574d; animation:vsys-fade .5s ease; }
@keyframes vsys-fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  .wire-flow.on { animation:none; opacity:.7; }
  .vsys-glow { animation:none; }
  .vsys-core.improving .vsys-loop::before { animation:none; }
}

/* ---------- mobile: unpin, stack, show everything lit ---------- */
@media (max-width: 860px) {
  .vsys { height:auto; }
  .vsys-sticky { position:static; height:auto; min-height:0; padding:clamp(56px,9vh,90px) 20px; }
  .vsys-glow { display:none; }
  .vsys-wires { display:none; }
  .vsys-diagram { aspect-ratio:auto; height:auto; display:flex; flex-direction:column; gap:22px; margin-top:8px; }
  .vsys-channels { position:static; height:auto; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
  .vsys-chan { position:static !important; transform:none !important; left:auto !important; opacity:1; color:#332d27; }
  .vsys-chan img { filter:none; opacity:1; } .vsys-chan .vsys-glyph { color:#34c759; }
  .vsys-core { position:static; transform:none; left:auto; right:auto; }
  .vsys-human { position:static; opacity:1; transform:none; margin-top:14px; align-self:flex-start; }
  .vsys-systems { position:static; height:auto; display:grid; grid-template-columns:1fr; gap:10px; }
  .vsys-sys { position:static !important; transform:none !important; left:auto !important; width:auto; opacity:1; flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; }
  .vsys-sys.on { transform:none !important; }
  .vsys-sys-logo { filter:none; opacity:1; }
}