/* ═══════════════ POPOLNYATOR EXCHANGE — Black · Green ═══════════════ */

/* ═══════ Captcha Gate ═══════ */
.captcha-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #040406;
    transition: opacity 0.3s;
}
.captcha-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(0,255,136,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(0,200,110,0.03) 0%, transparent 50%);
    pointer-events: none;
}
.captcha-box {
    position: relative;
    width: 400px;
    max-width: 92vw;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0,255,136,0.25) 0%, rgba(26,26,40,0.5) 50%, rgba(0,200,110,0.15) 100%);
    animation: captcha-appear 0.5s ease-out;
}
@keyframes captcha-appear {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.captcha-box > * {
    position: relative;
    z-index: 1;
}
.captcha-box::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(160deg, #0e0e16, #080810);
    z-index: 0;
}
.captcha-scanlines {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(0,255,136,0.01) 23px, rgba(0,255,136,0.01) 24px);
    pointer-events: none;
    z-index: 1;
}
.captcha-header {
    text-align: center;
    padding: 32px 28px 0;
    position: relative;
    z-index: 2;
}
.captcha-shield {
    width: 52px; height: 52px;
    margin: 0 auto 16px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,255,136,0.07);
    border: 1px solid rgba(0,255,136,0.2);
    color: #00ff88;
    box-shadow: 0 0 30px rgba(0,255,136,0.08);
}
.captcha-shield svg { filter: drop-shadow(0 0 6px rgba(0,255,136,0.4)); }
.captcha-title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.captcha-subtitle {
    color: rgba(160,165,175,0.6);
    font-size: 0.8rem;
    margin-top: 4px;
}
.captcha-body {
    padding: 24px 28px;
    position: relative;
    z-index: 2;
}
.captcha-challenge {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    padding: 18px 20px;
    margin-bottom: 20px;
    border-radius: 14px;
    background: rgba(0,255,136,0.03);
    border: 1px solid rgba(0,255,136,0.1);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    text-shadow: 0 0 20px rgba(0,255,136,0.15);
}
.captcha-input {
    display: block;
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(10,10,20,0.8);
    border: 1px solid rgba(0,255,136,0.12);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.1em;
}
.captcha-input:focus {
    border-color: rgba(0,255,136,0.4);
    box-shadow: 0 0 20px rgba(0,255,136,0.08);
}
.captcha-input::placeholder { color: rgba(100,105,115,0.5); }
.captcha-error {
    text-align: center;
    color: #ff5555;
    font-size: 0.78rem;
    margin-top: 10px;
    margin-bottom: -6px;
}
.captcha-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, #00ff88, #0a6b3a);
    color: #000;
    transition: box-shadow 0.3s, transform 0.15s, opacity 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.captcha-btn:hover:not(:disabled) {
    box-shadow: 0 0 30px rgba(0,255,136,0.25), 0 8px 30px rgba(0,0,0,0.3);
    transform: translateY(-1px);
}
.captcha-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.captcha-spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid rgba(0,0,0,0.2);
    border-top-color: #000;
    border-radius: 50%;
    animation: captcha-spin 0.6s linear infinite;
}
@keyframes captcha-spin { to { transform: rotate(360deg); } }
.captcha-footer {
    text-align: center;
    padding: 0 28px 24px;
    color: rgba(100,105,115,0.5);
    font-size: 0.68rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    z-index: 2;
}
.captcha-footer-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(0,255,136,0.3);
    box-shadow: 0 0 6px rgba(0,255,136,0.2);
}
.captcha-rate-limit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-top: 12px;
    border-radius: 12px;
    background: rgba(220,60,60,0.06);
    border: 1px solid rgba(220,60,60,0.15);
    color: #ff5555;
}

/* ── Base ── */
[x-cloak] { display: none !important; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #040406;
}

