:root {
    --cgx-a: #4f46e5;
    --cgx-b: #0ea5e9;
    --cgx-c: #22d3ee;
    --cgx-grad: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 62%, #22d3ee 100%);
}

.cgx-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    padding: 52px 24px 40px;
    border-radius: var(--cm-radius-xl);
    margin-bottom: 28px;
    background:
        radial-gradient(circle at 18% 16%, rgba(79, 70, 229, .26) 0%, transparent 52%),
        radial-gradient(circle at 84% 84%, rgba(14, 165, 233, .22) 0%, transparent 52%),
        var(--cm-gradient-card);
    border: 1px solid rgba(79, 70, 229, .28);
}

.cgx-radar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height: 220px;
    margin: -110px 0 0 -110px;
    z-index: -1;
    pointer-events: none;
}
.cgx-radar span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(34, 211, 238, .55);
    opacity: 0;
    animation: cgxPing 4.8s cubic-bezier(.2, .6, .3, 1) infinite;
}
.cgx-radar span:nth-child(2) { animation-delay: 1.2s; }
.cgx-radar span:nth-child(3) { animation-delay: 2.4s; }
.cgx-radar span:nth-child(4) { animation-delay: 3.6s; }
@keyframes cgxPing {
    0%   { transform: scale(.32); opacity: 0; }
    12%  { opacity: .85; }
    100% { transform: scale(3.1); opacity: 0; }
}

.cgx-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 16px;
    border-radius: 50%;
    font-size: 25px;
    color: #fff;
    background: var(--cgx-grad);
    box-shadow: 0 10px 28px -8px rgba(14, 165, 233, .8);
    animation: cgxSpin 26s linear infinite;
}
@keyframes cgxSpin { to { transform: rotate(360deg); } }

.cgx-title {
    font-size: var(--cm-font-3xl);
    font-weight: 800;
    margin: 0 0 12px;
    line-height: 1.2;
    background: linear-gradient(100deg, #6366f1 0%, #0ea5e9 40%, #22d3ee 58%, #6366f1 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: cgxShimmer 7s linear infinite;
    text-wrap: balance;
}
@keyframes cgxShimmer { to { background-position: 220% center; } }

.cgx-sub {
    color: var(--cm-text-secondary);
    font-size: var(--cm-font-md);
    max-width: 640px;
    margin: 0 auto 26px;
    line-height: 1.65;
}
.cgx-sub strong { color: var(--cm-text-primary); }

.cgx-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 660px;
    margin: 0 auto 16px;
}
.cgx-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: .5rem .95rem;
    border-radius: var(--cm-radius-full, 999px);
    border: 1px solid var(--cm-border);
    background: var(--cm-bg-card);
    color: var(--cm-text-secondary);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--cm-transition-fast, all .2s);
}
.cgx-tab:hover { border-color: rgba(14, 165, 233, .6); color: var(--cm-text-primary); }
.cgx-tab.on {
    border-color: transparent;
    background: var(--cgx-grad);
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(14, 165, 233, .75);
}

.cgx-box {
    display: flex;
    align-items: center;
    max-width: 660px;
    margin: 0 auto;
    background: var(--cm-bg-card);
    border: 1px solid rgba(79, 70, 229, .35);
    border-radius: var(--cm-radius-full, 999px);
    padding: 6px 6px 6px 18px;
    box-shadow: var(--cm-shadow-card);
    transition: var(--cm-transition);
}
.cgx-box:focus-within {
    border-color: rgba(14, 165, 233, .75);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, .15), var(--cm-shadow-card);
}
.cgx-box-ic { color: var(--cgx-c); font-size: 16px; margin-right: 10px; }
.cgx-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--cm-text-primary);
    font-size: var(--cm-font-md);
    padding: 12px 8px;
}
.cgx-input::placeholder { color: var(--cm-text-muted); }
.cgx-btn {
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    color: #fff;
    font-weight: 700;
    font-size: var(--cm-font-base);
    padding: 12px 24px;
    border-radius: var(--cm-radius-full, 999px);
    background: var(--cgx-grad);
    box-shadow: 0 4px 14px rgba(79, 70, 229, .35);
    transition: transform var(--cm-transition), box-shadow var(--cm-transition);
    white-space: nowrap;
}
.cgx-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
}
.cgx-btn:hover::before { left: 140%; }
.cgx-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(14, 165, 233, .5); }
.cgx-btn:disabled { opacity: .68; cursor: default; transform: none; }
.cgx-btn:disabled::before { display: none; }

