/* Country Counter — marketing page demo + small extras (layers on v2-editorial). */

.cc-demo {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    max-height: 540px;
    border-radius: 22px;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% -10%, #10233a, #0a1119 70%);
    box-shadow: 0 24px 60px rgba(15, 34, 51, .28);
}
#ccDemoMap { width: 100%; height: 100%; display: block; }
.ccd-sphere { fill: #0d1522; }
.ccd-country { fill: #22303f; stroke: #33455a; stroke-width: .4px; transition: fill .5s ease; }
.ccd-country.is-on { fill: #2ba8ff; }
.ccd-arc { fill: none; stroke: #ff7a45; stroke-width: 1.8px; stroke-linecap: round;
    filter: drop-shadow(0 0 3px rgba(255, 122, 69, .6)); }

.cc-demo__badge { position: absolute; left: 16px; top: 16px; background: rgba(255, 255, 255, .92);
    border-radius: 15px; padding: 9px 15px; box-shadow: 0 8px 30px rgba(0, 0, 0, .22); }
.cc-demo__num { font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 42px; line-height: 1;
    background: linear-gradient(135deg, #0b6fd6, #2ba8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cc-demo__lbl { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #5b6b7a; margin-top: 2px; }
.cc-demo__now { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); background: #0d1522; color: #fff;
    padding: 6px 16px; border-radius: 999px; font-family: Fraunces, serif; font-weight: 600; font-size: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25); white-space: nowrap; }
.cc-demo__cap { text-align: center; font-size: 12px; color: var(--v2-ink-soft, #5b6b7a); margin: 10px 0 0; opacity: .85; }

/* small feature-row helper (uses v2 tokens where present) */
.cc-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cc-feat__item { }
.cc-feat__ic { font-size: 22px; color: #2ba8ff; margin-bottom: 8px; }
.cc-feat__h { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 19px; margin: 0 0 6px; }
.cc-feat__p { font-size: 14px; line-height: 1.55; color: var(--v2-ink-soft, #4a5a6a); margin: 0; }
@media (max-width: 720px) { .cc-feat { grid-template-columns: 1fr; gap: 18px; } }