/* ═══════ Animated Background — Neon Green Blurred Lightning ═══════ */
.animated-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.lightning {
    position: absolute;
    filter: blur(16px);
    opacity: 0;
}
.lightning-1 {
    width: 4px; height: 650px; top: -5%; left: 15%;
    background: linear-gradient(180deg, transparent, #00ff88 20%, #00ffaa 40%, transparent 60%, #00ff88 75%, transparent);
    transform: rotate(12deg) skewX(-8deg);
    animation: lf1 4s ease-in-out infinite;
}
.lightning-2 {
    width: 3px; height: 550px; top: -8%; right: 25%;
    background: linear-gradient(180deg, transparent, #00ff66 30%, transparent 50%, #00ff88 70%, #00ffaa 85%, transparent);
    transform: rotate(-15deg) skewX(5deg);
    animation: lf2 5s ease-in-out infinite 1s;
}
.lightning-3 {
    width: 5px; height: 750px; top: -10%; left: 55%;
    background: linear-gradient(180deg, transparent, #00ff88 15%, #39ffb0 35%, transparent 55%, #00ff66 80%, transparent);
    transform: rotate(8deg) skewX(-12deg);
    animation: lf3 4.5s ease-in-out infinite 2s;
}
.lightning-4 {
    width: 3px; height: 450px; top: 20%; left: 80%;
    background: linear-gradient(180deg, transparent, #00ff88 25%, transparent 50%, #00ffaa 75%, transparent);
    transform: rotate(-20deg) skewX(10deg);
    animation: lf4 5.5s ease-in-out infinite 0.5s;
}
.lightning-5 {
    width: 3px; height: 500px; top: -6%; left: 35%;
    background: linear-gradient(180deg, transparent, #39ffb0 20%, #00ff88 45%, transparent 65%, #00ffaa 82%, transparent);
    transform: rotate(-6deg) skewX(8deg);
    animation: lf5 3.8s ease-in-out infinite 1.5s;
}
.lightning-6 {
    width: 2px; height: 600px; top: -4%; left: 68%;
    background: linear-gradient(180deg, transparent, #00ff66 25%, #00ff88 50%, transparent 70%, #00ff66 88%, transparent);
    transform: rotate(18deg) skewX(-6deg);
    animation: lf6 5s ease-in-out infinite 3s;
}
.lightning-7 {
    width: 4px; height: 400px; top: 5%; left: 5%;
    background: linear-gradient(180deg, transparent, #00ffaa 30%, transparent 55%, #00ff88 78%, transparent);
    transform: rotate(25deg) skewX(-10deg);
    animation: lf7 4.2s ease-in-out infinite 0.8s;
}
.lightning-8 {
    width: 3px; height: 580px; top: -3%; right: 10%;
    background: linear-gradient(180deg, transparent, #00ff88 22%, #39ffb0 48%, transparent 68%, #00ff66 85%, transparent);
    transform: rotate(-10deg) skewX(4deg);
    animation: lf8 4.8s ease-in-out infinite 2.5s;
}
.lightning-branch { width: 1px; height: 220px; filter: blur(10px); }
.lightning-branch-1 {
    top: 15%; left: 17%;
    background: linear-gradient(180deg, #00ff88, transparent);
    transform: rotate(45deg);
    animation: lf1 4s ease-in-out infinite 0.1s;
}
.lightning-branch-2 {
    top: 10%; right: 23%;
    background: linear-gradient(180deg, #00ff66, transparent);
    transform: rotate(-35deg);
    animation: lf2 5s ease-in-out infinite 1.1s;
}
.lightning-branch-3 {
    top: 8%; left: 37%;
    background: linear-gradient(180deg, #39ffb0, transparent);
    transform: rotate(28deg);
    animation: lf5 3.8s ease-in-out infinite 1.6s;
}
.lightning-branch-4 {
    top: 12%; left: 70%;
    background: linear-gradient(180deg, #00ff88, transparent);
    transform: rotate(-22deg);
    animation: lf6 5s ease-in-out infinite 3.1s;
}

.lightning-glow {
    position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0;
}
.lightning-glow-1 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(0,255,136,0.35), transparent 70%);
    top: 5%; left: 10%;
    animation: gp1 4s ease-in-out infinite;
}
.lightning-glow-2 {
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(0,255,100,0.3), transparent 70%);
    top: 30%; right: 20%;
    animation: gp2 5s ease-in-out infinite 1s;
}
.lightning-glow-3 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(0,255,136,0.25), transparent 70%);
    bottom: 10%; left: 45%;
    animation: gp3 4.5s ease-in-out infinite 2s;
}
.lightning-glow-4 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(57,255,176,0.28), transparent 70%);
    top: 10%; left: 35%;
    animation: gp4 3.8s ease-in-out infinite 1.5s;
}
.lightning-glow-5 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(0,255,136,0.22), transparent 70%);
    top: 8%; right: 10%;
    animation: gp5 4.8s ease-in-out infinite 2.5s;
}

@keyframes lf1 { 0%,3%,9%,45%,48%,72%,75%,100%{opacity:0} 4%{opacity:.85} 6%{opacity:.15} 7%{opacity:1} 47%{opacity:.6} 73%{opacity:.7} }
@keyframes lf2 { 0%,8%,14%,55%,58%,80%,83%,100%{opacity:0} 9%{opacity:.8} 11%{opacity:.1} 12%{opacity:.9} 57%{opacity:.5} 81%{opacity:.6} }
@keyframes lf3 { 0%,18%,23%,60%,63%,85%,88%,100%{opacity:0} 19%{opacity:.95} 20%{opacity:.2} 21%{opacity:.85} 62%{opacity:.4} 86%{opacity:.5} }
@keyframes lf4 { 0%,25%,30%,68%,71%,100%{opacity:0} 26%{opacity:.7} 27%{opacity:0} 28%{opacity:.85} 70%{opacity:.5} }
@keyframes lf5 { 0%,5%,10%,42%,45%,78%,81%,100%{opacity:0} 6%{opacity:.9} 8%{opacity:.1} 9%{opacity:.8} 44%{opacity:.55} 79%{opacity:.65} }
@keyframes lf6 { 0%,35%,40%,74%,77%,100%{opacity:0} 36%{opacity:.75} 37%{opacity:.05} 38%{opacity:.9} 76%{opacity:.45} }
@keyframes lf7 { 0%,12%,17%,52%,55%,88%,91%,100%{opacity:0} 13%{opacity:.8} 15%{opacity:.1} 16%{opacity:.7} 54%{opacity:.5} 89%{opacity:.6} }
@keyframes lf8 { 0%,22%,27%,65%,68%,100%{opacity:0} 23%{opacity:.85} 24%{opacity:.1} 25%{opacity:.75} 67%{opacity:.4} }
@keyframes gp1 { 0%,9%,45%,48%,72%,75%,100%{opacity:0} 4%{opacity:.75} 47%{opacity:.4} 73%{opacity:.5} }
@keyframes gp2 { 0%,8%,55%,58%,80%,83%,100%{opacity:0} 9%{opacity:.65} 57%{opacity:.35} 81%{opacity:.45} }
@keyframes gp3 { 0%,18%,60%,63%,85%,88%,100%{opacity:0} 19%{opacity:.7} 62%{opacity:.3} 86%{opacity:.4} }
@keyframes gp4 { 0%,5%,42%,45%,78%,81%,100%{opacity:0} 6%{opacity:.7} 44%{opacity:.4} 79%{opacity:.5} }
@keyframes gp5 { 0%,22%,65%,68%,100%{opacity:0} 23%{opacity:.6} 67%{opacity:.35} }

.bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,255,136,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,136,0.018) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* ═══════ Glass Cards with gradient borders ═══════ */
.glass-card {
    background: linear-gradient(160deg, rgba(14,14,22,0.92) 0%, rgba(8,8,14,0.95) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
}

/* Gradient-border card */
.glow-card {
    position: relative;
    border-radius: 0.75rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0,255,136,0.25) 0%, rgba(0,180,100,0.1) 40%, rgba(0,255,136,0.15) 100%);
    transition: all 0.4s ease;
}
.glow-card:hover {
    background: linear-gradient(135deg, rgba(0,255,136,0.45) 0%, rgba(0,180,100,0.2) 40%, rgba(0,255,136,0.35) 100%);
    box-shadow: 0 0 30px rgba(0,255,136,0.08), 0 0 60px rgba(0,255,136,0.04);
}
.glow-card > .card-inner {
    background: linear-gradient(160deg, #0c0c14 0%, #080810 100%);
    border-radius: calc(0.75rem - 1px);
    height: 100%;
}

/* Animated gradient border */
.gradient-border-animated {
    position: relative;
    border-radius: 1rem;
    padding: 2px;
    background: linear-gradient(270deg, #00ff88, #0a6b3a, #00ffaa, #065a30, #00ff88);
    background-size: 600% 600%;
    animation: borderRotate 8s linear infinite;
}
.gradient-border-animated > .inner {
    background: linear-gradient(160deg, #0a0a10, #060608);
    border-radius: calc(1rem - 2px);
}
@keyframes borderRotate {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ═══════ Navbar ═══════ */
.glass-nav {
    background: linear-gradient(180deg, rgba(6,4,8,0.95) 0%, rgba(8,8,14,0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, rgba(0,255,136,0.25), rgba(0,200,110,0.15), transparent) 1;
}

/* ═══════ Nav logo icon ═══════ */
.nav-logo-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 5px rgba(0,255,136,0.45));
    transition: filter 0.3s ease;
}
.nav-logo-icon:hover { filter: drop-shadow(0 0 10px rgba(0,255,136,0.75)); }

/* Coins pulse alternately */
.logo-coin-l { animation: logo-coin-pulse 2.4s ease-in-out infinite; }
.logo-coin-r { animation: logo-coin-pulse 2.4s ease-in-out infinite 1.2s; }
@keyframes logo-coin-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}
/* Arrows slide in/out */
.logo-arrow-r { animation: logo-arrow-right 2.4s ease-in-out infinite; }
.logo-arrow-l { animation: logo-arrow-left  2.4s ease-in-out infinite 1.2s; }
@keyframes logo-arrow-right {
    0%, 100% { opacity: 0.3; transform: translateX(0); }
    50%       { opacity: 1;   transform: translateX(2px); }
}
@keyframes logo-arrow-left {
    0%, 100% { opacity: 0.3; transform: translateX(0); }
    50%       { opacity: 1;   transform: translateX(-2px); }
}

/* ═══════ Brand Text — Green shimmer ═══════ */
.brand-text {
    background: linear-gradient(90deg, #00ff88, #39ffb0, #ffffff, #39ffb0, #00ff88);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: brandShimmer 6s ease-in-out infinite;
}
@keyframes brandShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Hero subtitle gradient */
.subtitle-gradient {
    background: linear-gradient(90deg, #8a8a9a, #c0c0c8, #8a8a9a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ═══════ Primary Button — Green gradient ═══════ */
.green-btn {
    background: linear-gradient(135deg, #00ff88 0%, #0a6b3a 140%);
    background-size: 200% 100%;
    color: #000;
    font-weight: 700;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.green-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: btnSheen 3s ease-in-out infinite;
}
@keyframes btnSheen {
    0%, 100% { background-position: -100% 0; }
    50% { background-position: 200% 0; }
}
.green-btn:hover {
    background-position: 100% 0;
    box-shadow: 0 4px 25px rgba(0,255,136,0.25), 0 0 40px rgba(0,255,136,0.08);
    transform: translateY(-2px);
}
.green-btn:active { transform: translateY(0); }

/* Secondary outline button */
.neon-btn {
    background: transparent;
    border: 1px solid rgba(0,255,136,0.3);
    color: #00ff88;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
}
.neon-btn:hover {
    border-color: #00ff88;
    box-shadow: 0 0 20px rgba(0,255,136,0.15), inset 0 0 20px rgba(0,255,136,0.05);
    text-shadow: 0 0 8px rgba(0,255,136,0.5);
}

/* ═══════ Inputs ═══════ */
.input-dark {
    background: linear-gradient(160deg, rgba(10,10,16,0.8), rgba(6,6,10,0.9));
    border: 1px solid #1a1a28;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: #e8e8e8;
    transition: all 0.3s ease;
}
.input-dark::placeholder { color: #3a3a4a; }
.input-dark:focus {
    outline: none;
    border-color: rgba(0,255,136,0.4);
    box-shadow: 0 0 0 2px rgba(0,255,136,0.08), 0 0 20px rgba(0,255,136,0.04);
}

/* ═══════ About ticker ═══════ */
.about-ticker-wrap {
    position: relative;
    overflow: hidden;
    /* top & bottom neon line accents */
    border-top: 1px solid rgba(0,255,136,0.08);
    border-bottom: 1px solid rgba(0,255,136,0.08);
    padding: 6px 0;
}
/* Fade masks on left & right */
.about-ticker-fade {
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}
.about-ticker-fade-l {
    left: 0;
    background: linear-gradient(to right, #040406 0%, transparent 100%);
}
.about-ticker-fade-r {
    right: 0;
    background: linear-gradient(to left, #040406 0%, transparent 100%);
}
.about-ticker {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: about-scroll 38s linear infinite;
    padding: 12px 0;
}
.about-ticker:hover {
    animation-play-state: paused;
}
@keyframes about-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ═══════ About card ═══════ */
.about-card {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 28px 24px;
    background: linear-gradient(160deg, rgba(14,14,22,0.95) 0%, rgba(8,8,14,0.98) 100%);
    border: 1px solid rgba(0,255,136,0.1);
    border-radius: 16px;
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}
.about-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0,255,136,0.04) 0%, transparent 60%);
    pointer-events: none;
}
.about-card:hover {
    border-color: rgba(0,255,136,0.28);
    box-shadow: 0 0 24px rgba(0,255,136,0.06), 0 4px 32px rgba(0,0,0,0.4);
}
.about-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
}
.about-card-desc {
    font-size: 0.8rem;
    color: rgba(156,163,175,0.8);
    line-height: 1.5;
}

/* ═══════ Neon icon wrap ═══════ */
.neon-icon-wrap {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 50%, rgba(0,255,136,0.12) 0%, rgba(0,255,136,0.03) 70%);
    border-radius: 14px;
    border: 1px solid rgba(0,255,136,0.2);
    transition: background 0.3s ease, border-color 0.3s ease;
    position: relative;
}
.neon-icon-wrap::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0,255,136,0.15), transparent, rgba(0,255,136,0.08));
    opacity: 0;
    transition: opacity 0.3s ease;
}
.neon-icon-wrap svg {
    filter: drop-shadow(0 0 5px rgba(0,255,136,0.4));
    transition: filter 0.3s ease;
    position: relative;
    z-index: 1;
}
.about-card:hover .neon-icon-wrap {
    background: radial-gradient(circle at 50% 50%, rgba(0,255,136,0.2) 0%, rgba(0,255,136,0.05) 70%);
    border-color: rgba(0,255,136,0.35);
}
.about-card:hover .neon-icon-wrap::after {
    opacity: 1;
}
.about-card:hover .neon-icon-wrap svg {
    filter: drop-shadow(0 0 10px rgba(0,255,136,0.65));
}

/* ═══════ Guest CTA block ═══════ */
.cta-block {
    padding: 40px;
}
.cta-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
@media (max-width: 600px) {
    .cta-header .cta-actions { width: 100%; margin-top: 4px; }
}
.cta-glow-ring {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,255,136,0.15) 0%, rgba(0,255,136,0.03) 70%);
    border: 1px solid rgba(0,255,136,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cta-ring-pulse 3s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(0,255,136,0.3);
}
@keyframes cta-ring-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,136,0.25); }
    50%       { box-shadow: 0 0 0 8px rgba(0,255,136,0); }
}
.cta-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 32px;
}
@media (max-width: 600px) {
    .cta-benefits { grid-template-columns: 1fr; }
    .cta-block { padding: 24px 20px; }
}
.cta-benefit {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(0,255,136,0.03);
    border: 1px solid rgba(0,255,136,0.08);
    border-radius: 12px;
    position: relative;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.cta-benefit:hover {
    border-color: rgba(0,255,136,0.2);
    background: rgba(0,255,136,0.06);
}
/* animated neon dot in top-right corner */
.cta-dot {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ff88;
    animation: cta-dot-blink 2.4s ease-in-out infinite;
    box-shadow: 0 0 5px #00ff88;
}
@keyframes cta-dot-blink {
    0%, 100% { opacity: 1;   box-shadow: 0 0 5px #00ff88, 0 0 10px rgba(0,255,136,0.4); }
    50%       { opacity: 0.2; box-shadow: 0 0 2px #00ff88; }
}
.cta-benefit-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(0,255,136,0.07);
    border: 1px solid rgba(0,255,136,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cta-benefit-icon svg {
    filter: drop-shadow(0 0 4px rgba(0,255,136,0.35));
}
.cta-benefit-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 3px;
}
.cta-benefit-desc {
    font-size: 0.75rem;
    color: rgba(156,163,175,0.75);
    line-height: 1.4;
}
.cta-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.cta-btn-primary {
    padding: 12px 32px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.cta-btn-secondary {
    font-size: 0.85rem;
    color: rgba(0,255,136,0.8);
    text-decoration: none;
    transition: color 0.2s;
}
.cta-btn-secondary:hover { color: #00ff88; text-decoration: underline; }

/* ═══════ Rate card ═══════ */
.rate-card {
    position: relative;
    border-radius: 0.75rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0,255,136,0.15) 0%, rgba(26,26,40,0.5) 50%, rgba(0,200,110,0.1) 100%);
    transition: all 0.4s ease;
    cursor: pointer;
    overflow: hidden;
}
.rate-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(0,255,136,0.6), transparent, rgba(0,200,110,0.4));
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: rate-card-pulse 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes rate-card-pulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.18; }
}
.rate-card:hover {
    background: linear-gradient(135deg, rgba(0,255,136,0.4) 0%, rgba(0,200,110,0.2) 50%, rgba(0,255,136,0.3) 100%);
    box-shadow: 0 8px 40px rgba(0,255,136,0.15), 0 0 60px rgba(0,255,136,0.08);
    transform: translateY(-4px);
}
.rate-card:hover::before {
    opacity: 0.5;
    animation: none;
}
.rate-card > .card-inner {
    background: linear-gradient(160deg, #0e0e16, #080810);
    border-radius: calc(0.75rem - 1px);
    padding: 1.25rem;
    height: 100%;
}

/* Clickable buy/sell columns inside rate card */
.rate-col-buy,
.rate-col-sell {
    cursor: pointer;
    border-radius: 8px;
    padding: 6px 4px;
    transition: background 0.2s ease, transform 0.15s ease;
}
.rate-col-buy:hover {
    background: rgba(0,255,136,0.08);
    transform: translateY(-1px);
}
.rate-col-sell:hover {
    background: rgba(160,160,180,0.08);
    transform: translateY(-1px);
}

/* Rates section live dot */
.rates-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 6px #00ff88, 0 0 12px rgba(0,255,136,0.4);
    animation: rates-dot-blink 2s ease-in-out infinite;
}
@keyframes rates-dot-blink {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px #00ff88, 0 0 12px rgba(0,255,136,0.4); }
    50% { opacity: 0.4; box-shadow: 0 0 3px #00ff88; }
}

/* ═══════ Gradient section dividers ═══════ */
.gradient-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,255,136,0.35), rgba(0,200,110,0.2), transparent);
}

