/* ============================================================
   HIPHOP TEMPLE — MEGA 24
   CANONICAL GLOBAL EXPERIENCE SYSTEM
   ============================================================ */

:root {
    --ht24-black: #070707;
    --ht24-deep: #0b0b0b;
    --ht24-panel: #111111;
    --ht24-panel-2: #171717;

    --ht24-white: #f5f5f2;
    --ht24-muted: #a7a7a7;

    --ht24-gold: #f5b900;
    --ht24-gold-bright: #ffc928;

    --ht24-border: rgba(255,255,255,.10);
    --ht24-border-strong: rgba(245,185,0,.35);

    --ht24-max: 1400px;
    --ht24-radius: 14px;
}


/* ============================================================
   RESET
   ============================================================ */

.ht24-shell,
.ht24-shell *,
.ht24-shell *::before,
.ht24-shell *::after {
    box-sizing: border-box;
}

.ht24-body {
    margin: 0;
    padding: 0;

    background: var(--ht24-black);
    color: var(--ht24-white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    min-width: 320px;
}

.ht24-shell {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(245,185,0,.055),
            transparent 30%
        ),
        var(--ht24-black);
}

.ht24-shell a {
    color: inherit;
    text-decoration: none;
}


/* ============================================================
   HEADER
   ============================================================ */

.ht24-header {
    position: relative;
    z-index: 100;

    width: 100%;

    background: rgba(7,7,7,.96);

    border-bottom: 1px solid var(--ht24-border);

    backdrop-filter: blur(14px);
}

.ht24-header-inner {
    width: min(
        calc(100% - 48px),
        var(--ht24-max)
    );

    min-height: 76px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 32px;
}


/* ============================================================
   BRAND
   ============================================================ */

.ht24-brand {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;

    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.8px;
}

.ht24-brand-white {
    color: var(--ht24-white);
}

.ht24-brand-gold {
    color: var(--ht24-gold);
}


/* ============================================================
   DESKTOP NAV
   ============================================================ */

.ht24-nav {
    display: flex;
    align-items: center;

    gap: 26px;

    margin-left: auto;
}

.ht24-nav a {
    position: relative;

    color: #d6d6d6;

    font-size: 14px;
    font-weight: 700;

    transition:
        color .18s ease,
        opacity .18s ease;
}

.ht24-nav a:hover {
    color: var(--ht24-gold);
}

.ht24-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -8px;

    height: 2px;

    background: var(--ht24-gold);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform .18s ease;
}

.ht24-nav a:hover::after {
    transform: scaleX(1);
}


/* ============================================================
   HEADER ACTIONS
   ============================================================ */

.ht24-header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ht24-header-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 0 16px;

    border: 1px solid var(--ht24-border);

    border-radius: 9px;

    background: var(--ht24-panel);

    color: var(--ht24-white);

    font-size: 13px;
    font-weight: 800;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease;
}

.ht24-header-link:hover {
    background: var(--ht24-gold);
    border-color: var(--ht24-gold);
    color: #080808;
}


/* ============================================================
   MOBILE MENU BUTTON
   ============================================================ */

.ht24-menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    padding: 8px;

    border: 1px solid var(--ht24-border);
    border-radius: 9px;

    background: var(--ht24-panel);

    cursor: pointer;
}

.ht24-menu-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 5px 0;

    background: var(--ht24-white);
}


/* ============================================================
   MOBILE NAV
   ============================================================ */

.ht24-mobile-nav {
    display: none;

    background: var(--ht24-deep);

    border-bottom: 1px solid var(--ht24-border);
}

.ht24-mobile-nav.is-open {
    display: block;
}

.ht24-mobile-nav nav {
    width: min(
        calc(100% - 32px),
        var(--ht24-max)
    );

    margin: 0 auto;

    padding: 14px 0 20px;

    display: flex;
    flex-direction: column;
}

