/**
 * Oxora Landing V3 — Shell & legacy section styles
 */

.ox-landing {
    background: var(--ox-bg);
    color: var(--ox-text);
    overflow-x: hidden;
}

.ox-landing::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 40% at 50% -10%, rgba(155, 61, 255, 0.16), transparent 60%),
        radial-gradient(ellipse 40% 30% at 90% 20%, rgba(45, 140, 255, 0.1), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.ox-landing > main,
.ox-landing > footer,
.ox-landing > .ox-trust-strip {
    position: relative;
    z-index: 1;
}

.ox-landing-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(5, 8, 22, 0.8);
    backdrop-filter: blur(var(--ox-blur-glass));
    border-bottom: 1px solid var(--ox-border);
}

.ox-landing-nav-inner {
    max-width: var(--ox-container-wide);
    margin: 0 auto;
    padding: var(--ox-space-5) var(--ox-space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ox-space-4);
}

.ox-landing-nav-links {
    display: flex;
    gap: var(--ox-space-3);
    flex-wrap: wrap;
}

.ox-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ox-space-12);
    align-items: center;
}

@media (max-width: 900px) {
    .ox-hero-grid { grid-template-columns: 1fr; }
}

.ox-sidebar-brand .ox-brand { font-size: 1rem; }

.ox-feature-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--ox-radius-sm);
    background: rgba(155, 61, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ox-space-5);
    color: var(--ox-purple);
    transition: transform var(--ox-motion-base) var(--ox-motion-ease),
                box-shadow var(--ox-motion-base) var(--ox-motion-ease);
}

.ox-card-hover:hover .ox-feature-icon {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(155, 61, 255, 0.2);
}

.ox-feature-icon svg { width: 24px; height: 24px; }

.ox-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ox-space-6);
}

@media (max-width: 768px) {
    .ox-steps { grid-template-columns: 1fr; }
}

.ox-step {
    padding: var(--ox-space-8);
    border-radius: var(--ox-radius-card);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid var(--ox-border);
    transition: transform var(--ox-motion-base) var(--ox-motion-ease),
                box-shadow var(--ox-motion-base) var(--ox-motion-ease),
                border-color var(--ox-motion-base) var(--ox-motion-ease);
}

.ox-step-num {
    font-size: var(--ox-text-caption);
    font-weight: 700;
    color: var(--ox-purple);
    text-transform: uppercase;
    letter-spacing: var(--ox-tracking-wide);
    margin-bottom: var(--ox-space-3);
}

.ox-testimonial {
    font-style: italic;
    line-height: var(--ox-lh-relaxed);
    color: var(--ox-text-secondary);
    margin: 0 0 var(--ox-space-5);
}

.ox-testimonial-author {
    font-size: var(--ox-text-sm);
    color: var(--ox-text-tertiary);
    font-weight: 500;
}

.ox-landing-footer {
    padding: var(--ox-space-16) var(--ox-space-6) var(--ox-space-10);
    border-top: 1px solid var(--ox-border);
    background: var(--ox-bg-secondary);
}

.ox-footer-grid {
    max-width: var(--ox-container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--ox-space-10);
}

@media (max-width: 768px) {
    .ox-footer-grid { grid-template-columns: 1fr; }
}

.ox-footer-bottom {
    max-width: var(--ox-container-max);
    margin: var(--ox-space-10) auto 0;
    padding-top: var(--ox-space-8);
    border-top: 1px solid var(--ox-border);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ox-space-4);
    font-size: var(--ox-text-sm);
    color: var(--ox-text-tertiary);
}

.ox-landing code {
    font-size: 0.88em;
    padding: 0.15em 0.45em;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--ox-border);
}
