/* ═══════════════════════════════════════
   HOME GROOVE — standalone design system
   All classes prefixed hg- to avoid conflicts
   ═══════════════════════════════════════ */

/* ── Google Fonts Import ────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Baloo+2:wght@400;500;600;700;800&display=swap');

/* ── Variables ─────────────────────────── */
:root {
    --bg:            #fff8ef;
    --surface:       rgba(255,255,255,0.85);
    --text:          #24152e;
    --muted:         #6c6077;
    --pink:          #ff4fa3;
    --coral:         #ff7a59;
    --orange:        #ffb703;
    --yellow:        #ffd84d;
    --violet:        #7d4dff;
    --mint:          #4dd9c2;
    --sky:           #66b7ff;
    --radius-xl:     32px;
    --radius-lg:     24px;
    --radius-md:     18px;
    --shadow-soft:   0 10px 30px rgba(0,0,0,0.08);
    --shadow-strong: 0 25px 60px rgba(0,0,0,0.18);

    --hg-bg:         #fff8ef;
    --hg-bg-soft:    #fff2df;
    --hg-surface:    rgba(255,255,255,0.82);
    --hg-text:       #24152e;
    --hg-muted:      #6c6077;
    --hg-pink:       #ff4fa3;
    --hg-coral:      #ff7a59;
    --hg-orange:     #ffb703;
    --hg-yellow:     #ffd84d;
    --hg-violet:     #7d4dff;
    --hg-mint:       #4dd9c2;
    --hg-sky:        #66b7ff;
    --hg-line:       rgba(50,20,80,0.08);
    --hg-shadow:     0 20px 50px rgba(78,34,100,0.12);
    --hg-shadow-sm:  0 10px 24px rgba(78,34,100,0.08);
    --hg-r-xl:       32px;
    --hg-r-lg:       24px;
    --hg-r-md:       18px;
    --hg-max:        1220px;

    /* Legacy public aliases so old public templates can live inside groove */
    --ez-bg:             var(--hg-bg);
    --ez-surface:        rgba(255,255,255,0.92);
    --ez-text:           var(--hg-text);
    --ez-text-soft:      var(--hg-muted);
    --ez-border:         rgba(50,20,80,0.1);
    --ez-primary-50:     #f4edff;
    --ez-primary-100:    #eadfff;
    --ez-primary-400:    var(--hg-violet);
    --ez-primary-500:    #6b38ff;
    --ez-primary-600:    #5a2fe0;
    --ez-secondary-50:   #e9fbf7;
    --ez-secondary-500:  #14b8a6;
    --ez-secondary-600:  #0f9f92;
    --ez-accent-500:     var(--hg-orange);
    --ez-accent-600:     #d97706;
    --ez-danger-500:     #ef4444;
    --ez-neutral-100:    #f6f1fb;
    --ez-neutral-300:    #d5c7e5;
    --ez-radius-md:      16px;
    --ez-shadow-md:      var(--hg-shadow-sm);
    --ez-gradient-primary: linear-gradient(135deg, var(--hg-violet), var(--hg-pink));
    --ez-gradient-dark:    linear-gradient(135deg, rgba(36,21,46,.96), rgba(80,30,100,.9));
    --ez-focus:            0 0 0 4px rgba(125,77,255,.12);
}

/* ── Reset ──────────────────────────────── */
.hg-body * { box-sizing: border-box; }
.hg-body { scroll-behavior: smooth; }
.hg-body a { color: inherit; text-decoration: none; }
.hg-body img { max-width: 100%; display: block; }
.visually-hidden-focusable {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.visually-hidden-focusable:focus {
    left: 16px;
    top: 16px;
    width: auto;
    height: auto;
    padding: 10px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--hg-text);
    box-shadow: var(--hg-shadow-sm);
    z-index: 1000;
}

/* ── Page background ────────────────────── */
.hg-body {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    color: var(--hg-text);
    background:
        radial-gradient(circle at 10% 20%, rgba(255,79,163,0.18), transparent 18%),
        radial-gradient(circle at 85% 8%,  rgba(125,77,255,0.18), transparent 20%),
        radial-gradient(circle at 80% 70%, rgba(77,217,194,0.16), transparent 20%),
        linear-gradient(180deg, #fff9f1 0%, #fff2e1 100%);
    min-height: 100vh;
    overflow-x: hidden;
 
}

/* Fixed ambient glow orbs */
.hg-body::before,
.hg-body::after {
    content: "";
    position: fixed;
    width: 340px; height: 340px;
    border-radius: 50%;
    filter: blur(70px);
    z-index: -2;
    opacity: 0.42;
    pointer-events: none;
}
.hg-body::before { top: -80px; left: -70px; background: rgba(255,122,89,0.38); }
.hg-body::after  { right: -90px; bottom: -120px; background: rgba(125,77,255,0.3); }

/* ── Wrapper ────────────────────────────── */
.hg-wrap {
    width: min(calc(100% - 32px), var(--hg-max));
    margin: 0 auto;
}

/* ── Animations ─────────────────────────── */
@keyframes hgFloaty {
    0%,100% { transform: translateY(0) rotate(var(--hg-r, 0deg)); }
    50%      { transform: translateY(-12px) rotate(calc(var(--hg-r, 0deg) + 1deg)); }
}
.hg-floaty { animation: hgFloaty 7s ease-in-out infinite; }
.hg-floaty.d1 { animation-delay: .7s; }
.hg-floaty.d2 { animation-delay: 1.4s; }
.hg-floaty.d3 { animation-delay: 2.1s; }

[data-hg-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s ease, transform .65s ease;
}
[data-hg-reveal].is-visible {
    opacity: 1;
    transform: none;
}
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .65s ease, transform .65s ease;
}
[data-reveal].visible {
    opacity: 1;
    transform: none;
}

/* ══════════════════════════════════════════
   TOPBAR / NAV
   ══════════════════════════════════════════ */
/* ── Topbar ──────────────────────────────────────────────────────────────────── */
.hg-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 12px 0;
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
    background: rgba(255,248,239,.94);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.35);
}

/* Transparent nav on home page (before scroll) */
.hg-page-home .hg-topbar {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    backdrop-filter: none;
}
.hg-page-home .hg-topbar.is-scrolled {
    background: rgba(255,248,239,.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 2px 20px rgba(50,20,80,.07);
}

.hg-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(36,21,46,0.92), rgba(80,30,100,0.88), rgba(36,21,46,0.92));
    background-size: 200% 200%;
    animation: hgShine 4s ease-in-out infinite;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    box-shadow: 0 8px 32px rgba(36,21,46,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    backdrop-filter: blur(20px);
}

@keyframes hgShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* On home page (transparent), the nav pill also goes transparent */
.hg-page-home .hg-topbar:not(.is-scrolled) .hg-nav {
    background: linear-gradient(135deg, rgba(36,21,46,0.85), rgba(80,30,100,0.8), rgba(36,21,46,0.85));
    background-size: 200% 200%;
    animation: hgShine 4s ease-in-out infinite;
    border-color: rgba(255,255,255,.2);
    box-shadow: 0 8px 32px rgba(36,21,46,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Brand: logo only */
.hg-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}
.hg-brand-logo-img {
    height: 36px;
    width: auto;
    display: block;
    border-radius: 10px;
}

/* Keep old class working if referenced anywhere */
.hg-brand-logo { width: 36px; height: 36px; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.hg-brand-logo img { width: 100%; height: 100%; object-fit: contain; }

/* Menu links */
.hg-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
}
.hg-menu a {
    padding: 8px 11px;
    border-radius: 999px;
    font-size: 0.88rem;
    color: rgba(255,255,255,.9);
    font-weight: 700;
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.hg-menu a:hover,
.hg-menu a[aria-current="page"] {
    background: rgba(255,255,255,.15);
    color: #fff;
}

.hg-menu-dropdown {
    position: relative;
}

.hg-menu-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.9);
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}

.hg-menu-dropdown-toggle:hover,
.hg-menu-dropdown:hover .hg-menu-dropdown-toggle,
.hg-menu-dropdown:focus-within .hg-menu-dropdown-toggle {
    background: rgba(255,255,255,.15);
    color: #fff;
}

.hg-menu-dropdown-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 240px;
    padding: 10px;
    display: grid;
    gap: 6px;
    background: rgba(36,21,46,.96);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    box-shadow: 0 20px 42px rgba(36,21,46,.34);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
    z-index: 70;
}

.hg-menu-dropdown:hover .hg-menu-dropdown-panel,
.hg-menu-dropdown:focus-within .hg-menu-dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.hg-menu-dropdown-panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 16px;
    background: transparent;
}

.hg-menu-dropdown-panel a:hover {
    background: rgba(255,255,255,.08);
}

/* Nav actions */
.hg-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.hg-btn--sm { padding: 7px 14px; font-size: .82rem; }

/* Account menu */
.hg-account-menu { position: relative; }
.hg-account-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(80,50,110,.08);
    font-weight: 700; font-size: .86rem;
    cursor: pointer; color: var(--hg-text);
    transition: background .2s;
    font-family: inherit;
}
.hg-account-btn:hover { background: #fff; }
.hg-account-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hg-violet), var(--hg-pink));
    color: #fff;
    font-size: .75rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hg-account-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
