@import "variables.css";
/* Hero Section */
.hero {
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: calc(var(--r) + 6px);
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .03), transparent),
        radial-gradient(900px 420px at 18% 20%, rgba(110, 168, 255, .28), transparent 62%),
        radial-gradient(700px 380px at 85% 30%, var(--card), transparent 60%),
        var(--bg);
    box-shadow: var(--shadow);
}

.hero-inner {
    padding: 60px 26px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero h1 {
    margin: 0 0 16px;
    font-size: 42px;
    line-height: 1.2;
    background: linear-gradient(135deg, var(--text), var(--muted));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.6;
}

.hero-footer {
    background: rgba(0, 0, 0, .2);
    border-top: 1px solid var(--line);
    padding: 16px 26px;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}

.stat-item b {
    color: var(--accent);
    font-size: 16px;
}


/* Modal specific (Product comparison) */
.modal {
    width: min(980px, 100%);
    border: 1px solid var(--line);
    border-radius: calc(var(--r) + 6px);
    background: rgba(15, 26, 47, .97);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin: auto;
}

.mhead {
    padding: 14px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, rgba(110, 168, 255, .12), rgba(255, 255, 255, .02));
}