/* ============================================================
   BASE
   ============================================================ */
   @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   
   html {
     scroll-behavior: smooth;
   }
   
   body {
     margin: 0;
     min-height: 100vh;
     font-family: var(--font-primary);
     color: var(--color-text);
     background: var(--gradient-page);
     overflow-x: hidden;
   }
   
   img {
     max-width: 100%;
     display: block;
   }
   
   a {
     color: inherit;
     text-decoration: none;
   }
   
   .section-spacing {
     margin-top: var(--section-gap);
   }
   
   /* ============================================================
                    CONTAINER
                    ============================================================ */
   .page-container {
     max-width: var(--container-max);
     padding-left: var(--container-padding-x);
     padding-right: var(--container-padding-x);
     margin-left: auto;
     margin-right: auto;
   }
   
   /* ============================================================
                    HEADER
                    ============================================================ */
   .site-header {
     position: sticky;
     top: 0;
     z-index: var(--z-header);
     min-height: var(--header-height);
     background: linear-gradient(to top, #2B0E40, #010011);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
     border-bottom: 5px solid var(--color-border-bright);
   }
   
   .header-main {
     min-height: 70px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
   }
   
   .site-logo {
     display: flex;
     align-items: center;
     gap: 10px;
     flex-shrink: 0;
   }
   
   .site-logo img {
     height: 42px;
     width: auto;
   }
   
   .logo-text {
     font-family: var(--font-display);
     font-size: 26px;
     font-weight: 900;
     letter-spacing: 0.03em;
     text-transform: uppercase;
     line-height: 1;
   }
   
   .logo-text span {
     color: var(--color-accent);
   }
   
   .header-actions {
     display: flex;
     align-items: center;
     gap: 12px;
     flex-shrink: 0;
   }
   
   .mobile-menu-btn {
     display: none;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-xs);
     color: var(--color-text);
     cursor: pointer;
     font-size: 20px;
     line-height: 1;
   }
   
   .main-nav {
     position: relative;
     min-height: 40px;
     display: flex;
     align-items: center;
     gap: 28px;
     white-space: nowrap;
   }
   
   .nav-link {
     font-size: 15px;
     font-weight: 600;
     color: var(--color-text-muted);
     transition: color var(--transition-fast), text-shadow var(--transition-fast);
     padding: 4px 0;
     position: relative;
   }
   
   
   .nav-link:hover,
   .nav-link.active {
     color: var(--color-secondary);
     text-shadow: 0 0 14px rgba(139, 63, 239, 0.65);
   }
   
   .nav-link.active::after {
     transform: scaleX(1);
   }
   
   /* ============================================================
                    MEGA MENU (desktop nav dropdowns)
                    ============================================================ */
   .nav-item {
     display: flex;
     align-items: center;
     align-self: stretch;
     /* fill full nav height so there's no dead strip below the link */
   }
   
   .nav-item .nav-link {
     display: inline-flex;
     align-items: center;
     gap: 5px;
   }
   
   .nav-caret {
     font-size: 10px;
     line-height: 1;
     color: var(--color-text-soft);
     transition: transform var(--transition-fast), color var(--transition-fast);
   }
   
   .nav-item.has-mega:hover .nav-caret,
   .nav-item.has-mega.is-open .nav-caret,
   .nav-item.has-mega:focus-within .nav-caret {
     transform: rotate(180deg);
     color: var(--color-secondary);
   }
   
   /* Panel — breaks out of the container to span the full viewport width */
   .mega-menu {
     position: absolute;
     top: 100%;
     /* flush under the nav — no gap for the cursor to fall through */
     left: 50%;
     width: 100vw;
     margin-left: -50vw;
     /* full-bleed: ignore the container, span the whole viewport */
     z-index: var(--z-floating);
     opacity: 0;
     visibility: hidden;
     transform: translateY(8px);
     pointer-events: none;
     transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
   }
   
   /* Full-width dark band painted behind the centered content */
   .mega-menu::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background: linear-gradient(180deg, rgba(13, 9, 32, 0.98), rgba(6, 4, 18, 0.99));
     border-top: 1px solid var(--color-border-bright);
     border-bottom: 1px solid var(--color-border);
     box-shadow: var(--shadow-card);
   }
   
   .nav-item.has-mega:hover .mega-menu,
   .nav-item.has-mega.is-open .mega-menu,
   .nav-item.has-mega:focus-within .mega-menu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
     pointer-events: auto;
   }
   
   /* Content — constrained to the page container and centered, like the rest of the page */
   .mega-inner {
     display: flex;
     align-items: stretch;
     gap: 28px;
     max-width: var(--container-max);
     margin: 0 auto;
     padding: 24px var(--container-padding-x);
   }
   
   .mega-main {
     flex: 1;
     min-width: 0;
   }
   
   .mega-head {
     display: flex;
     align-items: baseline;
     gap: 14px;
     margin-bottom: 16px;
   }
   
   .mega-eyebrow {
     font-family: var(--font-display);
     font-size: 20px;
     font-weight: 900;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     color: #ffffff;
   }
   
   .mega-tagline {
     font-size: 13px;
     color: var(--color-text-muted);
   }
   
   .mega-viewall {
     margin-left: auto;
     font-size: 13px;
     font-weight: 800;
     color: var(--color-accent);
     transition: color var(--transition-fast);
   }
   
   .mega-viewall:hover {
     color: #ffffff;
   }
   
   /* Provider / game cards */
   .mega-cards {
     display: grid;
     grid-template-columns: repeat(10, 1fr);
     gap: 14px;
   }
   
   .mega-card {
     position: relative;
     display: block;
     aspect-ratio: 4 / 6;
     border-radius: var(--radius-sm);
     overflow: hidden;
     border: 1px solid var(--color-border);
     background-color: var(--color-bg-2);
     background-size: cover;
     background-position: center;
     transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
   }
   
   .mega-card:hover {
     transform: translateY(-4px);
     border-color: var(--color-border-bright);
     box-shadow: var(--shadow-glow-blue);
   }
   
   /* ============================================================
                    BUTTONS
                    ============================================================ */
   .btn-gold,
   .btn-blue,
   .btn-ghost,
   .btn-register,
   .btn-dark {
     min-height: 40px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-xs);
     padding: 10px 22px;
     font-weight: 800;
     font-size: 14px;
     line-height: 1;
     transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
     cursor: pointer;
     border: none;
     white-space: nowrap;
   }
   
   .btn-gold {
     color: #ffffff;
     background: var(--gradient-button);
     box-shadow: var(--shadow-glow-blue);
   }
   
   .btn-blue {
     color: #ffffff;
     background: var(--gradient-blue-button);
     box-shadow: var(--shadow-glow-blue);
   }
   
   .btn-ghost {
     color: var(--color-text);
     border: 1px solid var(--color-border-bright);
     background: rgba(255, 255, 255, 0.06);
   }
   
   /* Header: Register — purple gradient pill */
   .btn-register {
     color: #ffffff;
     background: linear-gradient(0deg, #5111E0 0%, #9045FD 100%);
     border: 1px solid #A267E0;
     box-shadow: var(--shadow-glow-blue);
   }
   
   /* Header: Log in — solid dark pill */
   .btn-dark {
     color: #ffffff;
     background: #15131f;
     border: 1px solid rgba(255, 255, 255, 0.08);
   }
   
   .btn-gold:hover,
   .btn-blue:hover,
   .btn-ghost:hover,
   .btn-register:hover,
   .btn-dark:hover {
     transform: translateY(-2px);
     opacity: 0.96;
   }
   
   /* ============================================================
                    HEADER: VIP ICON + LANGUAGE SWITCHER
                    ============================================================ */
   .header-vip {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
   }
   
   .header-vip img {
     height: 46px;
     width: auto;
     object-fit: contain;
     transition: transform var(--transition-fast);
   }
   
   .header-vip:hover img {
     transform: translateY(-2px) scale(1.04);
   }
   
   .language-switcher {
     position: relative;
     display: inline-flex;
     flex-shrink: 0;
   }
   
   .language-switcher__toggle {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     min-height: 40px;
     padding: 9px 14px;
     border-radius: var(--radius-xs);
     background: #15131f;
     border: 1px solid rgba(255, 255, 255, 0.08);
     color: #ffffff;
     cursor: pointer;
     transition: transform var(--transition-fast), opacity var(--transition-fast);
   }
   
   .language-switcher__toggle:hover {
     transform: translateY(-2px);
     opacity: 0.96;
   }
   
   .language-switcher__globe {
     font-size: 16px;
     line-height: 1;
   }
   
   .language-switcher__code {
     font-weight: 800;
     font-size: 14px;
     letter-spacing: 0.06em;
     line-height: 1;
   }
   
   .language-switcher__caret {
     font-size: 11px;
     line-height: 1;
     color: var(--color-text-muted);
     transition: transform var(--transition-fast);
   }
   
   .language-switcher.is-open .language-switcher__caret {
     transform: rotate(180deg);
   }
   
   .language-switcher__menu {
     position: absolute;
     top: calc(100% + 8px);
     right: 0;
     min-width: 168px;
     margin: 0;
     padding: 6px;
     list-style: none;
     background: #15131f;
     border: 1px solid var(--color-border-bright);
     border-radius: var(--radius-sm);
     box-shadow: var(--shadow-card);
     z-index: var(--z-floating);
     opacity: 0;
     visibility: hidden;
     transform: translateY(-6px);
     transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
   }
   
   .language-switcher.is-open .language-switcher__menu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
   }
   
   .language-switcher__option {
     display: block;
     width: 100%;
     padding: 10px 12px;
     border: none;
     border-radius: var(--radius-xs);
     background: transparent;
     color: var(--color-text-muted);
     font-size: 14px;
     font-weight: 600;
     text-align: left;
     cursor: pointer;
     transition: background var(--transition-fast), color var(--transition-fast);
   }
   
   .language-switcher__option:hover {
     background: rgba(255, 255, 255, 0.06);
     color: #ffffff;
   }
   
   .language-switcher__option.is-active {
     background: var(--color-primary-soft);
     color: #ffffff;
   }
   
   /* ============================================================
                    HEADER: LOGGED-IN ACTIONS
                    (balance pill, account dropdown, messages)
                    ============================================================ */
   /* ── Balance pill + quick deposit ── */
   .header-balance {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     min-height: 40px;
     padding: 4px 4px 4px 18px;
     background: #15131f;
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: var(--radius-pill);
     flex-shrink: 0;
   }
   
   .header-balance__amount {
     font-weight: 800;
     font-size: 14px;
     color: #ffffff;
     line-height: 1;
     white-space: nowrap;
   }
   
   .header-balance__add {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: linear-gradient(135deg, #FF4D4D 0%, #E11414 100%);
     box-shadow: 0 0 14px rgba(225, 20, 20, 0.5);
     color: #ffffff;
     flex-shrink: 0;
     transition: transform var(--transition-fast), box-shadow var(--transition-fast);
   }
   
   .header-balance__add svg {
     width: 16px;
     height: 16px;
   }
   
   .header-balance__add:hover {
     transform: scale(1.08);
     color: #ffffff;
     box-shadow: 0 0 20px rgba(225, 20, 20, 0.7);
   }
   
   /* ── Account dropdown ── */
   .user-menu {
     position: relative;
     display: inline-flex;
     flex-shrink: 0;
   }
   
   .user-menu__toggle {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     min-height: 40px;
     padding: 9px 16px;
     border-radius: var(--radius-xs);
     background: #15131f;
     border: 1px solid rgba(255, 255, 255, 0.08);
     color: #ffffff;
     cursor: pointer;
     transition: transform var(--transition-fast), opacity var(--transition-fast);
   }
   
   .user-menu__toggle:hover {
     transform: translateY(-2px);
     opacity: 0.96;
   }
   
   .user-menu__name {
     font-weight: 700;
     font-size: 14px;
     line-height: 1;
     white-space: nowrap;
   }
   
   .user-menu__caret {
     font-size: 11px;
     line-height: 1;
     color: var(--color-text-muted);
     transition: transform var(--transition-fast);
   }
   
   .user-menu.is-open .user-menu__caret {
     transform: rotate(180deg);
   }
   
   .user-menu__dropdown {
     position: absolute;
     top: calc(100% + 8px);
     right: 0;
     min-width: 200px;
     margin: 0;
     padding: 6px;
     list-style: none;
     background: #15131f;
     border: 1px solid var(--color-border-bright);
     border-radius: var(--radius-sm);
     box-shadow: var(--shadow-card);
     z-index: var(--z-floating);
     opacity: 0;
     visibility: hidden;
     transform: translateY(-6px);
     transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
   }
   
   .user-menu.is-open .user-menu__dropdown {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
   }
   
   .user-menu__item {
     display: block;
     padding: 11px 14px;
     border-radius: var(--radius-xs);
     color: var(--color-text-muted);
     font-size: 14px;
     font-weight: 600;
     white-space: nowrap;
     transition: background var(--transition-fast), color var(--transition-fast);
   }
   
   .user-menu__item:hover,
   .user-menu__item.is-active {
     background: var(--color-primary-soft);
     color: #ffffff;
   }
   
   /* ── Messages ── */
   .header-msg {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 30px;
     height: 30px;
     color: var(--color-secondary);
     flex-shrink: 0;
     transition: transform var(--transition-fast), color var(--transition-fast);
   }
   
   .header-msg:hover {
     transform: translateY(-2px);
     color: #ffffff;
   }
   
   .header-msg svg {
     width: 26px;
     height: 26px;
   }
   
   .header-msg__badge {
     position: absolute;
     top: -6px;
     right: -8px;
     min-width: 18px;
     height: 18px;
     padding: 0 5px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-pill);
     background: #FF2D2D;
     color: #ffffff;
     font-size: 11px;
     font-weight: 800;
     line-height: 1;
     box-shadow: 0 0 0 2px #15131f;
   }
   
   /* ============================================================
                    HERO BANNER (Swiper Carousel)
                    ============================================================ */
   .hero-section {
     position: relative;
     overflow: hidden;
   }
   
   .hero-swiper {
     width: 100%;
     height: clamp(380px, 44vw, 700px);
   }
   
   /* Banner CTA buttons — overlay on the lower-left of each banner slide */
   .hero-cta {
     position: absolute;
     left: 9.4%;
     bottom: 15%;
     z-index: 5;
     display: flex;
     gap: clamp(10px, 1.2vw, 20px);
   }
   
   .hero-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-height: clamp(40px, 4vw, 58px);
     padding: clamp(10px, 1.5vw, 16px) clamp(20px, 2.2vw, 34px);
     border-radius: 14px;
     font-family: var(--font-primary);
     font-weight: 700;
     font-size: clamp(14px, 1.4vw, 25px);
     line-height: 1;
     color: #ffffff;
     white-space: nowrap;
     transition: transform var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
   }
   
   .hero-btn--register {
     background: linear-gradient(0deg, #5111E0 0%, #9045FD 100%);
     border: 1px solid #A267E0;
     box-shadow: var(--shadow-glow-blue);
   }
   
   .hero-btn--explore {
     background: #0a0816;
     border: 1px solid #A267E0;
   }
   
   .hero-btn:hover {
     transform: translateY(-2px);
     opacity: 0.96;
   }
   
   .hero-btn--register:hover {
     box-shadow: 0 0 32px rgba(139, 63, 239, 0.55);
   }
   
   .hero-swiper .swiper-slide {
     position: relative;
     height: 100%;
     overflow: hidden;
   }
   
   .hero-swiper .swiper-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: 25% center;
     display: block;
   }
   
   .hero-swiper .swiper-button-prev,
   .hero-swiper .swiper-button-next {
     color: var(--color-accent);
     background: rgba(0, 0, 0, 0.35);
     width: 44px;
     height: 44px;
     border-radius: 50%;
     transition: background 0.2s;
   }
   
   .hero-swiper .swiper-button-prev:hover,
   .hero-swiper .swiper-button-next:hover {
     background: rgba(0, 0, 0, 0.6);
   }
   
   .hero-swiper .swiper-button-prev::after,
   .hero-swiper .swiper-button-next::after {
     font-size: 16px;
     font-weight: 700;
   }
   
   .hero-swiper .swiper-pagination-bullet {
     background: rgba(255, 255, 255, 0.5);
     opacity: 1;
   }
   
   .hero-swiper .swiper-pagination-bullet-active {
     background: var(--color-accent);
   }
   
   /* ============================================================
                    ANNOUNCEMENT BAR
                    ============================================================ */
   .announcement-bar {
     min-height: 56px;
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 12px 20px;
     border-radius: var(--radius-md);
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     box-shadow: var(--shadow-card);
     overflow: hidden;
   }
   
   .announcement-icon {
     width: 36px;
     height: 36px;
     flex: 0 0 36px;
     object-fit: contain;
   }
   
   .announcement-ticker {
     flex: 1;
     min-width: 0;
     overflow: hidden;
   }
   
   .ticker-track {
     display: inline-flex;
     flex-wrap: nowrap;
     white-space: nowrap;
     font-size: 15px;
     color: var(--color-text-muted);
     animation: ticker-scroll 7s linear infinite;
   }

   /* Two identical copies sit side by side; the gap (padding-right) keeps the
      copies from butting together as the loop repeats. */
   .ticker-item {
     padding-right: 4rem;
   }

   @keyframes ticker-scroll {
     0% {
       transform: translateX(0);
     }

     100% {
       transform: translateX(-50%);
     }
   }
   
   /* ============================================================
                    CATEGORY CARDS (Swiper)
                    ============================================================ */
   .category-section {
     overflow: hidden;
   }
   
   .category-swiper {
     width: 100%;
     padding-top: 8px;
     overflow: visible;
   }
   
   .category-swiper .swiper-slide {
     height: auto;
   }
   
   .category-card {
     position: relative;
     display: block;
     overflow: hidden;
     border-radius: var(--radius-lg);
     background: rgb(3 2 21);
     border: 1px solid rgba(195, 128, 255, 0.25);
     box-shadow: var(--shadow-card);
     transition: transform var(--transition-base), box-shadow var(--transition-base);
   }
   
   
   .category-card#slots {
     border-color: #3f1f66;
   }
   
   .category-card#live-casino {
     border-color: #723e15;
   }
   
   .category-card#sports {
     border-color: #22398a;
   }
   
   .category-card#esports {
     border-color: #3f1f66;
   }
   
   .category-card#fishing {
     border-color: #22398a;
   }
   
   .category-card#lottery {
     border-color: #3f1f66;
   }
   
   .category-card:hover {
     transform: translateY(-4px);
     border-color: var(--color-border-bright);
     box-shadow: var(--shadow-card), var(--shadow-glow-blue);
   }
   
   .category-card__image {
     display: block;
     width: 100%;
     height: auto;
     transition: transform var(--transition-base);
   }
   
   
   .category-card__content {
     position: absolute;
     bottom: 8%;
     left: 0;
     right: 0;
     padding: 0 18px;
     z-index: 2;
   }
   
   .category-card__explore {
     font-size: 13px;
     font-weight: 700;
     color: var(--color-primary);
   }
   
   
   /* ============================================================
                    PANEL / CARD SYSTEM
                    ============================================================ */
   .panel {
     position: relative;
     overflow: hidden;
     border-radius: var(--radius-lg);
     background: var(--gradient-card);
     border: 1px solid #3f1f66;
     box-shadow: var(--shadow-card);
   }
   
   .panel-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     padding: 30px 38px 18px;
   }
   
   .section-title {
     display: flex;
     align-items: center;
     gap: 12px;
     margin: 0;
     font-family: "Outfit", sans-serif;
     font-size: 28px;
     font-weight: 600;
     text-transform: uppercase;
     line-height: 1;
   }
   
   .section-title__icon {
     width: 42px;
     height: 42px;
     flex: 0 0 42px;
     object-fit: contain;
   }
   
   .promo-swiper .btn-register {
     padding: 12px 30px;
     border-radius: var(--radius-pill);
   }
   
   /* ============================================================
                    GAME CARDS
                    ============================================================ */
   .game-grid {
     display: grid;
     grid-template-columns: repeat(5, minmax(0, 1fr));
     gap: 14px 16px;
     padding: 0 38px 30px;
   }
   
   .game-card {
     position: relative;
     display: block;
     overflow: hidden;
     border-radius: var(--radius-sm);
     transition: transform var(--transition-fast), box-shadow var(--transition-fast);
   }
   
   .game-card:hover {
     transform: translateY(-3px);
     box-shadow: var(--shadow-glow-blue);
   }
   
   .game-card__thumb {
     /* aspect-ratio: 1 / 1; */
     width: 100%;
     object-fit: cover;
     display: block;
   }
   
   /* Hover dim over the thumbnail */
   .game-card::before {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(8, 5, 22, 0.55);
     opacity: 0;
     pointer-events: none;
     transition: opacity var(--transition-fast);
     z-index: 2;
   }
   
   .game-card:hover::before {
     opacity: 1;
   }
   
   /* "Play Now" button on hover, centered over the thumbnail */
   .game-card::after {
     content: "Play Now";
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%) scale(0.9);
     padding: 9px 20px;
     border-radius: var(--radius-pill);
     background: linear-gradient(0deg, #5111E0 0%, #9045FD 100%);
     border: 1px solid #A267E0;
     color: #fff;
     font-size: 13px;
     font-weight: 800;
     white-space: nowrap;
     box-shadow: var(--shadow-glow-blue);
     opacity: 0;
     pointer-events: none;
     transition: opacity var(--transition-fast), transform var(--transition-fast);
     z-index: 3;
   }
   
   .game-card:hover::after {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
   }
   
   .panel-footer {
     padding: 4px 38px 30px;
   }
   
   .panel-footer .btn-register {
     padding: 12px 30px;
     border-radius: var(--radius-pill);
   }
   
   /* ============================================================
                    CHECK-IN BONUS
                    ============================================================ */
   .checkin-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr) 2fr;
     gap: 10px;
     padding: 0 38px 16px;
   }
   
   .checkin-day {
     position: relative;
     min-height: 118px;
     border-radius: var(--radius-md);
     padding: 6px 10px;
     text-align: center;
     background: rgba(13, 9, 30, 0.6);
     border: 1px solid #3f1f66;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     gap: 3px;
   }
   
   .checkin-day.is-claimed {
     opacity: 0.85;
   }
   
   .checkin-day.is-today {
     border-color: var(--color-border-bright);
     background: rgba(139, 63, 239, 0.14);
     box-shadow: 0 0 0 1px rgba(195, 128, 255, 0.35), 0 0 20px rgba(139, 63, 239, 0.3);
   }
   
   /* Red marker on the current check-in day */
   .checkin-day.is-today::after {
     content: "";
     position: absolute;
     top: -5px;
     right: -5px;
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: #ff3b5c;
     box-shadow: 0 0 8px rgba(255, 59, 92, 0.85);
   }
   
   .checkin-day.is-featured {
     grid-row: span 2;
     min-height: 246px;
     padding: 24px 24px 20px;
     gap: 0;
     overflow: hidden;
     isolation: isolate;
     background:
       radial-gradient(circle at 50% 42%, rgba(187, 88, 255, 0.52) 0%, rgba(52, 19, 96, 0.42) 34%, rgba(13, 9, 30, 0.1) 62%),
       linear-gradient(180deg, rgba(13, 9, 30, 0.94), rgba(7, 4, 20, 0.98));
     border: 1px solid #3f1f66;
     box-shadow: inset 0 0 0 1px rgba(195, 128, 255, 0.08);
   }
   
   .checkin-day.is-featured::before {
     content: "";
     position: absolute;
     left: 50%;
     bottom: 0;
     width: 135%;
     height: 100%;
     transform: translateX(-50%);
     background: url("../img/index/ci-gift.webp") center bottom / contain no-repeat;
     pointer-events: none;
     z-index: 0;
   }
   
   .checkin-day.is-featured>* {
     position: relative;
     z-index: 1;
   }
   
   .checkin-day__day {
     font-family: var(--font-display);
     font-size: 18px;
     font-weight: 900;
     line-height: 1;
     text-transform: uppercase;
     color: #fff;
   }
   
   .checkin-day.is-featured .checkin-day__day {
     font-size: 34px;
     margin-top: 2px;
     color: #fff;
     letter-spacing: 0.04em;
     text-shadow: 0 6px 22px rgba(151, 79, 245, 0.28);
   }
   
   .checkin-day__icon {
     width: 50px;
     height: 50px;
     object-fit: contain;
   }
   
   .checkin-day__status {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     min-height: 26px;
     border-radius: var(--radius-pill);
     /* pill per DESIGN.md §6 — matches site button system */
     padding: 5px 12px;
     font-size: 12px;
     font-weight: 800;
   }
   
   .checkin-day.is-featured .checkin-day__status {
     width: auto;
     min-width: 170px;
     min-height: 42px;
     margin-top: auto;
     padding: 10px 24px;
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 0.02em;
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
   }
   
   .checkin-day__status.s-claimed {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid #645595;
     color: #645595;
   }
   
   .checkin-day__status.s-upcoming {
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid #645595;
     color: #645595;
   }
   
   .checkin-day__status.s-claim {
     background: linear-gradient(0deg, #5111E0 0%, #9045FD 100%);
     border: 1px solid #A267E0;
     color: #ffffff;
     box-shadow: var(--shadow-glow-blue);
   }
   
   /* ============================================================
                    PROMOTION CARD
                    ============================================================ */
   .promo-card {
     min-height: 343px;
     padding: 0;
     overflow: hidden;
     background: url('../img/index/promo-01.webp') center / cover no-repeat;
   }
   
   .promo-card__content {
     position: absolute;
     left: 0;
     top: 56%;
     z-index: 2;
     padding: 0 36px;
   }
   
   .promo-card__eyebrow {
     margin: 0 0 10px;
     font-size: 13px;
     font-weight: 800;
     color: var(--color-accent);
     text-transform: uppercase;
     letter-spacing: 0.08em;
   }
   
   .promo-card__title {
     margin: 0 0 26px;
     font-family: var(--font-display);
     font-size: 42px;
     font-weight: 900;
     line-height: 1.05;
     text-transform: uppercase;
   }
   
   .promo-card__overlay {
     display: none;
   }
   
   /* Promo carousel */
   .promo-swiper {
     border-radius: var(--radius-lg);
     overflow: hidden;
   }
   
   .promo-swiper .swiper-slide {
     height: auto;
   }
   
   .promo-swiper .promo-card {
     height: 100%;
   }
   
   .promo-nav {
     position: absolute;
     left: 36px;
     bottom: 24px;
     z-index: 5;
     display: flex;
     gap: 12px;
   }
   
   .promo-nav__btn {
     width: 40px;
     height: 40px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     border: 1px solid #c380ff;
     background: #010011;
     color: #c380ff;
     cursor: pointer;
     transition: background var(--transition-fast), transform var(--transition-fast);
   }
   
   .promo-nav__btn svg {
     width: 18px;
     height: 18px;
   }
   
   .promo-nav__btn:hover {
     background: var(--gradient-button);
     transform: translateY(-2px);
   }
   
   /* ============================================================
                    PROVIDER STRIP
                    ============================================================ */
   .provider-strip {
     overflow: hidden;
     border-radius: 25px;
     background: #060216;
     border: 1px solid var(--color-border);
   }
   
   .provider-swiper {
     width: 100%;
     padding: 15px;
   }
   
   /* Continuous marquee: constant-speed scroll, no easing */
   .provider-swiper .swiper-wrapper,
   .category-swiper .swiper-wrapper {
     transition-timing-function: linear;
   }
   
   .provider-swiper .swiper-slide {
     display: flex;
     align-items: center;
     justify-content: center;
     width: auto;
     height: 90px;
   }
   
   .provider-logo {
     max-width: 140px;
     max-height: 70px;
     object-fit: contain;
     opacity: 0.85;
     filter: drop-shadow(0 0 12px rgba(139, 63, 239, 0.25));
     transition: opacity var(--transition-fast), filter var(--transition-fast);
   }
   
   .provider-logo:hover {
     opacity: 1;
     filter: drop-shadow(0 0 16px rgba(139, 63, 239, 0.55));
   }
   
   /* ============================================================
                    FLOATING ACTIONS
                    ============================================================ */
   .floating-actions {
     position: fixed;
     right: 22px;
     bottom: 28px;
     z-index: var(--z-floating);
     display: flex;
     flex-direction: column;
     gap: 12px;
   }
   
   .floating-btn {
     width: 44px;
     height: 44px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-sm);
     color: var(--color-text);
     background: linear-gradient(0deg, #5111E0 0%, #9045FD 100%);
     border: 1px solid #A267E0;
     box-shadow: var(--shadow-glow-blue);
     font-size: 18px;
     transition: transform var(--transition-fast), box-shadow var(--transition-fast);
   }
   
   .floating-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 0 32px rgba(139, 63, 239, 0.55);
   }
   
   /* ============================================================
                    FOOTER
                    ============================================================ */
   .site-footer {
     margin-top: 48px;
     padding: 56px 0 28px;
     background: rgba(4, 8, 20, 0.96);
     border: 1px solid #3f1f66;
     border-radius: 10px;
   }
   
   .footer-title {
     margin: 0 0 16px;
     font-size: 14px;
     font-weight: 700;
     color: var(--color-text);
   }
   
   .footer-link,
   .footer-text {
     display: block;
     margin-bottom: 10px;
     font-size: 14px;
     color: #645595;
     transition: color var(--transition-fast);
   }
   
   .footer-link:hover {
     color: var(--color-text);
   }
   
   .footer-divider {
     height: 1px;
     margin: 30px 0;
     background: #fff;
     opacity: 1;
     border: none;
   }
   
   .footer-bottom {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     color: var(--color-text-soft);
     font-size: 12px;
   }
   
   .footer-badges {
     display: flex;
     align-items: center;
     gap: 16px;
   }
   
   .footer-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-height: 28px;
     padding: 4px 12px;
     border-radius: var(--radius-xs);
     border: 1px solid var(--color-border);
     font-size: 11px;
     font-weight: 700;
     color: var(--color-text-soft);
     background: rgba(255, 255, 255, 0.04);
   }
   
   .footer-age {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     border: 2px solid var(--color-text-soft);
     font-size: 12px;
     font-weight: 900;
     color: var(--color-text-soft);
   }
   
   /* Footer contact list */
   .footer-contact__item {
     margin-bottom: 12px;
     font-size: 14px;
     line-height: 1.3;
     display: flex;
     grid-gap: 10px;
   }
   
   .footer-contact__label {
     display: block;
     color: #645595;
     margin-bottom: 2px;
   }
   
   .footer-contact__value {
     display: block;
     color: #00e7f7;
     font-weight: 600;
     word-break: break-word;
   }
   
   /* Footer social icons */
   .footer-social {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 24px;
   }
   
   .footer-social__btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: var(--radius-xs);
     background: rgba(255, 255, 255, 0.06);
     border: 1px solid #3f1f66;
     color: #fff;
     transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
   }
   
   .footer-social__btn:hover {
     color: #ffffff;
     background: linear-gradient(0deg, #5111E0 0%, #9045FD 100%);
     border: 1px solid #A267E0;
     box-shadow: var(--shadow-glow-blue);
     transform: translateY(-2px);
   }
   
   .footer-social__btn.is-primary {
     color: #ffffff;
     background: linear-gradient(0deg, #5111E0 0%, #9045FD 100%);
     border: 1px solid #A267E0;
     box-shadow: var(--shadow-glow-blue);
   }
   
   /* Footer brand block */
   .footer-brand__logo {
     margin-bottom: 12px;
   }
   
   .footer-brand__logo img {
     height: 34px;
     width: auto;
   }
   
   .footer-brand .footer-text {
     color: #645595;
     font-size: 13px;
     line-height: 1.6;
     max-width: 520px;
   }
   
   /* Certification / partner logos */
   .footer-certs {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: stretch;
   }
   
   .footer-cert {
     height: 40px;
     width: auto;
     object-fit: contain;
     opacity: 1;
     transition: opacity var(--transition-fast);
     filter: brightness(4.5);
   }
   
   .footer-cert:hover {
     opacity: 1;
   }
   
   /* Bottom: copyright + responsible gaming */
   .footer-copy {
     margin: 0;
     font-size: 12px;
     line-height: 1.6;
     color: #fff;
     max-width: 72%;
   }
   
   .footer-responsible {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     flex-shrink: 0;
   }
   
   .footer-responsible__badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: #1aa37a;
     color: #fff;
     font-size: 12px;
     font-weight: 900;
   }
   
   .footer-responsible__text {
     font-size: 11px;
     font-weight: 700;
     line-height: 1.1;
     color: #1aa37a;
   }
   
   /* ============================================================
                    CHECK-IN CLAIM — CONGRATULATION MODAL
                    ============================================================ */
   .claim-modal .modal-dialog {
     max-width: 420px;
   }
   
   .claim-modal__content {
     position: relative;
     border: none;
     border-radius: var(--radius-lg);
     background: var(--gradient-card);
     box-shadow: var(--shadow-card), var(--shadow-glow-blue);
     overflow: hidden;
     color: var(--color-text);
   }
   
   /* Bright violet edge highlight */
   .claim-modal__content::before {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     padding: 1px;
     background: linear-gradient(160deg, rgba(195, 128, 255, 0.7), rgba(139, 63, 239, 0.12) 42%, rgba(255, 255, 255, 0.05));
     -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
     mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     pointer-events: none;
   }
   
   .claim-modal__body {
     position: relative;
     z-index: 1;
     padding: 40px 34px 34px;
     text-align: center;
   }
   
   .claim-modal__close {
     position: absolute;
     top: 14px;
     right: 16px;
     z-index: 3;
     width: 34px;
     height: 34px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border: 1px solid var(--color-border);
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.06);
     color: var(--color-text-muted);
     font-size: 22px;
     line-height: 1;
     cursor: pointer;
     transition: color var(--transition-fast), background var(--transition-fast);
   }
   
   .claim-modal__close:hover {
     color: #fff;
     background: rgba(255, 255, 255, 0.14);
   }
   
   .claim-modal__eyebrow {
     display: inline-block;
     font-size: 12px;
     font-weight: 800;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--color-secondary);
     margin-bottom: 8px;
   }
   
   .claim-modal__title {
     font-family: var(--font-display);
     font-size: 38px;
     font-weight: 900;
     line-height: 1;
     text-transform: uppercase;
     margin: 0 0 8px;
     background: linear-gradient(180deg, #fff 0%, #c380ff 135%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
   }
   
   .claim-modal__subtitle {
     max-width: 320px;
     margin: 0 auto;
     font-size: 14px;
     color: var(--color-text-muted);
   }
   
   /* Coin + animated sunburst */
   .claim-modal__reward {
     position: relative;
     display: grid;
     place-items: center;
     width: 200px;
     height: 200px;
     margin: 6px auto 2px;
   }
   
   .claim-modal__reward::before {
     content: "";
     position: absolute;
     inset: 0;
     background: repeating-conic-gradient(from 0deg,
         rgba(255, 211, 90, 0) 0deg 8deg,
         rgba(255, 211, 90, 0.22) 8deg 16deg);
     -webkit-mask: radial-gradient(circle, #000 26%, transparent 68%);
     mask: radial-gradient(circle, #000 26%, transparent 68%);
     animation: claim-rays 18s linear infinite;
   }
   
   .claim-modal__reward::after {
     content: "";
     position: absolute;
     width: 150px;
     height: 150px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(139, 63, 239, 0.55) 0%, rgba(139, 63, 239, 0) 70%);
     filter: blur(4px);
   }
   
   .claim-modal__coin {
     position: relative;
     z-index: 1;
     width: 116px;
     height: 116px;
     object-fit: contain;
     filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5));
     animation: claim-bob 2.6s ease-in-out infinite;
   }
   
   .claim-modal__amount {
     margin: 4px 0 22px;
     font-family: var(--font-display);
     font-size: 30px;
     font-weight: 900;
     color: var(--color-accent);
     text-shadow: var(--shadow-glow-gold);
   }
   
   .claim-modal__amount span {
     font-size: 18px;
     color: var(--color-text-muted);
     text-shadow: none;
   }
   
   .claim-modal__cta {
     width: 100%;
     max-width: 260px;
     min-height: 48px;
     font-size: 15px;
   }
   
   /* Pop-in for the dialog (overrides Bootstrap's default slide) */
   .claim-modal.fade .modal-dialog {
     transform: scale(0.86);
     transition: transform var(--transition-base);
   }
   
   .claim-modal.show .modal-dialog {
     transform: scale(1);
   }
   
   @keyframes claim-bob {
   
     0%,
     100% {
       transform: translateY(0);
     }
   
     50% {
       transform: translateY(-8px);
     }
   }
   
   @keyframes claim-rays {
     to {
       transform: rotate(360deg);
     }
   }
   
   @media (prefers-reduced-motion: reduce) {
   
     .claim-modal__coin,
     .claim-modal__reward::before {
       animation: none;
     }
   
     .claim-modal.fade .modal-dialog {
       transition: none;
     }
   }
   
   /* ============================================================
                    LOGIN MODAL
                    ============================================================ */
   .login-modal .modal-dialog {
     max-width: 420px;
   }
   
   .login-modal__content {
     position: relative;
     border: none;
     border-radius: var(--radius-lg);
     background: var(--gradient-card);
     box-shadow: var(--shadow-card), var(--shadow-glow-blue);
     overflow: hidden;
     color: var(--color-text);
   }
   
   /* Bright violet edge highlight */
   .login-modal__content::before {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     padding: 1px;
     background: linear-gradient(160deg, rgba(195, 128, 255, 0.7), rgba(139, 63, 239, 0.12) 42%, rgba(255, 255, 255, 0.05));
     -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
     mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     pointer-events: none;
   }
   
   .login-modal__header {
     position: relative;
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px 24px;
     border-bottom: 1px solid var(--color-border);
   }
   
   .login-modal__title {
     margin: 0;
     font-family: var(--font-display);
     font-size: 26px;
     font-weight: 900;
     letter-spacing: 0.02em;
     text-transform: uppercase;
   }
   
   .login-modal__close {
     width: 36px;
     height: 36px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border: none;
     border-radius: var(--radius-xs);
     background: var(--color-primary-soft);
     color: #fff;
     font-size: 22px;
     line-height: 1;
     cursor: pointer;
     transition: background var(--transition-fast);
   }
   
   .login-modal__close:hover {
     background: rgba(139, 63, 239, 0.4);
   }
   
   .login-modal__body {
     position: relative;
     z-index: 1;
     padding: 24px 28px 28px;
   }
   
   .login-modal__welcome {
     margin: 0 0 20px;
     font-size: 20px;
     font-weight: 800;
   }
   
   .login-field {
     margin-bottom: 16px;
   }
   
   .login-field__label {
     display: block;
     margin-bottom: 7px;
     font-size: 13px;
     font-weight: 700;
     color: var(--color-text-muted);
   }
   
   .login-field__input {
     width: 100%;
     min-height: 50px;
     padding: 12px 16px;
     border-radius: var(--radius-sm);
     background: rgba(8, 5, 22, 0.6);
     border: 1px solid rgba(160, 120, 220, 0.35);
     color: #fff;
     font-family: inherit;
     font-size: 14px;
     transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
   }
   
   .login-field__input::placeholder {
     color: var(--color-text-soft);
   }
   
   .login-field__input:focus {
     outline: none;
     border-color: var(--color-border-bright);
     box-shadow: 0 0 0 3px rgba(139, 63, 239, 0.25);
   }
   
   .login-form__row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     margin: 4px 0 20px;
   }
   
   .login-remember {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 13px;
     color: var(--color-text-muted);
     cursor: pointer;
     user-select: none;
   }
   
   .login-remember__box {
     width: 16px;
     height: 16px;
     accent-color: var(--color-primary);
     cursor: pointer;
   }
   
   .login-link {
     color: #2dd4bf;
     font-size: 13px;
     font-weight: 700;
     transition: color var(--transition-fast);
   }
   
   .login-link:hover {
     color: #5eead4;
   }
   
   .login-submit {
     width: 100%;
     min-height: 52px;
     border: none;
     border-radius: var(--radius-sm);
     background: linear-gradient(95deg, #f4a6e0 0%, #c18ae6 45%, #6fe0dd 100%);
     color: #fff;
     font-family: var(--font-display);
     font-size: 18px;
     font-weight: 800;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     cursor: pointer;
     box-shadow: 0 8px 24px rgba(193, 138, 230, 0.35);
     transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
   }
   
   .login-submit:hover {
     transform: translateY(-2px);
     opacity: 0.96;
   }
   
   .login-divider {
     display: flex;
     align-items: center;
     gap: 14px;
     margin: 22px 0;
     font-size: 13px;
     color: var(--color-text-soft);
   }
   
   .login-divider::before,
   .login-divider::after {
     content: "";
     flex: 1;
     height: 1px;
     background: var(--color-border);
   }
   
   .login-social {
     display: flex;
     justify-content: center;
     gap: 14px;
     margin-bottom: 22px;
   }
   
   .login-social__btn {
     width: 56px;
     height: 56px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-sm);
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid var(--color-border);
     color: #fff;
     transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
   }
   
   .login-social__btn:hover {
     transform: translateY(-2px);
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--color-border-bright);
   }
   
   .login-social__btn svg {
     width: 24px;
     height: 24px;
   }
   
   .login-foot {
     margin: 6px 0 0;
     text-align: center;
     font-size: 13px;
     color: var(--color-text-muted);
   }
   
   /* Pop-in for the dialog */
   .login-modal.fade .modal-dialog {
     transform: scale(0.94) translateY(10px);
     transition: transform var(--transition-base);
   }
   
   .login-modal.show .modal-dialog {
     transform: none;
   }
   
   @media (prefers-reduced-motion: reduce) {
     .login-modal.fade .modal-dialog {
       transition: none;
     }
   }
   
   /* ============================================================
                    OTP ACTIVATION MODAL
                    ============================================================ */
   .otp-modal .modal-dialog {
     max-width: 420px;
   }
   
   .otp-modal__content {
     position: relative;
     border: none;
     border-radius: var(--radius-lg);
     background: var(--gradient-card);
     box-shadow: var(--shadow-card), var(--shadow-glow-blue);
     overflow: hidden;
     color: var(--color-text);
   }
   
   /* Bright violet edge highlight */
   .otp-modal__content::before {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     padding: 1px;
     background: linear-gradient(160deg, rgba(195, 128, 255, 0.7), rgba(139, 63, 239, 0.12) 42%, rgba(255, 255, 255, 0.05));
     -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
     mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     pointer-events: none;
   }
   
   .otp-modal__header {
     position: relative;
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px 24px;
     border-bottom: 1px solid var(--color-border);
   }
   
   .otp-modal__title {
     margin: 0;
     font-family: var(--font-display);
     font-size: 26px;
     font-weight: 900;
     letter-spacing: 0.02em;
     text-transform: uppercase;
   }
   
   .otp-modal__close {
     width: 36px;
     height: 36px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border: none;
     border-radius: var(--radius-xs);
     background: var(--color-primary-soft);
     color: #fff;
     font-size: 22px;
     line-height: 1;
     cursor: pointer;
     transition: background var(--transition-fast);
   }
   
   .otp-modal__close:hover {
     background: rgba(139, 63, 239, 0.4);
   }
   
   .otp-modal__body {
     position: relative;
     z-index: 1;
     padding: 28px 28px 28px;
     text-align: center;
   }
   
   .otp-modal__icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 64px;
     height: 64px;
     margin-bottom: 16px;
     border-radius: var(--radius-md);
     color: var(--color-secondary);
     background: rgba(139, 63, 239, 0.18);
     border: 1px solid rgba(160, 120, 220, 0.35);
     box-shadow: var(--shadow-glow-blue);
   }
   
   .otp-modal__icon svg {
     width: 30px;
     height: 30px;
   }
   
   .otp-modal__heading {
     margin: 0 0 8px;
     font-size: 20px;
     font-weight: 800;
   }
   
   .otp-modal__text {
     margin: 0 auto 24px;
     max-width: 320px;
     font-size: 14px;
     line-height: 1.55;
     color: var(--color-text-muted);
   }
   
   .otp-modal__text strong {
     color: #fff;
     font-weight: 700;
   }
   
   .otp-inputs {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin-bottom: 24px;
   }
   
   .otp-inputs__box {
     width: 52px;
     height: 60px;
     padding: 0;
     text-align: center;
     border-radius: var(--radius-sm);
     background: rgba(8, 5, 22, 0.6);
     border: 1px solid rgba(160, 120, 220, 0.35);
     color: #fff;
     font-family: var(--font-display);
     font-size: 24px;
     font-weight: 800;
     transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
   }
   
   .otp-inputs__box:focus {
     outline: none;
     border-color: var(--color-border-bright);
     box-shadow: 0 0 0 3px rgba(139, 63, 239, 0.25);
   }
   
   .otp-inputs__box.is-filled {
     border-color: var(--color-border-bright);
     background: rgba(139, 63, 239, 0.12);
   }
   
   .otp-submit {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     min-height: 52px;
     border: none;
     border-radius: var(--radius-sm);
     background: linear-gradient(95deg, #f4a6e0 0%, #c18ae6 45%, #6fe0dd 100%);
     color: #fff;
     font-family: var(--font-display);
     font-size: 18px;
     font-weight: 800;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     text-decoration: none;
     cursor: pointer;
     box-shadow: 0 8px 24px rgba(193, 138, 230, 0.35);
     transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
   }
   
   .otp-submit:hover {
     transform: translateY(-2px);
     opacity: 0.96;
     color: #fff;
   }
   
   /* Success step */
   .otp-success__icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 72px;
     height: 72px;
     margin-bottom: 18px;
     border-radius: var(--radius-pill);
     color: #2dd4bf;
     background: rgba(45, 212, 191, 0.12);
     border: 1px solid rgba(45, 212, 191, 0.5);
     box-shadow: 0 0 28px rgba(45, 212, 191, 0.35);
     animation: otp-pop var(--transition-base) ease both;
   }
   
   .otp-success__icon svg {
     width: 36px;
     height: 36px;
   }
   
   @keyframes otp-pop {
     from {
       transform: scale(0.6);
       opacity: 0;
     }
   
     to {
       transform: scale(1);
       opacity: 1;
     }
   }
   
   @media (prefers-reduced-motion: reduce) {
     .otp-success__icon {
       animation: none;
     }
   }
   
   .otp-resend {
     margin: 20px 0 0;
     font-size: 13px;
     color: var(--color-text-muted);
   }
   
   .otp-resend__btn {
     padding: 0;
     border: none;
     background: none;
     color: #2dd4bf;
     font-family: inherit;
     font-size: 13px;
     font-weight: 700;
     cursor: pointer;
     transition: color var(--transition-fast);
   }
   
   .otp-resend__btn:hover:not(:disabled) {
     color: #5eead4;
   }
   
   .otp-resend__btn:disabled {
     color: var(--color-text-soft);
     cursor: default;
   }
   
   .otp-foot {
     margin: 14px 0 0;
     font-size: 13px;
   }
   
   /* Pop-in for the dialog */
   .otp-modal.fade .modal-dialog {
     transform: scale(0.94) translateY(10px);
     transition: transform var(--transition-base);
   }
   
   .otp-modal.show .modal-dialog {
     transform: none;
   }
   
   @media (prefers-reduced-motion: reduce) {
     .otp-modal.fade .modal-dialog {
       transition: none;
     }
   }
   
   /* ============================================================
                    REGISTER PAGE
                    ============================================================ */
   .register-section {
     padding: 48px 0 72px;
   }
   
   .register-layout {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
     gap: 28px;
     align-items: stretch;
   }
   
   /* ── Left: form card ── */
   .register-card {
     position: relative;
     border-radius: var(--radius-lg);
     background: var(--gradient-card);
     border: 1px solid var(--color-border);
     box-shadow: var(--shadow-card);
     padding: 40px;
     overflow: hidden;
   }
   
   .register-card::before {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     padding: 1px;
     background: linear-gradient(160deg, rgba(195, 128, 255, 0.55), rgba(139, 63, 239, 0.10) 45%, rgba(255, 255, 255, 0.04));
     -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
     mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     pointer-events: none;
   }
   
   .register-form {
     position: relative;
     z-index: 1;
   }
   
   /* ── Icon-prefixed input ── */
   .reg-field {
     position: relative;
     display: flex;
     align-items: center;
     margin-bottom: 16px;
     min-height: 52px;
     border-radius: var(--radius-xs);
     background: rgba(8, 5, 22, 0.55);
     border: 1px solid rgba(160, 120, 220, 0.35);
     transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
   }
   
   .reg-field:focus-within {
     border-color: var(--color-border-bright);
     box-shadow: 0 0 0 3px rgba(139, 63, 239, 0.25);
   }
   
   .reg-field__icon {
     align-self: stretch;
     flex: 0 0 52px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: var(--color-secondary);
     background: rgba(139, 63, 239, 0.18);
     border-right: 1px solid rgba(160, 120, 220, 0.35);
     border-radius: calc(var(--radius-xs) - 1px) 0 0 calc(var(--radius-xs) - 1px);
     transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
   }
   
   .reg-field:focus-within .reg-field__icon {
     background: var(--gradient-button);
     border-right-color: var(--color-border-bright);
     color: #fff;
   }
   
   .reg-field__icon svg {
     width: 20px;
     height: 20px;
   }
   
   .reg-field__code {
     align-self: stretch;
     flex: 0 0 auto;
     padding: 0 30px 0 14px;
     border: none;
     border-right: 1px solid rgba(160, 120, 220, 0.35);
     background: transparent;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C380FF'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 8px center;
     background-size: 16px;
     color: #fff;
     font-family: inherit;
     font-size: 14px;
     font-weight: 700;
     cursor: pointer;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
   }
   
   .reg-field__code:focus {
     outline: none;
   }
   
   .reg-field__code option {
     background: #15102e;
     color: #fff;
   }
   
   .reg-field__input {
     flex: 1;
     min-width: 0;
     padding: 10px;
     background: transparent;
     border: none;
     color: #fff;
     font-family: inherit;
     height: 100%;
     font-size: 14px;
   }
   
   .reg-field__input::placeholder {
     color: var(--color-text-soft);
   }
   
   .reg-field__input:focus {
     outline: none;
   }
   
   /* ── Terms checkbox ── */
   .reg-terms {
     display: flex;
     align-items: flex-start;
     gap: 9px;
     margin: 18px 0 22px;
     font-size: 13px;
     color: var(--color-text-muted);
     cursor: pointer;
     user-select: none;
   }
   
   .reg-terms__box {
     flex: 0 0 auto;
     width: 16px;
     height: 16px;
     margin-top: 1px;
     accent-color: var(--color-primary);
     cursor: pointer;
   }
   
   .reg-terms a {
     color: var(--color-accent);
     font-weight: 700;
   }
   
   /* ── Submit ── */
   .reg-submit {
     width: 100%;
     min-height: 54px;
     border: 1px solid #A267E0;
     border-radius: var(--radius-xs);
     background: linear-gradient(0deg, #5111E0 0%, #9045FD 100%);
     color: #fff;
     font-family: var(--font-display);
     font-size: 20px;
     font-weight: 800;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     cursor: pointer;
     box-shadow: 0 10px 28px rgba(139, 63, 239, 0.4);
     transition: transform var(--transition-fast), opacity var(--transition-fast);
   }
   
   .reg-submit:hover {
     transform: translateY(-2px);
     opacity: 0.96;
   }
   
   /* ── "Register with" divider ── */
   .reg-divider {
     display: flex;
     align-items: center;
     gap: 14px;
     margin: 26px 0 18px;
     font-size: 14px;
     font-weight: 700;
     color: var(--color-secondary);
   }
   
   .reg-divider::before,
   .reg-divider::after {
     content: "";
     flex: 1;
     height: 1px;
     background: var(--color-border);
   }
   
   /* ── Social sign-up buttons ── */
   .reg-social {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 12px;
   }
   
   .reg-social__btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 10px 18px;
     border-radius: var(--radius-xs);
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid var(--color-border);
     color: #fff;
     font-size: 13px;
     font-weight: 700;
     transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
   }
   
   .reg-social__btn:hover {
     transform: translateY(-2px);
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--color-border-bright);
   }
   
   .reg-social__btn svg {
     width: 18px;
     height: 18px;
   }
   
   .reg-social__btn.is-primary {
     background: var(--gradient-button);
     border-color: transparent;
   }
   
   .reg-social__btn.is-primary:hover {
     background: var(--gradient-button);
     opacity: 0.92;
   }
   
   /* ── Right: promo column ── */
   .register-promo {
     display: flex;
     flex-direction: column;
     gap: 24px;
   }
   
   .register-promo .promo-swiper {
     width: 100%;
     /* Share the column height equally so the two banners stretch to match
        the form card's height instead of forcing a taller fixed height. */
     flex: 1 1 0;
     min-height: 0;
   }
   
   /* Let the flex height drive the banners here rather than the 343px floor */
   .register-promo .promo-card {
     min-height: 0;
   }