.ht24-mobile-nav a {
    padding: 14px 4px;

    border-bottom: 1px solid var(--ht24-border);

    color: var(--ht24-white);

    font-weight: 800;
}

.ht24-mobile-nav a:last-child {
    border-bottom: 0;
}

.ht24-mobile-nav a:hover {
    color: var(--ht24-gold);
}


/* ============================================================
   MAIN
   ============================================================ */

.ht24-main {
    width: 100%;
    min-height: 60vh;
}

.ht24-container {
    width: min(
        calc(100% - 48px),
        var(--ht24-max)
    );

    margin: 0 auto;
}


/* ============================================================
   COMMON SECTION
   ============================================================ */

.ht24-section {
    padding: 88px 0;
}

.ht24-section + .ht24-section {
    border-top: 1px solid var(--ht24-border);
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.ht24-eyebrow {
    margin-bottom: 18px;

    color: var(--ht24-gold);

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.ht24-title {
    margin: 0;

    color: var(--ht24-white);

    font-size: clamp(48px, 7vw, 100px);
    line-height: .92;

    font-weight: 900;
    letter-spacing: -4px;
}

.ht24-title span {
    color: var(--ht24-gold);
}

.ht24-subtitle {
    max-width: 700px;

    margin-top: 24px;

    color: var(--ht24-muted);

    font-size: 18px;
    line-height: 1.65;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.ht24-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 0 22px;

    border: 1px solid var(--ht24-gold);

    border-radius: 9px;

    background: var(--ht24-gold);

    color: #080808;

    font-size: 14px;
    font-weight: 900;

    transition:
        transform .18s ease,
        background .18s ease;
}

.ht24-button:hover {
    transform: translateY(-2px);
    background: var(--ht24-gold-bright);
}

.ht24-button-secondary {
    border-color: var(--ht24-border);

    background: var(--ht24-panel);

    color: var(--ht24-white);
}

.ht24-button-secondary:hover {
    border-color: var(--ht24-gold);
    background: var(--ht24-panel-2);
}


/* ============================================================
   CARDS
   ============================================================ */

.ht24-card {
    overflow: hidden;

    background: var(--ht24-panel);

    border: 1px solid var(--ht24-border);

    border-radius: var(--ht24-radius);

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.ht24-card:hover {
    transform: translateY(-4px);

    border-color: var(--ht24-border-strong);
}


/* ============================================================
   FOOTER
   ============================================================ */

.ht24-footer {
    margin-top: 80px;

    background: #050505;

    border-top: 1px solid var(--ht24-border);
}

.ht24-footer-inner {
    width: min(
        calc(100% - 48px),
        var(--ht24-max)
    );

    margin: 0 auto;

    padding: 64px 0;

    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1fr;

    gap: 48px;
}

.ht24-footer-brand p {
    margin-top: 12px;

    color: var(--ht24-muted);

    font-size: 14px;
}

.ht24-footer-column {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.ht24-footer-column strong {
    margin-bottom: 6px;

    color: var(--ht24-gold);

    font-size: 12px;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ht24-footer-column a {
    color: var(--ht24-muted);

    font-size: 14px;
}

.ht24-footer-column a:hover {
    color: var(--ht24-white);
}

.ht24-footer-bottom {
    width: min(
        calc(100% - 48px),
        var(--ht24-max)
    );

    margin: 0 auto;

    padding: 20px 0;

    display: flex;
    justify-content: space-between;

    gap: 20px;

    border-top: 1px solid var(--ht24-border);

    color: #777;

    font-size: 12px;
}


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

@media (max-width: 1050px) {

    .ht24-nav {
        gap: 16px;
    }

    .ht24-nav a {
        font-size: 13px;
    }

    .ht24-header-link {
        display: none;
    }

    .ht24-menu-toggle {
        display: block;
    }

}


@media (max-width: 760px) {

    .ht24-header-inner {
        width: min(
            calc(100% - 32px),
            var(--ht24-max)
        );

        min-height: 68px;
    }

    .ht24-nav {
        display: none;
    }

    .ht24-container {
        width: min(
            calc(100% - 32px),
            var(--ht24-max)
        );
    }

    .ht24-section {
        padding: 60px 0;
    }

    .ht24-title {
        font-size: clamp(46px, 14vw, 72px);
        letter-spacing: -3px;
    }

    .ht24-subtitle {
        font-size: 16px;
    }

    .ht24-footer-inner {
        width: min(
            calc(100% - 32px),
            var(--ht24-max)
        );

        grid-template-columns: 1fr 1fr;

        gap: 36px;
    }

    .ht24-footer-bottom {
        width: min(
            calc(100% - 32px),
            var(--ht24-max)
        );

        flex-direction: column;
    }

}


@media (max-width: 480px) {

    .ht24-brand {
        font-size: 18px;
    }

    .ht24-footer-inner {
        grid-template-columns: 1fr;
    }

}


/* MEGA24 COMPLETE PLATFORM NAVIGATION */

/* ============================================================
   MEGA 24 — GLOBAL PLATFORM NAVIGATION
   ============================================================ */

.ht24-global-nav {
  position: relative;
  z-index: 1000;
  width: 100%;
  background: rgba(8, 9, 12, .96);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
}

.ht24-nav-inner {
  max-width: 1440px;
  min-height: 68px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.ht24-brand {
  flex: 0 0 auto;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
}

.ht24-nav-main {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.ht24-nav-main > a,
.ht24-nav-group > button,
.ht24-nav-account > a {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.ht24-nav-main > a:hover,
.ht24-nav-group > button:hover,
.ht24-nav-account > a:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
}

.ht24-nav-group {
  position: relative;
}

.ht24-nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  padding: 8px;
  background: #111318;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.ht24-nav-group:hover .ht24-nav-dropdown,
.ht24-nav-group:focus-within .ht24-nav-dropdown {
  display: block;
}

.ht24-nav-dropdown a {
  display: block;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

.ht24-nav-dropdown a:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
}

.ht24-nav-account {
  flex: 0 0 auto;
}

@media (max-width: 900px) {

  .ht24-nav-inner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
  }

  .ht24-nav-main {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .ht24-nav-main > a,
  .ht24-nav-group > button {
    white-space: nowrap;
  }

  .ht24-nav-dropdown {
    position: fixed;
    left: 12px;
    right: 12px;
    width: auto;
  }
}


/* MEGA24 PLATFORM DIRECTORY */

/* ============================================================
   MEGA 24 — PLATFORM DIRECTORY
   ============================================================ */

.ht24-platform-directory {
  width: 100%;
  padding: 80px 24px;
}

.ht24-platform-directory-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.ht24-platform-directory header {
  max-width: 720px;
  margin-bottom: 40px;
}

.ht24-platform-directory .ht24-eyebrow {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
}

.ht24-platform-directory h2 {
  margin: 0 0 14px;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1;
}

.ht24-platform-directory header p {
  margin: 0;
  max-width: 620px;
  opacity: .65;
  line-height: 1.6;
}

.ht24-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ht24-platform-grid a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  padding: 24px;
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.ht24-platform-grid a:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}

.ht24-platform-grid strong {
  font-size: 19px;
}

.ht24-platform-grid span {
  font-size: 14px;
  line-height: 1.5;
  opacity: .6;
}

@media (max-width: 900px) {
  .ht24-platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .ht24-platform-directory {
    padding: 56px 18px;
  }

  .ht24-platform-grid {
    grid-template-columns: 1fr;
  }
}


/* MEGA24 CROSS PLATFORM LINKS */

.ht24-cross-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 40px auto;
  max-width: 1200px;
  padding: 0 20px;
}

.ht24-cross-links a {
  display: inline-block;
  padding: 9px 13px;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
}

.ht24-cross-links a:hover {
  background: rgba(255,255,255,.08);
}