.cgx-hint {
    color: var(--cm-text-muted);
    font-size: var(--cm-font-sm);
    margin: 12px auto 0;
    max-width: 620px;
    line-height: 1.6;
}
.cgx-hint code,
.cgx-ul code,
.cgx-faq code {
    background: rgba(79, 70, 229, .16);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--cm-text-secondary);
}

.cgx-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 660px;
    margin: 26px auto 0;
}
.cgx-stat {
    padding: 12px 8px;
    border-radius: var(--cm-radius-md, 10px);
    border: 1px solid var(--cm-border);
    background: rgba(255, 255, 255, .02);
}
.cgx-stat b {
    display: block;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    background: var(--cgx-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cgx-stat span { font-size: .78rem; color: var(--cm-text-muted); }

.cgx-about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 6px;
}
.cgx-about-item {
    position: relative;
    overflow: hidden;
    padding: 22px 20px;
    border-radius: var(--cm-radius-lg);
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--cm-border);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s;
    animation: cgxUp .5s both;
}
.cgx-about-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ca, #4f46e5), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s;
}
.cgx-about-item:nth-child(2) { animation-delay: .07s; }
.cgx-about-item:nth-child(3) { animation-delay: .14s; }
.cgx-about-item:nth-child(4) { animation-delay: .21s; }
.cgx-about-item:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--ca, #4f46e5) 55%, transparent);
    box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--ca, #4f46e5) 55%, transparent);
}
.cgx-about-item:hover::before { transform: scaleX(1); }
.cgx-about-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: var(--cm-radius-md);
    font-size: 21px;
    color: #fff;
    background: linear-gradient(135deg, var(--ca, #4f46e5), color-mix(in srgb, var(--ca, #4f46e5) 55%, #000));
    box-shadow: 0 6px 16px -4px var(--ca, #4f46e5);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.cgx-about-item:hover .cgx-about-ic { transform: scale(1.12) rotate(-7deg); }
.cgx-about-title { font-weight: 700; font-size: 15.5px; color: var(--cm-text-primary); margin-bottom: 7px; }
.cgx-about-desc { font-size: 13px; color: var(--cm-text-secondary); line-height: 1.6; }
@keyframes cgxUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cgx-ul {
    margin: 0;
    padding-left: 1.15rem;
    list-style: disc outside;
}
.cgx-ul li { margin-bottom: .5rem; line-height: 1.65; color: var(--cm-text-secondary); }
.cgx-ul li strong { color: var(--cm-text-primary); }

.cgx-cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 22px 24px;
    border-radius: var(--cm-radius-lg);
    background: linear-gradient(135deg, rgba(79, 70, 229, .15) 0%, rgba(14, 165, 233, .15) 100%);
    border: 1px solid rgba(79, 70, 229, .4);
}
.cgx-cta-text { flex: 1 1 260px; }
.cgx-cta-text b { display: block; font-size: 16px; color: var(--cm-text-primary); margin-bottom: 4px; }
.cgx-cta-text span { font-size: 13.5px; color: var(--cm-text-secondary); line-height: 1.6; }
.cgx-cta .cm-btn { background: var(--cgx-grad); border: none; color: #fff; }
.cgx-cta .cm-btn:hover { box-shadow: 0 8px 20px rgba(14, 165, 233, .4); }

@media (max-width: 640px) {
    .cgx-hero { padding: 38px 16px 32px; }
    .cgx-title { font-size: var(--cm-font-2xl); }
    .cgx-tab { flex: 1 1 calc(50% - 4px); justify-content: center; }
    .cgx-box { flex-direction: column; align-items: stretch; border-radius: var(--cm-radius-lg); padding: 12px; gap: 10px; }
    .cgx-box-ic { display: none; }
    .cgx-input { padding: 10px 12px; border: 1px solid var(--cm-border); border-radius: var(--cm-radius-md); }
    .cgx-btn { width: 100%; }
    .cgx-stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .cgx-radar span,
    .cgx-badge,
    .cgx-title,
    .cgx-about-item { animation: none; }
}