/* ── Cloudflare overlay ── */
#cf-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: #f6f6ef;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-family: Arial, sans-serif;
}
#cf-box {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 32px 40px;
    max-width: 480px; width: 90%;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    text-align: center;
}
#cf-logo {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-bottom: 20px;
}
#cf-logo svg { width: 40px; height: 40px; }
#cf-logo span { font-size: 22px; font-weight: 700; color: #404040; letter-spacing: -0.5px; }
#cf-box h1 { font-size: 17px; font-weight: 600; color: #1d1d1d; margin: 0 0 6px; }
#cf-box p { font-size: 13px; color: #666; margin: 0 0 22px; }
#cf-box .cf-domain { color: #f48120; font-weight: 600; }
#cf-turnstile-wrap { display: flex; justify-content: center; }
#cf-footer { margin-top: 18px; font-size: 11px; color: #aaa; }
#cf-footer a { color: #f48120; text-decoration: none; }

/* ── Feature card entrance ── */
.feat-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s;
    will-change: transform, opacity;
    position: relative;
    overflow: hidden;
}
.feat-card.visible { opacity: 1; transform: translateY(0) rotateX(0deg) rotateY(0deg); }

/* shimmer sweep on hover */
.feat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(34,211,238,.08) 50%, transparent 60%);
    background-size: 200% 100%;
    background-position: -100% 0;
    transition: background-position .5s ease;
    pointer-events: none;
    z-index: 1;
}
.feat-card:hover::before { background-position: 200% 0; }

/* glow border on hover */
.feat-card:hover {
    border-color: rgba(34,211,238,.35) !important;
    box-shadow: 0 0 0 1px rgba(34,211,238,.15), 0 20px 60px rgba(6,182,212,.18), 0 4px 20px rgba(0,0,0,.4) !important;
}

/* icon pulse ring */
@keyframes iconRing {
    0%   { box-shadow: 0 0 0 0 rgba(34,211,238,.5); }
    70%  { box-shadow: 0 0 0 12px rgba(34,211,238,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}
.feat-card.visible .icon-circle { animation: iconRing 2.4s ease-out .6s infinite; }

/* shine sweep on icon-circle */
@keyframes iconShine {
    0%   { background-position: -150% center; }
    60%  { background-position: 250% center; }
    100% { background-position: 250% center; }
}
.icon-circle {
    position: relative;
    overflow: hidden;
}
.icon-circle::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 30%,
        rgba(255,255,255,.35) 50%,
        transparent 70%);
    background-size: 200% 100%;
    background-position: -150% center;
    border-radius: inherit;
    pointer-events: none;
    animation: iconShine 3s ease-in-out infinite;
}

.count-num { display: inline-block; }

/* stagger delays */
.feat-card:nth-child(1) { transition-delay: .05s; }
.feat-card:nth-child(2) { transition-delay: .15s; }
.feat-card:nth-child(3) { transition-delay: .25s; }
.feat-card:nth-child(4) { transition-delay: .35s; }
.feat-card:nth-child(5) { transition-delay: .45s; }

/* sparkle particle */
@keyframes sparkle {
    0%   { opacity:1; transform: translate(0,0) scale(1); }
    100% { opacity:0; transform: translate(var(--tx),var(--ty)) scale(0); }
}
.sparkle-dot {
    position:absolute; width:4px; height:4px; border-radius:50%;
    background:rgba(34,211,238,.9);
    animation: sparkle .8s ease-out forwards;
    pointer-events:none; z-index:10;
}

/* pill float stagger */
.pill-1 { animation: float 4s ease-in-out infinite; }
.pill-2 { animation: float 5s ease-in-out .6s infinite; }
.pill-3 { animation: float 6s ease-in-out 1.2s infinite; }
@keyframes float {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* section heading reveal */
@keyframes headingReveal {
    from { opacity:0; letter-spacing:.3em; }
    to   { opacity:1; letter-spacing:-.02em; }
}
.feat-heading { animation: headingReveal .9s cubic-bezier(.22,1,.36,1) both; }

/* progress bar on Trusted Seller */
@keyframes barGrow { from { width:0; } to { width: 92%; } }
.trust-bar-fill { animation: barGrow 1.4s cubic-bezier(.22,1,.36,1) .8s both; }

/* star pop */
@keyframes starPop { from{opacity:0;transform:scale(0) rotate(-30deg)} to{opacity:1;transform:scale(1) rotate(0)} }