.zwcad-shell {
    background:
        radial-gradient(1200px 500px at 20% -10%, rgba(59, 130, 246, 0.2), transparent 55%),
        radial-gradient(900px 400px at 85% 5%, rgba(6, 182, 212, 0.18), transparent 60%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.22), rgba(2, 6, 23, 0));
}

.zwcad-hero-banner {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    border: 1px solid rgba(125, 211, 252, 0.35);
    box-shadow: 0 30px 70px -35px rgba(14, 165, 233, 0.55);
    aspect-ratio: 1200 / 600;
    max-width: 1200px;
    margin-inline: auto;
}

.zwcad-hero-banner > img {
    object-fit: cover;
    object-position: center;
}

.zwcad-hero-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(2, 6, 23, 0.86), rgba(2, 6, 23, 0.12)),
        radial-gradient(circle at 75% 20%, rgba(14, 165, 233, 0.2), transparent 45%);
}

.snippet {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 0.375rem;
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(71, 85, 105, 0.8);
    color: #7dd3fc;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.82rem;
}

.zwcad-card {
    background: linear-gradient(165deg, rgba(6, 12, 26, 0.88), rgba(2, 6, 23, 0.82));
    box-shadow: 0 30px 55px -45px rgba(14, 165, 233, 0.55);
}

.resource-card {
    background: linear-gradient(160deg, rgba(11, 17, 29, 0.95), rgba(5, 11, 23, 0.95));
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.resource-btn {
    color: #f8fafc;
    box-shadow: 0 14px 28px -16px rgba(56, 189, 248, 0.75);
}

.resource-btn:hover {
    box-shadow: 0 18px 30px -16px rgba(56, 189, 248, 0.9);
}

.pricing-table thead {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.22), rgba(59, 130, 246, 0.2));
}

.pricing-table tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.45);
}

.pricing-table tbody tr:hover {
    background: rgba(56, 189, 248, 0.08);
}