.service-overview { max-width: 1200px; margin: 0 auto; padding: 100px 40px; }
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
@media (max-width: 900px) {
.overview-grid { grid-template-columns: 1fr; }
}
.overview-text h2 { font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 20px; }
.overview-text p { font-size: 15px; color: #888; line-height: 1.8; margin-bottom: 16px; }
.overview-img { border-radius: 20px; background: #161616; border: 1px solid rgba(255,255,255,0.07); min-height: 360px; display: flex; align-items: center; justify-content: center; font-size: 80px; }
.hs-visual { width: 100%; font-family: 'Open Sans', Arial, sans-serif; }
.hs-header { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.hs-pulse-dot { width: 10px; height: 10px; background: #84cc16; border-radius: 50%; flex-shrink: 0; animation: hs-pulse-dot 1.8s ease-out infinite; }
.hs-header-title { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 1.2px; text-transform: uppercase; }
.hs-header-sub { margin-left: auto; font-size: 11px; color: rgba(132,204,22,0.75); font-weight: 600; letter-spacing: 0.5px; }
.hs-servers { display: flex; flex-direction: column; gap: 11px; margin-bottom: 24px; }
.hs-server-row { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 10px 14px; }
.hs-server-dot { width: 7px; height: 7px; background: #84cc16; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px rgba(132,204,22,0.8); }
.hs-server-name { font-size: 12px; font-weight: 600; color: #ccc; min-width: 70px; }
.hs-bar-track { flex: 1; height: 5px; background: rgba(255,255,255,0.07); border-radius: 99px; overflow: hidden; }
.hs-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, rgba(132,204,22,0.6) 0%, #84cc16 100%); width: 0%; animation: hs-bar-fill 1.4s cubic-bezier(0.22,1,0.36,1) forwards; }
.hs-server-row:nth-child(1) .hs-bar-fill { --hs-w: 98%; animation-delay: 0.2s; }
.hs-server-row:nth-child(2) .hs-bar-fill { --hs-w: 100%; animation-delay: 0.45s; }
.hs-server-row:nth-child(3) .hs-bar-fill { --hs-w: 99%; animation-delay: 0.7s; }
.hs-badge { flex-shrink: 0; font-size: 10px; font-weight: 700; color: #84cc16; background: rgba(132,204,22,0.1); border: 1px solid rgba(132,204,22,0.3); border-radius: 6px; padding: 2px 8px; letter-spacing: 0.4px; }
.hs-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hs-metric { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 18px 12px 14px; text-align: center; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; animation: hs-card-in 0.6s ease both; }
.hs-metric:nth-child(1) { animation-delay: 0.9s; }
.hs-metric:nth-child(2) { animation-delay: 1.05s; }
.hs-metric:nth-child(3) { animation-delay: 1.2s; }
.hs-metric:hover { border-color: rgba(132,204,22,0.4); box-shadow: 0 0 20px rgba(132,204,22,0.12), 0 4px 20px rgba(0,0,0,0.3); transform: translateY(-3px); }
.hs-metric-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.hs-ring-svg { width: 54px; height: 54px; }
.hs-ring-bg { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 5; }
.hs-ring-progress { fill: none; stroke: #84cc16; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 226; stroke-dashoffset: 226; --hs-dash: 1; animation: hs-ring-spin 1.6s cubic-bezier(0.22,1,0.36,1) 1s forwards; filter: drop-shadow(0 0 4px rgba(132,204,22,0.6)); }
.hs-ring-text { font-size: 11px; font-weight: 800; fill: #84cc16; text-anchor: middle; dominant-baseline: middle; }
.hs-blink-wrap { display: flex; align-items: center; justify-content: center; gap: 6px; }
.hs-blink-dot { width: 9px; height: 9px; background: #84cc16; border-radius: 50%; box-shadow: 0 0 8px rgba(132,204,22,0.9); animation: hs-blink 0.9s step-start infinite; }
.hs-blink-val { font-size: 22px; font-weight: 800; color: #fff; line-height: 1; }
.hs-clock-icon { font-size: 28px; line-height: 1; animation: hs-clock-pulse 2.2s ease-in-out infinite; display: inline-block; }
.hs-metric-val { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 4px; }
.hs-metric-label { font-size: 10px; font-weight: 600; color: #666; letter-spacing: 0.8px; text-transform: uppercase; }
.hs-metric-hint { font-size: 10px; color: rgba(132,204,22,0.6); margin-top: 3px; font-weight: 600; }
@keyframes hs-bar-fill { from { width: 0%; } to { width: var(--hs-w); } }
@keyframes hs-pulse-dot { 0%,100% { box-shadow: 0 0 0 0 rgba(132,204,22,0.7); } 60% { box-shadow: 0 0 0 7px rgba(132,204,22,0); } }
@keyframes hs-ring-spin { from { stroke-dashoffset: 226; } to { stroke-dashoffset: var(--hs-dash); } }
@keyframes hs-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0.2; } }
@keyframes hs-clock-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: 0.75; } }
@keyframes hs-card-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }