/* ============================================================
   guest.css — Public guest zone design system
   Scope: .guest-page body + all .guest-* components.
   Loaded only on guest zone pages via layouts/guest.blade.php.
   Does NOT conflict with admin.css or cabinet.css.

   Design tokens:
     --g-bg-deep:   #0a0e1a
     --g-bg-page:   #0e1320
     --g-bg-card:   #131826
     --g-bg-raised: #1c2333
     --g-gold:      #d4af37
     --g-gold-lt:   #f0c674
     --g-gold-dk:   #b8870a
     --g-blue:      #5ca7ff
     --g-text:      #cfd8e8
     --g-muted:     #8a99b3
     --g-gold-text: #f5e4a4
============================================================ */

/* ============================================================
   CSS CUSTOM PROPERTIES
============================================================ */
:root {
    --g-bg-deep:   #0a0e1a;
    --g-bg-page:   #0e1320;
    --g-bg-card:   #131826;
    --g-bg-raised: #1c2333;
    --g-gold:      #d4af37;
    --g-gold-lt:   #f0c674;
    --g-gold-dk:   #b8870a;
    --g-gold-text: #f5e4a4;
    --g-blue:      #5ca7ff;
    --g-text:      #cfd8e8;
    --g-muted:     #8a99b3;
    --g-border-gold: rgba(212, 175, 55, 0.14);
    --g-border-neu:  rgba(255, 255, 255, 0.06);
    --g-topbar-h: 72px;
    --g-max-w: 1320px;
    --g-radius-card: 16px;
    --g-radius-pill: 999px;
}

/* ============================================================
   BASE RESET for .guest-page
============================================================ */
.guest-page {
    margin: 0;
    padding: 0;
    background: var(--g-bg-page);
    color: var(--g-text);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

.guest-page *, .guest-page *::before, .guest-page *::after {
    box-sizing: border-box;
}

.guest-page a {
    color: var(--g-gold-lt);
    text-decoration: none;
    transition: color 0.18s ease;
}
.guest-page a:hover { color: #fff; }

.guest-page img {
    max-width: 100%;
    display: block;
}

.guest-page h1, .guest-page h2, .guest-page h3,
.guest-page h4, .guest-page h5, .guest-page h6 {
    margin: 0;
    line-height: 1.15;
    font-weight: 800;
    color: var(--g-text);
}

.guest-page ul, .guest-page ol { margin: 0; padding: 0; list-style: none; }
.guest-page p:not([class]) { margin: 0; }

/* Screen-reader only utility */
.guest-page .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus ring */
.guest-page *:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.7);
    outline-offset: 2px;
}

/* ============================================================
   TOPBAR
============================================================ */
.guest-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--g-topbar-h);
    background:
        radial-gradient(ellipse 60% 120% at 8% 0%, rgba(212, 175, 55, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse 40% 100% at 92% 0%, rgba(92, 167, 255, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, #141928 0%, #0c101c 100%);
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(184, 135, 10, 0.3) 15%,
        rgba(212, 175, 55, 0.65) 40%,
        rgba(240, 198, 116, 0.80) 50%,
        rgba(212, 175, 55, 0.65) 60%,
        rgba(184, 135, 10, 0.3) 85%,
        transparent 100%
    ) 1;
    box-shadow:
        0 1px 0 rgba(212, 175, 55, 0.10),
        0 4px 16px rgba(0, 0, 0, 0.30),
        0 16px 40px rgba(0, 0, 0, 0.20);
}

.guest-topbar__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    height: 100%;
    max-width: var(--g-max-w);
    margin: 0 auto;
    padding: 0 24px;
}

/* Brand */
.guest-topbar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

.guest-topbar__logo {
    display: block;
    height: 44px;
    width: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 0 10px rgba(212, 175, 55, 0.22))
        drop-shadow(0 3px 8px rgba(0, 0, 0, 0.40));
    transition: filter 0.22s ease, transform 0.22s ease;
}
.guest-topbar__brand:hover .guest-topbar__logo {
    filter:
        drop-shadow(0 0 18px rgba(240, 198, 116, 0.42))
        drop-shadow(0 3px 8px rgba(0, 0, 0, 0.40));
    transform: scale(1.04);
}

.guest-topbar__brand-name {
    background: linear-gradient(130deg, #fce7a0 0%, #edc84a 35%, #c99820 65%, #a07010 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.1;
    filter: drop-shadow(0 1px 3px rgba(212, 175, 55, 0.25));
    white-space: nowrap;
}

/* Center nav */
.guest-topbar__nav {
    display: flex;
    justify-content: center;
}

.guest-topbar__nav ul {
    display: flex;
    align-items: center;
    gap: 4px;
}

.guest-topbar__nav a {
    display: inline-block;
    padding: 7px 14px;
    border-radius: var(--g-radius-pill);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--g-muted);
    text-decoration: none;
    transition: color 0.18s ease, background 0.18s ease;
    white-space: nowrap;
}

.guest-topbar__nav a:hover,
.guest-topbar__nav a.is-active {
    color: var(--g-gold-lt);
    background: rgba(212, 175, 55, 0.10);
}

.guest-topbar__nav a.is-active {
    color: var(--g-gold);
}

.guest-topbar__nav-external {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}
.guest-topbar__nav-external svg {
    width: 11px;
    height: 11px;
    opacity: 0.7;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.guest-topbar__nav-external:hover svg {
    opacity: 1;
    transform: translate(1px, -1px);
}

/* Right actions */
.guest-topbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Buttons */
.guest-topbar__btn-ghost {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--g-radius-pill);
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: transparent;
    color: var(--g-gold-lt);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
    white-space: nowrap;
}
.guest-topbar__btn-ghost:hover {
    border-color: var(--g-gold);
    background: rgba(212, 175, 55, 0.10);
    color: #fff;
}

.guest-topbar__btn-gold {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 20px;
    border-radius: var(--g-radius-pill);
    background: linear-gradient(135deg, #f0c674 0%, var(--g-gold) 50%, var(--g-gold-dk) 100%);
    color: #1a1200;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(184, 135, 10, 0.35);
    transition: filter 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
.guest-topbar__btn-gold::before {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
    pointer-events: none;
}
.guest-topbar__btn-gold:hover::before { left: 130%; }
.guest-topbar__btn-gold:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 20px rgba(184, 135, 10, 0.55);
    transform: translateY(-1px);
    color: #1a1200;
}

/* Hamburger button */
.guest-topbar__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.guest-topbar__hamburger:hover {
    border-color: var(--g-border-gold);
    background: rgba(212, 175, 55, 0.08);
}
.guest-topbar__hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--g-muted);
    transform-origin: center;
    transition: transform 0.25s ease, opacity 0.25s ease, background 0.18s ease;
}
.guest-topbar__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--g-gold); }
.guest-topbar__hamburger.is-open span:nth-child(2) { opacity: 0; }
.guest-topbar__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--g-gold); }

/* ============================================================
   MOBILE NAV DRAWER
============================================================ */
.guest-nav-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
}
.guest-nav-drawer.is-open {
    display: block;
    pointer-events: auto;
}

.guest-nav-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.guest-nav-drawer.is-open .guest-nav-drawer__backdrop {
    opacity: 1;
}

.guest-nav-drawer__panel {
    position: absolute;
    top: 0; right: 0;
    width: min(320px, 88vw);
    height: 100%;
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(212, 175, 55, 0.10) 0%, transparent 60%),
        #0d1120;
    border-left: 1px solid rgba(212, 175, 55, 0.18);
    padding: 24px 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 40px rgba(0,0,0,0.5);
}
.guest-nav-drawer.is-open .guest-nav-drawer__panel {
    transform: translateX(0);
}

.guest-nav-drawer__close {
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    background: transparent;
    color: var(--g-muted);
    cursor: pointer;
    margin-bottom: 12px;
    flex-shrink: 0;
    transition: border-color 0.18s, color 0.18s;
}
.guest-nav-drawer__close:hover {
    border-color: rgba(212, 175, 55, 0.35);
    color: var(--g-gold-lt);
}
.guest-nav-drawer__close svg { width: 18px; height: 18px; }

.guest-nav-drawer__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.guest-nav-drawer__list a {
    display: block;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--g-muted);
    text-decoration: none;
    transition: color 0.18s, background 0.18s;
}
.guest-nav-drawer__list a:hover,
.guest-nav-drawer__list a.is-active {
    color: var(--g-gold-lt);
    background: rgba(212, 175, 55, 0.10);
}
.guest-nav-drawer__list a.is-active { color: var(--g-gold); }

.guest-nav-drawer__ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--g-border-gold);
    margin-top: 12px;
}
.guest-nav-drawer__ctas .guest-topbar__btn-ghost,
.guest-nav-drawer__ctas .guest-topbar__btn-gold {
    width: 100%;
    justify-content: center;
    height: 44px;
    padding: 0 16px;
    font-size: 13px;
}

/* Locale switcher inside drawer */
.guest-nav-drawer__locale {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.guest-nav-drawer__locale label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--g-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.guest-nav-drawer__locale select {
    flex: 1;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--g-r-pill, 999px);
    border: 1px solid rgba(212,175,55,0.30);
    background: rgba(212,175,55,0.06);
    color: var(--g-gold);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23d4af37' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.guest-nav-drawer__locale select option {
    background: #0e1320;
    color: #cfd8e8;
}

/* ============================================================
   HERO PATTERNS
============================================================ */
.guest-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Full-bleed hero (home page) */
.guest-hero--full {
    min-height: calc(100vh - var(--g-topbar-h));
    display: flex;
    align-items: center;
    background:
        radial-gradient(ellipse 100% 70% at 50% -10%, rgba(212, 175, 55, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(92, 167, 255, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #0a0d18 0%, #080b14 100%);
}

/* Compact hero (inner pages) */
.guest-hero--compact {
    padding: 56px 0 44px;
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(212, 175, 55, 0.14) 0%, transparent 65%),
        linear-gradient(180deg, #0d1020 0%, #0a0e1a 100%);
    border-bottom: 1px solid var(--g-border-gold);
}

/* Floating particle decoration (CSS only) */
.guest-hero::before {
    content: '';
    position: absolute;
    top: -80px; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(212, 175, 55, 0.18) 0%,
        rgba(184, 135, 10, 0.10) 35%,
        transparent 70%
    );
    pointer-events: none;
    animation: g-glow-pulse 5s ease-in-out infinite;
    z-index: 0;
}

/* Top shimmer line */
.guest-hero--compact::after {
    content: '';
    position: absolute;
    top: 0; left: 5%; right: 5%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212, 175, 55, 0.7) 30%,
        rgba(240, 198, 116, 0.9) 50%,
        rgba(212, 175, 55, 0.7) 70%,
        transparent 100%
    );
    pointer-events: none;
}

@keyframes g-glow-pulse {
    0%, 100% { opacity: 0.7;  transform: translateX(-50%) scale(1); }
    50%       { opacity: 1.0; transform: translateX(-50%) scale(1.07); }
}

.guest-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--g-max-w);
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.guest-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 5px 16px;
    border-radius: var(--g-radius-pill);
    border: 1px solid rgba(212, 175, 55, 0.30);
    background: rgba(212, 175, 55, 0.08);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--g-gold);
}
.guest-hero__eyebrow::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--g-gold);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
    animation: g-dot-pulse 2s ease-in-out infinite;
}
@keyframes g-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.7); }
}

.guest-hero__title {
    font-size: clamp(36px, 7vw, 72px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.02;
    background: linear-gradient(
        135deg,
        #f5e4a4 0%,
        #f0c674 20%,
        var(--g-gold) 55%,
        var(--g-gold-dk) 80%,
        #e8c960 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 220% auto;
    animation: g-title-shimmer 6s linear infinite;
    margin-bottom: 20px;
}
@keyframes g-title-shimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 220% center; }
}

.guest-hero__subtitle {
    font-size: clamp(16px, 2.5vw, 20px);
    color: var(--g-muted);
    font-weight: 400;
    line-height: 1.55;
    max-width: 540px;
    margin: 0 auto 36px;
}

.guest-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: center;
}

/* Inner page compact hero text */
.guest-hero--compact .guest-hero__title {
    font-size: clamp(28px, 5vw, 48px);
    margin-bottom: 10px;
}
.guest-hero--compact .guest-hero__subtitle {
    font-size: 15px;
    margin-bottom: 0;
}

/* ============================================================
   SECTION WRAPPERS
============================================================ */
.guest-section {
    padding: 72px 0;
}

.guest-section--dark {
    background:
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(212, 175, 55, 0.05) 0%, transparent 70%),
        var(--g-bg-deep);
}

.guest-section--raised {
    background: var(--g-bg-raised);
    border-top: 1px solid var(--g-border-neu);
    border-bottom: 1px solid var(--g-border-neu);
}

.guest-section__inner {
    max-width: var(--g-max-w);
    margin: 0 auto;
    padding: 0 24px;
}

.guest-section__header {
    text-align: center;
    margin-bottom: 52px;
}

.guest-section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--g-gold);
}
.guest-section__eyebrow::before,
.guest-section__eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4));
    min-width: 24px;
}
.guest-section__eyebrow::after {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.4), transparent);
}

.guest-section__title {
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--g-text);
    margin-bottom: 12px;
    text-align: center;
}

.guest-section__subtitle {
    font-size: 16px;
    color: var(--g-muted);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   CARD SYSTEM
============================================================ */
.guest-card {
    position: relative;
    border-radius: var(--g-radius-card);
    border: 1px solid var(--g-border-neu);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.032), rgba(255,255,255,0.008)),
        var(--g-bg-card);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 20px 48px rgba(0,0,0,0.28);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.guest-card:hover {
    transform: translateY(-4px);
    border-color: var(--g-border-gold);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 28px 60px rgba(0,0,0,0.38),
        0 0 0 1px rgba(212, 175, 55, 0.10);
}

/* Gold corner accent via ::before */
.guest-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 120px; height: 120px;
    background: radial-gradient(
        ellipse at 0% 0%,
        rgba(212, 175, 55, 0.12) 0%,
        transparent 65%
    );
    pointer-events: none;
    z-index: 0;
    border-radius: var(--g-radius-card) 0 0 0;
}

/* Bottom-right subtle corner */
.guest-card::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 80px; height: 80px;
    background: radial-gradient(
        ellipse at 100% 100%,
        rgba(92, 167, 255, 0.06) 0%,
        transparent 65%
    );
    pointer-events: none;
    z-index: 0;
    border-radius: 0 0 var(--g-radius-card) 0;
}

.guest-card--gold {
    border-color: rgba(212, 175, 55, 0.22);
    background:
        radial-gradient(ellipse at 80% 0%, rgba(212, 175, 55, 0.09) 0%, transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.006)),
        var(--g-bg-card);
}

.guest-card--feature {
    text-align: center;
    padding: 32px 24px;
}

.guest-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--g-bg-deep);
}
.guest-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.guest-card:hover .guest-card__media img {
    transform: scale(1.04);
}

.guest-card__body {
    position: relative;
    z-index: 1;
    padding: 20px 22px 22px;
}

.guest-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.guest-card__tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--g-radius-pill);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(212, 175, 55, 0.10);
    color: var(--g-gold-lt);
}

.guest-card__tag--blue {
    border-color: rgba(92, 167, 255, 0.35);
    background: rgba(92, 167, 255, 0.10);
    color: #9fd0ff;
}

.guest-card__date {
    font-size: 11.5px;
    color: var(--g-muted);
    letter-spacing: 0.02em;
}

.guest-card__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--g-text);
    margin-bottom: 8px;
    line-height: 1.3;
    transition: color 0.18s ease;
}
.guest-card:hover .guest-card__title { color: var(--g-gold-lt); }

.guest-card__excerpt {
    font-size: 13.5px;
    color: var(--g-muted);
    line-height: 1.6;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.guest-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--g-gold);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: gap 0.18s ease, color 0.18s ease;
}
.guest-card__link:hover { color: var(--g-gold-lt); gap: 10px; }
.guest-card__link svg {
    width: 14px; height: 14px;
    transition: transform 0.18s ease;
}
.guest-card__link:hover svg { transform: translateX(3px); }

/* Feature card icon */
.guest-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 18px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    background: rgba(212, 175, 55, 0.08);
    margin-bottom: 18px;
    color: var(--g-gold);
}
.guest-card__icon svg { width: 28px; height: 28px; }

/* ============================================================
   NEWS ARTICLE READING LAYOUT
============================================================ */
.guest-article {
    max-width: 720px;
    margin: 0 auto;
}

.guest-article__header {
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--g-border-gold);
}

.guest-article__title {
    font-size: clamp(24px, 4vw, 38px);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--g-text);
    margin-bottom: 14px;
    line-height: 1.1;
}

.guest-article__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--g-muted);
}

.guest-article__meta-divider {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    flex-shrink: 0;
}

/* Prose styles scoped to article content */
.guest-article__body {
    color: var(--g-text);
    font-size: 16px;
    line-height: 1.75;
}

.guest-article__body h2 {
    font-size: 22px;
    font-weight: 800;
    margin-top: 40px;
    margin-bottom: 14px;
    color: var(--g-gold-text);
}

.guest-article__body h3 {
    font-size: 18px;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 10px;
    color: var(--g-text);
}

.guest-article__body p {
    margin-bottom: 20px;
}

.guest-article__body ul,
.guest-article__body ol {
    margin-bottom: 20px;
    padding-left: 24px;
}

.guest-article__body ul { list-style: none; }
.guest-article__body ul li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 8px;
}
.guest-article__body ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 10px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--g-gold);
}

.guest-article__body ol { list-style: decimal; }
.guest-article__body ol li { margin-bottom: 8px; }

.guest-article__body a {
    color: var(--g-gold-lt);
    border-bottom: 1px solid rgba(240, 198, 116, 0.35);
    transition: color 0.15s, border-color 0.15s;
}
.guest-article__body a:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

.guest-article__body blockquote {
    margin: 24px 0;
    padding: 16px 20px;
    border-left: 3px solid var(--g-gold);
    background: rgba(212, 175, 55, 0.06);
    border-radius: 0 10px 10px 0;
    color: var(--g-gold-text);
    font-style: italic;
}

.guest-article__body img {
    border-radius: 12px;
    margin: 24px 0;
    border: 1px solid var(--g-border-neu);
}

