:root {
    --ink: #24334d;
    --muted: #718096;
    --line: #e4e8ef;
    --bg: #f7f8fa;
    --blue: #315f9f;
    --blue-dark: #244b83;
    --shadow: 0 12px 34px rgba(36, 51, 77, .07);
    font-family: "Quicksand", "Avenir Next", system-ui, sans-serif;
}

body {
    background: #f7f8fa;
}

.topbar {
    background: rgba(255, 255, 255, .96);
    border-bottom-color: #eef0f4;
    box-shadow: 0 2px 12px rgba(36, 51, 77, .04);
}

.brand-logo {
    display: block;
    width: 118px;
    height: auto;
}

.brand-divider {
    width: 1px;
    height: 28px;
    background: #dfe4ec;
}

.brand strong,
.page-heading h1,
.section-heading h2,
.stat-card strong {
    font-weight: 700;
}

.brand-mark {
    display: none;
}

.button-primary {
    background: #315f9f;
    box-shadow: 0 5px 14px rgba(49, 95, 159, .16);
}

.button-primary:hover {
    background: #244b83;
}

.stat-card,
.dashboard-section,
.login-card {
    border-color: #e7ebf1;
    box-shadow: var(--shadow);
}

@media (max-width: 560px) {
    .brand-logo { width: 100px; }
    .brand-divider { height: 24px; }
}

.voice-orb-stage { display: grid; place-items: center; min-height: 290px; background: radial-gradient(circle at 50% 44%, #edf3fb 0, #fff 64%); border: 1px solid #e7ebf1; border-radius: 20px; overflow: hidden; }
.voice-orb { position: relative; display: grid; place-items: center; width: 188px; height: 188px; border-radius: 50%; overflow: hidden; color: #fff; background: radial-gradient(circle at 22% 25%, #fff3df 0, transparent 24%), radial-gradient(circle at 72% 26%, #ff6dcc 0, transparent 31%), radial-gradient(circle at 25% 70%, #ff9bc6 0, transparent 34%), radial-gradient(circle at 72% 76%, #698cff 0, transparent 39%), linear-gradient(140deg, #5b43c7, #e36ec5 48%, #6aa8ff); box-shadow: 0 0 0 14px rgba(116,91,222,.08), 0 24px 70px rgba(100,76,190,.28); transition: background .8s ease, box-shadow .8s ease; animation: orb-breathe 5.6s ease-in-out infinite; }
.voice-orb::before, .voice-orb::after { position: absolute; inset: -18%; border-radius: 48% 52% 45% 55%; content: ""; filter: blur(18px); mix-blend-mode: screen; opacity: .72; }
.voice-orb::before { background: radial-gradient(ellipse at 28% 42%, #ffb9b0 0, transparent 32%), radial-gradient(ellipse at 72% 62%, #78d8ff 0, transparent 38%); animation: orb-cloud-one 9s ease-in-out infinite alternate; }
.voice-orb::after { background: radial-gradient(ellipse at 55% 22%, #ff6cd2 0, transparent 34%), radial-gradient(ellipse at 38% 82%, #ffd6a5 0, transparent 30%); animation: orb-cloud-two 11s ease-in-out infinite alternate; }
.voice-orb span { position: absolute; inset: -12px; border: 1px solid rgba(49,95,159,.28); border-radius: 50%; opacity: 0; }
.voice-orb span:nth-child(2) { inset: -27px; }
.voice-orb span:nth-child(3) { inset: -44px; }
.voice-orb strong, .voice-orb small { position: relative; z-index: 1; display: block; text-align: center; text-shadow: 0 1px 12px rgba(40,24,100,.3); }
.voice-orb small { margin-top: 4px; color: rgba(255,255,255,.82); font-size: 10px; }
.orb-call-button { position: absolute; z-index: 3; bottom: -31px; display: grid; place-items: center; width: 62px; height: 62px; border: 8px solid #fff; border-radius: 50%; color: #fff; background: #111827; box-shadow: 0 8px 18px rgba(15,23,42,.24); font-size: 22px; line-height: 1; transform: translateY(50%); transition: transform .2s ease, background .2s ease; }
.orb-call-button:hover { background: #315f9f; transform: translateY(50%) scale(1.06); }
.voice-orb.talking .orb-call-button { background: #b64949; }
.voice-orb.connecting span, .voice-orb.calling span, .voice-orb.talking span { animation: orb-pulse 3.4s cubic-bezier(.16,1,.3,1) infinite; }
.voice-orb span:nth-child(2) { animation-delay: .55s; }
.voice-orb span:nth-child(3) { animation-delay: 1.1s; }
.voice-orb.talking { color: #2e7a63; background: radial-gradient(circle at 35% 28%, #fff, #d8f0e6 52%, #acd8c4); }
.voice-orb.error { color: #a14c4c; background: #fae6e6; }
.webphone-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.webphone-number { flex: 1 1 220px; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--ink); }
.button-danger { border: 0; border-radius: 10px; padding: 10px 14px; color: #fff; background: #b64949; font-weight: 700; }
.webphone-help { color: var(--muted); font-size: 12px; margin: 14px 0 0; }
.hub-preference { margin-bottom: 0; }
@keyframes orb-pulse { 0% { transform: scale(.72); opacity: 0; } 22% { opacity: .58; } 100% { transform: scale(1.32); opacity: 0; } }
@keyframes orb-breathe { 0%, 100% { transform: scale(.98); } 50% { transform: scale(1.025); } }
@keyframes orb-cloud-one { from { transform: translate(-8%, -5%) rotate(-12deg) scale(1); } to { transform: translate(11%, 8%) rotate(16deg) scale(1.16); } }
@keyframes orb-cloud-two { from { transform: translate(8%, 7%) rotate(14deg) scale(1.08); } to { transform: translate(-10%, -8%) rotate(-18deg) scale(.94); } }