.hg-account-btn .fa-chevron-down { font-size: .7rem; transition: transform .2s; }
.hg-account-menu.is-open .hg-account-btn .fa-chevron-down { transform: rotate(180deg); }
.hg-account-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 48px rgba(50,20,80,.16);
    border: 1px solid rgba(125,77,255,.1);
    padding: 8px;
    z-index: 100;
}
.hg-account-menu.is-open .hg-account-dropdown { display: block; }
.hg-account-dropdown a,
.hg-account-logout {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: .9rem; font-weight: 600;
    color: var(--hg-text);
    transition: background .18s;
    background: none; border: none; width: 100%; cursor: pointer;
    font-family: inherit; text-align: left; text-decoration: none;
}
.hg-account-dropdown a:hover,
.hg-account-logout:hover { background: rgba(125,77,255,.08); color: var(--hg-violet); }
.hg-account-divider { height: 1px; background: rgba(125,77,255,.08); margin: 4px 0; }

/* Hamburger */
.hg-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 9px;
    background: rgba(255,255,255,.5);
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 12px;
    cursor: pointer;
    z-index: 60;
}
.hg-hamburger span {
    display: block;
    width: 22px; height: 2.5px;
    background: var(--hg-text);
    border-radius: 2px;
    transition: all .25s ease;
    transform-origin: center;
}
.hg-page-home .hg-topbar:not(.is-scrolled) .hg-hamburger span { background: #fff; }
.hg-hamburger.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hg-hamburger.is-active span:nth-child(2) { opacity: 0; }
.hg-hamburger.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Mobile menu — RIGHT slide-in panel ─────────────────────────────────────── */
.hg-mobile-menu {
    position: fixed;
    top: 0; right: 0;
    width: min(88vw, 340px);
    height: 100dvh;
    z-index: 200;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.hg-mobile-menu.is-open {
    transform: translateX(0);
    pointer-events: auto;
}
.hg-mobile-menu-panel {
    width: 100%; height: 100%;
    background: #fff;
    border-left: 1px solid rgba(125,77,255,.1);
    box-shadow: -8px 0 40px rgba(50,20,80,.18);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.hg-mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(125,77,255,.08);
}
.hg-mobile-close {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(125,77,255,.1);
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--hg-violet);
    font-size: 1rem;
    transition: background .18s;
}
.hg-mobile-close:hover { background: rgba(125,77,255,.2); }
.hg-mobile-nav {
    display: flex;
    flex-direction: column;
    padding: 12px 12px 0;
    flex: 1;
}
.hg-mobile-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--hg-text);
    transition: background .18s, color .18s;
}
.hg-mobile-nav a:hover { background: rgba(125,77,255,.08); color: var(--hg-violet); }
.hg-mobile-nav a i { width: 20px; text-align: center; color: var(--hg-violet); opacity: .7; }
.hg-mobile-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px 32px;
    border-top: 1px solid rgba(125,77,255,.08);
}
.hg-mobile-menu-actions .hg-btn {
    width: 100%; justify-content: center; padding: 13px 18px;
}

/* Backdrop */
.hg-mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(36,21,46,.5);
    backdrop-filter: blur(4px);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity .32s ease;
}
.hg-mobile-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ── Buttons ────────────────────────────── */
.hg-btn {
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    border-radius: 999px;
    transition: transform .22s ease, box-shadow .22s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    text-decoration: none;
}
.hg-btn:hover { transform: translateY(-2px); }

.hg-btn--primary {
    color: #fff;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--hg-pink), var(--hg-coral));
    box-shadow: 0 14px 28px rgba(255,79,163,0.26);
}
.hg-btn--primary:hover { box-shadow: 0 18px 34px rgba(255,79,163,0.34); color: #fff; }

.hg-btn--secondary {
    color: var(--hg-text);
    padding: 11px 16px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(80,50,110,0.08);
    box-shadow: 0 10px 22px rgba(74,48,88,0.08);
}
.hg-btn--ghost {
    color: var(--hg-violet);
    padding: 11px 16px;
    background: rgba(125,77,255,0.07);
    border: 1px solid rgba(125,77,255,0.15);
}

.hg-pill-btn {
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.92rem;
    border: 1px solid var(--hg-line);
    background: #fff;
    box-shadow: 0 8px 16px rgba(83,52,107,0.06);
    cursor: pointer;
    text-decoration: none;
    color: var(--hg-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform .2s, box-shadow .2s;
}
.hg-pill-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(83,52,107,0.1); }
.hg-pill-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--hg-pink), var(--hg-violet));
    border-color: transparent;
}
.hg-pill-btn--primary:hover { color: #fff; }

/* ══════════════════════════════════════════
   HERO
   ══════════════════════════════════════════ */
.hg-hero {
    padding: 28px 0 16px;
    position: relative;
    overflow: hidden;
}
.hero {
    position: relative;
    overflow: hidden;
}
.hg-hero::before {
    content: "";
    position: absolute;
    inset: 40px 0 auto;
    height: 560px;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,216,77,0.22), transparent 20%),
        radial-gradient(circle at 70% 10%, rgba(102,183,255,0.16), transparent 22%),
        radial-gradient(circle at 80% 70%, rgba(125,77,255,0.10), transparent 18%);
    z-index: -1;
    pointer-events: none;
}

.hg-hero-grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 28px;
    align-items: center;
    min-height: 700px;
}

/* Eyebrow pill */
.hg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.72);
    border-radius: 999px;
    color: #4b4561;
    font-weight: 800;
    font-size: 0.88rem;
    box-shadow: 0 10px 28px rgba(75,49,97,0.08);
    margin-bottom: 16px;
}
.hg-eyebrow-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hg-pink), var(--hg-orange));
    box-shadow: 0 0 0 5px rgba(255,79,163,0.14);
    flex-shrink: 0;
}

/* Hero copy */
.hg-hero-copy h1 {
    margin: 0;
    font-family: 'Baloo 2', cursive;
    font-size: clamp(2.8rem, 5.8vw, 5.8rem);
    line-height: 0.9;
    letter-spacing: -0.045em;
    max-width: 11ch;
}
.hg-hero-copy h1 .hg-stroke {
    color: transparent;
    -webkit-text-stroke: 2px var(--hg-violet);
}
.hg-hero-copy p {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.7;
    color: var(--hg-muted);
    max-width: 60ch;
    margin: 18px 0 0;
}