/* ═══════ Scrollbar ═══════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #040406; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a1a28, #0a6b3a30);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: #252538; }

/* ═══════ Skeleton loading ═══════ */
.skeleton {
    background: linear-gradient(90deg, #0c0c12 25%, #1a1a28 50%, #0c0c12 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ═══════ Profile Page ═══════ */
.profile-hero {
    position: relative;
    background: linear-gradient(160deg, rgba(10,107,58,0.08) 0%, rgba(14,14,22,0.95) 40%, rgba(8,8,14,0.98) 100%);
    border: 1px solid rgba(0,255,136,0.12);
    border-radius: 1rem;
    padding: 1.5rem;
    overflow: hidden;
}
.profile-hero-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(0,255,136,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0,255,136,0.15) 0%, rgba(0,180,100,0.05) 100%);
    border: 2px solid rgba(0,255,136,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(0,255,136,0.08);
}
.profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #00ff88;
    background: rgba(0,255,136,0.08);
    border: 1px solid rgba(0,255,136,0.15);
    border-radius: 99px;
    padding: 2px 10px 2px 6px;
    letter-spacing: 0.02em;
}

/* Stat metric cards */
.profile-stat-card {
    background: linear-gradient(160deg, rgba(14,14,22,0.92), rgba(8,8,14,0.96));
    border: 1px solid #1a1a28;
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.profile-stat-card:hover {
    border-color: rgba(0,255,136,0.2);
    box-shadow: 0 0 15px rgba(0,255,136,0.04);
}
.profile-stat-card--accent {
    border-color: rgba(0,255,136,0.15);
    background: linear-gradient(160deg, rgba(0,255,136,0.04), rgba(8,8,14,0.96));
}
.profile-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto 8px;
    border-radius: 10px;
    background: rgba(0,255,136,0.06);
    border: 1px solid rgba(0,255,136,0.12);
    color: #00ff88;
}
.profile-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}
.profile-stat-label {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
}

