/* Layer specific visual adjustments */

[data-layer="infrastructure"] .hero-name {
    background: linear-gradient(to bottom right, var(--text), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 12px rgba(229, 130, 83, 0.15));
}

[data-layer="platform"] .hero-name {
    background: linear-gradient(to bottom right, var(--text), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.15));
}

/* More breathable sections for infrastructure */
[data-layer="infrastructure"] .wrap {
    padding-inline: var(--sp-8);
}

@media (max-width: 600px) {
    [data-layer="infrastructure"] .wrap {
        padding-inline: var(--sp-5);
    }
}

/* Gray dominance for platform field */
[data-layer="platform"] {
    --border: rgba(255, 255, 255, 0.05);
}

[data-layer="platform"] .card {
    background: var(--gray-900);
}

/* Subtle house signals in platform */
[data-layer="platform"] .card-mono {
    color: var(--color-brass);
}

/* ── Oracle-adjacent index colorway ─────────────────────────────────────── */

/* Deeper copper/brass hero name gradient */
[data-page="index"] .hero-name {
    background: linear-gradient(
        135deg,
        #f0c080 0%,
        #e58253 35%,
        #c7ae6a 65%,
        #f5f0ea 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 6px 24px rgba(229, 130, 83, 0.32));
}

/* Stronger radial copper bloom behind hero */
[data-page="index"] .ss-hero {
    background:
        radial-gradient(ellipse 60% 55% at 55% 38%, rgba(229, 130, 83, 0.12) 0%, transparent 72%),
        radial-gradient(ellipse 40% 30% at 80% 60%, rgba(199, 174, 106, 0.07) 0%, transparent 65%);
}

/* CSS grid-line texture behind hero */
[data-page="index"] .ss-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(229, 130, 83, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(229, 130, 83, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

[data-page="index"] .ss-hero > * {
    position: relative;
    z-index: 1;
}

/* Section-label copper left-border accent */
[data-page="index"] .section-label {
    border-left: 2px solid var(--accent);
    padding-left: var(--sp-3);
}

/* Card hover lift on index */
[data-page="index"] .ss-card {
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

[data-page="index"] .ss-card:hover {
    border-color: rgba(229, 130, 83, 0.35);
    box-shadow: 0 8px 32px rgba(229, 130, 83, 0.14);
    transform: translateY(-2px);
}