.guest-article__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--g-muted);
    text-decoration: none;
    margin-bottom: 28px;
    transition: color 0.18s ease, gap 0.18s ease;
}
.guest-article__back:hover { color: var(--g-gold-lt); gap: 12px; }
.guest-article__back svg { width: 14px; height: 14px; }

/* ============================================================
   RANKINGS TABLES
============================================================ */
.guest-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--g-radius-card);
    border: 1px solid var(--g-border-gold);
    /* Visual hint that the table scrolls — gold gradient on right edge */
    background:
        linear-gradient(to right, transparent 75%, rgba(212,175,55,0.08) 100%);
    background-attachment: local;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,175,55,0.4) transparent;
}
.guest-table-wrap::-webkit-scrollbar { height: 6px; }
.guest-table-wrap::-webkit-scrollbar-track { background: transparent; }
.guest-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(212,175,55,0.35);
    border-radius: 3px;
}
.guest-table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(212,175,55,0.6);
}

.guest-table {
    width: 100%;
    min-width: 640px;   /* forces horizontal scroll on narrow mobile screens */
    border-collapse: collapse;
    font-size: 14px;
}

.guest-table thead tr {
    background: linear-gradient(
        90deg,
        rgba(212, 175, 55, 0.12) 0%,
        rgba(212, 175, 55, 0.06) 100%
    );
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.guest-table th {
    padding: 14px 18px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--g-gold);
    white-space: nowrap;
}

.guest-table td {
    padding: 13px 18px;
    color: var(--g-text);
    border-bottom: 1px solid var(--g-border-neu);
    vertical-align: middle;
}

.guest-table tbody tr:last-child td { border-bottom: none; }

.guest-table tbody tr:nth-child(even) td {
    background: rgba(255,255,255,0.018);
}

/* Top-3 highlights */
.guest-table tbody tr:nth-child(1) .guest-table__rank { color: #ffd700; }
.guest-table tbody tr:nth-child(2) .guest-table__rank { color: #c0c0c0; }
.guest-table tbody tr:nth-child(3) .guest-table__rank { color: #cd7f32; }

.guest-table__rank {
    font-weight: 900;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    display: inline-block;
}

.guest-table__name {
    font-weight: 700;
    color: var(--g-text);
}

.guest-table__level {
    font-weight: 700;
    color: var(--g-gold-lt);
    font-variant-numeric: tabular-nums;
}

.guest-table__kills {
    font-variant-numeric: tabular-nums;
    color: var(--g-muted);
}

/* ============================================================
   SERVER STATUS WIDGET
============================================================ */
.guest-server-status {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 24px;
    border-radius: 14px;
    border: 1px solid var(--g-border-gold);
    background:
        linear-gradient(90deg, rgba(212, 175, 55, 0.06), transparent),
        var(--g-bg-card);
    flex-wrap: wrap;
}

.guest-server-status__indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.guest-server-status__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
    animation: g-status-pulse 2.5s ease-in-out infinite;
    flex-shrink: 0;
}
.guest-server-status__dot--offline { background: #f87171; box-shadow: 0 0 10px rgba(248, 113, 113, 0.5); animation: none; }

@keyframes g-status-pulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px rgba(74, 222, 128, 0.6); }
    50%       { opacity: 0.7; transform: scale(1.2); box-shadow: 0 0 18px rgba(74, 222, 128, 0.9); }
}

.guest-server-status__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}
.guest-server-status__stat-label { color: var(--g-muted); }
.guest-server-status__stat-value {
    font-weight: 800;
    font-size: 18px;
    color: var(--g-gold-lt);
    font-variant-numeric: tabular-nums;
}

.guest-server-status__bar-wrap {
    flex: 1;
    min-width: 120px;
    height: 8px;
    border-radius: var(--g-radius-pill);
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.04);
}
.guest-server-status__bar {
    height: 100%;
    border-radius: var(--g-radius-pill);
    background: linear-gradient(90deg, var(--g-gold-dk), var(--g-gold), var(--g-gold-lt), var(--g-gold));
    background-size: 200% 100%;
    animation: g-bar-shine 3s linear infinite;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes g-bar-shine {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ============================================================
   CLASS SHOWCASE GRID
============================================================ */
/* ============================================================
   CLASS SHOWCASE SLIDER
   Round portrait thumbs at the bottom navigate between full-art
   class spotlight slides above. Auto-rotates 6s, pauses on hover.
   ============================================================ */

.gh-class-slider {
    position: relative;
    border-radius: 20px;
    border: 1px solid var(--g-border-neu);
    background:
        radial-gradient(ellipse 60% 60% at 50% 0%, rgba(212,175,55,0.06) 0%, transparent 65%),
        linear-gradient(180deg, rgba(20,25,40,0.65) 0%, rgba(10,14,26,0.85) 100%);
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    overflow: hidden;
    padding: 32px 24px 24px;
}

/* --- Stage: holds all slides stacked, only is-active is shown --- */
.gh-class-slider__stage {
    position: relative;
    min-height: 380px;
}

.gh-class-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
    pointer-events: none;
}
.gh-class-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;
}

@media (min-width: 768px) {
    .gh-class-slide {
        grid-template-columns: 1fr 1.1fr;
        gap: 36px;
        align-items: center;
    }
}

/* --- Art panel --- */
.gh-class-slide__art-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    max-width: 360px;
    margin: 0 auto;
    border: 1px solid rgba(212,175,55,0.18);
    box-shadow:
        0 12px 32px rgba(0,0,0,0.45),
        0 0 0 1px rgba(212,175,55,0.10) inset;
}
.gh-class-slide__art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.gh-class-slide.is-active .gh-class-slide__art {
    animation: gh-class-art-zoom 8s ease-in-out infinite alternate;
}
@keyframes gh-class-art-zoom {
    0%   { transform: scale(1.0); }
    100% { transform: scale(1.06); }
}
.gh-class-slide__art-glow {
    position: absolute;
    inset: -10%;
    background: radial-gradient(circle at 50% 40%, rgba(212,175,55,0.25) 0%, transparent 55%);
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.7;
}

/* --- Info panel --- */
.gh-class-slide__info {
    text-align: center;
    padding: 0 8px;
}
@media (min-width: 768px) {
    .gh-class-slide__info {
        text-align: left;
        padding: 0;
    }
}

.gh-class-slide__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--g-gold);
    margin-bottom: 16px;
}
.gh-class-slide__index {
    font-family: 'Inter', monospace;
    font-size: 13px;
    color: rgba(212,175,55,0.6);
    letter-spacing: 0;
}
.gh-class-slide__eyebrow-divider {
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg, var(--g-gold) 0%, transparent 100%);
}

.gh-class-slide__name {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    background: linear-gradient(135deg, #f5e4a4 0%, #f0c674 25%, var(--g-gold) 60%, #c99820 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.gh-class-slide__lore {
    font-size: 16px;
    line-height: 1.65;
    color: var(--g-muted);
    max-width: 520px;
    margin: 0 auto 24px;
}
@media (min-width: 768px) {
    .gh-class-slide__lore { margin: 0 0 24px; }
}

.gh-class-slide__diff {
    max-width: 320px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .gh-class-slide__diff { margin: 0; }
}

.gh-class-slide__diff-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.gh-class-slide__diff-label {
    color: var(--g-muted);
    font-weight: 700;
}
.gh-class-slide__diff-num {
    color: var(--g-gold-lt);
    font-weight: 800;
    letter-spacing: 0;
}

.gh-class-slide__diff-bar {
    height: 6px;
    border-radius: var(--g-radius-pill);
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(0,0,0,0.4) inset;
}
.gh-class-slide__diff-fill {
    height: 100%;
    border-radius: var(--g-radius-pill);
    background: linear-gradient(90deg, #4ade80, #f0c674, #f87171);
    box-shadow: 0 0 10px rgba(240,198,116,0.5);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Prev / next arrows --- */
.gh-class-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: none; /* hidden on mobile (use thumbs/swipe) */
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(8,10,20,0.7);
    border: 1px solid rgba(212,175,55,0.32);
    color: var(--g-gold-lt);
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.gh-class-slider__arrow svg {
    width: 22px;
    height: 22px;
}
.gh-class-slider__arrow:hover {
    background: rgba(212,175,55,0.18);
    border-color: var(--g-gold);
    transform: translateY(-50%) scale(1.06);
}
.gh-class-slider__arrow--prev { left: 12px; }
.gh-class-slider__arrow--next { right: 12px; }

@media (min-width: 768px) {
    .gh-class-slider__arrow { display: flex; }
}

/* --- Round thumbnail navigation --- */
.gh-class-slider__thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: 28px;
    padding: 8px 4px 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,175,55,0.4) transparent;
    justify-content: flex-start;
}
.gh-class-slider__thumbs::-webkit-scrollbar { height: 6px; }
.gh-class-slider__thumbs::-webkit-scrollbar-track { background: transparent; }
.gh-class-slider__thumbs::-webkit-scrollbar-thumb {
    background: rgba(212,175,55,0.3);
    border-radius: 3px;
}
.gh-class-slider__thumbs::-webkit-scrollbar-thumb:hover {
    background: rgba(212,175,55,0.55);
}

@media (min-width: 1024px) {
    .gh-class-slider__thumbs { justify-content: center; flex-wrap: wrap; overflow-x: visible; }
}

.gh-class-thumb {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: transform 0.22s ease;
}
.gh-class-thumb img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 2px solid rgba(255,255,255,0.06);
    background: var(--g-bg-deep);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.gh-class-thumb__name {
    font-size: 11px;
    font-weight: 700;
    color: var(--g-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.18s ease;
    white-space: nowrap;
}
.gh-class-thumb:hover img {
    border-color: rgba(212,175,55,0.55);
    transform: scale(1.06);
    box-shadow: 0 6px 16px rgba(212,175,55,0.25);
}
.gh-class-thumb:hover .gh-class-thumb__name {
    color: var(--g-gold-lt);
}
.gh-class-thumb.is-active img {
    border-color: var(--g-gold);
    box-shadow:
        0 0 0 3px rgba(212,175,55,0.18),
        0 8px 24px rgba(212,175,55,0.4);
    transform: scale(1.10);
}
.gh-class-thumb.is-active .gh-class-thumb__name {
    color: var(--g-gold);
    background: linear-gradient(135deg, #f5e4a4, var(--g-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (min-width: 768px) {
    .gh-class-thumb img { width: 72px; height: 72px; }
}

/* ============================================================
   CTA BLOCKS
============================================================ */
.guest-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 20px;
    padding: 64px 40px;
    text-align: center;
    background:
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(212, 175, 55, 0.22) 0%, transparent 65%),
        radial-gradient(ellipse 60% 100% at 100% 50%, rgba(92, 167, 255, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, #0f1525 0%, #0a0e1a 100%);
    border: 1px solid rgba(212, 175, 55, 0.22);
    box-shadow:
        0 0 0 1px rgba(212, 175, 55, 0.08) inset,
        0 32px 80px rgba(0,0,0,0.4);
}

.guest-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 5%; right: 5%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(240, 198, 116, 0.8) 50%,
        transparent
    );
    pointer-events: none;
}

.guest-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--g-gold);
}