/* Discount progress */
.profile-progress-card {
    background: linear-gradient(160deg, rgba(14,14,22,0.92), rgba(8,8,14,0.96));
    border: 1px solid #1a1a28;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}
.profile-progress-bar {
    height: 6px;
    background: rgba(26,26,40,0.8);
    border-radius: 99px;
    overflow: hidden;
}
.profile-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #065a30, #00ff88);
    border-radius: 99px;
    transition: width 0.6s ease;
    box-shadow: 0 0 8px rgba(0,255,136,0.3);
}

/* Crypto portfolio cards */
.profile-crypto-card {
    background: linear-gradient(160deg, rgba(14,14,22,0.92), rgba(8,8,14,0.96));
    border: 1px solid #1a1a28;
    border-radius: 0.75rem;
    padding: 0.75rem;
    text-align: center;
    transition: border-color 0.3s ease, transform 0.2s ease;
}
.profile-crypto-card:hover {
    border-color: rgba(0,255,136,0.2);
    transform: translateY(-2px);
}

/* Info cards (referrals + account) */
.profile-info-card {
    background: linear-gradient(160deg, rgba(14,14,22,0.92), rgba(8,8,14,0.96));
    border: 1px solid #1a1a28;
    border-radius: 0.75rem;
    padding: 1.25rem;
}
.profile-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: rgba(0,255,136,0.7);
    transition: color 0.2s ease, gap 0.2s ease;
}
.profile-link-btn:hover {
    color: #00ff88;
    gap: 10px;
}

