@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --grad1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --grad-green: linear-gradient(135deg, #059669 0%, #10B981 50%, #34D399 100%);
    --border: #E2E8F0;
}

html, body { font-family: 'Plus Jakarta Sans', sans-serif; background: #FFFFFF; }

#components-reconnect-modal { display: none !important; }

.grad-text {
    background: var(--grad1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-gradient {
    background: var(--grad1) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 0.45rem 1.5rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-gradient:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(79,70,229,0.35); }

/* status ticker */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 1rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0 0.3rem;
}
.sdot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block; flex-shrink: 0;
}
.sdot-green  { background: #10B981; box-shadow: 0 0 5px #10B981; }
.sdot-red    { background: #EF4444; box-shadow: 0 0 5px #EF4444; }
.sdot-blue   { background: #60A5FA; box-shadow: 0 0 5px #60A5FA; }
.sdot-purple { background: #A78BFA; box-shadow: 0 0 5px #A78BFA; }
.chart-line {
    animation: chart-pulse 2.5s ease-in-out infinite;
}
@keyframes chart-pulse {
    0%, 100% { stroke-opacity: 1; }
    50%       { stroke-opacity: 0.35; }
}

.tool-card-img { height: 180px; object-fit: cover; width: 100%; transition: transform 0.5s ease; }
.mud-card:hover .tool-card-img { transform: scale(1.05); }

.mud-appbar { backdrop-filter: blur(12px) !important; border-bottom: 1px solid var(--border) !important; }

/* Marquee ticker */
.ticker-wrap {
    overflow: hidden;
    width: 100%;
}
.ticker-track {
    display: flex;
    width: max-content;
    animation: ticker 35s linear infinite;
    will-change: transform;
}
.ticker-wrap:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Hero slider */
.slide-panel {
    position: absolute;
    inset: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.slide-panel.active  { opacity: 1; transform: translateX(0);   pointer-events: auto; }
.slide-panel.hidden  { opacity: 0; transform: translateX(20px); pointer-events: none; }
.slide-dot {
    width: 8px; height: 8px; border-radius: 50%;
    border: none; cursor: pointer; transition: all 0.3s;
    padding: 0;
}
.slide-dot.active  { width: 24px; border-radius: 4px; background: #fff !important; }
.slide-dot.inactive { background: rgba(255,255,255,0.4) !important; }