/* ═══════════════════════════════════════════
   AEFUSIO — Product brand layer
   Only accent tokens are overridden here. Surface/text/structure
   come from the shared theme in style.css — never override those.
   =══════════════════════════════════════════ */

[data-brand='aefusio'] {
    --accent:         #a56bff;
    --accent-hover:   #b581ff;
    --accent-active:  #8b4fe0;
    --accent-fg:      #0a0a10;
    --accent-subtle:  rgb(165 107 255 / 13%);
    --accent-2:       #00d4ff;

    /* Legacy aliases (remove once call sites migrate to suite tokens) */
    --accent-dim:     var(--accent-subtle);
    --accent-glow:    rgb(165 107 255 / 33%);
    --accent-2-glow:  rgb(0 212 255 / 23%);
}

/* ── Hero glyph: swap geometric SVG for product icon ── */
.hero__glyph--aefusio {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 40px var(--accent-glow));
    animation: float-y 6s ease-in-out infinite;
}
.hero__glyph--aefusio img {
    width: 220px;
    height: auto;
    border-radius: 28px;
}
@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* ── Hero CTA row ── */
.hero__cta {
    display: flex;
    gap: 0.85rem;
    margin-top: 1.75rem;
    flex-wrap: wrap;
}

/* ── Generic section label (reused across sections) ── */
.section-label {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.5rem;
}

/* ── About stats grid ── */
.about__grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}
.about__copy .about__title {
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
}
.about__text {
    color: #c0c0d0;
    line-height: 1.7;
    margin: 0 0 1rem;
    font-size: 1rem;
}
.about__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.stat {
    background: var(--bg-card);
    border: 1px solid var(--accent-dim);
    border-radius: 14px;
    padding: 1.5rem 1.25rem;
    transition: border-color 0.25s, transform 0.25s;
}
.stat:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
}
.stat__value {
    font-family: var(--mono);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.stat__label {
    font-size: 0.85rem;
    color: #a0a0b0;
    letter-spacing: 0.02em;
}

/* ── Features grid ── */
.features {
    padding: 7rem 2rem 5rem;
    position: relative;
    z-index: 2;
}
.features__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 3rem;
}
.feature {
    background: var(--bg-card);
    border: 1px solid var(--accent-dim);
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    transition: border-color 0.25s, transform 0.25s;
}
.feature:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
}
.feature__icon {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    filter: grayscale(0.2);
}
.feature__name {
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
    color: #e8e8f0;
}
.feature__text {
    font-size: 0.95rem;
    color: #b0b0c0;
    line-height: 1.6;
    margin: 0;
}
.feature__text code {
    font-family: var(--mono);
    background: rgb(165, 107, 255, 0.12);
    color: var(--accent);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* ── Sources grid ── */
.sources {
    padding: 5rem 2rem;
    position: relative;
    z-index: 2;
}
.sources__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.sources__lede {
    color: #a0a0b0;
    max-width: 720px;
    font-size: 1rem;
    line-height: 1.65;
    margin: 0.75rem 0 2.5rem;
}
.sources__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}
.source {
    background: var(--bg-card);
    border: 1px solid var(--accent-dim);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    transition: border-color 0.2s, transform 0.2s;
}
.source:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.source__name {
    font-weight: 600;
    color: #e8e8f0;
    font-size: 0.98rem;
}
.source__host {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: #8080a0;
    letter-spacing: 0.04em;
}
.source--fallback {
    background: linear-gradient(135deg, #1a1530 0%, #0f0f1a 100%);
    border-style: dashed;
}

/* ── Download grid ── */
.download {
    padding: 6rem 2rem;
    position: relative;
    z-index: 2;
}
.download__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.download__lede {
    color: #a0a0b0;
    max-width: 720px;
    font-size: 1rem;
    line-height: 1.65;
    margin: 0.75rem 0 2.5rem;
}
.download__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.download__card {
    background: var(--bg-card);
    border: 1px solid var(--accent-dim);
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: border-color 0.25s, transform 0.25s;
}
.download__card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
}
.download__card--web {
    background: linear-gradient(135deg, #1a1530 0%, #0f0f1a 100%);
    border-color: var(--accent);
}
.download__platform {
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
}
.download__note {
    font-size: 0.92rem;
    color: #b0b0c0;
    line-height: 1.55;
    margin: 0;
    flex: 1;
}
.download__btn {
    font-family: var(--mono);
    font-size: 0.85rem;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.download__btn--soon {
    background: rgb(255, 255, 255, 0.04);
    color: #70708a;
    border: 1px dashed rgb(255, 255, 255, 0.1);
    cursor: not-allowed;
}
.download__btn--primary {
    background: var(--accent);
    color: var(--bg);
    font-weight: 700;
}
.download__btn--primary:hover {
    background: #c89aff;
}
.download__legal {
    color: #70708a;
    font-size: 0.88rem;
    line-height: 1.6;
    margin-top: 2.5rem;
    font-family: var(--mono);
}
.download__legal code {
    background: rgb(165, 107, 255, 0.12);
    color: var(--accent);
    padding: 1px 6px;
    border-radius: 4px;
}

/* ── Contact section ── */
.contact {
    padding: 6rem 2rem 7rem;
    position: relative;
    z-index: 2;
}
.contact__inner {
    max-width: 1100px;
    margin: 0 auto;
}
.contact__lede {
    color: #a0a0b0;
    font-size: 1.05rem;
    max-width: 620px;
    margin: 0.75rem 0 2.5rem;
    line-height: 1.6;
}
.contact__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.contact__card {
    background: var(--bg-card);
    border: 1px solid var(--accent-dim);
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    transition: border-color 0.25s, transform 0.25s;
}
.contact__card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.contact__label {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.75rem;
}
.contact__value {
    display: block;
    font-family: var(--sans);
    font-size: 1.05rem;
    color: #e8e8f0;
    text-decoration: none;
    line-height: 1.55;
    font-style: normal;
}
a.contact__value:hover { color: var(--accent); }
.contact__value--addr {
    font-size: 0.95rem;
    color: #c0c0d0;
}
.contact__legal {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: #70708a;
    text-align: center;
    margin-top: 2rem;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .features__grid,
    .sources__grid,
    .download__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .about__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}
@media (max-width: 640px) {
    .features__grid,
    .sources__grid,
    .download__grid,
    .contact__grid,
    .about__stats {
        grid-template-columns: 1fr;
    }
    .hero__glyph--aefusio img { width: 160px; }
    .features, .sources, .download, .contact { padding-left: 1.25rem; padding-right: 1.25rem; }
}