/* ═══════ Toast ═══════ */
.toast-enter { animation: slideInRight 0.3s ease; }
.toast-leave { animation: slideOutRight 0.3s ease; }
@keyframes slideInRight { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slideOutRight { from{transform:translateX(0);opacity:1} to{transform:translateX(100%);opacity:0} }

/* ═══════ Stepper ═══════ */
.step-indicator { display: flex; align-items: center; }
.step-indicator .step {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    font-size: 14px; font-weight: 700;
    transition: all 0.3s ease;
}
.step-indicator .step.active {
    background: linear-gradient(135deg, #00ff88, #0a6b3a);
    color: #000;
    box-shadow: 0 0 16px rgba(0,255,136,0.4), 0 0 30px rgba(0,255,136,0.15);
}
.step-indicator .step.completed {
    background: linear-gradient(135deg, #0a6b3a, #00ff88);
    color: #000;
    box-shadow: 0 0 12px rgba(0,255,136,0.3);
}
.step-indicator .step.pending {
    background: #12121a;
    color: #444;
    border: 1px solid #1a1a28;
}
.step-indicator .step-line {
    flex: 1; height: 2px;
    background: linear-gradient(90deg, #1a1a28, #12121a);
    transition: background 0.3s ease;
}
.step-indicator .step-line.completed {
    background: linear-gradient(90deg, #0a6b3a, #00ff8860);
}

/* ═══════ Pulse for action button ═══════ */
.pulse-green {
    animation: pulseGreen 2s ease-in-out infinite;
}
@keyframes pulseGreen {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,136,0.35); }
    50% { box-shadow: 0 0 0 12px rgba(0,255,136,0); }
}

/* ═══════ Countdown ═══════ */
.countdown-timer { font-variant-numeric: tabular-nums; }

/* ═══════ Copy button ═══════ */
.copy-btn { cursor: pointer; transition: all 0.2s ease; }
.copy-btn:hover { color: #00ff88; filter: drop-shadow(0 0 4px rgba(0,255,136,0.4)); }
.copy-btn.copied { color: #39ffb0; filter: drop-shadow(0 0 6px rgba(0,255,136,0.5)); }

/* ═══════ Focus ring ═══════ */
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 2px rgba(0,255,136,0.08), 0 0 20px rgba(0,255,136,0.04);
}

/* ═══════ Disabled ═══════ */
button:disabled { cursor: not-allowed; }

/* ═══════ Section heading gradient underline ═══════ */
.heading-glow {
    position: relative;
    display: inline-block;
}
.heading-glow::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #00ff88, #0a6b3a, transparent);
    border-radius: 2px;
}

/* ═══════ Crypto icon glow ═══════ */
.crypto-icon-glow {
    text-shadow: 0 0 10px rgba(0,255,136,0.4);
    transition: text-shadow 0.3s ease;
}
.group:hover .crypto-icon-glow {
    text-shadow: 0 0 16px rgba(0,255,136,0.7), 0 0 30px rgba(0,255,136,0.3);
}

/* ═══════ Feature badges ═══════ */
.badge-gradient {
    background: linear-gradient(135deg, rgba(0,255,136,0.1), rgba(0,200,110,0.08));
    border: 1px solid rgba(0,255,136,0.2);
}

/* ═══════ Footer gradient ═══════ */
.footer-gradient {
    border-image: linear-gradient(90deg, transparent, rgba(0,255,136,0.25), rgba(0,200,110,0.15), transparent) 1;
}

/* ═══════ Mobile ═══════ */
@media (max-width: 640px) {
    .step-indicator .step { width: 28px; height: 28px; font-size: 12px; }
    .lightning { filter: blur(12px); }
    .rate-card:hover { transform: none; }
}

/* ═══════ Reviews – promo banner ═══════ */
.review-promo-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    background: linear-gradient(135deg, rgba(0,255,136,0.06) 0%, rgba(0,255,136,0.01) 100%);
    border: 1px solid rgba(0,255,136,0.2);
    border-left: 3px solid rgba(0,255,136,0.6);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.review-promo-banner::before {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(0,255,136,0.06) 0%, transparent 70%);
    pointer-events: none;
}
.review-promo-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 10px;
    background: rgba(0,255,136,0.08);
    border: 1px solid rgba(0,255,136,0.2);
    display: flex; align-items: center; justify-content: center;
}

/* ═══════ Reviews – stat panel ═══════ */
.reviews-stat-panel {
    display: flex;
    align-items: center;
    gap: 24px;
    background: linear-gradient(135deg, rgba(0,255,136,0.04) 0%, transparent 70%);
    border: 1px solid rgba(0,255,136,0.12);
    border-radius: 14px;
    padding: 22px 32px;
    position: relative;
    overflow: hidden;
}
.reviews-stat-panel::before {
    content: '';
    position: absolute;
    top: -60%; left: -5%;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(0,255,136,0.07) 0%, transparent 70%);
    pointer-events: none;
}
@media (max-width: 640px) {
    .reviews-stat-panel { padding: 18px 20px; gap: 16px; }
}
.reviews-big-score {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #00ff88 0%, #00cc66 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(0,255,136,0.3));
    letter-spacing: -2px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ═══════ Review cards ═══════ */
.review-card-wrap {
    position: relative;
    background: linear-gradient(145deg, rgba(10,10,20,0.97) 0%, rgba(6,6,14,0.99) 100%);
    border: 1px solid rgba(0,255,136,0.1);
    border-top: 2px solid rgba(0,255,136,0.55);
    border-radius: 2px 12px 12px 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
}
.review-card-fixed {
    min-height: 200px;
}
/* Scan lines */
.review-card-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent, transparent 23px,
        rgba(0,255,136,0.014) 23px,
        rgba(0,255,136,0.014) 24px
    );
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}
.review-card-wrap:hover {
    border-color: rgba(0,255,136,0.28);
    border-top-color: rgba(0,255,136,0.88);
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 24px rgba(0,255,136,0.06);
}
.review-card-r5 { border-top-color: rgba(0,255,136,0.7); }
.review-card-r4 { border-top-color: rgba(0,210,100,0.45); }
.review-card-r3 { border-top-color: rgba(200,200,0,0.45); }
.review-card-r2 { border-top-color: rgba(220,120,0,0.45); }
.review-card-r1 { border-top-color: rgba(220,60,60,0.45); }