.hg-hero-actions {
    margin-top: 26px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Chip cloud */
.hg-chip-cloud {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.hg-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: -0.02em;
    color: var(--hg-text);
    border: 1px solid rgba(40,20,60,0.06);
    box-shadow: 0 8px 18px rgba(81,48,92,0.07);
    transition: transform .2s;
    text-decoration: none;
}
.hg-chip:hover { transform: translateY(-2px); }
.hg-chip:nth-child(1) { background: #fff0f6; }
.hg-chip:nth-child(2) { background: #fff7dd; }
.hg-chip:nth-child(3) { background: #eaf8ff; }
.hg-chip:nth-child(4) { background: #f1ecff; }
.hg-chip:nth-child(5) { background: #e7fff8; }
.hg-chip:nth-child(6) { background: #fff1e6; }

/* ── Hero Visual / Poster Stage ─────────── */
.hg-hero-visual {
    position: relative;
    overflow: clip;          /* contain absolutely-positioned stickers */
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 24px;
}

.hg-poster {
    border-radius: var(--hg-r-xl);
    box-shadow: var(--hg-shadow);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.68);
    backdrop-filter: blur(10px);
    position: relative;      /* flow layout — no absolute overlap */
}

/* Main poster — takes full column width, slight tilt */
.hg-poster--main {
    width: 100%;
    background: linear-gradient(145deg, #2d1640, #502f7f 58%, #ff5dad 130%);
    color: #fff;
    padding: 24px;
    transform: rotate(1.5deg);
    transform-origin: center top;
    transition: transform .35s ease;
}
.hg-poster--main:hover { transform: rotate(0.5deg) translateY(-3px); }

.hg-poster--main .hg-poster-img {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hg-poster--main .hg-poster-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.28;
    transition: opacity .35s ease;
}
.hg-poster--main:hover .hg-poster-img img { opacity: 0.38; }
.hg-poster--main .hg-poster-content {
    position: relative;
    z-index: 1;
}
.hg-poster-badge-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.hg-poster-badge {
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    font-weight: 800;
    font-size: 0.82rem;
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(10px);
    color: #fff;
}
.hg-poster--main h2 {
    margin: 0;
    font-family: 'Baloo 2', cursive;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
    max-width: 10ch;
    color: #fff;
}
.hg-poster--main p {
    margin: 10px 0 18px;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    font-size: 0.95rem;
    max-width: 32ch;
}
.hg-poster-meta {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}
.hg-poster-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
    font-size: 0.9rem;
}
.hg-poster-meta-row strong { color: #fff; }

/* Side poster */
.hg-poster--side {
    position: absolute;
    left: 8px;
    top: 168px;
    width: min(100%, 230px);
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(255,245,232,0.92));
    padding: 16px;
    transform: rotate(-8deg);
    color: var(--hg-text);
}
.hg-poster--mini {
    position: absolute;
    right: 0;
    bottom: 34px;
    width: min(100%, 260px);
    padding: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(248,246,255,0.94));
    transform: rotate(-4deg);
    color: var(--hg-text);
}
.hg-poster--side h3,
.hg-poster--mini h3 {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--hg-text);
}

.hg-mini-list { display: grid; gap: 8px; }
.hg-mini-item {
    padding: 10px 12px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--hg-line);
    box-shadow: 0 8px 20px rgba(82,51,106,0.06);
}
.hg-mini-item strong { display: block; font-size: 0.9rem; margin-bottom: 3px; color: var(--hg-text); }
.hg-mini-item span   { color: var(--hg-muted); font-size: 0.83rem; }

/* Stickers */
.hg-sticker {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 16px;
    border-radius: 20px;
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    line-height: 0.95;
    font-size: 0.9rem;
    box-shadow: 0 14px 28px rgba(72,34,98,0.16);
    border: 1px solid rgba(255,255,255,0.58);
    backdrop-filter: blur(12px);
    z-index: 10;
}
.sticker {
    position: absolute;
    padding: 10px 14px;
    border-radius: 16px;
    font-weight: 800;
    transform: rotate(-10deg);
}
.sticker-yellow { background: var(--yellow); }
.sticker-pink { background: var(--pink); color: white; }
.hg-sticker--yellow {
    top: 34px; left: 18px;
    background: linear-gradient(135deg, #fff38a, #ffb703);
    color: #4a2d00;
    transform: rotate(-12deg);
    --hg-r: -12deg;
}
.hg-sticker--pink {
    top: 106px; right: 12px;
    background: linear-gradient(135deg, #ff5daa, #ff7a59);
    color: #fff;
    transform: rotate(8deg);
    --hg-r: 8deg;
}
.hg-sticker--teal {
    left: 42px; bottom: 120px;
    background: linear-gradient(135deg, #74ecff, #4dd9c2);
    color: #07373d;
    transform: rotate(10deg);
    --hg-r: 10deg;
}

/* Enhanced hero container with subtle parallax and depth */
.hg-hero-grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 28px;
    align-items: center;
    min-height: 700px;
    position: relative;
    perspective: 1000px;
}
/* ── Stickers (float over poster card) ─── */
.hg-sticker {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 14px;
    border-radius: 18px;
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    line-height: 1;
    font-size: 0.85rem;
    box-shadow: 0 12px 24px rgba(72,34,98,0.18);
    border: 1px solid rgba(255,255,255,0.58);
    backdrop-filter: blur(10px);
    z-index: 10;
    pointer-events: none;
}
.hg-sticker--yellow {
    top: -8px; left: -8px;
    background: linear-gradient(135deg, #fff38a, #ffb703);
    color: #4a2d00;
    transform: rotate(-10deg);
}
.hg-sticker--teal {
    top: -8px; right: -8px;
    background: linear-gradient(135deg, #74ecff, #4dd9c2);
    color: #07373d;
    transform: rotate(8deg);
}

/* Poster actions row */
.hg-poster-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

/* Zone activity strip (below poster) */
.hg-zone-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: rgba(255,255,255,0.72);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.72);
    box-shadow: var(--hg-shadow-sm);
}
.hg-zone-strip-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--hg-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.hg-zone-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(125,77,255,0.08);
    border: 1px solid rgba(125,77,255,0.15);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--hg-text);
}
.hg-zone-chip em {
    font-style: normal;
    font-size: 0.74rem;
    color: var(--hg-violet);
    font-weight: 800;
}

/* ── Poster card (new hero visual) ─────────────────────────────────────────── */
.hg-poster-wrap {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}
.hg-poster-bubble {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 76px; height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hg-pink), var(--hg-violet));
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10;
    box-shadow: 0 10px 28px rgba(125,77,255,.32);
    border: 3px solid rgba(255,255,255,.6);
}
.hg-poster-bubble strong {
    font-family: 'Baloo 2', cursive;
    font-size: 1.3rem;
    line-height: 1;
    font-weight: 900;
}
.hg-poster-bubble span {
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .88;
}
.hg-poster-label {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.3);
}
.hg-poster-card {
    border-radius: 28px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 56px rgba(50,20,80,.2);
    border: 1px solid rgba(255,255,255,.7);
    width: 100%;
}
.hg-poster-cover {
    position: relative;
    height: 200px;
    overflow: hidden;
}
.hg-poster-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.hg-poster-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.05) 0%, rgba(0,0,0,.45) 100%);
}
.hg-poster-body {
    padding: 18px 20px 20px;
}
.hg-poster-badge-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.hg-poster-badge {
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(125,77,255,.1);
    border: 1px solid rgba(125,77,255,.14);
    font-weight: 800;
    font-size: .76rem;
    color: var(--hg-violet);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.hg-poster-body h2 {
    margin: 0 0 6px;
    font-family: 'Baloo 2', cursive;
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    line-height: 0.98;
    letter-spacing: -.04em;
    color: var(--hg-text);
}
.hg-poster-body p {
    margin: 0 0 12px;
    font-size: .88rem;
    color: var(--hg-muted);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hg-poster-fact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: .82rem;
    color: var(--hg-muted);
    margin-bottom: 14px;
}
.hg-poster-fact-row span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.hg-poster-ctas {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════
   STATS STRIP
   ══════════════════════════════════════════ */
.hg-stats-strip {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.hg-stat {
    padding: 16px;
    border-radius: var(--hg-r-lg);
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.72);
    box-shadow: 0 10px 22px rgba(71,45,87,0.08);
}
.hg-stat strong {
    display: block;
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin-bottom: 5px;
    color: var(--hg-text);
}
.hg-stat span { color: var(--hg-muted); font-size: 0.88rem; line-height: 1.45; }

/* ══════════════════════════════════════════
   SECTIONS (shared)
   ══════════════════════════════════════════ */
.hg-section { padding: 36px 0; position: relative; }

.hg-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}
.hg-section-head h2 {
    margin: 0;
    font-family: 'Baloo 2', cursive;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--hg-text);
}
.hg-section-head p { margin: 8px 0 0; color: var(--hg-muted); max-width: 56ch; line-height: 1.65; }
.hg-section-link {
    font-weight: 800;
    color: var(--hg-violet);
    white-space: nowrap;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.hg-section-link:hover { color: var(--hg-pink); }

/* ══════════════════════════════════════════
   SEARCH
   ══════════════════════════════════════════ */
.hg-search-shell {
    position: relative;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,0.84), rgba(255,245,232,0.84));
    border-radius: 32px;
    border: 1px solid rgba(255,255,255,0.82);
    box-shadow: var(--hg-shadow);
    overflow: hidden;
}
.search-box {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(12px);
    border-radius: 30px;
    padding: 20px;
    box-shadow: var(--shadow-soft);
}
.hg-search-shell::before {
    content: "";
    position: absolute;
    right: -80px; top: -80px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,79,163,0.16), transparent 60%);
}
.hg-search-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr auto;
    gap: 12px;
    align-items: center;
    position: relative;
}
.hg-field { display: grid; gap: 7px; }
.hg-field label {
    font-size: 0.82rem;
    font-weight: 800;
    color: #574d66;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hg-field input,
.hg-field select {
    width: 100%;
    border: 1px solid rgba(68,36,92,0.08);
    background: #fff;
    border-radius: 16px;
    padding: 14px 15px;
    font: inherit;
    color: var(--hg-text);
    box-shadow: 0 8px 18px rgba(82,52,105,0.06);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.hg-field input:focus,
.hg-field select:focus {
    border-color: rgba(125,77,255,0.35);
    box-shadow: 0 0 0 3px rgba(125,77,255,0.08);
}

.hg-quick-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.hg-quick-tags button {
    border: 0;
    padding: 10px 13px;
    border-radius: 999px;
    font: inherit;
    font-weight: 800;
    font-size: 0.88rem;
    cursor: pointer;
    background: rgba(255,255,255,0.72);
    box-shadow: 0 8px 16px rgba(83,52,107,0.07);
    transition: transform .2s, background .2s, color .2s;
    color: var(--hg-text);
}
.quick-tag {
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: bold;
    background: #fff;
}
.hg-quick-tags button:hover,
.hg-quick-tags button.is-active {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #fff, #fff4fb);
    color: var(--hg-pink);
}

/* ══════════════════════════════════════════
   EVENTS GRID
   ══════════════════════════════════════════ */
.hg-events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.hg-event-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(255,255,255,0.78);
    box-shadow: var(--hg-shadow);
    transition: transform .28s ease, box-shadow .28s ease;
    transform-origin: center;
}
.event-card {
    border-radius: 28px;
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-soft);
    transition: 0.3s;
}
.hg-event-card:hover {
    transform: translateY(-8px) rotate(-0.5deg);
    box-shadow: 0 28px 52px rgba(75,41,95,0.16);
}
.event-card:hover {
    transform: rotate(-1deg) translateY(-6px);
}
.hg-events-grid .hg-event-card:nth-child(2n),
.hg-cards-3 .hg-feature-card:nth-child(2n),
.hg-stack-list .hg-listing-card:nth-child(2n) {
    transform: rotate(.6deg);
}
.hg-events-grid .hg-event-card:nth-child(3n),
.hg-cards-3 .hg-feature-card:nth-child(3n),
.hg-stack-list .hg-listing-card:nth-child(3n) {
    transform: rotate(-.65deg);
}
.hg-events-grid .hg-event-card:hover,
.hg-cards-3 .hg-feature-card:hover,
.hg-stack-list .hg-listing-card:hover {
    transform: translateY(-8px) rotate(-.8deg);
}

.hg-event-cover {
    position: relative;
    min-height: 200px;
    padding: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    color: #fff;
    background: var(--hg-cover-bg, linear-gradient(135deg, #7d4dff, #ff4fa3));
    background-size: cover;
    background-position: center;
}
.event-cover {
    height: 180px;
    background: linear-gradient(135deg, var(--pink), var(--orange));
}
.hg-event-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10,5,30,0.35) 0%, rgba(10,5,30,0.55) 100%);
    z-index: 0;
}
.hg-event-cover > * { position: relative; z-index: 1; }

