/* ══ /website-designing/ — "What the Numbers Say" (charcoal rings) ══ */
.wn { position: relative; overflow: hidden; padding: 80px 0; background: #fff; }
.wn-head { text-align: center; max-width: 900px; margin: 0 auto 40px; }
.wn .subtitle_text { display: block; font-size: 18px; font-weight: 600; color: #f26629 !important; margin-bottom: 7px; }
.wn .wn-title { display: block; font-size: 38px !important; line-height: 1.3 !important; font-weight: 700 !important; color: #3c4858 !important; margin: 0; }
.wn p { font-size: 16px; line-height: 1.667em; color: #5a6475; margin: 0; }
.wn-num { display: inline-block; font-weight: 800; line-height: 1; color: #3c4858; font-variant-numeric: tabular-nums; }

.wn1 { background: linear-gradient(160deg, #0c0c0e 0%, #141416 55%, #1b1b1e 100%); }
.wn1::before { content: ''; position: absolute; width: 620px; height: 620px; left: 50%; top: -360px; margin-left: -310px; border-radius: 50%; background: radial-gradient(circle, rgba(242,102,41,.16), transparent 65%); pointer-events: none; }
.wn1 .container { position: relative; }
.wn1 .wn-title { color: #fff !important; }
.wn1-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wn1-c { padding: 34px 26px 30px; border-radius: 24px; text-align: center; background: #18181b; border: 1px solid rgba(255,255,255,.07); transition: border-color .3s, transform .3s; }
.wn1-c:hover { border-color: rgba(242,102,41,.45); transform: translateY(-4px); }
.wn1-ring { position: relative; width: 170px; height: 170px; margin: 0 auto 22px; }
.wn-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.wn-ring circle { fill: none; stroke-width: 8; }
.wn-ring-bg { stroke: rgba(255,255,255,.08); }
.wn-ring-fg { stroke: #f26629; stroke-linecap: round; stroke-dashoffset: var(--off); transition: stroke-dashoffset 1.5s cubic-bezier(.2,.7,.2,1); filter: drop-shadow(0 0 6px rgba(242,102,41,.45)); }
.wn.is-js:not(.is-in) .wn-ring-fg { stroke-dashoffset: var(--c); }
.wn1-ring .wn-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 44px; color: #fff; }
.wn1 p { color: rgba(255,255,255,.62); }

@media (max-width: 991px) {
  .wn .wn-title { font-size: 30px !important; line-height: 40px !important; }
  .wn1-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 576px) {
  .wn { padding: 60px 0; } .wn-head { margin-bottom: 30px; } .wn .wn-title { font-size: 22px !important; line-height: 32px !important; } .wn .subtitle_text { font-size: 16px; }
  .wn1-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .wn1-c { padding: 22px 14px; } .wn1-ring { width: 110px; height: 110px; margin-bottom: 14px; } .wn1-ring .wn-num { font-size: 28px; } .wn1 p { font-size: 14px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) { .wn-ring-fg { transition: none; } }