/* Top section: user + stars in one row */
.review-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
/* Divider between header and text */
.review-card-divider {
    height: 1px;
    margin: 12px 0;
    background: linear-gradient(90deg, rgba(0,255,136,0.18), rgba(0,255,136,0.04), transparent);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
/* Body */
.review-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}
.review-card-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(0,255,136,0.3);
    margin-bottom: 6px;
    font-weight: 600;
}
.review-card-text {
    color: rgba(210,215,220,0.85);
    font-size: 0.875rem;
    line-height: 1.7;
    flex: 1;
}
.review-card-text--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.review-expand-btn {
    display: inline-block;
    margin-top: 8px;
    color: rgba(0,255,136,0.5);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
}
.review-expand-btn:hover { color: #00ff88; }
/* Avatars */
.review-avatar {
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.review-avatar-sm { width: 30px; height: 30px; font-size: 0.7rem; }
.review-avatar--user {
    background: linear-gradient(135deg, rgba(0,255,136,0.18), rgba(0,180,100,0.08));
    border: 1px solid rgba(0,255,136,0.28);
    color: #00ff88;
}
.review-avatar--anon {
    background: rgba(30,30,46,0.9);
    border: 1px solid rgba(255,255,255,0.07);
    color: rgba(156,163,175,0.6);
}
.review-star-on  { color: #00ff88; text-shadow: 0 0 5px rgba(0,255,136,0.45); }
.review-star-off { color: rgba(255,255,255,0.1); }
/* Pagination */
.review-page-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    background: rgba(14,14,22,0.9);
    border: 1px solid rgba(0,255,136,0.15);
    color: rgba(156,163,175,0.8);
    font-size: 0.85rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.review-page-btn:hover:not(:disabled) {
    border-color: rgba(0,255,136,0.45);
    color: #00ff88;
    background: rgba(0,255,136,0.06);
    box-shadow: 0 0 12px rgba(0,255,136,0.1);
}
.review-page-btn--active {
    border-color: rgba(0,255,136,0.6) !important;
    color: #00ff88 !important;
    background: rgba(0,255,136,0.1) !important;
    box-shadow: 0 0 16px rgba(0,255,136,0.15) !important;
    font-weight: 700;
}

/* ═══════ Contacts page ═══════ */

/* Header panel */
.contacts-header-panel {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, rgba(0,255,136,0.04) 0%, transparent 70%);
    border: 1px solid rgba(0,255,136,0.12);
    border-radius: 14px;
    padding: 22px 32px;
    position: relative;
    overflow: hidden;
}
.contacts-header-panel::before {
    content: '';
    position: absolute;
    top: -60%; left: -5%;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(0,255,136,0.07) 0%, transparent 70%);
    pointer-events: none;
}
.contacts-header-icon {
    color: #00ff88;
    opacity: 0.7;
    position: relative;
}
@media (max-width: 640px) {
    .contacts-header-panel { padding: 18px 20px; gap: 14px; }
}

/* Auth hint on feedback card */
.ct-card-auth-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    color: rgba(130,130,255,0.6);
    margin-top: 4px;
}

/* ── Bento Grid ── */
.ct-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.ct-bento-hero { grid-column: 1 / 3; }
.ct-bento-wide { grid-column: 2 / 4; }
@media (max-width: 768px) {
    .ct-bento { grid-template-columns: repeat(2, 1fr); }
    .ct-bento-hero { grid-column: 1 / -1; }
    .ct-bento-wide { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .ct-bento { grid-template-columns: 1fr; gap: 12px; }
    .ct-bento-hero,
    .ct-bento-wide { grid-column: 1; }
}

/* ── Card wrapper ── */
.ct-card-wrap {
    position: relative;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0,255,136,0.18) 0%, rgba(26,26,40,0.4) 50%, rgba(0,200,110,0.1) 100%);
    transition: all 0.4s ease;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    display: block;
}
/* Animated border glow */
.ct-card-wrap::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0,255,136,0.55), transparent, rgba(0,200,110,0.35));
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: ct-border-pulse 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ct-border-pulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.15; }
}
.ct-card-wrap:hover {
    background: linear-gradient(135deg, rgba(0,255,136,0.35) 0%, rgba(0,200,110,0.18) 50%, rgba(0,255,136,0.25) 100%);
    box-shadow: 0 12px 48px rgba(0,0,0,0.4), 0 0 50px rgba(0,255,136,0.08);
    transform: translateY(-4px);
}
.ct-card-wrap:hover::before {
    opacity: 0.6;
    animation: none;
}