.hg-date-badge {
    padding: 12px 12px 10px;
    min-width: 72px;
    border-radius: 20px;
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.18);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
    flex-shrink: 0;
}
.date-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: white;
    padding: 10px;
    border-radius: 14px;
    font-weight: bold;
}
.hg-date-badge strong {
    display: block;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -.04em;
    color: #fff;
}
.hg-date-badge span { font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.9); }

.hg-event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}
.hg-event-tags span {
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.16);
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
}
.event-tags span {
    background: rgba(255,255,255,0.2);
    padding: 6px 10px;
    border-radius: 999px;
}

.hg-event-body { padding: 18px; }
.hg-event-body h3 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--hg-text);
}
.hg-event-body p {
    margin: 9px 0 12px;
    color: var(--hg-muted);
    line-height: 1.6;
    font-size: 0.93rem;
}

.hg-event-meta { display: grid; gap: 6px; margin-bottom: 16px; }
.hg-event-meta div {
    color: #493f57;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hg-event-meta i { color: var(--hg-muted); font-size: .82rem; width: 14px; }

.hg-event-footer { display: flex; gap: 8px; flex-wrap: wrap; }

/* ══════════════════════════════════════════
   VENDORS GRID
   ══════════════════════════════════════════ */
.hg-vendors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.hg-vendor-card {
    border-radius: 24px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(255,255,255,0.82);
    box-shadow: var(--hg-shadow-sm);
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}
.vendor-card {
    border-radius: 24px;
    overflow: hidden;
    background: white;
}
.hg-vendor-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--hg-shadow);
}
.hg-vendor-cover {
    height: 130px;
    background: linear-gradient(135deg, #f1ecff, #fff0f6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.vendor-card img {
    height: 160px;
    object-fit: cover;
}
.hg-vendor-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.hg-vendor-cover .hg-vendor-initials {
    font-family: 'Baloo 2', cursive;
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--hg-violet);
    opacity: 0.4;
}
.hg-vendor-body { padding: 14px; }
.hg-vendor-body h3 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hg-text);
}
.hg-vendor-meta { font-size: 0.82rem; color: var(--hg-muted); margin: 0 0 10px; }
.hg-vendor-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e7fff8;
    color: #065f46;
    font-size: 0.78rem;
    font-weight: 800;
}

/* ══════════════════════════════════════════
   SPLIT BANNER
   ══════════════════════════════════════════ */
.hg-split-banner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.hg-banner-card {
    padding: 28px;
    border-radius: 28px;
    box-shadow: var(--hg-shadow);
    overflow: hidden;
    position: relative;
}
.banner-publish {
    background: linear-gradient(135deg, var(--violet), var(--pink));
    color: white;
    padding: 40px;
    border-radius: 30px;
}
.hg-banner-card::before {
    content: "";
    position: absolute;
    right: -40px; top: -50px;
    width: 170px; height: 170px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    filter: blur(8px);
}
.hg-banner-card h3 {
    margin: 0;
    font-family: 'Baloo 2', cursive;
    font-size: 1.9rem;
    line-height: 0.95;
    letter-spacing: -0.04em;
    position: relative;
}
.hg-banner-card p {
    margin: 10px 0 16px;
    line-height: 1.7;
    max-width: 40ch;
    position: relative;
}
.hg-banner-card ul {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
    position: relative;
}
.hg-banner-card li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-weight: 600;
    font-size: 0.95rem;
}
.hg-banner-card li i { margin-top: 3px; flex-shrink: 0; }
.hg-banner-card .hg-subnote {
    font-size: 0.88rem;
    margin-top: 12px;
    line-height: 1.55;
    position: relative;
}