.guest-cta__title {
    font-size: clamp(26px, 5vw, 46px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.05;
    background: linear-gradient(135deg, #f5e4a4 0%, var(--g-gold-lt) 30%, var(--g-gold) 60%, var(--g-gold-dk) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.guest-cta__subtitle {
    font-size: 16px;
    color: var(--g-muted);
    max-width: 480px;
    margin: 0 auto 36px;
    line-height: 1.6;
    text-align: center;
}

.guest-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* ============================================================
   BUTTONS
============================================================ */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border: none;
    border-radius: var(--g-radius-pill);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #1a1200;
    background: linear-gradient(135deg, var(--g-gold-lt) 0%, var(--g-gold) 50%, var(--g-gold-dk) 100%);
    box-shadow:
        0 0 0 1px rgba(212, 175, 55, 0.25),
        0 4px 20px rgba(184, 135, 10, 0.40),
        0 1px 0 rgba(255,255,255,0.15) inset;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.22s ease, transform 0.18s ease, filter 0.18s ease;
    -webkit-user-select: none;
    user-select: none;
}
.btn-gold--lg {
    padding: 18px 36px;
    font-size: 16px;
    border-radius: 16px;
}
.btn-gold::before {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
    pointer-events: none;
}
.btn-gold:hover::before { left: 130%; }
.btn-gold:hover {
    box-shadow:
        0 0 0 1px rgba(240, 198, 116, 0.4),
        0 8px 28px rgba(184, 135, 10, 0.55),
        0 1px 0 rgba(255,255,255,0.15) inset;
    transform: translateY(-2px);
    filter: brightness(1.06);
    color: #1a1200;
}
.btn-gold:active { transform: translateY(0); filter: brightness(0.96); }
.btn-gold:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.7);
    outline-offset: 3px;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 26px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: var(--g-radius-pill);
    background: transparent;
    color: var(--g-gold-lt);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, color 0.18s, transform 0.18s;
    -webkit-user-select: none;
    user-select: none;
}
.btn-ghost--lg {
    padding: 17px 34px;
    font-size: 16px;
    border-radius: 16px;
}
.btn-ghost:hover {
    border-color: var(--g-gold);
    background: rgba(212, 175, 55, 0.10);
    color: #fff;
    transform: translateY(-2px);
}
.btn-ghost:active { transform: translateY(0); }
.btn-ghost:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.7);
    outline-offset: 3px;
}

/* ============================================================
   TABS
============================================================ */
.guest-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--g-border-neu);
    width: fit-content;
    margin-bottom: 28px;
}

.guest-tab {
    padding: 8px 20px;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: var(--g-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.guest-tab.is-active {
    background: rgba(212, 175, 55, 0.16);
    color: var(--g-gold-lt);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25);
}
.guest-tab:hover:not(.is-active) { color: var(--g-text); background: rgba(255,255,255,0.06); }

/* ============================================================
   FORMS (scoped to guest pages — login/register overlays)
============================================================ */
.guest-form-card {
    max-width: 420px;
    margin: 0 auto;
    padding: 32px 28px;
    border-radius: 20px;
    border: 1px solid var(--g-border-gold);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.006)),
        var(--g-bg-card);
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}

.guest-form-card__title {
    font-size: 20px;
    font-weight: 800;
    color: var(--g-gold-text);
    margin-bottom: 6px;
    text-align: center;
}

.guest-form-card__sub {
    font-size: 13px;
    color: var(--g-muted);
    text-align: center;
    margin-bottom: 24px;
}

.guest-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.guest-field label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--g-muted);
}

.guest-field input {
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: var(--g-text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.guest-field input::placeholder { color: rgba(255,255,255,0.2); }
.guest-field input:focus {
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.10);
}

/* ============================================================
   SCROLL-REVEAL ANIMATIONS
============================================================ */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.55s ease, transform 0.55s ease;
    }
    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
    .reveal--delay-1 { transition-delay: 0.10s; }
    .reveal--delay-2 { transition-delay: 0.20s; }
    .reveal--delay-3 { transition-delay: 0.30s; }
    .reveal--delay-4 { transition-delay: 0.40s; }
    .reveal--delay-5 { transition-delay: 0.50s; }

    .reveal--left {
        transform: translateX(-24px);
    }
    .reveal--left.is-visible { transform: translateX(0); }
    .reveal--right {
        transform: translateX(24px);
    }
    .reveal--right.is-visible { transform: translateX(0); }
}

/* Reduced-motion: instant show */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   GRID UTILITIES
============================================================ */
.guest-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.guest-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.guest-grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* ============================================================
   BADGE / CHIP UTILITIES
============================================================ */
.guest-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--g-radius-pill);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.guest-badge--gold {
    border: 1px solid rgba(212, 175, 55, 0.40);
    background: rgba(212, 175, 55, 0.10);
    color: var(--g-gold-lt);
}
.guest-badge--blue {
    border: 1px solid rgba(92, 167, 255, 0.35);
    background: rgba(92, 167, 255, 0.10);
    color: #9fd0ff;
}
.guest-badge--green {
    border: 1px solid rgba(74, 222, 128, 0.30);
    background: rgba(74, 222, 128, 0.08);
    color: #6ee7a0;
}

/* ============================================================
   DIVIDER UTILITY
============================================================ */
.guest-divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--g-border-gold) 20%,
        var(--g-border-gold) 80%,
        transparent 100%
    );
    margin: 48px 0;
}

/* ============================================================
   STUB PAGE PLACEHOLDER STYLES
============================================================ */
.guest-stub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px;
    min-height: 320px;
    color: var(--g-muted);
    font-size: 14px;
}
.guest-stub__icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    border: 1px solid var(--g-border-gold);
    background: rgba(212, 175, 55, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--g-gold);
}
.guest-stub__icon svg { width: 24px; height: 24px; }
.guest-stub__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--g-text);
    margin-bottom: 8px;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
============================================================ */

/* Mobile (<768px): topbar = logo + LOCALE + hamburger.
   Auth CTAs (Sign in / Create account) live ONLY in the drawer. */

/* 480px — small phones */
@media (max-width: 479px) {
    .guest-topbar__brand-name { display: none; }
    .guest-topbar__nav { display: none; }
    /* Hide auth buttons in topbar — drawer has them */
    .guest-topbar__actions .guest-topbar__btn-ghost { display: none; }
    .guest-topbar__actions .guest-topbar__btn-gold  { display: none; }
    .guest-topbar__hamburger { display: flex; }
    /* Locale stays visible in topbar (compact form) */
    .guest-topbar__actions .topbar__locale-form { display: flex; }
    .guest-topbar__actions .topbar__locale-select {
        height: 32px;
        font-size: 11px;
        padding: 0 22px 0 6px;
        background-position: right 6px center;
    }
    .guest-topbar__actions .topbar__locale-label {
        height: 32px;
        padding: 0 4px 0 8px;
    }
    .guest-topbar__actions { gap: 6px; flex-wrap: nowrap; }

    .guest-hero--full { min-height: auto; padding: 72px 0 56px; }
    .guest-section { padding: 48px 0; }
    .guest-cta { padding: 40px 20px; }
    .guest-grid-4 { grid-template-columns: 1fr; }
}

