/* "Ways to show your place" — animated use-case stories (js/ways-showcase.js). */
.ws{--ink:#eaf5ef;--mut:#9fbcb0;--teal:#67c8c9;--lime:#99cc33;--card:#071a16;--line:#ffffff1c;
  display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:40px;align-items:start;margin-top:36px;text-align:left}
.ws-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;counter-reset:none}
.ws-list li{margin:0;padding:0}
.ws .ws-item{position:relative;display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:12px;color:var(--ink)!important;text-decoration:none!important;
  border:1px solid transparent;transition:background .25s,border-color .25s,opacity .25s;opacity:.62;overflow:hidden}
.ws .ws-item:hover{opacity:.9;background:#ffffff08}
.ws .ws-item.on{opacity:1;background:#0d2b23;border-color:#99cc3355}
.ws .ws-item .catalog-num{font:500 11px/1 "JetBrains Mono",ui-monospace,Consolas,monospace;color:var(--lime);letter-spacing:.1em;min-width:22px}
.ws .ws-item strong{display:block;font:500 15px/1.25 Outfit,Arial,sans-serif}
.ws .ws-item small{display:block;font-size:12px;color:var(--mut);margin-top:2px}
.ws .ws-item svg{display:none}
.ws-bar{position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:#ffffff12;opacity:0;transition:opacity .3s}
.ws-item.on .ws-bar{opacity:1}
.ws-bar i{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--lime));transition:width .25s linear}

.ws-stage-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}
.ws-stage{position:relative;width:100%;height:640px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(60% 55% at 50% 45%,#0f3a30 0%,#06171300 70%);border-radius:28px;opacity:0;transform:translateY(10px) scale(.985);transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.2,1)}
.ws-stage.in{opacity:1;transform:none}
.ws-caption{display:flex;gap:14px;align-items:baseline;max-width:620px;min-height:52px;color:var(--ink)}
.ws-step{font:500 12px/1 "JetBrains Mono",ui-monospace,Consolas,monospace;color:var(--lime);letter-spacing:.1em}
.ws-caption p{margin:0;font:400 19px/1.45 Outfit,Arial,sans-serif;opacity:0;transform:translateY(6px)}
.ws-caption p.in{opacity:1;transform:none;transition:opacity .45s,transform .45s}
.ws-dots{display:flex;gap:6px}.ws-dots i{width:22px;height:3px;border-radius:3px;background:#ffffff22;transition:background .4s}.ws-dots i.on{background:var(--teal)}
.ws-more{font:500 14px Outfit,Arial,sans-serif;color:var(--teal)!important;text-decoration:none!important;border-bottom:1px solid #67c8c955;padding-bottom:2px}
.ws-more:hover{color:#fff!important;border-color:#fff}

/* ---------- devices ---------- */
.ws-device{position:relative;flex:none}
.ws-screen{position:relative;overflow:hidden;background:#000}
.ws-phone{width:300px;height:620px;border-radius:46px;padding:11px;background:linear-gradient(145deg,#2a3134,#0b0f10 40%,#1c2225);box-shadow:0 30px 80px #000a,inset 0 0 0 1px #ffffff1a}
.ws-phone .ws-screen{width:100%;height:100%;border-radius:36px}
.ws-notch{position:absolute;z-index:20;top:20px;left:50%;width:92px;height:26px;margin-left:-46px;border-radius:20px;background:#000}
.ws-laptop{width:min(100%,660px)}
.ws-bezel{border-radius:18px 18px 6px 6px;padding:12px 12px 14px;background:#0b0f10;box-shadow:0 30px 80px #000a,inset 0 0 0 1px #ffffff1a}
.ws-browser{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;background:#1b2224;border-radius:8px 8px 0 0}
.ws-browser i{width:9px;height:9px;border-radius:50%;background:#3b4447}.ws-browser i:nth-child(1){background:#ff5f57}.ws-browser i:nth-child(2){background:#febc2e}.ws-browser i:nth-child(3){background:#28c840}
.ws-url{margin-left:12px;flex:1;height:20px;border-radius:6px;background:#0f1517;color:#9fb2ac;font:12px/20px ui-monospace,Consolas,monospace;padding:0 10px;white-space:nowrap;overflow:hidden}
.ws-laptop .ws-screen{aspect-ratio:16/10;border-radius:0 0 4px 4px}
.ws-base{height:14px;margin:0 -6%;border-radius:0 0 18px 18px;background:linear-gradient(#2a3134,#121718)}
.ws-gl{position:absolute;inset:0;width:100%;height:100%;display:block}

/* pointer */
.ws-pointer{position:absolute;left:0;top:0;z-index:30;pointer-events:none;opacity:0;transition:opacity .3s}
.ws-pointer.on{opacity:1}
.ws-finger{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#ffffff40;border:2px solid #fff;box-shadow:0 4px 16px #0008}
.ws-finger.down{background:#ffffff80}
.ws-cursor{width:22px;height:22px;margin:-3px 0 0 -4px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l7 19 2.6-7.4L20 11z' fill='%23fff' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");filter:drop-shadow(0 2px 4px #0009)}
.ws-cursor.down{transform-origin:0 0}
.ws-ripple{position:absolute;z-index:29;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid #fff;pointer-events:none;animation:ws-ripple .65s ease-out forwards}
@keyframes ws-ripple{to{transform:scale(2.6);opacity:0}}

/* ---------- 01 social 360 post ---------- */
.ws-feed{position:absolute;inset:0;background:#fff;color:#111;padding-top:52px;font-family:Arial,sans-serif}
.ws-post-head{display:flex;align-items:center;gap:10px;padding:10px 14px}
.ws-post-head img{width:36px;height:36px;border-radius:50%;background:#0b2a22;padding:5px;object-fit:contain}
.ws-post-head b{display:block;font-size:14px}.ws-post-head small{font-size:12px;color:#666}
.ws-post-media{position:relative;height:300px;background:#111}
.ws-badge-360{position:absolute;right:10px;top:10px;font:700 12px Arial;color:#fff;background:#0009;border:1.5px solid #fff;border-radius:999px;padding:3px 8px}
.ws-drag-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font:12px Arial;color:#fff;background:#0008;border-radius:999px;padding:5px 10px;transition:opacity .4s}
.ws-drag-hint.off{opacity:0}
.ws-post-actions{display:flex;gap:16px;padding:10px 14px;font-size:22px;color:#222}
.ws-heart.on{color:#e0245e;animation:ws-pop .4s}
@keyframes ws-pop{50%{transform:scale(1.4)}}
.ws-post-text{padding:0 14px;font-size:13px;line-height:1.4}

/* ---------- 02 hotel site + tour ---------- */
.ws-site{position:absolute;inset:0;background:#0d1412;color:#fff;font-family:Outfit,Arial,sans-serif}
.ws-site-nav{display:flex;align-items:center;gap:18px;height:44px;padding:0 18px;font-size:12px;color:#cfe0d8;background:#0b1210}
.ws-site-nav img{height:26px;margin-right:auto}
.ws-cta{background:#c99a52;color:#111;padding:6px 12px;border-radius:999px;font-weight:600}
.ws-site-hero{position:absolute;inset:44px 0 0;background:center/cover;display:flex;flex-direction:column;justify-content:center;padding:0 7%}
.ws-site-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000a,#0000 70%)}
.ws-site-hero h4{position:relative;margin:0 0 16px;font:500 30px/1.1 Outfit,Arial;max-width:300px}
.ws-cta-tour.big{position:relative;align-self:flex-start;background:#fff;color:#111;padding:10px 16px;border-radius:999px;font-weight:600;font-size:13px}
.ws-tour{position:absolute;inset:0;z-index:5;opacity:0;transform:scale(.92);pointer-events:none;transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1);background:#000}
.ws-tour.open{opacity:1;transform:none}
.ws-tour-top{position:absolute;z-index:2;left:0;right:0;top:0;display:flex;gap:12px;align-items:center;padding:10px 14px;background:linear-gradient(#000a,#0000);font-size:13px}
.ws-tour-top .ws-scene-name{color:#cfe0d8}.ws-tour-top .ws-x{margin-left:auto;opacity:.8}
.ws-hotspot{position:absolute;z-index:2;left:58%;top:58%;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;color:#fff;font:600 12px Outfit,Arial;opacity:0;transition:opacity .4s;pointer-events:none}
.ws-hotspot span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#ffffffd0;color:#111;font-size:18px;box-shadow:0 0 0 6px #ffffff40;animation:ws-breathe 1.6s infinite}
.ws-hotspot.on{opacity:1}
@keyframes ws-breathe{50%{box-shadow:0 0 0 12px #ffffff10}}
.ws-tour-strip{position:absolute;z-index:2;left:14px;bottom:12px;display:flex;gap:6px}
.ws-tour-strip i{width:64px;height:40px;border-radius:6px;background:center/cover;border:2px solid #fff4;opacity:.75}
.ws-tour-strip i.on{border-color:var(--lime);opacity:1}

/* ---------- 03 video player ---------- */
.ws-player{position:absolute;inset:0;background:#000;color:#fff;font-family:Arial,sans-serif}
.ws-compass{position:absolute;z-index:2;left:16px;top:16px;width:58px;height:58px;border-radius:50%;background:#0007;border:1px solid #fff5;display:grid;place-items:center}
.ws-compass i{position:absolute;inset:6px;border-radius:50%;background:conic-gradient(from -30deg,#fff8 0 60deg,transparent 60deg)}
.ws-compass b{font-size:10px;position:absolute;top:2px}.ws-compass span{position:absolute;font-size:10px;opacity:.8}.ws-compass span:nth-of-type(1){left:4px}.ws-compass span:nth-of-type(2){right:4px}
.ws-player-bar{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(#0000,#000c);font-size:12px}
.ws-progress{flex:1;height:4px;border-radius:4px;background:#fff4}.ws-progress i{display:block;height:100%;width:0;background:#f33;border-radius:4px}
.ws-hd{font-weight:700;opacity:.9}
.ws-player-title{position:absolute;z-index:2;left:90px;top:22px;font-size:14px;text-shadow:0 1px 4px #000}

/* ---------- 04 aerial ---------- */
.ws-full{position:absolute;inset:0}
.ws-alt{position:absolute;z-index:2;top:56px;left:16px;display:flex;align-items:baseline;gap:6px;color:#fff;font:600 14px Outfit,Arial;text-shadow:0 1px 6px #000}
.ws-alt small{font-weight:400;opacity:.8}.ws-drone{font-size:16px}
.ws-place-chip{position:absolute;z-index:2;left:50%;bottom:22px;transform:translateX(-50%);white-space:nowrap;color:#fff;font:500 13px Outfit,Arial;background:#0009;border-radius:999px;padding:7px 14px;backdrop-filter:blur(6px)}

/* ---------- 05 maps + street view ---------- */
.ws-maps{position:absolute;inset:0;background:#eef1ec;font-family:Roboto,Arial,sans-serif;color:#202124}
.ws-map{position:absolute;inset:0;width:100%;height:100%;transform:scale(1.25);transform-origin:52% 46%;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.ws-maps.found .ws-map{transform:scale(2.2)}
.ws-pin{position:absolute;left:52%;top:43%;width:30px;height:40px;margin:-40px 0 0 -15px;opacity:0;transform:translateY(-30px);transition:opacity .3s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.ws-pin span{position:absolute;inset:0;background:#ea4335;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 3px 8px #0004}
.ws-pin span::after{content:"";position:absolute;left:10px;top:10px;width:10px;height:10px;border-radius:50%;background:#7c1d16}
.ws-maps.found .ws-pin{opacity:1;transform:none}
.ws-search{position:absolute;z-index:3;left:12px;right:12px;top:52px;height:46px;border-radius:24px;background:#fff;box-shadow:0 2px 8px #0003;display:flex;align-items:center;gap:10px;padding:0 16px;font-size:15px;color:#5f6368}
.ws-g{font-size:20px;color:#4285f4}
.ws-q.typing::after{content:"";display:inline-block;width:1.5px;height:17px;margin-left:1px;background:#1a73e8;vertical-align:-3px;animation:ws-blink .8s infinite}
@keyframes ws-blink{50%{opacity:0}}
.ws-sheet{position:absolute;z-index:4;left:0;right:0;bottom:0;height:300px;border-radius:18px 18px 0 0;background:#fff;box-shadow:0 -4px 16px #0002;padding:8px 14px;transform:translateY(105%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ws-sheet.open{transform:none}
.ws-grab{width:36px;height:4px;border-radius:4px;background:#dadce0;margin:0 auto 12px}
.ws-sheet-head{display:flex;gap:10px;align-items:center}
.ws-sheet-head img{width:44px;height:44px;border-radius:10px;object-fit:contain;background:#0b2a22;padding:4px}
.ws-sheet-head b{font-size:19px;font-weight:500}.ws-sheet-head small{display:block;font-size:12.5px;color:#5f6368;margin-top:2px}
.ws-sheet-btns{display:flex;gap:8px;margin:14px 0}
.ws-sheet-btns span{flex:1;text-align:center;font-size:12px;color:#1a73e8;border:1px solid #dadce0;border-radius:999px;padding:7px 4px}
.ws-sheet-btns span:first-child{background:#1a73e8;color:#fff;border-color:#1a73e8}
.ws-photos{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:4px;height:130px}
.ws-photos i{border-radius:8px;background:center/cover}
.ws-photo-360{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:8px;color:#fff;font-style:normal}
.ws-photo-360::before{content:"";position:absolute;inset:0;border-radius:8px;background:linear-gradient(#0000 40%,#000a)}
.ws-photo-360 b,.ws-photo-360 small{position:relative}.ws-photo-360 b{font-size:15px}.ws-photo-360 small{font-size:10.5px;opacity:.9}
.ws-sv{position:absolute;z-index:6;inset:0;background:#000;opacity:0;transform:scale(.4);transform-origin:24% 74%;transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)}
.ws-sv.open{opacity:1;transform:none}
.ws-sv-top{position:absolute;z-index:2;left:10px;right:10px;top:50px;display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;padding:8px 12px;box-shadow:0 2px 8px #0005}
.ws-sv-top span{font-size:20px;color:#5f6368}.ws-sv-top b{display:block;font-size:14px;font-weight:500}.ws-sv-top small{font-size:11px;color:#5f6368}
.ws-sv-arrow{position:absolute;z-index:2;left:50%;bottom:110px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;color:#fff;opacity:0;transition:opacity .4s}
.ws-sv-arrow span{display:grid;place-items:center;width:58px;height:40px;border-radius:50%;background:#ffffffd9;color:#333;font-size:26px;transform:perspective(200px) rotateX(55deg);box-shadow:0 0 0 6px #ffffff30}
.ws-sv-arrow small{margin-top:6px;font:500 12px Roboto,Arial;text-shadow:0 1px 4px #000}
.ws-sv-arrow.on{opacity:1}

/* ---------- 06 AR ---------- */
.ws-ar{position:absolute;inset:0;background:#000;perspective:600px}
.ws-cam{position:absolute;inset:-6%;background:center/cover;transform:scale(1.12);transition:filter .3s}
.ws-ar-dots{position:absolute;left:10%;right:10%;bottom:24%;height:30%;opacity:0;transform:rotateX(70deg);background:radial-gradient(#ffffffaa 1.4px,transparent 1.6px) 0 0/18px 18px;transition:opacity .6s}
.ws-ar-dots.on{opacity:.8}
.ws-portal{--grow:1;position:absolute;left:50%;top:58%;width:170px;height:250px;margin:-125px 0 0 -85px;border-radius:85px 85px 12px 12px;overflow:hidden;opacity:0;
  transform:scale(calc(.4 * var(--grow)));transform-origin:50% 100%;transition:opacity .6s;box-shadow:0 0 0 3px #b7ffe7,0 0 30px 6px #67c8c9cc,0 0 90px 20px #67c8c955}
.ws-portal.on{opacity:1;animation:ws-portal-in 1s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes ws-portal-in{from{transform:scale(.1)}to{transform:scale(calc(.9 * var(--grow)))}}
.ws-ar.inside .ws-portal{animation:none;transform:none;border-radius:0;inset:0;width:auto;height:auto;margin:0;box-shadow:none;transition:all .5s}
.ws-ar-ui{position:absolute;left:0;right:0;bottom:34px;display:flex;flex-direction:column;align-items:center;gap:12px;transition:opacity .4s}
.ws-ar-ui.off{opacity:0}
.ws-ar-tip{color:#fff;font:500 13px Outfit,Arial;background:#0008;border-radius:999px;padding:6px 12px}
.ws-ar-btn{color:#05211a;background:#b7ffe7;font:600 14px Outfit,Arial;border-radius:999px;padding:11px 20px;box-shadow:0 6px 18px #0006}

/* ---------- 07 VR ---------- */
.ws-vr{width:min(100%,640px);height:330px;border-radius:120px 120px 150px 150px / 110px 110px 160px 160px;background:linear-gradient(160deg,#30383b,#0b0f10 55%,#1e2528);padding:34px 40px;box-shadow:0 30px 80px #000a,inset 0 0 0 1px #ffffff1a}
.ws-eyes{display:flex;gap:16px;height:100%}
.ws-eye{position:relative;flex:1;border-radius:46% 46% 40% 40% / 50% 50% 46% 46%;overflow:hidden;background:#000;box-shadow:inset 0 0 30px #000}
.ws-reticle{position:absolute;left:calc(25% + 10px);top:50%;width:22px;height:22px;margin:-11px;border-radius:50%;border:2px solid #fff;opacity:.85}
.ws-reticle i{position:absolute;inset:3px;border-radius:50%;background:var(--teal);transform:scale(0)}
.ws-reticle.fill i{transform:scale(1);transition:transform 1.6s linear}
.ws-vr-label{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);white-space:nowrap;color:var(--mut);font:500 12px Outfit,Arial}

/* ---------- 08 interactive map ---------- */
.ws-imap{position:absolute;inset:0;background:#0d241d;overflow:hidden}
.ws-imap-base{position:absolute;inset:0;width:100%;height:100%}
.ws-mpin{position:absolute;display:flex;align-items:center;gap:6px;border:0;background:none;padding:0;color:#fff;font:600 12px Outfit,Arial;transform:translate(-50%,-100%) scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.ws-mpin.on{transform:translate(-50%,-100%) scale(1)}
.ws-mpin i{width:16px;height:16px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px #99cc3340}
.ws-mpin span{background:#051613d0;border:1px solid #ffffff33;border-radius:999px;padding:3px 9px}
.ws-mpin.sel i{background:#fff;box-shadow:0 0 0 7px #ffffff40}
.ws-mcard{position:absolute;z-index:3;width:210px;padding:8px;border-radius:12px;background:#061714f2;border:1px solid #ffffff2b;color:#fff;transform:translate(-50%,calc(-100% - 34px)) scale(.8);opacity:0;transition:opacity .3s,transform .35s;font-family:Outfit,Arial}
.ws-mcard.on{opacity:1;transform:translate(-50%,calc(-100% - 34px))}
.ws-mthumb{position:relative;height:118px;border-radius:8px;overflow:hidden;background:#000}
.ws-mcard b{display:block;font-size:14px;margin:7px 2px 1px}.ws-mcard small{font-size:11.5px;color:var(--teal);margin-left:2px}

/* ---------- 09 listing ---------- */
.ws-listing{position:absolute;inset:0;background:#fff;color:#222;font-family:Arial,sans-serif}
.ws-carousel{position:relative;height:330px;overflow:hidden;background:#111}
.ws-track{display:flex;height:100%}
.ws-track i{flex:none;width:100%;height:100%;background:center/cover;position:relative}
.ws-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ws-vid b{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border-radius:50%;background:#fffd;color:#111;display:grid;place-items:center;font-size:20px;transition:opacity .3s}
.ws-vid.playing b{opacity:0}
.ws-count{position:absolute;right:12px;bottom:12px;color:#fff;font-size:12px;background:#0009;border-radius:999px;padding:3px 9px}
.ws-list-body{padding:16px}
.ws-list-body b{font-size:19px}.ws-list-body small{display:block;color:#666;margin:4px 0 10px}.ws-list-body p{font-size:13px;line-height:1.45;color:#444;margin:0 0 14px}
.ws-reserve{display:inline-block;background:#e11d48;color:#fff;font-weight:700;font-size:14px;border-radius:10px;padding:10px 18px}

/* ---------- 10 website + phone ---------- */
.ws-combo{position:relative;width:min(100%,720px);display:flex;justify-content:flex-start;padding-right:170px}
.ws-combo .ws-laptop{width:100%}
.ws-combo .ws-phone{position:absolute;right:0;bottom:-40px;transform:scale(.56);transform-origin:100% 100%}
.ws-page{position:absolute;left:0;right:0;top:0;transition:none}
.ws-page img{display:block;width:100%}
.ws-page-2{background:#0b0f0d;padding:18px 18px 40px;display:grid;grid-template-columns:1.3fr 1fr;gap:16px;min-height:520px}
.ws-page-rooms{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ws-page-rooms i{border-radius:8px;background:center/cover;min-height:90px}.ws-page-rooms i:first-child{grid-column:span 2;min-height:120px}
.ws-form{display:flex;flex-direction:column;gap:8px;background:#121a17;border:1px solid #ffffff1a;border-radius:12px;padding:14px;color:#e8f2ec;font:13px Outfit,Arial}
.ws-form b{font-size:15px;font-weight:500;margin-bottom:4px}
.ws-form span{min-height:30px;border-radius:7px;background:#0b100e;border:1px solid #ffffff22;padding:6px 9px;font-size:12px;color:#fff}
.ws-form em{font-style:normal;text-align:center;background:#4fb38a;color:#06140f;font-weight:600;border-radius:8px;padding:8px;margin-top:4px}
.ws-form.sent em{background:#99cc33}.ws-form.sent em::after{content:" ✓"}
.ws-lock{position:absolute;inset:0;background:linear-gradient(160deg,#16443a,#071a16);display:flex;flex-direction:column;align-items:center;padding-top:70px;color:#fff;font-family:Outfit,Arial}
.ws-lock>b{font-size:58px;font-weight:300;letter-spacing:-2px}
.ws-notif{display:flex;gap:10px;align-items:center;width:86%;margin-top:40px;padding:12px;border-radius:18px;background:#ffffffdd;color:#111;opacity:0;transform:translateY(-20px);transition:opacity .4s,transform .5s cubic-bezier(.2,1.4,.4,1)}
.ws-notif.on{opacity:1;transform:none}
.ws-wa{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#25d366;color:#fff;font-size:18px}
.ws-notif b{display:block;font-size:13px}.ws-notif small{font-size:12px;color:#444}

/* ---------- 11 AI chat ---------- */
.ws-chat{position:absolute;inset:0;background:#0b141a;color:#e9edef;font-family:Arial,sans-serif;display:flex;flex-direction:column}
.ws-chat-head{display:flex;align-items:center;gap:10px;padding:52px 14px 10px;background:#1f2c33}
.ws-av{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#2a7a5a;font-weight:700}
.ws-chat-head b{display:block;font-size:15px}.ws-chat-head small{font-size:11.5px;color:#8696a0}.ws-clock{margin-left:auto;font-size:11px;color:#8696a0}
.ws-msgs{flex:1;display:flex;flex-direction:column;gap:10px;padding:16px 12px;background:#0b141a}
.ws-msg{max-width:84%;padding:9px 11px;border-radius:12px;font-size:13.5px;line-height:1.4;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.ws-msg.on{opacity:1;transform:none}
.ws-msg.in{align-self:flex-start;background:#202c33;border-top-left-radius:3px}
.ws-msg.out{align-self:flex-end;background:#005c4b;border-top-right-radius:3px}
.ws-msg.out em{display:block;text-align:right;font-style:normal;font-size:11px;color:#53bdeb;margin-top:3px}
.ws-typing{display:none;align-self:flex-end;gap:4px;padding:10px 12px;background:#005c4b80;border-radius:12px}
.ws-typing.on{display:flex}.ws-typing i{width:6px;height:6px;border-radius:50%;background:#e9edef;animation:ws-dot 1s infinite}.ws-typing i:nth-child(2){animation-delay:.15s}.ws-typing i:nth-child(3){animation-delay:.3s}
@keyframes ws-dot{50%{opacity:.25}}
.ws-draft{display:none;flex-direction:column;gap:8px;padding:11px;border-radius:12px;border:1px dashed #53bdeb88;background:#10242b}
.ws-draft.on{display:flex;animation:ws-fade .4s}
@keyframes ws-fade{from{opacity:0;transform:translateY(8px)}}
.ws-draft small{font-size:11px;color:#53bdeb;letter-spacing:.02em}.ws-draft p{margin:0;font-size:13px;line-height:1.4;color:#d1d7db}
.ws-approve{align-self:flex-start;background:#25d366;color:#06140f;font-weight:700;font-size:13px;border-radius:999px;padding:8px 14px}
.ws-edit{position:absolute;opacity:0}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .ws{grid-template-columns:1fr;gap:18px}
  .ws-list{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .ws-list li{flex:none;scroll-snap-align:start}
  .ws .ws-item{padding:9px 12px}.ws .ws-item small{display:none}
  .ws-stage{height:600px}
}
@media(max-width:600px){
  .ws-stage{height:520px;border-radius:20px}
  .ws-stage>.ws-phone{transform:scale(.82)}
  .ws-stage>.ws-laptop,.ws-stage>.ws-vr,.ws-stage>.ws-combo{transform:scale(.96)}
  .ws-vr{height:220px;padding:22px 24px}
  .ws-combo{padding-right:60px}.ws-combo .ws-phone{transform:scale(.42)}
  .ws-caption p{font-size:16px}
}

/* AR story: a doorway onto a fixed 360 view (no zoom while walking through) */
.ws-ar-view{position:absolute;inset:0;z-index:2;clip-path:inset(50% 50% 50% 50%);-webkit-clip-path:inset(50% 50% 50% 50%)}
.ws-ar-view .ws-gl{position:absolute;inset:0;width:100%;height:100%}
.ws-portal-ring{position:absolute;z-index:3;pointer-events:none;opacity:0;box-shadow:0 0 0 3px #b7ffe7,0 0 26px 6px #67c8c9cc,0 0 80px 18px #67c8c955}
.ws-ar .ws-ar-ui{z-index:4}

/* The complete offering stays visible; animation is an optional example below it. */
.ws{grid-template-columns:minmax(0,1fr);gap:30px}
.ws .ws-list,.modern-catalog.ws-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;overflow:visible;scroll-snap-type:none}
.ws-list li{min-width:0;display:flex;flex-direction:column;border:1px solid #ffffff20;border-radius:16px;background:#071a16;padding:4px}
.ws .ws-item{flex:1;align-items:flex-start;opacity:1;padding:13px 12px 18px;min-width:0}
.ws .ws-item strong{font-size:16px;line-height:1.35;overflow-wrap:normal;word-break:normal}
.ws .ws-item small,.modern-catalog.ws-overview small{display:block;font:400 13px/1.5 Outfit,Arial,sans-serif;color:#bfd0c8;margin-top:7px;white-space:normal;overflow:visible}
.ws .catalog-num,.modern-catalog.ws-overview .catalog-num{display:none}
.ws-preview,.ws-toggle{align-self:flex-start;background:transparent;border:1px solid #67c8c955;border-radius:999px;color:#b7ffe7;font:500 13px/1.4 Outfit,Arial,sans-serif;cursor:pointer;padding:8px 12px;margin:2px 12px 10px}
.ws-toggle{margin:0}.ws-preview:hover,.ws-toggle:hover{background:#153a30}
.ws a:focus-visible,.ws button:focus-visible,.modern-catalog.ws-overview a:focus-visible{outline:3px solid #b7ffe7;outline-offset:3px}
.ws-demo-note{margin:0;max-width:620px;text-align:center;color:#bfd0c8;font:400 13px/1.5 Outfit,Arial,sans-serif}
.modern-catalog.ws-overview>a{min-width:0;white-space:normal;align-items:flex-start;height:auto}
@media(max-width:1000px){.ws .ws-list,.modern-catalog.ws-overview{grid-template-columns:repeat(3,minmax(0,1fr))}.ws .ws-item{padding:13px 12px 18px}}
@media(max-width:700px){.ws .ws-list,.modern-catalog.ws-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:440px){.ws .ws-list,.modern-catalog.ws-overview{grid-template-columns:minmax(0,1fr)}.ws .ws-item{padding:12px 12px 18px}}
@media(prefers-reduced-motion:reduce){.ws *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.ws-stage,.ws-caption p{transform:none}}

/* AR explainer: a grounded doorway, a sharp approach, then a full-screen destination. */
.ws-ar .ws-cam{inset:0;transform:scale(1.02);transition:none}
.ws-ar .ws-ar-view{opacity:0}
.ws-ar .ws-portal-ring{box-sizing:border-box;border:3px solid #b7ffe7;box-shadow:0 0 16px #67c8c980,inset 0 0 12px #67c8c960}
.ws-ar-shadow{position:absolute;z-index:1;left:12%;width:76%;height:22px;bottom:16%;border-radius:50%;background:#00140c;filter:blur(7px);opacity:0}
.ws-ar-example,.ws-ar-location{position:absolute;z-index:5;left:50%;transform:translateX(-50%);white-space:nowrap;background:#041813dc;border:1px solid #b7ffe744;border-radius:999px;padding:6px 10px;color:#eaf5ef;font:500 12px/1.4 Outfit,Arial,sans-serif}
.ws-ar-example{top:54px}.ws-ar-location{bottom:22px;opacity:0;transition:opacity .3s}
.ws-ar[data-phase="placed"] .ws-ar-location,.ws-ar[data-phase="approach"] .ws-ar-location,.ws-ar[data-phase="inside"] .ws-ar-location{opacity:1}
.ws-ar[data-phase="unavailable"] .ws-ar-view,.ws-ar[data-phase="unavailable"] .ws-portal-ring,.ws-ar[data-phase="unavailable"] .ws-ar-location{display:none}
.ws-ar[data-phase="unavailable"] .ws-ar-btn{font-size:12px}
.ws-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ws-replay{background:transparent;border:1px solid #67c8c955;border-radius:999px;color:#b7ffe7;font:500 13px/1.4 Outfit,Arial,sans-serif;cursor:pointer;padding:8px 12px}
.ws-replay:hover{background:#153a30}
.ws-stage-wrap{scroll-margin-top:96px}

@media(max-width:600px){
  .ws-stage[data-story="ar"]{height:430px}
  .ws-stage[data-story="ar"]>.ws-phone{height:520px;transform:scale(.8)}
}

/* Every service has a visible visual, title and benefit. Animation is automatic near the viewport. */
.ws-inline{display:block}.ws-inline-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ws-service{min-width:0;border:1px solid #ffffff20;border-radius:20px;overflow:hidden;background:#071a16;text-align:left}
.ws-service-media{position:relative;height:360px;overflow:hidden;background:radial-gradient(ellipse,#164638,#061713)}
.ws-seed-visual{display:block;position:relative;width:100%;aspect-ratio:16/10;background:#0c2d24;overflow:hidden}
.ws-seed-visual img{display:block;width:100%;height:100%;object-fit:cover}
.ws-inline-poster{position:absolute;inset:0;aspect-ratio:auto;height:100%;opacity:1}
.ws-service-media.is-playing .ws-inline-poster{opacity:0}
.ws-inline .ws-stage{position:absolute;inset:0;height:100%;width:100%;margin:0;border-radius:0;opacity:0;transform:none;background:transparent}
.ws-inline .is-playing .ws-stage{opacity:1}
.ws-inline .ws-stage>.ws-phone{height:620px;transform:scale(.52)}
.ws-inline .ws-stage[data-story="ar"]>.ws-phone{width:280px;height:480px;transform:scale(.7)}
.ws-inline .ws-stage>.ws-laptop,.ws-inline .ws-stage>.ws-combo{transform:scale(.9);width:100%}
.ws-inline .ws-stage>.ws-vr{transform:scale(.85);height:280px}
.ws-service-copy{display:block!important;padding:20px 20px 10px;color:#effff5!important;text-decoration:none!important}
.ws-service-copy strong{display:block;font:500 20px/1.3 Outfit,Arial}.ws-service-copy small{display:block;margin-top:8px;color:#bfd0c8;font:400 14px/1.55 Outfit,Arial}
.ws-service-copy svg{display:none}.ws-inline .ws-caption{padding:8px 20px;min-height:72px;gap:8px}.ws-inline .ws-caption p{opacity:1;transform:none;font:400 13px/1.5 Outfit,Arial;color:#a8c6b8}.ws-inline .ws-step{font-size:10px}.ws-inline .ws-dots{padding:0 20px 18px}
.ws-visual-note{position:absolute;z-index:40;left:12px;top:12px;font:500 10px/1.3 Outfit,Arial;color:#d7f1e4;background:#041813d9;border-radius:999px;padding:5px 8px;pointer-events:none}
.ws-card-pause{position:absolute;z-index:40;right:12px;top:12px;border:1px solid #b7ffe755;border-radius:50%;background:#041813d9;color:#b7ffe7;width:32px;height:32px;cursor:pointer}
.ws-ai-poster{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:30px}.ws-ai-poster span{display:block;width:85%;padding:16px;background:#133b30;border:1px solid #67c8c955;border-radius:14px;color:#effff5;text-align:center;font:500 17px Outfit,Arial}.ws-ai-poster span:last-child{border-color:#99cc33;color:#c0ee7e}
.ws-map-poster svg{height:100%;width:100%}
.modern-catalog>.ws-seed{display:block!important;padding:0!important;border-radius:20px;overflow:hidden}.modern-catalog>.ws-seed>span:not(.catalog-num){display:block;padding:18px}.modern-catalog>.ws-seed .catalog-num,.modern-catalog>.ws-seed>svg{display:none}
@media(max-width:1000px){.ws-inline-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.ws-inline-grid{grid-template-columns:minmax(0,1fr);gap:18px}.ws-service-media{height:350px}.ws-service-copy{padding:18px 18px 8px}.ws-inline .ws-caption{padding-inline:18px}}