/* blucast.net — the group's front door. Only loaded on the brand surface. */

.hero {
    position: relative;
    padding: clamp(72px, 12vw, 140px) 0 clamp(60px, 9vw, 110px);
    overflow: hidden;
    text-align: center;
}

.hero-glow {
    position: absolute;
    top: -40%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translateX(-50%);
    background: radial-gradient(circle,
        rgba(47, 127, 255, .22) 0%,
        rgba(0, 212, 255, .10) 38%,
        transparent 68%);
    pointer-events: none;
}

.hero-inner { position: relative; }

.hero-logo {
    width: 82px;
    margin: 0 auto 28px;
}

.hero-title {
    font-size: clamp(2.6rem, 8vw, 5rem);
    font-weight: 500;
    margin: 0 0 .2em;
}
.hero-title b { font-weight: 800; }
.hero-title span {
    display: block;
    font-size: .32em;
    font-weight: 600;
    letter-spacing: .5em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-top: .8em;
}

.hero-kicker {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.4vw, 1.4rem);
    font-weight: 600;
    margin: 0 0 .5em;
    background: linear-gradient(100deg, var(--accent), var(--accent-alt));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-sub {
    max-width: 58ch;
    margin: 0 auto 34px;
    color: var(--text-dim);
    font-size: 1.03rem;
}

.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Property cards ──────────────────────────────────────────────── */

.property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.property-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: transform .22s var(--ease), border-color .22s, box-shadow .22s;
}
.property-card:not(.is-soon):hover {
    transform: translateY(-4px);
    border-color: var(--card-accent, var(--accent));
    box-shadow: var(--shadow-lift);
}

.property-swatch {
    height: 92px;
    background: linear-gradient(120deg,
        var(--card-accent, var(--accent)),
        var(--card-accent-alt, var(--accent-alt)));
}
.property-card.is-soon .property-swatch {
    background: linear-gradient(120deg, #2a2e3d, #1b1e29);
}

.property-body { padding: 20px 22px 24px; flex: 1; }
.property-domain {
    display: block;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 8px;
}
.property-body h3 { font-size: 1.25rem; margin-bottom: .3em; }
.property-body p { color: var(--text-dim); font-size: .92rem; margin: 0; }

.property-go {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 1.2rem;
    color: var(--card-accent, var(--accent));
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .22s, transform .22s var(--ease);
}
.property-card:hover .property-go { opacity: 1; transform: translateX(0); }

.property-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: .28em .8em;
    border-radius: var(--radius-pill);
    background: rgba(10, 11, 15, .7);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.property-card.is-soon { opacity: .62; }

/* ── Channels ────────────────────────────────────────────────────── */

.channel-row { display: flex; flex-wrap: wrap; gap: 14px; }

.channel-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .2s, transform .2s var(--ease);
}
.channel-chip:hover { border-color: var(--accent); transform: translateY(-2px); }
.channel-handle { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.channel-name { font-size: .82rem; color: var(--text-faint); }

/* ── Pillars ─────────────────────────────────────────────────────── */

.pillar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px;
}
.pillar h3 { font-size: 1.08rem; margin-bottom: .4em; }
.pillar h3::before {
    content: '';
    display: block;
    width: 28px;
    height: 3px;
    margin-bottom: 14px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-alt));
}
.pillar p { color: var(--text-dim); font-size: .93rem; margin: 0; }