@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@400;500;600&display=swap";
:root{--sand-100:#faf6f1;--sand-200:#f5efe6;--sand-300:#e8ddd0;--sand-400:#d4c4b0;--sand-500:#c8a88e;--sand-600:#b8956f;--sand-700:#a07d58;--blush:#c8a4a0;--navy:#1b2845;--navy-light:#2d3f5e;--navy-muted:#4a5a78;--cream:#fdfaf6;--warm-white:#fffdf9;--color-success:#5aa67a;--color-success-glow:#5aa67a59;--color-error:#c75b5b;--color-error-glow:#c75b5b59;--color-text-primary:var(--navy);--color-text-secondary:var(--navy-muted);--color-text-muted:#8a94a6;--shadow-soft:0 4px 24px #1b28450f;--shadow-elevated:0 8px 40px #1b28451a;--shadow-glow-green:0 0 24px var(--color-success-glow);--shadow-glow-red:0 0 24px var(--color-error-glow);--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-full:9999px;--font-body:"Inter",system-ui,-apple-system,sans-serif;--font-display:"Playfair Display",Georgia,serif}*,:before,:after{box-sizing:border-box}*{margin:0;padding:0}html,body{height:100%}body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--color-text-primary);background:linear-gradient(135deg,var(--sand-200)0%,var(--warm-white)25%,var(--sand-100)50%,var(--warm-white)75%,var(--sand-300)100%);background-size:400% 400%;min-height:100vh;line-height:1.6;animation:16s infinite gradientShift;overflow:hidden}@keyframes gradientShift{0%{background-position:0%}25%{background-position:100% 0}50%{background-position:100% 100%}75%{background-position:0 100%}to{background-position:0%}}.main-container{justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.live-talk-container{-webkit-backdrop-filter:blur(32px);border-radius:var(--radius-lg);width:100%;max-width:440px;box-shadow:var(--shadow-elevated);background:#ffffff8c;border:1px solid #fff9;flex-direction:column;align-items:center;gap:1.6rem;padding:2.4rem 2rem;animation:.8s cubic-bezier(.16,1,.3,1) containerFadeIn;display:flex}@keyframes containerFadeIn{0%{opacity:0;transform:translateY(30px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.brand-header{text-align:center;gap:.35rem;display:grid}.brand-header .kicker{text-transform:uppercase;letter-spacing:.24em;color:var(--color-text-muted);font-size:.68rem;font-weight:600}.brand-header h1{font-family:var(--font-display);color:var(--navy);letter-spacing:-.01em;font-size:1.625rem;font-weight:500}.brand-header .subtitle{color:var(--color-text-muted);letter-spacing:.04em;text-transform:uppercase;font-size:.78rem;font-weight:400}.benefits{border-radius:var(--radius-md);background:#1b284508;border:1px solid #1b28450f;gap:.55rem;width:100%;padding:.6rem .95rem;display:grid}.benefit-item{color:var(--color-text-secondary);gap:.5rem;font-size:.86rem;line-height:1.4;display:flex}.benefit-icon{color:var(--sand-600);font-size:.7rem;line-height:1.2;transform:translateY(2px)}.disclaimer{color:var(--color-text-muted);text-align:center;margin-top:-.25rem;font-size:.72rem;line-height:1.4}.avatar-area{border-radius:50%;justify-content:center;align-items:center;width:168px;height:168px;display:flex;position:relative}.avatar-ring{border:2px solid #0000;border-radius:50%;transition:border-color .6s,box-shadow .6s;position:absolute;inset:-6px}.avatar-ring.connected{border-color:var(--sand-500);animation:3s ease-in-out infinite ringBreath;box-shadow:0 0 30px #c8a88e40}@keyframes ringBreath{0%,to{box-shadow:0 0 20px #c8a88e26}50%{box-shadow:0 0 40px #c8a88e59}}.avatar-inner{background:linear-gradient(145deg,var(--sand-200),var(--sand-300));border-radius:50%;width:100%;height:100%;position:relative;overflow:hidden}.avatar-cloud{background:radial-gradient(at 30% 40%,#c8a88e80 0%,#0000 60%),radial-gradient(at 70% 60%,#c8a4a066 0%,#0000 55%),radial-gradient(#e8ddd099 0%,#0000 70%);border-radius:50%;transition:opacity .8s;animation:8s ease-in-out infinite cloudDrift;position:absolute;inset:0}.avatar-cloud.hidden{opacity:0;pointer-events:none}@keyframes cloudDrift{0%{background-position:0 0,100% 100%,50%;transform:scale(1)rotate(0)}33%{background-position:30% 20%,70% 80%,40% 60%;transform:scale(1.05)rotate(3deg)}66%{background-position:10% 40%,90% 30%,60% 40%;transform:scale(.98)rotate(-2deg)}to{background-position:0 0,100% 100%,50%;transform:scale(1)rotate(0)}}.avatar-image{object-fit:cover;opacity:0;border-radius:50%;width:100%;height:100%;transition:opacity .8s;position:absolute;inset:0}.avatar-image.visible{opacity:1}.visualizer-container{width:100%}.audio-visualizer{border-radius:var(--radius-md);background:#1b28450a;justify-content:center;align-items:flex-end;gap:3px;height:56px;padding:.75rem 1.5rem;display:flex}.bar{background:linear-gradient(to top,var(--sand-600),var(--sand-400));border-radius:2px;width:4px;min-height:3px;transition:height 80ms}.bar.active{background:linear-gradient(to top,var(--sand-700),var(--sand-500))}.call-button{cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;position:relative}.call-button svg{width:28px;height:28px;transition:transform .3s}.call-button.start{background:var(--color-success);color:#fff;box-shadow:var(--shadow-glow-green)}.call-button.start:hover{box-shadow:0 0 36px var(--color-success-glow);transform:scale(1.08)}.call-button.start:active{transform:scale(.96)}.call-button.stop{background:var(--color-error);color:#fff;box-shadow:var(--shadow-glow-red);animation:2.5s ease-in-out infinite pulseRed}.call-button.stop:hover{box-shadow:0 0 36px var(--color-error-glow);transform:scale(1.08)}.call-button.stop:active{transform:scale(.96)}@keyframes pulseRed{0%,to{box-shadow:0 0 20px #c75b5b40}50%{box-shadow:0 0 36px #c75b5b66}}.state-indicator{color:var(--color-text-muted);letter-spacing:.03em;align-items:center;gap:6px;font-size:.75rem;font-weight:500;transition:color .4s;display:inline-flex}.state-dot{border-radius:50%;width:6px;height:6px;transition:background .4s,box-shadow .4s}.state-idle .state-dot{background:var(--sand-400)}.state-connecting .state-dot{background:var(--sand-600);animation:1.2s infinite dotPulse}.state-listening .state-dot{background:var(--color-success);box-shadow:0 0 8px var(--color-success-glow);animation:2s infinite dotPulse}.state-processing .state-dot{background:var(--sand-700);animation:.8s infinite dotPulse}.state-speaking .state-dot{background:var(--color-success);box-shadow:0 0 8px var(--color-success-glow);animation:1.5s infinite dotPulse}@keyframes dotPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.error-message{width:100%;color:var(--color-error);border-radius:var(--radius-sm);text-align:center;background:#c75b5b14;border:1px solid #c75b5b26;padding:.75rem 1rem;font-size:.8125rem;animation:.4s fadeIn}.error-message small{color:var(--color-text-muted)}.lead-modal{z-index:20;place-items:center;padding:2rem 1.25rem;display:grid;position:fixed;inset:0}.lead-switch{border-radius:var(--radius-full);background:#1b28450d;grid-template-columns:1fr 1fr;gap:.25rem;margin-top:1.25rem;margin-bottom:1rem;padding:.25rem;display:grid}.lead-switch button{border-radius:var(--radius-full);color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;padding:.55rem .75rem;font-size:.78rem;font-weight:600;transition:all .2s}.lead-switch button.active{color:var(--navy);background:#fff;box-shadow:0 6px 16px #1b28451f}.lead-helper{color:var(--color-text-muted);font-size:.78rem}.lead-modal-backdrop{-webkit-backdrop-filter:blur(6px);background:#1b284559;animation:.3s fadeIn;position:absolute;inset:0}.lead-modal-card{z-index:2;border-radius:calc(var(--radius-lg) - 2px);background:#fffffff5;border:1px solid #c8a88e40;width:min(94vw,440px);padding:2rem 1.75rem;animation:.35s cubic-bezier(.16,1,.3,1) modalLift;position:relative;box-shadow:0 24px 80px #1b284538}@keyframes modalLift{0%{opacity:0;transform:translateY(24px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.lead-modal-header{text-align:left;gap:.75rem;display:grid}.lead-modal-kicker{text-transform:uppercase;letter-spacing:.24em;color:var(--color-text-muted);font-size:.65rem;font-weight:600}.lead-modal-header h2{font-family:var(--font-display);color:var(--navy);font-size:1.35rem;line-height:1.35}.lead-modal-subtitle{color:var(--color-text-secondary);font-size:.85rem}.lead-form{gap:1rem;margin-top:.5rem;display:grid}.lead-field{color:var(--color-text-secondary);gap:.4rem;font-size:.8rem;font-weight:500;display:grid}.lead-field input{border-radius:var(--radius-sm);font-size:.9rem;font-family:var(--font-body);background:#faf6f199;border:1px solid #1b28451f;padding:.7rem .9rem;transition:border .2s,box-shadow .2s}.lead-field input:focus{border-color:#c8a88ecc;outline:none;box-shadow:0 0 0 3px #c8a88e2e}.lead-error{color:var(--color-error);font-size:.8rem}.lead-actions{grid-template-columns:1fr 1.4fr;gap:.75rem;margin-top:.5rem;display:grid}.lead-primary,.lead-secondary{border-radius:var(--radius-full);cursor:pointer;border:none;padding:.75rem 1rem;font-size:.9rem;font-weight:600;transition:transform .2s,box-shadow .2s,opacity .2s}.lead-secondary{color:var(--navy);background:#1b284514}.lead-primary{background:linear-gradient(135deg,var(--sand-500),var(--sand-700));color:#fff;box-shadow:0 12px 26px #a07d5859}.lead-primary:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.lead-primary:not(:disabled):hover,.lead-secondary:hover{transform:translateY(-1px)}.transcript{border-radius:var(--radius-md);background:#1b284508;border:1px solid #1b28450f;width:100%;max-height:200px;padding:.75rem;overflow-y:auto}.transcript-entry{border-radius:var(--radius-sm);gap:.5rem;margin-bottom:.5rem;padding:.5rem .75rem;font-size:.875rem;animation:.3s slideIn;display:flex}@keyframes slideIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transcript-entry.user{background:#c8a88e1f}.transcript-entry.agent{background:#5aa67a14}.speaker-icon{flex-shrink:0;font-size:1rem}.transcript-text{color:var(--color-text-primary);flex:1;font-size:.8125rem;line-height:1.5}.transcript-empty{text-align:center;color:var(--color-text-muted);padding:1rem;font-size:.8125rem}@media (max-width:680px){body{overflow:auto}.main-container{padding:1.25rem}.live-talk-container{border-radius:var(--radius-md);gap:1.35rem;padding:2.1rem 1.5rem}.avatar-area{width:148px;height:148px}}@media (max-width:480px){.main-container{padding:1rem}.live-talk-container{gap:1rem;padding:1.55rem 1.15rem}.brand-header h1{font-size:1.4rem}.benefits{gap:.45rem;padding:.5rem .8rem}.benefit-item{font-size:.82rem}.lead-actions{grid-template-columns:1fr}.call-button{width:64px;height:64px}.audio-visualizer{height:44px;padding:.5rem 1rem}}@media (max-height:740px){.main-container{align-items:flex-start;padding-top:1.5rem;padding-bottom:1.5rem}.live-talk-container{gap:1.15rem;padding:1.55rem 1.5rem}.avatar-area{width:140px;height:140px}.audio-visualizer{height:46px}}@media (max-height:640px){.main-container{padding-top:1rem;padding-bottom:1rem}.live-talk-container{gap:1rem;padding:1.4rem 1.25rem}.brand-header h1{font-size:1.3rem}.brand-header .subtitle{font-size:.7rem}.avatar-area{width:124px;height:124px}.audio-visualizer{height:40px}.call-button{width:60px;height:60px}}@media (max-height:560px){.live-talk-container{gap:.85rem;padding:1.15rem 1rem}.lead-modal-card{padding:1.5rem 1.25rem}.lead-form{gap:.8rem;margin-top:1rem}}