/* 480px – 767px — large phones */
@media (min-width: 480px) and (max-width: 767px) {
    .guest-topbar__nav { display: none; }
    /* Hide auth buttons in topbar — drawer has them */
    .guest-topbar__actions .guest-topbar__btn-ghost { display: none; }
    .guest-topbar__actions .guest-topbar__btn-gold  { display: none; }
    .guest-topbar__hamburger { display: flex; }
    .guest-topbar__actions .topbar__locale-form { display: flex; }
    .guest-topbar__actions { flex-wrap: nowrap; }

    .guest-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* 768px — tablet */
@media (min-width: 768px) {
    .guest-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .guest-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .guest-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* 768px – 1023px — tablet/small desktop */
@media (min-width: 768px) and (max-width: 1023px) {
    .guest-topbar__nav { display: none; }
    .guest-topbar__hamburger { display: flex; }
    .guest-topbar__inner { grid-template-columns: auto auto; }
}

/* 1024px — desktop nav fully visible */
@media (min-width: 1024px) {
    .guest-topbar__hamburger { display: none; }
}

/* 1280px — large desktop */
@media (min-width: 1280px) {
    .guest-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   === HOME PAGE ===
   Styles specific to guest/home.blade.php.
   All selectors prefixed with .gh- to avoid collisions.
============================================================ */

/* ---- Hero: background image layer ---- */
.gh-home-hero {
    /* Override the gradient-only background from .guest-hero--full */
    background: none;
}

.gh-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.gh-hero-bg__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.gh-hero-bg__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% -5%, rgba(212, 175, 55, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 100% 100%, rgba(92, 167, 255, 0.08) 0%, transparent 50%),
        linear-gradient(
            180deg,
            rgba(8, 10, 20, 0.62) 0%,
            rgba(8, 10, 20, 0.72) 40%,
            rgba(8, 10, 20, 0.90) 75%,
            rgba(8, 10, 20, 0.98) 100%
        );
}

/* ---- Hero content positioning ---- */
.gh-hero-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 64px;
    padding-bottom: 80px;
}

/* ---- Hero logo ---- */
/* Hero logo centered above the title — inline, prominent. */
.gh-hero-logo {
    margin-bottom: 24px;
}

.gh-hero-logo__img {
    height: 240px;
    width: auto;
    max-width: 80vw;
    object-fit: contain;
    filter:
        drop-shadow(0 0 28px rgba(212, 175, 55, 0.40))
        drop-shadow(0 6px 16px rgba(0,0,0,0.6));
    animation: gh-logo-float 6s ease-in-out infinite;
}

@keyframes gh-logo-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-6px); }
}

/* Hero subtitle override (widen for centered layout) */
.gh-hero-content .guest-hero__subtitle {
    text-align: center;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- CSS-only floating particles ---- */
.gh-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.gh-particle {
    position: absolute;
    border-radius: 50%;
    background: var(--g-gold);
    opacity: 0;
    animation: gh-particle-rise linear infinite;
}

.gh-particle--1 {
    width: 4px;  height: 4px;
    left: 15%;   bottom: 20%;
    animation-duration: 8s;
    animation-delay: 0s;
    box-shadow: 0 0 6px 2px rgba(212, 175, 55, 0.5);
}
.gh-particle--2 {
    width: 3px;  height: 3px;
    left: 32%;   bottom: 15%;
    animation-duration: 10s;
    animation-delay: 1.5s;
    box-shadow: 0 0 5px 2px rgba(240, 198, 116, 0.4);
}
.gh-particle--3 {
    width: 5px;  height: 5px;
    left: 60%;   bottom: 25%;
    animation-duration: 9s;
    animation-delay: 0.8s;
    box-shadow: 0 0 8px 3px rgba(212, 175, 55, 0.45);
}
.gh-particle--4 {
    width: 3px;  height: 3px;
    left: 75%;   bottom: 18%;
    animation-duration: 11s;
    animation-delay: 2.2s;
    box-shadow: 0 0 5px 2px rgba(212, 175, 55, 0.35);
}
.gh-particle--5 {
    width: 4px;  height: 4px;
    left: 48%;   bottom: 10%;
    animation-duration: 7.5s;
    animation-delay: 3s;
    box-shadow: 0 0 7px 2px rgba(240, 198, 116, 0.5);
}
.gh-particle--6 {
    width: 3px;  height: 3px;
    left: 85%;   bottom: 30%;
    animation-duration: 9.5s;
    animation-delay: 0.4s;
    box-shadow: 0 0 5px 2px rgba(212, 175, 55, 0.3);
}

@keyframes gh-particle-rise {
    0%   { opacity: 0;   transform: translateY(0)     scale(0.6); }
    10%  { opacity: 0.9; }
    80%  { opacity: 0.6; }
    100% { opacity: 0;   transform: translateY(-320px) scale(1.3); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .gh-particle { animation: none; }
    .gh-hero-logo__img { animation: none; }
}

/* ---- Server status strip ---- */
.gh-status-strip {
    background:
        radial-gradient(ellipse 80% 200% at 50% 0%, rgba(212, 175, 55, 0.06) 0%, transparent 60%),
        var(--g-bg-deep);
    border-top: 1px solid var(--g-border-gold);
    border-bottom: 1px solid var(--g-border-neu);
}

.gh-status-strip__inner {
    padding-top: 20px;
    padding-bottom: 20px;
}

.gh-status-expanded {
    border-radius: 14px;
    padding: 18px 24px;
    gap: 24px;
    flex-wrap: wrap;
}

/* ---- Feature tiles: override grid for 4-up on desktop ---- */
.gh-features-grid {
    row-gap: 20px;
}

.gh-features-grid .guest-card--feature {
    /* slightly taller on desktop */
    padding: 36px 26px 30px;
}

/* ---- News: placeholder media ---- */
.gh-news-placeholder-media {
    aspect-ratio: 16 / 9;
    background: var(--g-bg-deep);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gh-news-placeholder-img {
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,0.02) 0px,
            rgba(255,255,255,0.02) 1px,
            transparent 1px,
            transparent 10px
        ),
        radial-gradient(ellipse 60% 40% at 50% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 70%),
        var(--g-bg-deep);
}

/* Skeleton shimmer on placeholder title */
.gh-placeholder-text {
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    height: 18px;
    animation: gh-shimmer 1.8s ease-in-out infinite;
}
@keyframes gh-shimmer {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1.0; }
}

/* ---- Class cards ---- */
.gh-class-lore {
    font-size: 11.5px;
    color: var(--g-muted);
    line-height: 1.5;
    margin-bottom: 10px;
    min-height: 36px;
}

.gh-class-diff-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--g-muted);
    margin-bottom: 5px;
}

.gh-class-diff-num {
    color: var(--g-gold);
}

/* ---- CTA corner ornaments ---- */
.gh-cta-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none;
    z-index: 0;
}

.gh-cta-corner--tl {
    top: 16px;
    left: 20px;
    border-top: 2px solid rgba(212, 175, 55, 0.35);
    border-left: 2px solid rgba(212, 175, 55, 0.35);
    border-radius: 8px 0 0 0;
}

.gh-cta-corner--br {
    bottom: 16px;
    right: 20px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.35);
    border-right: 2px solid rgba(212, 175, 55, 0.35);
    border-radius: 0 0 8px 0;
}

/* ---- Classes section dark gradient ---- */
.gh-classes-section {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 175, 55, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(92, 167, 255, 0.04) 0%, transparent 60%),
        var(--g-bg-deep);
}

/* ============================================================
   HOME PAGE — RESPONSIVE OVERRIDES
============================================================ */

/* Mobile: smaller hero logo, tighter padding */
@media (max-width: 479px) {
    .gh-hero-logo__img { height: 160px; }
    .gh-hero-content   { padding-top: 48px; padding-bottom: 56px; }
    .gh-status-expanded { gap: 14px; padding: 14px 16px; }
    .gh-cta-corner { display: none; }

    /* Hide bar + last-update on very small screens */
    .gh-status-strip .guest-server-status__bar-wrap,
    .gh-status-strip .guest-server-status__stat:last-child { display: none; }
}

/* Tablet 480–767 */
@media (min-width: 480px) and (max-width: 767px) {
    .gh-hero-logo__img { height: 180px; }
    .gh-status-strip .guest-server-status__stat:last-child { display: none; }
}

/* Tablet 768–1023: 2-col feature grid */
@media (min-width: 768px) and (max-width: 1023px) {
    .gh-features-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop 1024+ — class grid handled by .guest-class-grid breakpoints above */
@media (min-width: 1024px) {
    .gh-hero-content { padding-top: 80px; padding-bottom: 96px; }
}

/* ============================================================
   === NEWS PAGES ===
   Styles for guest/news/index.blade.php and show.blade.php.
   All selectors prefixed .guest-news-* to avoid collisions.
============================================================ */

/* ---- News card grid ---- */
.guest-news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 600px) {
    .guest-news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .guest-news-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Card variant for news listing */
.guest-card--news {
    display: flex;
    flex-direction: column;
}

.guest-card--news .guest-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.guest-card--news .guest-card__excerpt {
    flex: 1;
}

/* Fallback gradient when a news post has no image */
.guest-card__media-placeholder {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 70% 60% at 50% 30%, rgba(212, 175, 55, 0.14) 0%, transparent 65%),
        linear-gradient(180deg, #101525 0%, #0a0e1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.guest-card__media-placeholder::after {
    content: '';
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    background: rgba(212, 175, 55, 0.08);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.5'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}

/* ---- DB error / unavailability notice ---- */
.guest-news-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    background: rgba(212, 175, 55, 0.05);
    color: var(--g-muted);
    font-size: 14px;
    max-width: 560px;
    margin: 48px auto;
}

.guest-news-notice svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--g-gold);
}

