/* ------------------------------------------------------------------
 * Homepage sections ported from the v21 prototype.
 * Dark purple/sky theme to match the rest of the site.
 * Accent per card is set with the .rgu-accent-* classes, so no element
 * needs an inline style attribute.
 * ------------------------------------------------------------------ */

.rgu-accent-plum  { --rgu-c: #a855f7; --rgu-cbg: rgba(168, 85, 247, 0.14); }
.rgu-accent-azure { --rgu-c: #38bdf8; --rgu-cbg: rgba(56, 189, 248, 0.14); }
.rgu-accent-lime  { --rgu-c: #a3e635; --rgu-cbg: rgba(163, 230, 53, 0.14); }
.rgu-accent-amber { --rgu-c: #fbbf24; --rgu-cbg: rgba(251, 191, 36, 0.14); }

/* ── section shell ─────────────────────────────────────────── */
.rgu-sec { background: #080810; padding: 76px 0; }
.rgu-sec--band { background: #0c0c18; }
.rgu-sec--dark {
    background:
        radial-gradient(60% 70% at 82% 0%, rgba(163, 230, 53, 0.10) 0%, transparent 60%),
        #06060c;
}
.rgu-sec__wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

.rgu-sec__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 28px; margin-bottom: 38px;
}
.rgu-sec__kick {
    display: inline-block;
    font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase; color: #d8b4fe;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(216, 180, 254, 0.26);
    border-radius: 9999px; padding: 7px 14px; margin-bottom: 16px;
}
.rgu-sec__kick--lime { color: #a3e635; background: rgba(163, 230, 53, .1); border-color: rgba(163, 230, 53, .28); }
.rgu-sec__kick--onDark { color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }

.rgu-sec__title {
    font-family: 'Sora', sans-serif; font-weight: 900;
    font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.14;
    letter-spacing: -.03em; color: #f8fafc; margin: 0;
}
.rgu-sec__title em {
    font-style: normal;
    background: linear-gradient(90deg, #a855f7, #38bdf8);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.rgu-em-lime {
    font-style: normal;
    background: linear-gradient(90deg, #a3e635, #34d399);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.rgu-sec__lede {
    font-family: 'Outfit', sans-serif; font-size: 15px; line-height: 1.72;
    color: rgba(226, 232, 240, .6); max-width: 620px; margin: 14px 0 0;
}
.rgu-sec__lnk {
    flex-shrink: 0;
    font-family: 'Sora', sans-serif; font-size: 13.5px; font-weight: 700;
    color: #d8b4fe; text-decoration: none; white-space: nowrap;
    transition: color .2s ease, transform .2s ease;
}
.rgu-sec__lnk span { display: inline-block; transition: transform .25s ease; }
.rgu-sec__lnk:hover { color: #fff; }
.rgu-sec__lnk:hover span { transform: translateX(5px); }
.rgu-sec__lnk--lime { color: #a3e635; }

/* ── bento grid ────────────────────────────────────────────── */
.rgu-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.rgu-bt {
    position: relative; overflow: hidden;
    display: block; text-decoration: none;
    border: 1px solid rgba(148, 163, 184, .16);
    background: rgba(15, 23, 42, .55);
    border-radius: 20px; padding: 26px;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.rgu-bt::after {
    /* cursor-following sheen; --mx/--my are set by the section script */
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--rgu-cbg, rgba(168,85,247,.14)), transparent 70%);
    transition: opacity .3s ease;
}
.rgu-bt:hover {
    transform: translateY(-5px);
    border-color: var(--rgu-c, #a855f7);
    background: rgba(15, 23, 42, .85);
    box-shadow: 0 20px 48px rgba(2, 6, 23, .55);
}
.rgu-bt:hover::after { opacity: 1; }
.rgu-bt > * { position: relative; z-index: 1; }

.rgu-bt__h {
    font-family: 'Sora', sans-serif; font-size: 17px; font-weight: 800;
    color: #f1f5f9; margin: 12px 0 0; line-height: 1.35;
}
.rgu-bt__p {
    font-family: 'Outfit', sans-serif; font-size: 13.5px; line-height: 1.68;
    color: rgba(226, 232, 240, .58); margin: 10px 0 0;
}
.rgu-bt__go {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
    font-family: 'Sora', sans-serif; font-size: 12.5px; font-weight: 700;
    color: var(--rgu-c, #d8b4fe);
}
.rgu-bt__go span { transition: transform .25s ease; }
.rgu-bt:hover .rgu-bt__go span { transform: translateX(5px); }

.rgu-bt__ic {
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 13px; font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 800;
    color: var(--rgu-c, #a855f7); background: var(--rgu-cbg, rgba(168,85,247,.14));
    border: 1px solid var(--rgu-c, #a855f7);
}

.rgu-bt--find { grid-column: span 2; }
.rgu-bt--big {
    grid-row: span 2;
    background: linear-gradient(150deg, rgba(126, 34, 206, .55), rgba(56, 189, 248, .18)), rgba(15, 23, 42, .8);
    border-color: rgba(168, 85, 247, .35);
}
.rgu-bt--big .rgu-bt__h { font-size: 22px; }
.rgu-bt--big .rgu-bt__go { color: #fff; }

/* search box */
.rgu-sbox { position: relative; display: flex; margin-top: 18px; }
.rgu-sbox input {
    flex: 1 1 auto; min-width: 0;
    font-family: 'Outfit', sans-serif; font-size: 15px; color: #fff;
    background: rgba(2, 6, 23, .66);
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 13px; padding: 14px 52px 14px 16px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.rgu-sbox input::placeholder { color: rgba(226, 232, 240, .42); }
.rgu-sbox input:focus {
    outline: none; border-color: rgba(168, 85, 247, .65);
    box-shadow: 0 0 0 4px rgba(168, 85, 247, .14);
}
.rgu-sbox button {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 38px; height: 38px;
    border: none; border-radius: 10px; cursor: pointer; color: #0a0a14;
    background: linear-gradient(90deg, #a3e635, #34d399);
    transition: transform .2s ease, box-shadow .2s ease;
}
.rgu-sbox button:hover { transform: translateY(-50%) scale(1.06); box-shadow: 0 6px 18px rgba(163, 230, 53, .35); }

.rgu-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rgu-tags a {
    font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 500;
    color: rgba(226, 232, 240, .72); text-decoration: none;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 9999px; padding: 7px 13px;
    transition: all .22s ease;
}
.rgu-tags a:hover { color: #fff; border-color: rgba(168, 85, 247, .6); background: rgba(168, 85, 247, .12); transform: translateY(-2px); }

/* ── counters ──────────────────────────────────────────────── */
.rgu-counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rgu-counter {
    text-align: center; padding: 30px 14px;
    border: 1px solid rgba(148, 163, 184, .16);
    background: rgba(15, 23, 42, .5);
    border-radius: 20px;
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.rgu-counter:hover { transform: translateY(-5px); border-color: rgba(163, 230, 53, .45); background: rgba(15, 23, 42, .82); }
.rgu-counter b {
    display: block; font-family: 'Sora', sans-serif; font-weight: 900;
    font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1;
    background: linear-gradient(90deg, #a3e635, #34d399);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    font-variant-numeric: tabular-nums;
}
.rgu-counter small {
    display: block; margin-top: 10px;
    font-family: 'Outfit', sans-serif; font-size: 12px;
    letter-spacing: .1em; text-transform: uppercase; color: rgba(226, 232, 240, .5);
}

/* ── horizontal rail ───────────────────────────────────────── */
.rgu-railhead { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.rgu-railprog { flex: 1 1 auto; height: 3px; border-radius: 9999px; background: rgba(148, 163, 184, .18); overflow: hidden; }
.rgu-railprog > i {
    display: block; height: 100%; width: 22%; border-radius: 9999px;
    background: linear-gradient(90deg, #a855f7, #38bdf8);
    transition: width .25s ease, transform .25s ease;
}
.rgu-railnav { display: flex; gap: 8px; }
.rgu-railnav button {
    width: 38px; height: 38px; border-radius: 11px; cursor: pointer;
    font-size: 18px; line-height: 1; color: rgba(226, 232, 240, .8);
    background: rgba(15, 23, 42, .6);
    border: 1px solid rgba(148, 163, 184, .22);
    transition: all .22s ease;
}
.rgu-railnav button:hover { color: #fff; border-color: rgba(168, 85, 247, .6); background: rgba(168, 85, 247, .16); }
.rgu-railnav button:disabled { opacity: .35; cursor: default; }

.rgu-rail {
    display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory; padding-bottom: 6px;
    scrollbar-width: none; -ms-overflow-style: none;
}
.rgu-rail::-webkit-scrollbar { display: none; }
.rgu-rail:focus-visible { outline: 2px solid rgba(168, 85, 247, .7); outline-offset: 4px; border-radius: 18px; }

.rgu-hcard {
    position: relative; overflow: hidden; flex: 0 0 300px; scroll-snap-align: start;
    display: block; text-decoration: none; min-height: 250px;
    border: 1px solid rgba(148, 163, 184, .16);
    background: rgba(15, 23, 42, .55);
    border-radius: 20px; padding: 24px;
    transition: transform .32s cubic-bezier(.22,.61,.36,1), border-color .3s ease, box-shadow .3s ease;
}
.rgu-hcard__bg {
    position: absolute; inset: 0; opacity: .16; pointer-events: none;
    background: radial-gradient(120% 90% at 100% 0%, var(--rgu-c, #a855f7), transparent 62%);
    transition: opacity .32s ease, transform .5s ease;
}
.rgu-hcard:hover { transform: translateY(-7px); border-color: var(--rgu-c, #a855f7); box-shadow: 0 22px 50px rgba(2, 6, 23, .6); }
.rgu-hcard:hover .rgu-hcard__bg { opacity: .34; transform: scale(1.12); }
.rgu-hcard > *:not(.rgu-hcard__bg) { position: relative; z-index: 1; }
.rgu-hcard__k {
    display: inline-block; font-family: 'Outfit', sans-serif; font-size: 10.5px;
    font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--rgu-c, #a855f7);
    background: var(--rgu-cbg, rgba(168,85,247,.14));
    border: 1px solid var(--rgu-c, #a855f7);
    border-radius: 9999px; padding: 5px 11px;
}
.rgu-hcard__h { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 800; color: #f1f5f9; margin: 16px 0 0; line-height: 1.32; }
.rgu-hcard__p { font-family: 'Outfit', sans-serif; font-size: 13.5px; line-height: 1.7; color: rgba(226, 232, 240, .58); margin: 10px 0 0; }

/* ── live board ────────────────────────────────────────────── */
.rgu-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rgu-panel {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .16);
    background: rgba(15, 23, 42, .55);
    border-radius: 20px;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.rgu-panel:hover { border-color: var(--rgu-c, #a855f7); transform: translateY(-4px); box-shadow: 0 20px 44px rgba(2, 6, 23, .5); }

.rgu-panel__head {
    display: flex; align-items: center; gap: 11px; padding: 15px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, .14);
}
.rgu-panel__av {
    display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 10px; font-family: 'Sora', sans-serif; font-size: 11px; font-weight: 800;
    text-transform: uppercase; color: var(--rgu-c, #a855f7);
    background: var(--rgu-cbg, rgba(168,85,247,.14));
    border: 1px solid var(--rgu-c, #a855f7);
}
.rgu-panel__id { flex: 1 1 auto; min-width: 0; }
.rgu-panel__id b { display: block; font-family: 'Sora', sans-serif; font-size: 13.5px; font-weight: 700; color: #f1f5f9; }
.rgu-panel__id small { display: block; font-family: 'Outfit', sans-serif; font-size: 11.5px; color: rgba(226, 232, 240, .45); }
.rgu-panel__live {
    flex-shrink: 0; font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--rgu-c, #a855f7);
    border: 1px solid var(--rgu-c, #a855f7); border-radius: 9999px; padding: 3px 9px;
}

.rgu-panel__body { position: relative; height: 250px; overflow: hidden; }
.rgu-panel__body::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 56px; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, .92));
}
.rgu-panel__track { display: flex; flex-direction: column; animation: rgu-feed-scroll 30s linear infinite; }
.rgu-panel:hover .rgu-panel__track,
.rgu-panel:focus-within .rgu-panel__track { animation-play-state: paused; }
@keyframes rgu-feed-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.rgu-feed__item {
    display: flex; align-items: flex-start; gap: 11px; padding: 13px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, .08);
}
.rgu-feed__txt { min-width: 0; }
.rgu-feed__txt h5 {
    font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600;
    color: rgba(241, 245, 249, .9); margin: 0; line-height: 1.5;
}
.rgu-feed__txt small { display: block; margin-top: 3px; font-family: 'Outfit', sans-serif; font-size: 11.5px; color: rgba(226, 232, 240, .42); }
.rgu-feed__kind, .rgu-feed__chip {
    flex-shrink: 0; font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--rgu-c, #a855f7);
    background: var(--rgu-cbg, rgba(168,85,247,.14));
    border-radius: 7px; padding: 4px 8px; margin-top: 1px;
}
.rgu-feed__date {
    flex-shrink: 0; display: grid; place-items: center; width: 42px; padding: 5px 0;
    border-radius: 9px; background: var(--rgu-cbg, rgba(168,85,247,.14));
    border: 1px solid var(--rgu-c, #a855f7);
}
.rgu-feed__date b { font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 800; color: var(--rgu-c, #a855f7); line-height: 1; }
.rgu-feed__date i { font-style: normal; font-family: 'Outfit', sans-serif; font-size: 10px; text-transform: uppercase; color: rgba(226, 232, 240, .55); }

/* ── alumni voices ─────────────────────────────────────────── */
.rgu-voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rgu-voice {
    position: relative; margin: 0; padding: 28px;
    border: 1px solid rgba(148, 163, 184, .16);
    background: rgba(15, 23, 42, .55);
    border-radius: 20px;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.rgu-voice:hover { transform: translateY(-5px); border-color: var(--rgu-c, #a855f7); box-shadow: 0 20px 46px rgba(2, 6, 23, .55); }
.rgu-voice__mark {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
    font-family: 'Sora', sans-serif; font-size: 30px; line-height: 1; padding-top: 12px;
    color: var(--rgu-c, #a855f7); background: var(--rgu-cbg, rgba(168,85,247,.14));
}
.rgu-voice__q {
    font-family: 'Outfit', sans-serif; font-size: 16px; line-height: 1.66;
    color: rgba(241, 245, 249, .88); margin: 18px 0 0; border: 0; padding: 0;
}
.rgu-voice__by { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.rgu-voice__av {
    display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%; font-family: 'Sora', sans-serif; font-size: 12.5px; font-weight: 800; color: #0a0a14;
    background: linear-gradient(135deg, var(--rgu-c, #a855f7), #38bdf8);
}
.rgu-voice__by b { display: block; font-family: 'Sora', sans-serif; font-size: 14px; color: #f1f5f9; }
.rgu-voice__by small { display: block; font-family: 'Outfit', sans-serif; font-size: 12.5px; color: rgba(226, 232, 240, .48); }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .rgu-bento, .rgu-board, .rgu-voices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rgu-bt--find { grid-column: span 2; }
    .rgu-bt--big { grid-row: auto; }
}
@media (max-width: 760px) {
    .rgu-sec { padding: 54px 0; }
    .rgu-sec__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
    .rgu-bento, .rgu-board, .rgu-voices { grid-template-columns: minmax(0, 1fr); }
    .rgu-bt--find { grid-column: auto; }
    .rgu-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rgu-hcard { flex-basis: 262px; min-height: 232px; }
}

@media (prefers-reduced-motion: reduce) {
    .rgu-panel__track { animation: none; }
    .rgu-rail { scroll-behavior: auto; }
    .rgu-bt, .rgu-hcard, .rgu-counter, .rgu-panel, .rgu-voice,
    .rgu-bt__go span, .rgu-sec__lnk span, .rgu-tags a, .rgu-railnav button {
        transition: none;
    }
}