/* Color variants — change gradient hue */
.ct-card--cyan {
    background: linear-gradient(135deg, rgba(0,180,220,0.18) 0%, rgba(26,26,40,0.4) 50%, rgba(0,150,200,0.1) 100%);
}
.ct-card--cyan:hover {
    background: linear-gradient(135deg, rgba(0,180,220,0.35) 0%, rgba(0,150,200,0.18) 50%, rgba(0,180,220,0.25) 100%);
    box-shadow: 0 12px 48px rgba(0,0,0,0.4), 0 0 50px rgba(0,180,220,0.08);
}
.ct-card--cyan::before {
    background: linear-gradient(135deg, rgba(0,180,220,0.55), transparent, rgba(0,150,200,0.35));
}
.ct-card--emerald {
    background: linear-gradient(135deg, rgba(80,200,120,0.15) 0%, rgba(26,26,40,0.4) 50%, rgba(60,180,100,0.08) 100%);
}
.ct-card--emerald:hover {
    background: linear-gradient(135deg, rgba(80,200,120,0.3) 0%, rgba(60,180,100,0.15) 50%, rgba(80,200,120,0.22) 100%);
    box-shadow: 0 12px 48px rgba(0,0,0,0.4), 0 0 50px rgba(80,200,120,0.08);
}
.ct-card--emerald::before {
    background: linear-gradient(135deg, rgba(80,200,120,0.5), transparent, rgba(60,180,100,0.3));
}
.ct-card--amber {
    background: linear-gradient(135deg, rgba(200,180,0,0.15) 0%, rgba(26,26,40,0.4) 50%, rgba(180,160,0,0.08) 100%);
}
.ct-card--amber:hover {
    background: linear-gradient(135deg, rgba(200,180,0,0.3) 0%, rgba(180,160,0,0.15) 50%, rgba(200,180,0,0.22) 100%);
    box-shadow: 0 12px 48px rgba(0,0,0,0.4), 0 0 50px rgba(200,180,0,0.06);
}
.ct-card--amber::before {
    background: linear-gradient(135deg, rgba(200,180,0,0.5), transparent, rgba(180,160,0,0.3));
}
.ct-card--violet {
    background: linear-gradient(135deg, rgba(130,130,255,0.15) 0%, rgba(26,26,40,0.4) 50%, rgba(110,110,230,0.08) 100%);
}
.ct-card--violet:hover {
    background: linear-gradient(135deg, rgba(130,130,255,0.3) 0%, rgba(110,110,230,0.15) 50%, rgba(130,130,255,0.22) 100%);
    box-shadow: 0 12px 48px rgba(0,0,0,0.4), 0 0 50px rgba(130,130,255,0.08);
}
.ct-card--violet::before {
    background: linear-gradient(135deg, rgba(130,130,255,0.5), transparent, rgba(110,110,230,0.3));
}
.ct-card--rose {
    background: linear-gradient(135deg, rgba(244,114,182,0.15) 0%, rgba(26,26,40,0.4) 50%, rgba(220,90,160,0.08) 100%);
}
.ct-card--rose:hover {
    background: linear-gradient(135deg, rgba(244,114,182,0.3) 0%, rgba(220,90,160,0.15) 50%, rgba(244,114,182,0.22) 100%);
    box-shadow: 0 12px 48px rgba(0,0,0,0.4), 0 0 50px rgba(244,114,182,0.08);
}
.ct-card--rose::before {
    background: linear-gradient(135deg, rgba(244,114,182,0.5), transparent, rgba(220,90,160,0.3));
}