/* ---- Pagination pills ---- */
.guest-news-pagination {
    margin-top: 52px;
    display: flex;
    justify-content: center;
}

.guest-news-pagination__inner {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.guest-pagination-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: var(--g-radius-pill);
    border: 1px solid var(--g-border-neu);
    background: rgba(255, 255, 255, 0.03);
    color: var(--g-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.guest-pagination-pill svg {
    width: 16px;
    height: 16px;
}

.guest-pagination-pill:hover {
    border-color: rgba(212, 175, 55, 0.40);
    background: rgba(212, 175, 55, 0.08);
    color: var(--g-gold-lt);
}

.guest-pagination-pill--active {
    border-color: rgba(212, 175, 55, 0.55);
    background: rgba(212, 175, 55, 0.14);
    color: var(--g-gold-lt);
    cursor: default;
    pointer-events: none;
}

.guest-pagination-pill--disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* ---- Article breadcrumb ---- */
.guest-breadcrumb {
    margin-bottom: 20px;
}

.guest-breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12.5px;
    color: var(--g-muted);
}

.guest-breadcrumb a {
    color: var(--g-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.guest-breadcrumb a:hover {
    color: var(--g-gold-lt);
}

.guest-breadcrumb__sep {
    color: rgba(255, 255, 255, 0.18);
    padding: 0 2px;
}

.guest-breadcrumb__current {
    color: var(--g-gold-text);
    font-weight: 600;
}

/* ---- Article featured image ---- */
.guest-article__figure {
    margin: 0 0 36px;
}

.guest-article__featured-img {
    width: 100%;
    max-height: 440px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid var(--g-border-neu);
    display: block;
}

/* ---- Article body prose (supplements rules in CARD SYSTEM section) ---- */
.guest-article__body h2 {
    /* Gold accent left border */
    padding-left: 14px;
    border-left: 3px solid var(--g-gold);
}

.guest-article__body h3 {
    padding-left: 10px;
    border-left: 2px solid rgba(212, 175, 55, 0.45);
}

/* ---- Prev / Next article navigation ---- */
.guest-news-prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--g-border-gold);
}

.guest-news-prevnext__item {
    min-width: 0;
}

.guest-news-prevnext__item--next {
    text-align: right;
}

.guest-news-prevnext__link {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    max-width: 100%;
}

.guest-news-prevnext__link--empty {
    pointer-events: none;
    visibility: hidden;
}

.guest-news-prevnext__link--right {
    align-items: flex-end;
}

.guest-news-prevnext__dir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--g-gold);
    transition: color 0.18s ease;
}

.guest-news-prevnext__dir svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.guest-news-prevnext__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--g-muted);
    line-height: 1.4;
    transition: color 0.18s ease;
    /* Truncate long titles to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.guest-news-prevnext__link:hover .guest-news-prevnext__dir {
    color: var(--g-gold-lt);
}

.guest-news-prevnext__link:hover .guest-news-prevnext__title {
    color: var(--g-text);
}

/* Mobile: stack prev/next vertically */
@media (max-width: 599px) {
    .guest-news-prevnext {
        grid-template-columns: 1fr;
    }

    .guest-news-prevnext__item--next {
        text-align: left;
    }

    .guest-news-prevnext__link--right {
        align-items: flex-start;
    }
}

/* ============================================================
   === RANKINGS PAGE ===
   Selectors prefixed .rk- to avoid collisions.
============================================================ */

/* ---- Tab row ---- */
.rk-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--g-border-neu);
    width: fit-content;
    margin-bottom: 28px;
}

.rk-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--g-muted);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.rk-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.rk-tab.is-active {
    background: rgba(212, 175, 55, 0.16);
    color: var(--g-gold-lt);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.28);
}

.rk-tab:hover:not(.is-active) {
    color: var(--g-text);
    background: rgba(255,255,255,0.07);
}

/* ---- Panel visibility ---- */
.rk-panel { display: none; }
.rk-panel.is-active { display: block; }

/* ---- Top-3 row highlights ---- */
.rk-row--top-1 td {
    background: rgba(255, 215, 0, 0.05);
    border-bottom-color: rgba(255, 215, 0, 0.14) !important;
}
.rk-row--top-1:hover td { background: rgba(255, 215, 0, 0.09) !important; }

.rk-row--top-2 td {
    background: rgba(192, 192, 192, 0.04);
    border-bottom-color: rgba(192, 192, 192, 0.12) !important;
}
.rk-row--top-2:hover td { background: rgba(192, 192, 192, 0.08) !important; }

.rk-row--top-3 td {
    background: rgba(205, 127, 50, 0.04);
    border-bottom-color: rgba(205, 127, 50, 0.12) !important;
}
.rk-row--top-3:hover td { background: rgba(205, 127, 50, 0.08) !important; }

/* Row hover (non-top) */
.guest-table tbody tr:hover td {
    background: rgba(255,255,255,0.032);
    cursor: default;
}

/* ---- Medal icons ---- */
.rk-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid transparent;
}

.rk-medal--gold {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.30);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.18);
}

.rk-medal--silver {
    color: #c0c0c0;
    background: rgba(192, 192, 192, 0.10);
    border-color: rgba(192, 192, 192, 0.25);
    box-shadow: 0 0 10px rgba(192, 192, 192, 0.12);
}

.rk-medal--bronze {
    color: #cd7f32;
    background: rgba(205, 127, 50, 0.10);
    border-color: rgba(205, 127, 50, 0.25);
    box-shadow: 0 0 10px rgba(205, 127, 50, 0.15);
}

/* ---- Class badge pills ---- */
.rk-class-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--g-radius-pill);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid rgba(212, 175, 55, 0.28);
    background: rgba(212, 175, 55, 0.08);
    color: var(--g-gold-lt);
    white-space: nowrap;
}

/* Per-class colour tints */
.rk-class--warrior     { border-color: rgba(239, 68, 68, 0.30); background: rgba(239, 68, 68, 0.08); color: #fca5a5; }
.rk-class--mage        { border-color: rgba(139, 92, 246, 0.30); background: rgba(139, 92, 246, 0.08); color: #c4b5fd; }
.rk-class--priest      { border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.08); color: #fde68a; }
.rk-class--assassin    { border-color: rgba(52, 211, 153, 0.30); background: rgba(52, 211, 153, 0.08); color: #6ee7b7; }
.rk-class--marksman    { border-color: rgba(56, 189, 248, 0.30); background: rgba(56, 189, 248, 0.08); color: #7dd3fc; }
.rk-class--protector   { border-color: rgba(249, 115, 22, 0.30); background: rgba(249, 115, 22, 0.08); color: #fdba74; }
.rk-class--vampire     { border-color: rgba(236, 72, 153, 0.30); background: rgba(236, 72, 153, 0.08); color: #f9a8d4; }
.rk-class--bard        { border-color: rgba(16, 185, 129, 0.30); background: rgba(16, 185, 129, 0.08); color: #6ee7b7; }
.rk-class--reaper      { border-color: rgba(148, 163, 184, 0.28); background: rgba(148, 163, 184, 0.06); color: #cbd5e1; }

/* ---- Score column ---- */
.rk-score {
    font-weight: 700;
    color: var(--g-gold-lt);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rk-col-score { text-align: right; }
.rk-score     { text-align: right; }

/* ---- Guild leader cell ---- */
.rk-guild-leader {
    color: var(--g-muted);
    font-size: 13px;
}

/* ---- Update notice ---- */
.rk-update-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 12px;
    color: var(--g-muted);
}

.rk-update-notice svg { flex-shrink: 0; }

/* ---- Responsive ---- */
@media (max-width: 479px) {
    .rk-tabs { flex-wrap: wrap; width: 100%; }
    .rk-tab  { flex: 1; justify-content: center; }
    /* Hide class column on tiny screens */
    .guest-table th:nth-child(3),
    .guest-table td:nth-child(3) { display: none; }
}

@media (max-width: 767px) {
    /* Hide guild column from player table on mobile */
    .guest-table .guest-table__kills { display: none; }
}

/* ============================================================
   === DOWNLOADS PAGE ===
   Selectors prefixed .dl- to avoid collisions.
============================================================ */

/* ---- Mirror cards grid ---- */
.dl-mirrors-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

@media (min-width: 480px) {
    .dl-mirrors-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .dl-mirrors-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Mirror card ---- */
.dl-mirror-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 28px 20px 22px;
    border-radius: var(--g-radius-card);
    border: 1px solid var(--g-border-neu);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.007)),
        var(--g-bg-card);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.dl-mirror-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--g-gold), transparent);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.dl-mirror-card:hover {
    transform: translateY(-5px);
    border-color: var(--g-border-gold);
    box-shadow:
        0 12px 40px rgba(0,0,0,0.35),
        0 0 0 1px rgba(212, 175, 55, 0.12),
        0 0 30px rgba(212, 175, 55, 0.07);
}

.dl-mirror-card:hover::before { opacity: 1; }

/* Card icon wrapper */
.dl-mirror-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    background: rgba(212, 175, 55, 0.07);
    color: var(--g-gold);
    transition: background 0.22s ease, box-shadow 0.22s ease;
    flex-shrink: 0;
}

.dl-mirror-card__icon svg { width: 26px; height: 26px; }
.dl-mirror-card:hover .dl-mirror-card__icon {
    background: rgba(212, 175, 55, 0.14);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.18);
}

.dl-mirror-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dl-mirror-card__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--g-text);
    transition: color 0.18s ease;
}

.dl-mirror-card:hover .dl-mirror-card__name { color: var(--g-gold-lt); }

.dl-mirror-card__size {
    font-size: 12px;
    color: var(--g-muted);
}

/* Recommended badge */
.dl-mirror-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 10px;
    border-radius: var(--g-radius-pill);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--g-gold-lt), var(--g-gold));
    color: #1a1200;
}

