/* =============================================================
   SHUVINO — About page (creative + animated)
   ============================================================= */

/* Floating badges on hero images */
.sh-about-hero__img { position: relative; }
.sh-ab-float {
    position: absolute; background: #fff; border-radius: 14px; padding: 10px 16px;
    box-shadow: 0 14px 34px rgba(18,59,147,.18); font-size: .84rem; font-weight: 800; color: var(--sh-ink);
    display: inline-flex; align-items: center; gap: 8px; z-index: 3;
}
.sh-ab-float i { color: var(--sh-teal); }
.sh-ab-float b { color: var(--sh-orange); }
.sh-ab-float--1 { top: 24px; left: -18px; animation: sh-abfloat 4s ease-in-out infinite; }
.sh-ab-float--2 { bottom: 30px; right: -16px; animation: sh-abfloat 4s ease-in-out infinite .8s; }
.sh-ab-float--3 { bottom: 26px; left: -16px; animation: sh-abfloat 4s ease-in-out infinite .4s; }
@keyframes sh-abfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Stats count-up cards */
.sh-about-stats > div { position: relative; overflow: hidden; }
.sh-about-stats strong { font-variant-numeric: tabular-nums; }

/* ---------- Price-drop demo ---------- */
.sh-abdemo { position: relative; overflow: hidden; background: linear-gradient(180deg, #F4F8FF 0%, var(--sh-bg) 70%); }
.sh-abdemo::before { content: ""; position: absolute; top: -120px; left: -80px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(18,59,147,.10), transparent 70%); }
.sh-abdemo::after { content: ""; position: absolute; bottom: -140px; right: -80px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(15,167,160,.12), transparent 70%); }
.sh-abdemo__stage { display: grid; grid-template-columns: 340px 1fr; gap: 30px; align-items: center; position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }

.sh-abdemo__card { background: #fff; border-radius: var(--sh-r-lg); padding: 22px; box-shadow: var(--sh-shadow-lg); position: relative; text-align: center; }
.sh-abdemo__badge { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #FBD5DC; color: var(--sh-danger); font-size: .66rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; letter-spacing: .04em; box-shadow: var(--sh-shadow-xs); }
.sh-abdemo__img { width: 150px; height: 150px; object-fit: cover; border-radius: 18px; margin: 6px auto 14px; box-shadow: var(--sh-shadow-sm); }
.sh-abdemo__name { font-weight: 800; font-size: 1rem; margin-bottom: 10px; }
.sh-abdemo__pricerow { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-bottom: 14px; }
.sh-abdemo__now { font-size: 1.9rem; font-weight: 900; color: var(--sh-teal-600); letter-spacing: -.02em; }
.sh-abdemo__now.pop { animation: sh-pricepop .4s var(--sh-ease); }
@keyframes sh-pricepop { 0% { transform: scale(1); } 40% { transform: scale(1.16); color: var(--sh-orange); } 100% { transform: scale(1); } }
.sh-abdemo__was { font-size: .9rem; color: var(--sh-muted); text-decoration: line-through; }
.sh-abdemo__off { font-size: .74rem; font-weight: 800; color: #fff; background: var(--sh-danger); padding: 2px 8px; border-radius: 999px; }
.sh-abdemo__bar { height: 8px; border-radius: 999px; background: var(--sh-bg-soft); overflow: hidden; margin-bottom: 14px; }
.sh-abdemo__bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sh-teal), #14C4BB); transition: width .7s var(--sh-ease); }
.sh-abdemo__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sh-abdemo__count { font-size: .8rem; font-weight: 700; color: var(--sh-teal-600); }

.sh-abdemo__ladder h4 { font-size: 1.1rem; font-weight: 800; margin-bottom: 4px; }
.sh-abdemo__ladder > p { color: var(--sh-ink-soft); font-size: .9rem; margin-bottom: 16px; }
.sh-abdemo__tiers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sh-abdemo__tier { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-radius: 12px; border: 1.5px solid var(--sh-line); background: #fff; transition: all .4s var(--sh-ease); opacity: .55; }
.sh-abdemo__tier.is-on { opacity: 1; border-color: #CFEFED; }
.sh-abdemo__tier.is-current { border-color: var(--sh-teal); background: var(--sh-teal-50); transform: translateX(6px); box-shadow: var(--sh-shadow-sm); }
.sh-abdemo__tierm { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 700; color: var(--sh-ink-soft); }
.sh-abdemo__tierm i { color: var(--sh-teal); }
.sh-abdemo__tier b { font-size: 1.05rem; color: var(--sh-ink); }
.sh-abdemo__tier.is-current b { color: var(--sh-teal-600); }
.sh-abdemo__note { display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; color: var(--sh-ink-soft); background: var(--sh-blue-50); border-radius: 12px; padding: 11px 14px; }
.sh-abdemo__note i { color: var(--sh-blue); font-size: 1.05rem; }

@media (max-width: 760px) {
    .sh-abdemo__stage { grid-template-columns: 1fr; gap: 22px; max-width: 420px; }
    .sh-ab-float { display: none; }
}

/* =============================================================
   About fixes — bigger stats, visible CTA, responsive values
   ============================================================= */
/* Stats: larger numbers + labels, smaller currency symbol, single line */
.sh-about-stats { gap: 18px; }
.sh-about-stats > div { padding: 30px 12px; }
.sh-about-stats strong { display: block; font-size: 3rem; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
/* number spans inside <strong> must inherit the big size and stay inline (single line) */
.sh-about-stats strong > span { font-size: inherit; display: inline; margin: 0; color: inherit; }
.sh-about-stats strong > .sh-stat-cur { font-size: .46em; font-weight: 800; vertical-align: 16%; margin-right: 1px; }
/* only the label (direct child span of the box) is small */
.sh-about-stats > div > span { font-size: 1.02rem; font-weight: 600; color: var(--sh-ink-soft); margin-top: 6px; display: block; }

/* CTA heading was invisible on the blue gradient */
.sh-about-cta h2 { color: #fff !important; font-size: 2rem; }
.sh-about-cta p { color: rgba(255,255,255,.88); }

/* Responsive */
@media (max-width: 900px) {
    .sh-about-stats { grid-template-columns: repeat(2, 1fr); }
    .sh-about-stats strong { font-size: 2.9rem; }
}
@media (max-width: 600px) {
    .sh-grid--3 { grid-template-columns: 1fr; }
    .sh-valuecard { padding: 24px 22px; }
    .sh-about-cta { flex-direction: column; text-align: center; justify-content: center; padding: 30px 24px; }
    .sh-about-cta h2 { font-size: 1.6rem; }
    .sh-about-stats strong { font-size: 2.6rem; }
    .sh-about-stats > div > span { font-size: .92rem; }
}