:root{--cyan:#10c7ef;--cyan2:#00aee8;--green:#4dff9b;--dark:#071421;--white:#fff}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;background:#dff7ff;color:#fff}
body{overflow-x:hidden}
.hero{position:relative;width:100%;aspect-ratio:1536 / 1024;min-height:0;overflow:hidden;background:#eefcff}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0;user-select:none;-webkit-user-drag:none}
.hotspot{position:absolute;z-index:20;display:block;border:0;padding:0;background:transparent;cursor:pointer;outline:none;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.start-hotspot{left:5.2%;top:48.4%;width:25.0%;height:7.2%;border-radius:40px}
.start-hotspot::before{content:"";position:absolute;inset:0;border-radius:40px;box-shadow:0 0 0 0 rgba(0,210,255,.55);transition:.25s}
.start-hotspot:hover::before{box-shadow:0 0 0 5px rgba(0,210,255,.15),0 0 34px rgba(0,200,255,.65)}
.start-hotspot:focus-visible::before{box-shadow:0 0 0 4px #fff,0 0 34px rgba(0,200,255,.85)}
.start-hotspot:disabled{cursor:wait}
.hotspot-shine{position:absolute;inset:0;border-radius:40px;opacity:0;transition:.2s;background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,0),rgba(255,255,255,.10))}
.start-hotspot:hover .hotspot-shine{opacity:1}
.start-hotspot.active{cursor:pointer}
.start-hotspot.active::after{content:"";position:absolute;inset:-5px;border-radius:45px;box-shadow:0 0 0 2px rgba(0,225,255,.65),0 0 30px rgba(0,210,255,.75);animation:activePulse 1.5s ease-in-out infinite}
@keyframes activePulse{50%{box-shadow:0 0 0 5px rgba(0,225,255,.12),0 0 44px rgba(0,210,255,.9)}}
.hangup-hotspot{right:24.3%;top:51.9%;width:6.5%;height:8.2%;border-radius:50%;transform:rotate(-7deg)}
.hangup-hotspot:hover{box-shadow:0 0 0 4px rgba(255,70,90,.18),0 0 28px rgba(255,70,90,.65)}
.hidden{display:none!important}
.status-pill{position:absolute;z-index:7;right:5.5%;top:4.8%;display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:25px;background:rgba(3,18,29,.78);color:#fff;font-size:13px;backdrop-filter:blur(10px);opacity:0;transform:translateY(-8px);transition:.3s}
.status-pill.visible{opacity:1;transform:translateY(0)}
.status-dot,.voice-live-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.phone-overlay{position:absolute;z-index:4;left:66.5%;top:30.2%;width:16.8%;height:11.8%;transform:none;transform-origin:center center;pointer-events:none}
#waveform{display:block;width:100%;height:100%;opacity:0;transition:opacity .35s;filter:drop-shadow(0 0 16px rgba(0,220,255,1)) drop-shadow(0 0 28px rgba(0,150,255,.65))}
.phone-overlay.live #waveform{opacity:.95}
.voice-badge{position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);display:flex;align-items:center;gap:6px;white-space:nowrap;padding:5px 10px;border:1px solid rgba(0,220,255,.7);border-radius:20px;background:rgba(0,25,42,.72);color:#b8f7ff;font-size:10px;backdrop-filter:blur(8px)}
.live-panel{position:absolute;z-index:8;left:29.6%;right:32.0%;bottom:2.7%;padding:14px 18px;border:1px solid rgba(0,205,255,.55);border-radius:16px;background:rgba(5,24,38,.91);box-shadow:0 12px 40px rgba(0,100,160,.22),inset 0 0 20px rgba(0,190,255,.05);backdrop-filter:blur(14px)}
.live-panel-head{display:flex;justify-content:space-between;gap:15px;align-items:center}
.live-kicker{font-size:9px;letter-spacing:2px;color:#55e6ff}.live-panel h2{font-size:14px;margin:4px 0 0}.live-timer{font-variant-numeric:tabular-nums;color:#fff;font-size:12px;opacity:.8}
.live-transcript{margin-top:10px;font-size:12px;line-height:1.4;color:#d9f5ff;min-height:34px;max-height:68px;overflow:auto}
.crm-card{position:relative;z-index:10;width:min(760px,92vw);margin:0 auto 60px;border:1px solid rgba(0,205,255,.55);border-radius:22px;padding:22px;color:#fff;background:rgba(5,22,35,.96);box-shadow:0 20px 60px rgba(0,110,160,.28),inset 0 0 30px rgba(0,190,255,.06);backdrop-filter:blur(16px)}
.crm-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px}.crm-kicker{color:#55e6ff;font-size:10px;letter-spacing:2px}.crm-header h2{margin:5px 0 0;font-size:22px}.lead-score{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;border:1px solid #3dffc0;color:#3dffc0;font-weight:800;box-shadow:0 0 20px rgba(61,255,192,.2)}
.crm-loading{padding:18px;border-radius:12px;background:rgba(255,255,255,.04);color:#9bb2c0;font-size:13px}.crm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.crm-grid>div{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:10px}.crm-grid .wide{grid-column:1/-1}.crm-grid span{display:block;color:#7f9aaa;font-size:10px;margin-bottom:4px}.crm-grid b{font-size:12px;line-height:1.35}.crm-grid .duration{border-color:rgba(0,205,255,.25)}
@media(max-width:1100px){.start-hotspot{left:5%;top:48%;width:29%;height:7.2%}.phone-overlay{left:66.5%;width:16.8%;top:29.2%;}.hangup-hotspot{right:22%;top:51%;width:7%;height:8%}.live-panel{left:25%;right:28%;}}
@media(max-width:760px){.hero{aspect-ratio:1536 / 1024}.hero-image{object-position:center top}.start-hotspot{left:5.2%;top:48.4%;width:25%;height:7.2%}.phone-overlay{left:66.5%;top:29.2%;width:16.8%;height:11.8%}.hangup-hotspot{right:24.3%;top:51.9%;width:6.5%;height:8.2%}.status-pill{right:5%;top:3%;font-size:11px}.live-panel{left:5%;right:5%;bottom:2%;padding:12px}.live-panel h2{font-size:12px}.crm-card{margin-bottom:30px}.crm-grid{grid-template-columns:1fr}.crm-grid .wide{grid-column:auto}}