/* Download button inside card */
.dl-mirror-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 20px;
    border-radius: var(--g-radius-pill);
    background: linear-gradient(135deg, var(--g-gold-lt) 0%, var(--g-gold) 60%, var(--g-gold-dk) 100%);
    color: #1a1200;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-top: 4px;
    box-shadow: 0 2px 12px rgba(184, 135, 10, 0.28);
    transition: filter 0.18s ease, box-shadow 0.18s ease;
}

.dl-mirror-card:hover .dl-mirror-card__btn {
    filter: brightness(1.08);
    box-shadow: 0 4px 20px rgba(184, 135, 10, 0.45);
}

/* ---- Note under mirrors ---- */
.dl-mirrors-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--g-muted);
    margin-top: 16px;
}

.dl-mirrors-note svg { flex-shrink: 0; color: var(--g-gold); }

/* ---- Requirements table ---- */
.dl-req-wrap {
    overflow-x: auto;
    border-radius: var(--g-radius-card);
    border: 1px solid var(--g-border-gold);
}

.dl-req-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.dl-req-table thead tr {
    background: linear-gradient(90deg, rgba(212,175,55,0.12), rgba(212,175,55,0.05));
    border-bottom: 1px solid rgba(212,175,55,0.22);
}

.dl-req-table th {
    padding: 14px 20px;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--g-gold);
    white-space: nowrap;
}

.dl-req-table td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--g-border-neu);
    vertical-align: middle;
}

.dl-req-table tbody tr:last-child td { border-bottom: none; }
.dl-req-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.016); }
.dl-req-table tbody tr:hover td { background: rgba(255,255,255,0.032); }

/* Spec label column */
.dl-req-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--g-text);
    white-space: nowrap;
}

.dl-req-icon {
    display: inline-flex;
    align-items: center;
    color: var(--g-gold);
    flex-shrink: 0;
}

.dl-req-min {
    color: var(--g-muted);
    font-size: 13px;
}

.dl-req-rec {
    color: var(--g-text);
    font-weight: 600;
    font-size: 13px;
}

/* Column header badges */
.dl-req-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 12px;
    border-radius: var(--g-radius-pill);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dl-req-badge--min {
    border: 1px solid rgba(148, 163, 184, 0.30);
    background: rgba(148, 163, 184, 0.08);
    color: #94a3b8;
}

.dl-req-badge--rec {
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(212, 175, 55, 0.10);
    color: var(--g-gold-lt);
}

/* ---- Installation steps ---- */
.dl-steps-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 740px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}

.dl-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 32px;
    border-radius: var(--g-radius-card);
    border: 1px solid var(--g-border-neu);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.006)),
        var(--g-bg-card);
    margin-bottom: 12px;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.dl-step:hover {
    border-color: var(--g-border-gold);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    transform: translateX(4px);
}

/* Step number badge */
.dl-step__number {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 34px;
    height: 34px;
    border-radius: var(--g-radius-card) 0 14px 0;
    background: linear-gradient(135deg, var(--g-gold), var(--g-gold-dk));
    color: #1a1200;
    font-size: 13px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

/* Step icon circle */
.dl-step__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    background: rgba(212, 175, 55, 0.07);
    color: var(--g-gold);
    flex-shrink: 0;
    margin-top: 4px;
    transition: background 0.22s ease, box-shadow 0.22s ease;
}

.dl-step:hover .dl-step__icon {
    background: rgba(212, 175, 55, 0.14);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.15);
}

.dl-step__content { flex: 1; min-width: 0; }

.dl-step__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--g-text);
    margin-bottom: 6px;
    line-height: 1.25;
}

.dl-step__desc {
    font-size: 13.5px;
    color: var(--g-muted);
    line-height: 1.6;
}

/* ---- FAQ accordion ---- */
.dl-faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 760px;
    margin: 0 auto;
}

.dl-faq-item {
    border-radius: 14px;
    border: 1px solid var(--g-border-neu);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.006)),
        var(--g-bg-card);
    overflow: hidden;
    transition: border-color 0.22s ease;
}

.dl-faq-item[open] {
    border-color: rgba(212, 175, 55, 0.28);
}

.dl-faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--g-text);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color 0.18s ease, background 0.18s ease;
}

.dl-faq-item__question::-webkit-details-marker { display: none; }
.dl-faq-item__question::marker { display: none; }

.dl-faq-item__question:hover {
    color: var(--g-gold-lt);
    background: rgba(212, 175, 55, 0.04);
}

.dl-faq-item[open] .dl-faq-item__question {
    color: var(--g-gold-lt);
    background: rgba(212, 175, 55, 0.05);
    border-bottom: 1px solid rgba(212, 175, 55, 0.14);
}

/* Chevron rotation */
.dl-faq-item__chevron {
    flex-shrink: 0;
    color: var(--g-muted);
    transition: transform 0.25s ease, color 0.18s ease;
}

.dl-faq-item[open] .dl-faq-item__chevron {
    transform: rotate(180deg);
    color: var(--g-gold);
}

.dl-faq-item__answer {
    padding: 16px 22px 20px;
    font-size: 13.5px;
    color: var(--g-muted);
    line-height: 1.7;
}

/* ---- Responsive ---- */
@media (max-width: 479px) {
    .dl-step { padding: 22px 16px 22px 20px; gap: 14px; }
    .dl-step__number { display: none; }
    .dl-req-table th:nth-child(2),
    .dl-req-table td:nth-child(2) { display: none; } /* hide "min" on tiny screens */
}

@media (max-width: 767px) {
    .dl-mirror-card { padding: 22px 16px 18px; }
    .dl-step { flex-direction: column; }
}

/* ============================================================
   === ABOUT PAGE ===
   Selectors prefixed .ab- to avoid collisions.
============================================================ */

/* ---- Introduction 2-column layout ---- */
.ab-intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .ab-intro { grid-template-columns: 1fr 340px; }
}

@media (min-width: 1024px) {
    .ab-intro { grid-template-columns: 1fr 400px; }
}

.ab-intro__para {
    font-size: 16px;
    line-height: 1.8;
    color: var(--g-muted);
    margin-bottom: 18px;
}

.ab-intro__para:last-child { margin-bottom: 0; }

/* SVG emblem visual */
.ab-intro__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ab-intro__emblem {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 40%, rgba(212,175,55,0.08) 0%, transparent 70%);
    border: 1px solid var(--g-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ab-emblem-spin 60s linear infinite;
    box-shadow:
        0 0 40px rgba(212,175,55,0.10),
        0 0 0 12px rgba(212,175,55,0.04),
        0 8px 40px rgba(0,0,0,0.4);
}

.ab-intro__emblem svg {
    width: 160px;
    height: 160px;
    animation: ab-emblem-counter 60s linear infinite;
}

@keyframes ab-emblem-spin    { to { transform: rotate(360deg); } }
@keyframes ab-emblem-counter { to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ab-intro__emblem, .ab-intro__emblem svg { animation: none; }
}

/* Hide emblem on very small phones to save space */
@media (max-width: 479px) {
    .ab-intro__visual { display: none; }
}

/* ---- Stats strip ---- */
.ab-stats-section {
    padding: 56px 0;
}

.ab-stats-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (min-width: 600px) {
    .ab-stats-strip { grid-template-columns: repeat(4, 1fr); }
}

.ab-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 28px 16px;
    border-radius: var(--g-radius-card);
    border: 1px solid var(--g-border-gold);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.09) 0%, transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)),
        var(--g-bg-card);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.ab-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--g-gold), transparent);
    opacity: 0.7;
}

.ab-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.ab-stat__icon {
    color: var(--g-gold);
    opacity: 0.75;
}

.ab-stat__value {
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 900;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #f5e4a4, var(--g-gold-lt) 50%, var(--g-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.ab-stat__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--g-muted);
}

/* ---- Features grid ---- */
.ab-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 480px) {
    .ab-features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .ab-features-grid { grid-template-columns: repeat(3, 1fr); }
}

.ab-feature-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--g-text);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.ab-feature-desc {
    font-size: 13.5px;
    color: var(--g-muted);
    line-height: 1.65;
}

/* ---- Roadmap (Done / In Progress / Planned) ---- */
.ab-roadmap-section { padding-top: 56px; padding-bottom: 56px; }