/* Inner card */
.ct-card-inner {
    background: linear-gradient(160deg, #0e0e16, #080810);
    border-radius: calc(16px - 1px);
    padding: 38px 24px 22px;
    text-align: center;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Scan lines overlay */
.ct-card-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent, transparent 23px,
        rgba(0,255,136,0.012) 23px,
        rgba(0,255,136,0.012) 24px
    );
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

/* Icon */
.ct-card-icon {
    width: 58px; height: 58px;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ct-card-wrap:hover .ct-card-icon {
    transform: scale(1.08);
}
.ct-card-icon--green {
    background: rgba(0,255,136,0.08);
    color: #00ff88;
    border: 1px solid rgba(0,255,136,0.2);
    box-shadow: 0 0 20px rgba(0,255,136,0.06);
}
.ct-card-wrap:hover .ct-card-icon--green {
    box-shadow: 0 0 30px rgba(0,255,136,0.15), 0 0 60px rgba(0,255,136,0.06);
}
.ct-card-icon--teal {
    background: rgba(0,200,110,0.06);
    color: #00cc70;
    border: 1px solid rgba(0,200,110,0.2);
    box-shadow: 0 0 20px rgba(0,200,110,0.05);
}
.ct-card-wrap:hover .ct-card-icon--teal {
    box-shadow: 0 0 30px rgba(0,200,110,0.12), 0 0 60px rgba(0,200,110,0.05);
}
.ct-card-icon--cyan {
    background: rgba(0,180,220,0.08);
    color: #00bbdd;
    border: 1px solid rgba(0,180,220,0.2);
    box-shadow: 0 0 20px rgba(0,180,220,0.06);
}
.ct-card-wrap:hover .ct-card-icon--cyan {
    box-shadow: 0 0 30px rgba(0,180,220,0.15), 0 0 60px rgba(0,180,220,0.06);
}
.ct-card-icon--emerald {
    background: rgba(80,200,120,0.07);
    color: #50c878;
    border: 1px solid rgba(80,200,120,0.2);
    box-shadow: 0 0 20px rgba(80,200,120,0.05);
}
.ct-card-wrap:hover .ct-card-icon--emerald {
    box-shadow: 0 0 30px rgba(80,200,120,0.12), 0 0 60px rgba(80,200,120,0.05);
}
.ct-card-icon--amber {
    background: rgba(200,180,0,0.06);
    color: #d4b800;
    border: 1px solid rgba(200,180,0,0.18);
    box-shadow: 0 0 20px rgba(200,180,0,0.04);
}
.ct-card-wrap:hover .ct-card-icon--amber {
    box-shadow: 0 0 30px rgba(200,180,0,0.12), 0 0 60px rgba(200,180,0,0.05);
}
.ct-card-icon--violet {
    background: rgba(130,130,255,0.06);
    color: #8888ff;
    border: 1px solid rgba(130,130,255,0.18);
    box-shadow: 0 0 20px rgba(130,130,255,0.04);
}
.ct-card-wrap:hover .ct-card-icon--violet {
    box-shadow: 0 0 30px rgba(130,130,255,0.12), 0 0 60px rgba(130,130,255,0.05);
}
.ct-card-icon--rose {
    background: rgba(244,114,182,0.06);
    color: #f472b6;
    border: 1px solid rgba(244,114,182,0.18);
    box-shadow: 0 0 20px rgba(244,114,182,0.04);
}
.ct-card-wrap:hover .ct-card-icon--rose {
    box-shadow: 0 0 30px rgba(244,114,182,0.12), 0 0 60px rgba(244,114,182,0.05);
}

.ct-card-icon svg {
    filter: drop-shadow(0 0 5px currentColor);
    transition: filter 0.3s;
}
.ct-card-wrap:hover .ct-card-icon svg {
    filter: drop-shadow(0 0 10px currentColor);
}

/* Text content */
.ct-card-name {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    position: relative; z-index: 1;
    letter-spacing: -0.01em;
}
.ct-card-desc {
    color: rgba(160,165,175,0.7);
    font-size: 0.75rem;
    margin-top: 3px;
    position: relative; z-index: 1;
}
.ct-card-tag {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(0,255,136,0.05);
    border: 1px solid rgba(0,255,136,0.08);
    color: rgba(0,255,136,0.5);
    font-size: 0.68rem;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
    position: relative; z-index: 1;
}
.ct-card--cyan .ct-card-tag {
    background: rgba(0,180,220,0.05);
    border-color: rgba(0,180,220,0.08);
    color: rgba(0,180,220,0.5);
}
.ct-card--emerald .ct-card-tag {
    background: rgba(80,200,120,0.05);
    border-color: rgba(80,200,120,0.08);
    color: rgba(80,200,120,0.5);
}
.ct-card--amber .ct-card-tag {
    background: rgba(200,180,0,0.05);
    border-color: rgba(200,180,0,0.08);
    color: rgba(200,180,0,0.5);
}

/* Arrow row / CTA */
.ct-card-arrow-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 14px;
    color: rgba(0,255,136,0.3);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    font-weight: 600;
    transition: color 0.3s, transform 0.3s;
    position: relative; z-index: 1;
}
.ct-card-wrap:hover .ct-card-arrow-row {
    color: #00ff88;
    transform: translateX(3px);
}
.ct-card--cyan .ct-card-arrow-row { color: rgba(0,180,220,0.3); }
.ct-card--cyan:hover .ct-card-arrow-row { color: #00bbdd; }
.ct-card--emerald .ct-card-arrow-row { color: rgba(80,200,120,0.3); }
.ct-card--emerald:hover .ct-card-arrow-row { color: #50c878; }
.ct-card--amber .ct-card-arrow-row { color: rgba(200,180,0,0.3); }
.ct-card--amber:hover .ct-card-arrow-row { color: #d4b800; }
.ct-card--violet .ct-card-arrow-row { color: rgba(130,130,255,0.3); }
.ct-card--violet:hover .ct-card-arrow-row { color: #8888ff; }
.ct-card--rose .ct-card-arrow-row { color: rgba(244,114,182,0.3); }
.ct-card--rose:hover .ct-card-arrow-row { color: #f472b6; }
.ct-card-open { text-transform: uppercase; }

/* ── Card Badge (category tag) ── */
.ct-card-badge {
    position: absolute;
    top: 12px;
    left: 14px;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 2px 8px;
    border-radius: 4px;
    z-index: 2;
    font-weight: 700;
}
.ct-badge--green {
    background: rgba(0,255,136,0.08);
    color: rgba(0,255,136,0.55);
    border: 1px solid rgba(0,255,136,0.12);
}
.ct-badge--teal {
    background: rgba(0,200,110,0.06);
    color: rgba(0,200,110,0.5);
    border: 1px solid rgba(0,200,110,0.1);
}
.ct-badge--cyan {
    background: rgba(0,180,220,0.06);
    color: rgba(0,180,220,0.5);
    border: 1px solid rgba(0,180,220,0.1);
}
.ct-badge--emerald {
    background: rgba(80,200,120,0.06);
    color: rgba(80,200,120,0.5);
    border: 1px solid rgba(80,200,120,0.1);
}
.ct-badge--amber {
    background: rgba(200,180,0,0.06);
    color: rgba(200,180,0,0.5);
    border: 1px solid rgba(200,180,0,0.1);
}
.ct-badge--violet {
    background: rgba(130,130,255,0.06);
    color: rgba(130,130,255,0.5);
    border: 1px solid rgba(130,130,255,0.1);
}
.ct-badge--rose {
    background: rgba(244,114,182,0.06);
    color: rgba(244,114,182,0.5);
    border: 1px solid rgba(244,114,182,0.1);
}

/* ── Card Number ── */
.ct-card-num {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    color: rgba(255,255,255,0.04);
    font-weight: 800;
    z-index: 2;
    letter-spacing: 0.04em;
}

/* ── Hero Card (main bot) ── */
.ct-hero-inner {
    padding: 38px 28px 24px !important;
    text-align: left !important;
    align-items: stretch !important;
}
.ct-hero-layout {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    position: relative;
    z-index: 1;
}
.ct-hero-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 20px !important;
    flex-shrink: 0;
}
.ct-hero-info {
    flex: 1;
    min-width: 0;
}
.ct-hero-name {
    font-size: 1.1rem !important;
    margin-bottom: 2px;
}
.ct-hero-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    flex-shrink: 0;
}
.ct-hero-right .ct-card-arrow-row {
    margin-top: 0;
    padding-top: 0;
}
@media (max-width: 480px) {
    .ct-hero-layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .ct-hero-right {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }
    .ct-hero-inner {
        text-align: center !important;
    }
}

/* ── Wide Card (chat) ── */
.ct-wide-inner {
    padding: 38px 28px 22px !important;
    text-align: left !important;
    align-items: stretch !important;
}
.ct-wide-layout {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    position: relative;
    z-index: 1;
}
.ct-wide-info {
    flex: 1;
    min-width: 0;
}
@media (max-width: 480px) {
    .ct-wide-layout {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ── Status Indicator ── */
.ct-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-family: 'JetBrains Mono', monospace;
    color: rgba(0,255,136,0.6);
    letter-spacing: 0.03em;
}
.ct-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 10px rgba(0,255,136,0.5), 0 0 24px rgba(0,255,136,0.2);
    animation: ct-dot-pulse 2s ease-in-out infinite;
}
@keyframes ct-dot-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px rgba(0,255,136,0.5), 0 0 24px rgba(0,255,136,0.2); }
    50% { opacity: 0.4; box-shadow: 0 0 5px rgba(0,255,136,0.25); }
}