.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; }
.soc-visual { width:100%; display:flex; flex-direction:column; gap:18px; }
.soc-platforms { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.soc-platform-card { background:rgba(59,130,246,0.07); border:1px solid rgba(59,130,246,0.18); border-radius:12px; padding:12px 8px 10px; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; overflow:hidden; cursor:pointer; transition:border-color 0.25s, background 0.25s; }
.soc-platform-card:hover { border-color:rgba(59,130,246,0.5); background:rgba(59,130,246,0.13); }
.soc-platform-card svg { width:22px; height:22px; flex-shrink:0; }
.soc-platform-name { font-size:9px; font-weight:700; color:rgba(255,255,255,0.5); letter-spacing:0.8px; text-transform:uppercase; }
.soc-platform-count { font-size:13px; font-weight:800; color:#fff; line-height:1; }
.soc-float { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-size:9px; font-weight:700; color:rgba(59,130,246,0.9); white-space:nowrap; opacity:0; animation:soc-rise 3s ease-in-out infinite; }
.soc-platform-card:nth-child(1) .soc-float { animation-delay:0s; }
.soc-platform-card:nth-child(2) .soc-float { animation-delay:0.75s; }
.soc-platform-card:nth-child(3) .soc-float { animation-delay:1.5s; }
.soc-platform-card:nth-child(4) .soc-float { animation-delay:2.25s; }
.soc-chart { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:14px 14px 10px; }
.soc-chart-title { font-size:9px; font-weight:700; color:rgba(255,255,255,0.4); letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }
.soc-bars { display:flex; align-items:flex-end; gap:7px; height:72px; }
.soc-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end; }
.soc-bar { width:100%; border-radius:4px 4px 0 0; background:linear-gradient(to top, rgba(59,130,246,1) 0%, rgba(147,197,253,0.85) 100%); transform-origin:bottom; transform:scaleY(0); animation:soc-barUp 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards; box-shadow:0 0 8px rgba(59,130,246,0.35); }
.soc-bar:nth-child(1) { animation-delay:0.1s; }
.soc-bar-wrap:nth-child(1) .soc-bar { height:30%; animation-delay:0.1s; }
.soc-bar-wrap:nth-child(2) .soc-bar { height:42%; animation-delay:0.2s; }
.soc-bar-wrap:nth-child(3) .soc-bar { height:55%; animation-delay:0.3s; }
.soc-bar-wrap:nth-child(4) .soc-bar { height:70%; animation-delay:0.4s; }
.soc-bar-wrap:nth-child(5) .soc-bar { height:82%; animation-delay:0.5s; }
.soc-bar-wrap:nth-child(6) .soc-bar { height:100%; animation-delay:0.6s; }
.soc-bar-label { font-size:8px; color:rgba(255,255,255,0.3); font-weight:600; }
.soc-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.soc-metric { background:rgba(59,130,246,0.06); border:1px solid rgba(59,130,246,0.14); border-radius:10px; padding:10px 10px; display:flex; flex-direction:column; gap:3px; animation:soc-pulse 2.8s ease-in-out infinite; }
.soc-metric:nth-child(1) { animation-delay:0s; }
.soc-metric:nth-child(2) { animation-delay:0.9s; }
.soc-metric:nth-child(3) { animation-delay:1.8s; }
.soc-metric-label { font-size:9px; color:rgba(255,255,255,0.4); font-weight:600; display:flex; align-items:center; gap:4px; }
.soc-metric-value { font-size:17px; font-weight:800; color:#fff; line-height:1; }
.soc-metric-trend { font-size:9px; color:rgba(59,130,246,0.9); font-weight:700; display:flex; align-items:center; gap:2px; }
.soc-arrow { display:inline-block; transform:rotate(-45deg); font-style:normal; }
@keyframes soc-rise { 0%{opacity:0;transform:translateX(-50%) translateY(0);} 20%{opacity:1;} 70%{opacity:0.7;} 100%{opacity:0;transform:translateX(-50%) translateY(-22px);} }
@keyframes soc-barUp { from{transform:scaleY(0);} to{transform:scaleY(1);} }
@keyframes soc-pulse { 0%,100%{border-color:rgba(59,130,246,0.14);box-shadow:none;} 50%{border-color:rgba(59,130,246,0.4);box-shadow:0 0 12px rgba(59,130,246,0.15);} }