.ab-roadmap-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 28px;
}
@media (min-width: 768px) {
    .ab-roadmap-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

.ab-roadmap-col {
    position: relative;
    padding: 24px 24px 26px;
    border-radius: 16px;
    border: 1px solid var(--g-border-neu);
    background: var(--g-bg-card);
    box-shadow: 0 12px 32px rgba(0,0,0,0.28);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.ab-roadmap-col:hover {
    transform: translateY(-3px);
    border-color: var(--g-border-gold);
    box-shadow: 0 16px 40px rgba(0,0,0,0.40), 0 0 0 1px rgba(212,175,55,0.16);
}

.ab-roadmap-col__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ab-roadmap-col__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
}
.ab-roadmap-col__icon svg { width: 18px; height: 18px; }
.ab-roadmap-col__icon--done {
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.32);
    color: #4ade80;
}
.ab-roadmap-col__icon--progress {
    background: rgba(240, 198, 116, 0.14);
    border: 1px solid rgba(240, 198, 116, 0.38);
    color: var(--g-gold-lt);
    animation: ab-roadmap-spin 6s linear infinite;
}
@keyframes ab-roadmap-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.ab-roadmap-col__icon--planned {
    background: rgba(92, 167, 255, 0.10);
    border: 1px solid rgba(92, 167, 255, 0.30);
    color: #5ca7ff;
}

.ab-roadmap-col__title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--g-text);
}
.ab-roadmap-col--done    .ab-roadmap-col__title { color: #4ade80; }
.ab-roadmap-col--progress .ab-roadmap-col__title { color: var(--g-gold-lt); }
.ab-roadmap-col--planned .ab-roadmap-col__title { color: #82c0ff; }

.ab-roadmap-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ab-roadmap-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--g-text);
    border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.ab-roadmap-list li:last-child { border-bottom: 0; }

.ab-roadmap-bullet {
    flex-shrink: 0;
    display: inline-block;
    width: 18px;
    text-align: center;
    font-weight: 800;
    font-size: 13px;
    line-height: 1.55;
}
.ab-roadmap-col--done    .ab-roadmap-bullet { color: #4ade80; }
.ab-roadmap-col--progress .ab-roadmap-bullet { color: var(--g-gold-lt); }
.ab-roadmap-col--planned .ab-roadmap-bullet { color: #5ca7ff; }

/* ---- Team cards ---- */
.ab-team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 480px) {
    .ab-team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .ab-team-grid { grid-template-columns: repeat(4, 1fr); }
}

.ab-team-card {
    position: relative;
    padding: 28px 22px 26px;
    border-radius: var(--g-radius-card);
    border: 1px solid var(--g-border-neu);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.006)),
        var(--g-bg-card);
    text-align: center;
    transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
    overflow: hidden;
}

.ab-team-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.40), transparent);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.ab-team-card:hover {
    border-color: var(--g-border-gold);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.28);
}

.ab-team-card:hover::before { opacity: 1; }

.ab-team-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: 1px solid rgba(212,175,55,0.25);
    background: rgba(212,175,55,0.08);
    color: var(--g-gold);
    margin: 0 auto 16px;
    transition: background 0.22s ease, box-shadow 0.22s ease;
}

.ab-team-card:hover .ab-team-card__icon {
    background: rgba(212,175,55,0.14);
    box-shadow: 0 0 16px rgba(212,175,55,0.15);
}

.ab-team-card__icon svg { width: 26px; height: 26px; }

.ab-team-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--g-text);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.ab-team-card__desc {
    font-size: 12.5px;
    color: var(--g-muted);
    line-height: 1.65;
}

/* ---- Final CTA strip ---- */
.ab-final-cta {
    /* inherits .guest-cta — no overrides needed */
}

/* ============================================================
   === ADMIN.CSS GLOBAL NEUTRALIZER ===
   admin.css is loaded before guest.css and contains bare element
   selectors (button, select, input, table, th, td, h2, p, a, body)
   that leak into guest pages. This block resets them under the
   .guest-page scope so they cannot override guest-zone components.

   Rules here are placed LAST so they win over admin.css globals.
   DO NOT modify admin.css — patch here instead.
============================================================ */

/* ---- button: reset admin gold gradient on all guest buttons ---- */
/* Admin: button { min-height: 38px; background: linear-gradient(#e0b253,#b98525);
   color: #18140e; border: 1px solid rgba(216,169,75,0.44); border-radius: 10px; } */
.guest-page button {
    background: none;
    border: none;
    color: inherit;
    min-height: unset;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    font-weight: inherit;
    box-shadow: none;
    text-decoration: none;
}

/* Restore each specific guest button's own styles after the blanket reset above.
   These must be re-declared with at least .guest-page prefix to beat the reset. */
.guest-page .guest-topbar__hamburger {
    display: none; /* base desktop; media queries below set it to flex */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.guest-page .guest-topbar__hamburger:hover {
    border-color: var(--g-border-gold);
    background: rgba(212, 175, 55, 0.08);
}

.guest-page .guest-nav-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    background: transparent;
    color: var(--g-muted);
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s;
}
.guest-page .guest-nav-drawer__close:hover {
    border-color: rgba(212, 175, 55, 0.35);
    color: var(--g-gold-lt);
}

.guest-page .rk-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--g-muted);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.guest-page .rk-tab.is-active {
    background: rgba(212, 175, 55, 0.16);
    color: var(--g-gold-lt);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.28);
}
.guest-page .rk-tab:hover:not(.is-active) {
    color: var(--g-text);
    background: rgba(255,255,255,0.07);
}

/* Note: .btn-gold and .btn-ghost are used on <a> elements (not <button>), so
   admin.css's bare `button {}` selector does NOT affect them. No override needed. */

/* ---- select: prevent admin width:100% from stretching locale selector ---- */
/* Admin: select { width: 100%; padding: 10px 12px; background: #0a1019; font-size:13px } */
/* .topbar__locale-select already sets its own styles (class beats element),
   but we add an explicit width guard at .guest-page level for safety. */
.guest-page .topbar__locale-select {
    width: auto;
}

/* ---- a: admin sets color:#8cc3ff — guest-page already overrides via .guest-page a,
   but topbar nav links need an explicit guard since they sit in .guest-topbar ---- */
.guest-page .guest-topbar__nav a {
    color: var(--g-muted);
}
.guest-page .guest-topbar__nav a:hover {
    color: var(--g-gold-lt);
}
.guest-page .guest-topbar__nav a.is-active {
    color: var(--g-gold);
}

/* ---- h2: admin sets font-size:18px. We only neutralize bare <h2> with no class —
   class-bearing component titles (.guest-section__title, .guest-cta__title,
   .site-footer__heading) keep their own sizes. ---- */
.guest-page h2:not([class]) {
    font-size: clamp(22px, 4vw, 36px);
}

/* ---- p: admin adds margin-bottom:12px — .guest-page p already resets to margin:0
   (line ~85 above), so this is already handled. Listed here for documentation only. ---- */

/* ---- Hamburger display sync — match the original 1024px breakpoint, not 768 ---- */
@media (max-width: 1023px) {
    .guest-page .guest-topbar__hamburger { display: flex; }
}
@media (min-width: 1024px) {
    .guest-page .guest-topbar__hamburger { display: none; }
}

/* ---- Footer link hover should stay gold, not pure white from .guest-page a:hover ---- */
.guest-page .site-footer__column a:hover {
    color: var(--g-gold-lt);
}

/* ---- Cookie consent: it uses .button-primary which has no styles after the
   button reset. Restore a gold pill so the GDPR accept button is functional. ---- */
.guest-page .button-primary,
.guest-page button.button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 20px;
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: var(--g-radius-pill);
    background: linear-gradient(135deg, #f0c674 0%, #d4af37 50%, #b8870a 100%);
    color: #1a1308;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.18s ease;
}
.guest-page .button-primary:hover,
.guest-page button.button-primary:hover {
    filter: brightness(1.08);
}

/* ---- Above-the-fold reveal override — hero logo should never start at opacity:0
   since it is always visible on first paint, otherwise it flickers on slow loads ---- */
.gh-hero-logo.reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

/* ============================================================
   DESKTOP POLISH (post-audit)
   ============================================================ */

/* (Class portrait sizing now handled by full-bleed art-card layout above —
   the old 88px/96px circle overrides were removed in the cards_v3 redesign.) */

/* Compact hero — was visibly squat on inner pages at desktop after centering */
@media (min-width: 1024px) {
    .guest-hero--compact {
        padding: 80px 0 60px;
    }
}
.guest-hero--compact .guest-hero__subtitle {
    margin-bottom: 8px;
}

/* Section eyebrow — the inline-flex flex:1 ::before/::after lines never grew,
   so they read as random hyphens. Drop them entirely. */
.guest-section__eyebrow::before,
.guest-section__eyebrow::after {
    display: none;
}

/* Article back-link should keep its leftward directionality even when the hero
   inner is text-align:center */
.guest-hero--compact .guest-article__back {
    align-self: flex-start;
    text-align: left;
}

/* Online counter — push off the Windows scrollbar gutter on desktop */
@media (min-width: 1024px) {
    .ost-float-counter {
        right: 28px;
        bottom: 24px;
    }
}