.hg-banner-card--organizer {
    background: linear-gradient(135deg, #2f1b4d, #7d4dff);
    color: #fff;
}
.hg-banner-card--organizer p,
.hg-banner-card--organizer .hg-subnote { color: rgba(255,255,255,0.82); }
.hg-banner-card--organizer li { color: rgba(255,255,255,0.9); }
.hg-banner-card--organizer h3 { color: #fff; }
.hg-banner-card--organizer li i { color: rgba(255,255,255,0.6); }

.hg-banner-card--vendor {
    background: linear-gradient(135deg, #fff0d5, #fff7ec);
    border: 1px solid rgba(255,255,255,0.74);
}
.hg-banner-card--vendor h3 { color: var(--hg-text); }
.hg-banner-card--vendor p { color: var(--hg-muted); }
.hg-banner-card--vendor li { color: var(--hg-text); }
.hg-banner-card--vendor li i { color: var(--hg-orange); }
.hg-banner-card--vendor .hg-subnote { color: var(--hg-muted); }

/* ══════════════════════════════════════════
   NEWSLETTER / ZONE ALERTS
   ══════════════════════════════════════════ */
.hg-newsletter {
    padding: 28px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(255,255,255,0.84), rgba(255,244,248,0.84));
    box-shadow: var(--hg-shadow);
    border: 1px solid rgba(255,255,255,0.82);
    position: relative;
    overflow: hidden;
}
.newsletter {
    background: linear-gradient(135deg, #fff, #fff0f6);
    border-radius: 30px;
    padding: 30px;
}
.hg-newsletter::after {
    content: "";
    position: absolute;
    left: -60px; bottom: -80px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(77,217,194,0.16), transparent 70%);
}
.hg-newsletter-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 24px;
    align-items: stretch;
    position: relative;
}
.hg-newsletter-copy {
    display: grid;
    align-content: center;
    gap: 14px;
}
.hg-newsletter h3 {
    margin: 0;
    font-family: 'Baloo 2', cursive;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--hg-text);
}
.hg-newsletter p { margin: 0; color: var(--hg-muted); line-height: 1.65; max-width: 54ch; }
.hg-newsletter-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.hg-newsletter-benefits span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(50,20,80,.08);
    box-shadow: 0 8px 18px rgba(83,52,107,0.06);
    color: var(--hg-text);
    font-size: .88rem;
    font-weight: 800;
}
.hg-newsletter-form-card {
    display: grid;
    gap: 12px;
    align-content: center;
    padding: 22px;
    border-radius: 26px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 18px 30px rgba(78,34,100,0.08);
}
.hg-newsletter-form-card h4 {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--hg-text);
}
.hg-newsletter-form-card > p {
    margin: 0;
    color: var(--hg-muted);
    font-size: .92rem;
}
.hg-newsletter-form {
    display: grid;
    gap: 10px;
}
.hg-newsletter-form .form-row {
    margin: 0;
}
.hg-newsletter-form label {
    display: none;
}
.hg-newsletter-form input,
.hg-newsletter-form select {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    border: 1px solid rgba(50,20,80,0.08);
    padding: 13px 15px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 16px rgba(84,52,108,0.06);
    font: inherit;
    color: var(--hg-text);
    outline: none;
}
.hg-newsletter-form .hg-btn {
    width: 100%;
    justify-content: center;
}
.hg-newsletter-form .newsletter-trust {
    width: 100%;
    margin: 2px 0 0;
    color: var(--hg-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: left;
}
.hg-newsletter-form .newsletter-success {
    width: 100%;
    padding: 12px 14px;
    border-radius: 18px;
    background: #e7fff8;
    color: #065f46;
}
.hg-newsletter-form .newsletter-success i {
    margin-right: 8px;
}

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
.hg-footer {
    padding: 48px 0 0;
    background: linear-gradient(160deg, #1e0f30 0%, #2d1650 60%, #3a1d5e 100%);
    color: #fff;
    margin-top: 24px;
}
.footer {
    background: #2a1835;
    color: white;
    border-radius: 30px;
}
.hg-footer-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.hg-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.hg-footer-logo img { opacity: .9; }
.hg-footer-brand p {
    color: rgba(255,255,255,.62);
    line-height: 1.7;
    font-size: .92rem;
    max-width: 38ch;
    margin: 0;
}
.hg-footer-social { display: flex; gap: 12px; }
.hg-footer-social-link {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.8);
    font-size: 1rem;
    transition: background .18s, color .18s;
    text-decoration: none;
}
.hg-footer-social-link:hover {
    background: var(--hg-pink);
    border-color: var(--hg-pink);
    color: #fff;
}
.hg-footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.hg-footer-col h4 {
    color: rgba(255,255,255,.9);
    margin: 0 0 12px;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
}
.hg-footer-col nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hg-footer-col a {
    display: block;
    color: rgba(255,255,255,.54);
    line-height: 1;
    font-size: .9rem;
    padding: 5px 0;
    transition: color .18s;
}
.hg-footer-col a:hover { color: rgba(255,255,255,.9); }

/* Legacy shell/top aliases — keep so old pages don't break */
.hg-footer-shell {
    padding: 26px;
    border-radius: 32px;
    background: linear-gradient(135deg, #251834, #3b2450);
    color: #fff;
    box-shadow: 0 30px 60px rgba(53,27,70,0.28);
}
.hg-footer-top {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr 0.9fr;
    gap: 24px;
}
.hg-footer-brand h4 { color: #fff; margin: 0 0 10px; font-family: 'Baloo 2', cursive; font-size: 1.4rem; }

.hg-footer-bottom {
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    color: rgba(255,255,255,.42);
    font-size: .84rem;
}
.hg-footer-legal { display: flex; gap: 14px; }
.hg-footer-legal a { color: rgba(255,255,255,.42); transition: color .18s; }
.hg-footer-legal a:hover { color: rgba(255,255,255,.8); }

/* Flash messages */
.hg-flash { padding: 12px 0; }
.message { padding: 14px 20px; border-radius: 16px; margin-bottom: 10px; font-weight: 600; font-size: 0.92rem; }
.message.success { background: #d1fae5; color: #065f46; }
.message.error   { background: #fee2e2; color: #991b1b; }
.message.warning { background: #fef3c7; color: #92400e; }

/* Legacy — removed (new account dropdown is defined in nav section above) */

/* ══════════════════════════════════════════
   GROOVE PAGES
   ══════════════════════════════════════════ */
.hg-subhero {
    padding: 26px 0 14px;
    position: relative;
    overflow: hidden;
}
.hg-subhero::before {
    content: "";
    position: absolute;
    inset: 38px 0 auto;
    height: 420px;
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 216, 77, 0.2), transparent 18%),
        radial-gradient(circle at 78% 12%, rgba(102, 183, 255, 0.14), transparent 22%),
        radial-gradient(circle at 82% 70%, rgba(125, 77, 255, 0.1), transparent 18%);
    z-index: -1;
}
.hg-subhero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 24px;
    align-items: center;
    min-height: 320px;
}
.hg-subhero-title {
    margin: 0;
    font-family: 'Baloo 2', cursive;
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    line-height: 0.92;
    letter-spacing: -0.045em;
    max-width: 12ch;
}
.hg-lead {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.7;
    color: var(--hg-muted);
    max-width: 58ch;
    margin: 16px 0 0;
}
.hg-panel,
.hg-filter-card,
.hg-form-card {
    position: relative;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,245,232,.84));
    border-radius: 32px;
    border: 1px solid rgba(255,255,255,.82);
    box-shadow: var(--hg-shadow);
    overflow: hidden;
}
.zone-pill {
    border-radius: 999px;
    padding: 14px 18px;
    background: white;
    font-weight: bold;
    box-shadow: var(--shadow-soft);
}
.hg-panel::before,
.hg-form-card::before {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,79,163,.14), transparent 60%);
}
.hg-panel h3,
.hg-filter-card h3,
.hg-form-card h3 {
    margin: 0 0 12px;
    font-family: 'Baloo 2', cursive;
    font-size: 1.9rem;
    line-height: .95;
    color: var(--hg-text);
}
.hg-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.hg-listing-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    align-items: start;
}
.hg-sidebar { position: sticky; top: 96px; }
.hg-filter-group { margin-bottom: 18px; }
.hg-filter-group strong {
    display: block;
    margin-bottom: 10px;
    font-size: .88rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #5e546e;
}
.hg-stack-list { display: grid; gap: 18px; }
.hg-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
    gap: 24px;
    align-items: start;
}
.hg-detail-main,
.hg-detail-side {
    display: grid;
    gap: 20px;
}
.hg-detail-hero .hg-subhero-grid { align-items: center; }
.hg-detail-visual { padding: 12px; }
.hg-detail-cover {
    width: 100%;
    min-height: 320px;
    max-height: 460px;
    object-fit: cover;
    border-radius: 26px;
    display: block;
}
.hg-detail-meta-list { margin-top: 16px; }
.hg-detail-organizer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.hg-detail-avatar {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: var(--shadow-soft);
}
.hg-social-grid {
    display: grid;
    gap: 12px;
}
.hg-social-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(255,255,255,.88);
    color: var(--hg-text);
    text-decoration: none;
    border: 1px solid rgba(125, 77, 255, 0.12);
    box-shadow: var(--shadow-soft);
    transition: transform .22s ease, box-shadow .22s ease;
}
.hg-social-card:hover {
    transform: translateY(-2px) rotate(-.3deg);
    box-shadow: 0 18px 32px rgba(36,21,46,.12);
}
.hg-social-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(125,77,255,.14), rgba(255,79,163,.16));
    color: var(--hg-violet);
}
.hg-social-copy {
    display: grid;
    gap: 3px;
}
.hg-social-copy strong { font-size: .95rem; }
.hg-social-copy span {
    color: var(--hg-muted);
    font-size: .84rem;
}
.hg-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.hg-mini-card {
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(125, 77, 255, 0.12);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}
.hg-mini-card-cover {
    width: 100%;
    height: 144px;
    object-fit: cover;
    display: block;
}
.hg-mini-card-body {
    display: grid;
    gap: 6px;
    padding: 14px 16px 16px;
}
.hg-mini-card-body strong {
    color: var(--hg-text);
    font-size: .96rem;
}
.hg-mini-card-body span {
    color: var(--hg-muted);
    font-size: .84rem;
    line-height: 1.5;
}
.hg-mini-card-price {
    color: var(--hg-violet) !important;
    font-weight: 800;
}
.hg-request-form {
    display: grid;
    gap: 12px;
}
.hg-request-form .input,
.hg-request-form .select,
.hg-request-form textarea,
.hg-request-form input,
.hg-request-form select {
    width: 100%;
    border: 0;
    border-radius: 18px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.9);
    box-shadow: inset 0 0 0 1px rgba(125,77,255,.12);
    font: inherit;
}
.hg-request-form label {
    display: block;
    margin-bottom: 6px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--hg-text);
}
.hg-panel-copy {
    color: var(--hg-muted);
    line-height: 1.6;
    margin: 0 0 14px;
}
.hg-listing-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    padding: 0;
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(255,255,255,.78);
    box-shadow: var(--hg-shadow);
    transition: transform .28s ease, box-shadow .28s ease;
}
.hg-listing-card:hover {
    transform: translateY(-8px) rotate(-.35deg);
    box-shadow: 0 28px 50px rgba(75,41,95,0.16);
}
.hg-listing-media,
.hg-feature-cover {
    min-height: 100%;
    padding: 18px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--hg-cover-bg, linear-gradient(135deg, #7d4dff, #ff4fa3));
    background-size: cover;
    background-position: center;
}
.hg-listing-body,
.hg-feature-body {
    padding: 22px;
}
.hg-listing-body h3,
.hg-feature-body h3 {
    margin: 0;
    font-size: 1.28rem;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--hg-text);
}
.hg-listing-body p,
.hg-feature-body p {
    margin: 10px 0 14px;
    color: var(--hg-muted);
    line-height: 1.65;
    font-size: .97rem;
}
.hg-meta-list {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}
.hg-meta-list div {
    color: #493f57;
    font-size: .94rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hg-cards-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.hg-feature-card {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(255,255,255,.78);
    box-shadow: var(--hg-shadow);
    transition: transform .28s ease, box-shadow .28s ease;
}
.hg-feature-card:hover {
    transform: translateY(-8px) rotate(-.35deg);
    box-shadow: 0 28px 50px rgba(75,41,95,0.16);
}
.hg-feature-cover {
    min-height: 210px;
}
.hg-check-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: grid;
    gap: 10px;
}
.hg-check-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #4f4560;
}
.hg-check-list li::before {
    content: "✓";
    font-weight: 900;
    color: var(--hg-pink);
    margin-top: 2px;
}
.hg-pricing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.hg-price-card {
    padding: 24px;
    border-radius: 28px;
    background: rgba(255,255,255,.82);
    box-shadow: var(--hg-shadow);
    border: 1px solid rgba(255,255,255,.8);
}
.hg-price-card h3 {
    margin: 0;
    font-family: 'Baloo 2', cursive;
    font-size: 2rem;
    line-height: .95;
}
.hg-price-card--featured {
    background: linear-gradient(135deg, #2f1b4d, #7d4dff);
    color: #fff;
}
.hg-price {
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -.05em;
    margin: 12px 0;
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 1100px) {
    .hg-hero-grid,
    .hg-subhero-grid,
    .hg-footer-top,
    .hg-newsletter-grid,
    .hg-search-grid { grid-template-columns: 1fr; }
    .hg-events-grid { grid-template-columns: repeat(2, 1fr); }
    .hg-vendors-grid { grid-template-columns: repeat(2, 1fr); }
    .hg-stats-strip { grid-template-columns: repeat(2, 1fr); }
    .hg-split-banner { grid-template-columns: 1fr; }
    .hg-listing-grid,
    .hg-pricing,
    .hg-detail-grid { grid-template-columns: 1fr; }
    .hg-cards-3 { grid-template-columns: repeat(2, 1fr); }
    .hg-listing-card { grid-template-columns: 1fr; }
    .hg-sidebar { position: static; }
    .hg-menu { display: none; }
    .hg-hero-visual { min-height: 540px; }
    .hg-newsletter-form { justify-content: flex-start; }
    /* Show hamburger on mobile */
    .hg-hamburger { display: flex; }
    .hg-nav-actions { display: none; }
}

@media (max-width: 720px) {
    .hg-wrap { width: min(calc(100% - 20px), var(--hg-max)); }
    .hg-topbar { padding: 10px 0; }
    .hg-nav { border-radius: 26px; padding: 10px 13px; }
    .hg-btn--secondary { display: none; }
    .hg-hero { padding-top: 16px; }
    .hg-hero-grid,
    .hg-subhero-grid { min-height: auto; gap: 16px; }
    .hg-hero-copy h1 { max-width: 100%; }
    .hg-hero-visual { min-height: 520px; }
    
    /* Fix poster positioning on mobile - prevent overflow and overlapping */
    .hg-poster-stage { min-height: 520px; }
    .hg-poster--main { 
        position: relative;
        width: 100%;
        right: auto;
        top: auto;
        padding: 18px;
        transform: rotate(0deg);
        margin-bottom: 12px;
    }
    .hg-poster--side {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        padding: 14px;
        transform: rotate(0deg);
        margin-bottom: 12px;
    }
    .hg-poster--mini {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        padding: 14px;
        transform: rotate(0deg);
    }
    
    /* Adjust stickers for mobile */
    .hg-sticker--yellow { top: 10px; left: 8px; transform: rotate(0deg); }
    .hg-sticker--pink   { top: auto; right: 8px; bottom: 50%; transform: rotate(0deg); }
    .hg-sticker--teal   { left: 8px; bottom: 20px; transform: rotate(0deg); }
    
    .hg-stats-strip,
    .hg-events-grid,
    .hg-vendors-grid,
    .hg-cards-3,
    .hg-stats-grid,
    .hg-mini-grid { grid-template-columns: 1fr; }
    .hg-search-shell,
    .hg-newsletter,
    .hg-footer-shell,
    .hg-banner-card,
    .hg-event-card,
    .hg-listing-card,
    .hg-feature-card,
    .hg-panel,
    .hg-filter-card,
    .hg-form-card,
    .hg-price-card { border-radius: 24px; }
    .hg-newsletter-form input,
    .hg-newsletter-form select,
    .hg-newsletter-form .hg-btn,
    .hg-btn--primary,
    .hg-btn--secondary { width: 100%; justify-content: center; }
    .hg-section-head { align-items: flex-start; flex-direction: column; }
    .hg-section { padding: 26px 0; }
}

/* Mobile-specific fixes for better touch experience and layout */
@media (max-width: 480px) {
    /* Hero section adjustments */
    .hg-hero-grid { gap: 14px; }
    .hg-hero-copy h1 { font-size: clamp(2.2rem, 6.5vw, 3.2rem); line-height: 0.9; }
    .hg-hero-copy p { font-size: clamp(0.9rem, 1.6vw, 1.05rem); }
    .hg-hero-actions { gap: 10px; }
    .hg-hero-actions .hg-btn { padding: 10px 16px; font-size: 0.9rem; }
    
    /* Hero visual adjustments for small screens - use relative positioning */
    .hg-hero-visual { min-height: auto; }
    .hg-poster-stage { min-height: auto; }
    .hg-poster--main { 
        position: relative;
        width: 100%;
        right: auto;
        top: auto;
        padding: 16px;
        transform: rotate(0deg);
        margin-bottom: 12px;
    }
    .hg-poster--main h2 { font-size: clamp(1.6rem, 3.8vw, 2.2rem); }
    .hg-poster--main p { font-size: 0.9rem; }
    .hg-poster--side {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        padding: 12px;
        transform: rotate(0deg);
        margin-bottom: 12px;
    }
    .hg-poster--mini {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        padding: 12px;
        transform: rotate(0deg);
    }
    .hg-poster--mini h3 { font-size: 0.9rem; }
    
    /* Stickers adjustment for mobile */
    .hg-sticker--yellow { top: 8px; left: 8px; transform: rotate(0deg); }
    .hg-sticker--pink { top: auto; right: 8px; bottom: 60%; transform: rotate(0deg); }
    .hg-sticker--teal { left: 8px; bottom: 8px; transform: rotate(0deg); }
    
    /* Stats strip adjustments */
    .hg-stats-strip { gap: 10px; }
    .hg-stat { padding: 14px; }
    .hg-stat strong { font-size: 1.4rem; }
    
    /* Search section improvements */
    .hg-search-shell { padding: 20px; }
    .hg-search-grid { gap: 10px; }
    .hg-search-grid { grid-template-columns: 1fr; }
    .hg-field { margin-bottom: 8px; }
    .hg-field input,
    .hg-field select { min-height: 48px; padding: 12px 14px; }
    .hg-quick-tags { gap: 6px; }
    .hg-quick-tags button { padding: 8px 12px; font-size: 0.85rem; }
    
    /* Events grid adjustments */
    .hg-events-grid { gap: 16px; }
    .hg-event-card { border-radius: 24px; }
    .hg-event-cover { min-height: 160px; padding: 14px; }
    .hg-event-body { padding: 16px; }
    .hg-event-body h3 { font-size: 1.1rem; }
    .hg-event-body p { font-size: 0.88rem; }
    .hg-event-meta { gap: 4px; }
    .hg-event-meta div { font-size: 0.85rem; }
    
    /* Vendors grid adjustments */
    .hg-vendors-grid { gap: 12px; }
    .hg-vendor-card { border-radius: 20px; }
    .hg-vendor-cover { height: 110px; }
    .hg-vendor-body { padding: 12px; }
    .hg-vendor-body h3 { font-size: 0.95rem; }
    .hg-vendor-meta { font-size: 0.8rem; }
    .hg-vendor-badge { font-size: 0.75rem; padding: 3px 8px; }
    
    /* Split banner adjustments */
    .hg-split-banner { gap: 16px; }
    .hg-banner-card { padding: 24px; }
    .hg-banner-card h3 { font-size: 1.6rem; }
    .hg-banner-card p { font-size: 0.9rem; }
    .hg-banner-card ul { gap: 6px; }
    .hg-banner-card li { font-size: 0.85rem; }
    .hg-banner-card .hg-subnote { font-size: 0.8rem; }
    
    /* Newsletter section improvements */
    .hg-newsletter { padding: 24px; }
    .hg-newsletter-grid { gap: 20px; }
    .hg-newsletter-copy { gap: 10px; }
    .hg-newsletter h3 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
    .hg-newsletter p { font-size: 0.9rem; }
    .hg-newsletter-benefits { gap: 8px; }
    .hg-newsletter-benefits span { padding: 8px 12px; font-size: 0.8rem; }
    .hg-newsletter-form-card { padding: 18px; }
    .hg-newsletter-form-card h4 { font-size: 1.1rem; }
    .hg-newsletter-form-card > p { font-size: 0.85rem; }
    .hg-newsletter-form input,
    .hg-newsletter-form select { min-height: 46px; padding: 11px 13px; }
    .hg-newsletter-form .newsletter-trust { font-size: 0.8rem; }
    
    /* Footer adjustments */
    .hg-footer-shell { padding: 22px; }
    .hg-footer-top { gap: 20px; }
    .hg-footer-brand h4 { font-size: 1.2rem; }
    .hg-footer-brand p { font-size: 0.85rem; }
    .hg-footer-col h4 { font-size: 0.85rem; }
    .hg-footer-col a, .hg-footer-col li { font-size: 0.85rem; }
    .hg-footer-bottom { gap: 12px; flex-direction: column; align-items: flex-start; }
    .hg-footer-legal { gap: 10px; }
    
    /* Touch-friendly button sizing */
    .hg-btn { min-height: 44px; padding: 10px 16px; }
    .hg-btn--primary { font-size: 0.9rem; }
    .hg-pill-btn { padding: 8px 12px; font-size: 0.85rem; }
    
    /* Reduce visual noise on small screens */
    .hg-floaty { animation-duration: 6s; }
    .hg-sticker { padding: 8px 12px; font-size: 0.8rem; }
    
    /* Better spacing for mobile content */
    .hg-section { padding: 20px 0; }
    .hg-section-head { gap: 12px; }
    .hg-section-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
    .hg-section-head p { font-size: 0.9rem; }
    
    /* Improve text readability */
    .hg-text { line-height: 1.6; }
    .hg-muted { line-height: 1.6; }
}

/* Extra small screen fixes (under 360px) */
@media (max-width: 360px) {
    .hg-hero-copy h1 { font-size: clamp(2rem, 7.5vw, 2.8rem); }
    .hg-hero-actions .hg-btn { padding: 9px 14px; font-size: 0.85rem; }
    .hg-poster--main { padding: 14px; }
    .hg-poster--main h2 { font-size: clamp(1.4rem, 4.2vw, 1.8rem); }
    .hg-stats-strip { gap: 8px; }
    .hg-stat { padding: 12px; }
    .hg-stat strong { font-size: 1.25rem; }
    .hg-search-shell { padding: 18px; }
    .hg-search-grid { gap: 8px; }
    .hg-field input,
    .hg-field select { min-height: 44px; padding: 10px 12px; }
    .hg-events-grid { gap: 12px; }
    .hg-event-card { border-radius: 20px; }
    .hg-event-cover { min-height: 140px; padding: 12px; }
    .hg-vendors-grid { gap: 10px; }
    .hg-vendor-card { border-radius: 18px; }
    .hg-vendor-cover { height: 100px; }
    .hg-newsletter { padding: 20px; }
    .hg-newsletter-grid { gap: 16px; }
    .hg-newsletter h3 { font-size: clamp(1.4rem, 3.6vw, 1.8rem); }
    .hg-newsletter-form-card { padding: 16px; }
    .hg-footer-shell { padding: 18px; }
    .hg-footer-top { gap: 16px; }
    .hg-footer-bottom { gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Fair view — groove  (hg-cover-hero, hg-qs-strip, stand grid, live cta…)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Cover hero ──────────────────────────────────────────────────────────────── */
.hg-cover-hero {
    position: relative;
    height: clamp(260px, 44vw, 480px);
    overflow: hidden;
    margin-bottom: 0;
}
.hg-cover-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.hg-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.06) 0%, rgba(0,0,0,.52) 65%, rgba(0,0,0,.82) 100%);
}
.hg-cover-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 14px 0;
}
.hg-cover-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.hg-cover-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.28);
    transition: background .18s;
    flex-shrink: 0;
}
.hg-cover-back:hover { background: rgba(255,255,255,.32); color: #fff; }
.hg-cover-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.hg-cover-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: 999px;
    font-size: .83rem;
    font-weight: 700;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s;
    font-family: inherit;
    line-height: 1;
}
.hg-cover-action-btn:hover { background: rgba(255,255,255,.32); color: #fff; }
.hg-cover-action-btn--primary {
    background: var(--hg-pink);
    border-color: var(--hg-pink);
}
.hg-cover-action-btn--primary:hover { background: #e8007a; }
.hg-cover-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 24px 0;
    color: #fff;
}
.hg-cover-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .88;
    margin-bottom: 8px;
}
.hg-cover-title {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(1.5rem, 5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 12px;
    text-shadow: 0 2px 14px rgba(0,0,0,.45);
    max-width: 20ch;
}
.hg-cover-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: .84rem;
    opacity: .9;
    align-items: center;
}
.hg-cover-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Timing badges ───────────────────────────────────────────────────────────── */
.hg-tb {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .03em;
    vertical-align: middle;
}
.hg-tb--live {
    background: rgba(239,68,68,.9);
    color: #fff;
    animation: hgLivePulse 2s ease-in-out infinite;
}
@keyframes hgLivePulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(239,68,68,.3); }
    50%       { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
.hg-tb--today    { background: var(--hg-coral); color: #fff; }
.hg-tb--tomorrow { background: var(--hg-violet); color: #fff; }
.hg-tb--weekend  { background: var(--hg-pink); color: #fff; }
.hg-tb--week     { background: #00c2a8; color: #fff; }
.hg-tb--manage   { background: rgba(255,255,255,.22); color: #fff; }

/* ── Quick decision strip ────────────────────────────────────────────────────── */
.hg-qs-strip {
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(125,77,255,.1);
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 2px 16px rgba(36,21,46,.06);
}
.hg-qs-inner {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    scrollbar-width: none;
}
.hg-qs-inner::-webkit-scrollbar { display: none; }
.hg-qs-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-right: 1px solid rgba(125,77,255,.08);
    flex: 1;
    min-width: 160px;
    white-space: nowrap;
}
.hg-qs-item:last-child { border-right: none; }
.hg-qs-icon {
    width: 38px; height: 38px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(255,79,163,.1), rgba(125,77,255,.12));
    color: var(--hg-violet);
}
.hg-qs-text small {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--hg-muted);
    margin-bottom: 2px;
}
.hg-qs-text strong {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    color: var(--hg-text);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22ch;
}
.hg-qs-ctas {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
    margin-left: auto;
}
.hg-btn--whatsapp {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
}
.hg-btn--whatsapp:hover { background: #15803d; color: #fff; }
.hg-btn--light {
    background: rgba(255,255,255,.18);
    color: #fff;
    border-color: rgba(255,255,255,.32);
    backdrop-filter: blur(6px);
}
.hg-btn--light:hover { background: rgba(255,255,255,.28); color: #fff; }

/* ── Live CTA ────────────────────────────────────────────────────────────────── */
.hg-live-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    background: linear-gradient(135deg, var(--hg-violet), var(--hg-pink));
    border-radius: 28px;
    color: #fff;
    box-shadow: 0 12px 32px rgba(125,77,255,.28);
}
.hg-live-cta-text { flex: 1; }
.hg-live-cta-text strong { display: block; font-size: 1.05rem; font-weight: 800; margin-bottom: 3px; }
.hg-live-cta-text span  { font-size: .84rem; opacity: .84; }

/* ── Live aside panel ────────────────────────────────────────────────────────── */
.hg-live-aside {
    text-align: center;
    background: linear-gradient(135deg, rgba(125,77,255,.08), rgba(255,79,163,.06));
}
.hg-live-aside-icon {
    font-size: 2rem;
    color: var(--hg-violet);
    margin-bottom: 8px;
    display: block;
}
.hg-live-aside strong { display: block; font-size: 1rem; font-weight: 800; margin-bottom: 6px; }
.hg-live-aside p { font-size: .87rem; color: var(--hg-muted); margin: 0 0 16px; line-height: 1.6; }

/* ── Stand grid ──────────────────────────────────────────────────────────────── */
.hg-stand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 14px;
}
.hg-stand-card {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(125,77,255,.1);
    border-radius: 20px;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.hg-stand-card:hover {
    transform: translateY(-3px) rotate(-.3deg);
    box-shadow: 0 12px 28px rgba(36,21,46,.12);
}
.hg-stand-thumb {
    width: 100%; height: 108px;
    object-fit: cover;
    display: block;
}
.hg-stand-thumb-placeholder {
    width: 100%; height: 108px;
    background: linear-gradient(135deg, rgba(125,77,255,.1), rgba(255,79,163,.12));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Baloo 2', cursive;
    font-size: 2rem;
    color: var(--hg-violet);
    font-weight: 800;
}
.hg-stand-body {
    padding: 11px 13px 13px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.hg-stand-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--hg-violet);
}
.hg-stand-name {
    font-size: .92rem;
    font-weight: 700;
    color: var(--hg-text);
    line-height: 1.25;
}
.hg-stand-type { font-size: .78rem; color: var(--hg-muted); }
.hg-stand-desc {
    font-size: .8rem;
    color: var(--hg-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hg-stand-food {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: .7rem;
    font-weight: 700;
    align-self: flex-start;
}
.hg-stand-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--hg-violet);
    text-decoration: none;
    margin-top: 4px;
}
.hg-stand-link:hover { text-decoration: underline; }

/* ── Stand filter ────────────────────────────────────────────────────────────── */
.hg-stand-filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.hg-stand-filter input,
.hg-stand-filter select {
    padding: 9px 14px;
    border-radius: 14px;
    border: 1px solid rgba(125,77,255,.18);
    background: rgba(255,255,255,.9);
    font-size: .9rem;
    color: var(--hg-text);
    font-family: inherit;
    outline: none;
    transition: border-color .18s;
}
.hg-stand-filter input:focus,
.hg-stand-filter select:focus { border-color: var(--hg-violet); }
.hg-stand-filter input { flex: 1; min-width: 160px; }

/* ── Stand map wrapper ───────────────────────────────────────────────────────── */
.hg-stand-map-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Empty state ─────────────────────────────────────────────────────────────── */
.hg-empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--hg-muted);
}
.hg-empty-state i { font-size: 2rem; margin-bottom: 10px; display: block; opacity: .4; }

/* ── Mobile sticky live bar ──────────────────────────────────────────────────── */
.hg-live-sticky {
    display: none;
}
@media (max-width: 767px) {
    .hg-live-sticky {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 40;
        background: rgba(255,255,255,.96);
        backdrop-filter: blur(12px);
        border-top: 1px solid rgba(125,77,255,.1);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        display: flex;
        gap: 8px;
    }
    .hg-live-sticky .hg-btn { flex: 1; justify-content: center; }
    .hg-qs-inner { flex-wrap: wrap; }
    .hg-qs-item {
        flex: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(125,77,255,.08);
    }
    .hg-qs-item:last-child { border-bottom: none; }
    .hg-qs-ctas { width: 100%; margin-left: 0; }
    .hg-cover-action-btn span { display: none; }
    .hg-live-cta { flex-direction: column; text-align: center; }
    .hg-stand-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* newsletter inside groove view */
.hg-newsletter-inline {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.hg-newsletter-inline input[type="email"] {
    flex: 1;
    min-width: 180px;
    padding: 10px 16px;
    border-radius: 14px;
    border: 1px solid rgba(125,77,255,.18);
    background: rgba(255,255,255,.9);
    font-size: .92rem;
    font-family: inherit;
    outline: none;
}
.hg-newsletter-inline input[type="email"]:focus { border-color: var(--hg-violet); }

/* ══════════════════════════════════════════
   PUBLIC LEGACY BRIDGE
   Lets old public templates render inside groove layout
   without dragging the whole legacy stylesheet.
   ══════════════════════════════════════════ */
.hg-body .container {
    width: min(calc(100% - 32px), 1120px);
    margin: 0 auto;
}

.hg-body .btn,
.hg-body button.btn,
.hg-body a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.hg-body .btn:hover,
.hg-body button.btn:hover,
.hg-body a.btn:hover {
    transform: translateY(-2px) rotate(-.4deg);
}

.hg-body .btn-primary {
    background: linear-gradient(135deg, var(--hg-violet), var(--hg-pink));
    color: #fff;
    box-shadow: 0 16px 30px rgba(125,77,255,.22);
}

.hg-body .btn-outline,
.hg-body .btn-secondary {
    background: rgba(255,255,255,.78);
    color: var(--hg-text);
    border-color: rgba(125,77,255,.18);
    box-shadow: var(--hg-shadow-sm);
}

.hg-body .btn-soft,
.hg-body .btn-ghost {
    background: rgba(255,255,255,.58);
    color: var(--hg-text);
    border-color: rgba(50,20,80,.08);
}

.hg-body .btn-block {
    width: 100%;
}

.hg-body .card-kicker {
    margin: 0 0 8px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hg-violet);
}

.hg-body .card-meta {
    color: var(--hg-muted);
    font-size: .92rem;
    line-height: 1.55;
}

.hg-body .auth-section,
.hg-body .profile-page,
.hg-body .detail-page,
.hg-body .fair-form-page,
.hg-body .srp-page,
.hg-body .pricing,
.hg-body .legal-content-wrap {
    padding-top: 28px;
    padding-bottom: 64px;
}

.hg-body .auth-container,
.hg-body .detail-shell,
.hg-body .form-shell,
.hg-body .profile-card,
.hg-body .detail-card,
.hg-body .market-card,
.hg-body .price-card,
.hg-body .legal-item,
.hg-body .srp-card,
.hg-body .auth-card,
.hg-body .card-empty {
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 28px;
    box-shadow: var(--hg-shadow-sm);
}

.hg-body .auth-container {
    max-width: 520px;
    margin: 0 auto;
}

.hg-body .auth-card,
.hg-body .form-shell,
.hg-body .profile-card {
    padding: 28px;
}

.hg-body .auth-card h1,
.hg-body .form-shell h1,
.hg-body .profile-card h1,
.hg-body .srp-head h1,
.hg-body .pricing-hero h1,
.hg-body .concept-hero h1 {
    margin: 0 0 8px;
    font-family: 'Baloo 2', cursive;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: .98;
    color: var(--hg-text);
}

.hg-body .auth-subtitle,
.hg-body .detail-subtitle,
.hg-body .pricing-hero p,
.hg-body .concept-hero p {
    color: var(--hg-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.hg-body .auth-form,
.hg-body form.auth-form {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.hg-body .form-row {
    display: grid;
    gap: 14px;
}

.hg-body .fair-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.hg-body .listing-head,
.hg-body .detail-head,
.hg-body .srp-head,
.hg-body .concept-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.hg-body .listing-grid,
.hg-body .cards-grid,
.hg-body .pricing-grid,
.hg-body .detail-grid,
.hg-body .concept-flow-grid,
.hg-body .concept-pillars,
.hg-body .cr-roles-grid {
    display: grid;
    gap: 18px;
}

.hg-body .listing-grid,
.hg-body .cards-grid,
.hg-body .pricing-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.hg-body .detail-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr);
}

.hg-body .concept-flow-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.hg-body .concept-pillars {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 22px;
}

.hg-body .concept-node,
.hg-body .concept-pillar,
.hg-body .cr-role-card,
.hg-body .price-card,
.hg-body .market-card,
.hg-body .legal-item {
    position: relative;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(125,77,255,.12);
    border-radius: 24px;
    padding: 22px;
    box-shadow: var(--hg-shadow-sm);
}

.hg-body .concept-node:nth-child(odd),
.hg-body .price-card:nth-child(odd),
.hg-body .market-card:nth-child(odd) {
    transform: rotate(-.55deg);
}

.hg-body .concept-node:nth-child(even),
.hg-body .cr-role-card:nth-child(even) {
    transform: rotate(.45deg);
}

.hg-body .concept-node:hover,
.hg-body .price-card:hover,
.hg-body .market-card:hover,
.hg-body .legal-item:hover,
.hg-body .cr-role-card:hover {
    transform: translateY(-4px) rotate(-.35deg);
}

.hg-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.hg-body select,
.hg-body textarea {
    width: 100%;
    border: 1px solid rgba(125,77,255,.16);
    border-radius: 18px;
    padding: 14px 16px;
    font: inherit;
    color: var(--hg-text);
    background: rgba(255,255,255,.92);
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.hg-body input:focus,
.hg-body select:focus,
.hg-body textarea:focus {
    border-color: var(--hg-violet);
    box-shadow: var(--ez-focus);
}

.hg-body label {
    display: block;
    margin-bottom: 6px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--hg-text);
}

.hg-body .pricing-hero,
.hg-body .concept-page,
.hg-body .srp-page,
.hg-body .profile-card,
.hg-body .form-shell {
    position: relative;
}

.hg-body .pricing-hero::before,
.hg-body .form-shell::before,
.hg-body .profile-card::before {
    content: "";
    position: absolute;
    inset: auto auto -12px -12px;
    width: 96px;
    height: 96px;
    background: radial-gradient(circle, rgba(255,79,163,.16), transparent 70%);
    pointer-events: none;
}

.hg-body .countdown-pill,
.hg-body .table-badge,
.hg-body .badge,
.hg-body .badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}

.hg-body .countdown-pill,
.hg-body .badge,
.hg-body .badge-active,
.hg-body .table-badge.is-active {
    background: #ecfdf5;
    color: #047857;
}

.hg-body .badge-inactive,
.hg-body .table-badge.is-inactive {
    background: #fff1f2;
    color: #be123c;
}

.hg-body .profile-tabs,
.hg-body .admin-form-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 20px 0 22px;
}

.hg-body .profile-tab,
.hg-body .admin-form-tab {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(125,77,255,.14);
    background: rgba(255,255,255,.82);
    font-weight: 700;
}

.hg-body .profile-tab.is-active,
.hg-body .admin-form-tab.is-active {
    background: linear-gradient(135deg, var(--hg-violet), var(--hg-pink));
    color: #fff;
    border-color: transparent;
}

.hg-body .profile-tab-content:not(.is-active) {
    display: none;
}

.hg-body .table-responsive,
.hg-body .admin-table-wrapper {
    overflow-x: auto;
    border-radius: 22px;
    border: 1px solid rgba(125,77,255,.12);
    background: rgba(255,255,255,.9);
}

.hg-body .admin-table,
.hg-body table.striped {
    width: 100%;
    border-collapse: collapse;
}

.hg-body .admin-table th,
.hg-body .admin-table td,
.hg-body table.striped th,
.hg-body table.striped td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(50,20,80,.08);
    text-align: left;
}

