.hero { display: flex; align-items: center; padding: 6rem 0 4rem; }

.feature-icon {
    width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
    border-radius: 14px; font-size: 1.4rem; flex-shrink: 0; color: #fff;
}
.feature-icon.brand { background: var(--grad-brand); box-shadow: 0 10px 26px -8px rgba(99,102,241,.7); }
.feature-icon.emerald { background: var(--grad-emerald); box-shadow: 0 10px 26px -8px rgba(16,185,129,.7); }
.feature-icon.amber { background: var(--grad-amber); box-shadow: 0 10px 26px -8px rgba(245,158,11,.7); }
.feature-icon.sky { background: var(--grad-sky); box-shadow: 0 10px 26px -8px rgba(14,165,233,.7); }

.feature-card {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 18px; padding: 1.5rem;
    backdrop-filter: blur(12px);
    transition: transform .25s, background .25s, border-color .25s;
}
.feature-card:hover { background: rgba(255,255,255,0.075); border-color: rgba(129,140,248,.4); transform: translateY(-3px); }

.btn-outline-light { border-radius: 12px; transition: all .2s; }
.btn-outline-light:hover { transform: translateY(-2px); }

.pricing-card {
    position: relative; overflow: hidden;
    background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09);
    border-radius: 22px; padding: 2rem; backdrop-filter: blur(12px);
    transition: border-color .25s, transform .25s, background .25s;
    display: flex; flex-direction: column;
}
.pricing-card:hover { border-color: rgba(129,140,248,.4); transform: translateY(-6px); background: rgba(255,255,255,0.065); }
.beta-ribbon {
    position: absolute; top: 18px; right: -32px; width: 130px;
    transform: rotate(45deg); text-align: center;
    background: linear-gradient(135deg, #34d399, #059669);
    color: #05221a; font-size: .68rem; font-weight: 800;
    letter-spacing: .04em; padding: .3rem 0;
    box-shadow: 0 4px 12px -2px rgba(5,150,105,.5);
    z-index: 2;
}
.pricing-price { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.pricing-feature { display: flex; align-items: flex-start; gap: .55rem; color: rgba(255,255,255,0.72); font-size: .9rem; }
.pricing-feature i { color: #34d399; margin-top: .15rem; }
.pricing-feature.muted i { color: rgba(255,255,255,0.22); }

/* Footer on dark background */
body.public-body .app-footer {
    border-top-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.45);
}