/**
 * Lamyx Design System: hero.css
 * Specific Layouts, Typography, and Visual Panels for Hero Sections
 */

/* --- HERO TYPOGRAPHY --- */
.hero-title {
    font-size: var(--fluid-h1) !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
    background: linear-gradient(135deg, var(--text-charcoal) 60%, var(--brand-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.03em;
}

.hero-desc {
    font-size: var(--fluid-p) !important;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-muted);
    line-height: 1.8;
}

/* --- HERO BACKGROUND EFFECTS --- */
.hero-grid-overlay {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(90, 45, 160, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(90, 45, 160, 0.015) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
    pointer-events: none;
    z-index: 1;
}

.tech-dot-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(73, 209, 211, 0.08) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    mask-image: radial-gradient(circle at 50% 50%, black, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* --- NEW CONCEPTUAL HERO DASHBOARD --- */
.hero-dashboard-container {
    width: 100%;
    max-width: 550px;
    background: var(--surface-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-premium);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px);
    position: relative;
    z-index: 5;
    overflow: hidden;
}

.hero-dashboard-dot {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(90, 45, 160, 0.15) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}
.hero-dashboard-dot.purple { top: -50px; right: -50px; }
.hero-dashboard-dot.cyan { bottom: -50px; left: -50px; }