.hg-body .paginator {
    margin-top: 20px;
}

.hg-body .pagination {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.hg-body .pagination a,
.hg-body .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(125,77,255,.14);
    font-weight: 700;
}

.hg-body .vendor-onboarding-card,
.hg-body .image-current-card,
.hg-body .admin-form-panel {
    padding: 22px;
    border-radius: 24px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(125,77,255,.12);
    box-shadow: var(--hg-shadow-sm);
}

.hg-body .image-current-grid,
.hg-body .admin-zone-related-grid {
    display: grid;
    gap: 18px;
}

.hg-body .vendor-onboarding-list,
.hg-body .detail-list {
    margin: 0;
    padding-left: 18px;
    color: var(--hg-muted);
    line-height: 1.65;
}

.hg-body .pricing-faq-item,
.hg-body .srp-card,
.hg-body .mf-sidebar,
.hg-body .mf-legend {
    backdrop-filter: blur(14px);
}

@media (max-width: 900px) {
    .hg-body .fair-form-grid,
    .hg-body .detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .hg-body .auth-card,
    .hg-body .form-shell,
    .hg-body .profile-card {
        padding: 22px 18px;
        border-radius: 24px;
    }

    .hg-body .container {
        width: min(calc(100% - 20px), 1120px);
    }

    .hg-body .listing-head,
    .hg-body .detail-head,
    .hg-body .srp-head,
    .hg-body .concept-hero {
        gap: 14px;
    }

    .hg-body .auth-card h1,
    .hg-body .form-shell h1,
    .hg-body .profile-card h1,
    .hg-body .pricing-hero h1,
    .hg-body .concept-hero h1 {
        font-size: clamp(1.7rem, 8vw, 2.35rem);
    }
}

/* ── Groove nav parity with source zip ───────────────────────────── */
.menu a,
.menu-dropdown summary,
.menu-dropdown-panel a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.menu a i,
.menu-dropdown summary i,
.menu-dropdown-panel a i,
.actions .btn i {
    flex: 0 0 auto;
}

.menu-dropdown {
    position: relative;
}

.menu-dropdown summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 800;
    color: #4d445a;
    transition: .25s ease;
}

.menu-dropdown summary::-webkit-details-marker {
    display: none;
}

.menu-dropdown summary:hover,
.menu-dropdown[open] summary,
.menu-dropdown summary.is-active {
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.menu-dropdown summary .fa-chevron-down {
    font-size: .78rem;
    opacity: .72;
    transition: transform .25s ease;
}

.menu-dropdown[open] summary .fa-chevron-down {
    transform: rotate(180deg);
}

.menu-dropdown-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 250px;
    padding: 12px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,244,248,.95));
    border: 1px solid rgba(255,255,255,.85);
    box-shadow: var(--shadow-strong);
    display: grid;
    gap: 8px;
    z-index: 40;
}

.menu-dropdown-panel a {
    padding: 11px 14px;
    border-radius: 18px;
    font-weight: 800;
    color: #463b56;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(52,22,77,.06);
    box-shadow: var(--shadow-soft);
    transition: .22s ease;
}

.menu-dropdown-panel a:hover {
    transform: translateY(-2px) rotate(-.35deg);
    background: linear-gradient(135deg, #fff, #fff1f7);
    color: var(--pink);
}

.menu-dropdown-panel a:nth-child(2n) {
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(245,240,255,.94));
}

.menu-dropdown-panel a:nth-child(3n) {
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,252,255,.94));
}

.actions .btn {
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .menu-dropdown {
        width: 100%;
    }

    .menu-dropdown summary {
        width: 100%;
        justify-content: space-between;
        background: rgba(255,255,255,.76);
    }

    .menu-dropdown-panel {
        position: static;
        min-width: 0;
        margin-top: 8px;
        border-radius: 20px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
    }

    .menu-dropdown-panel a {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .menu a,
    .menu-dropdown summary,
    .menu-dropdown-panel a {
        justify-content: center;
    }
}