/* Game-inspired accents shared by the public and member areas. */
.site-layout {
    background:
        radial-gradient(ellipse 70% 440px at 85% 8%, #e7d6ff 0%, transparent 75%),
        radial-gradient(ellipse 45% 450px at 0% 38%, #e0f5ff 0%, transparent 80%),
        linear-gradient(180deg, #eef5ff 0%, #f8f8ff 750px, #f8fbff 100%);
}
.site-header { background: #ffffffea; box-shadow: 0 5px 24px #3b4c8a0e; }
.site-brand-icon { border-color: #e4c6ff; background: linear-gradient(135deg, #fff4d6, #f5e8ff 52%, #dff8ff); color: #8b46c8; box-shadow: 0 4px 14px #aa61d92b; }
.site-nav { border-color: #e2e0f2; box-shadow: 0 5px 18px #343a8610; }
.site-nav-link { transition: color .2s, background-color .2s, transform .2s; }
.site-nav-link:hover { color: #7040ac; background: #f6efff; transform: translateY(-2px); }
.site-nav-link.active { color: #6b3fac; }
.site-nav-link.active::after { background: linear-gradient(90deg, #c365ea, #6b55de); }
.site-login { background: linear-gradient(100deg, #6551cc, #a047c4); border-color: #7651c7; box-shadow: 0 6px 18px #9953ce40; }
.site-login:hover { background: linear-gradient(100deg, #5d43b4, #8436aa); border-color: #6f40a9; }
.site-layout .primary-button { background: linear-gradient(105deg, #6350ba, #973fae); border-color: #7850b8; color: #fff; box-shadow: 0 5px 15px #8250b52b; }
.site-layout .primary-button:hover { background: linear-gradient(105deg, #53409e, #803291); border-color: #67399c; color: #fff; }
.site-layout .reference-hero-grid { gap: 12px; }
.site-layout .reference-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 405px;
    border: 1px solid #e4baff;
    box-shadow: 0 16px 40px #7051b638, 0 3px 12px #bd6eea24;
    background-image: linear-gradient(90deg, #24133de3 0%, #311751a8 38%, #3818650d 78%), url('../images/chung-suc-flare.webp');
}
.reference-hero::before, .reference-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.reference-hero::before { background: radial-gradient(ellipse at 6% 102%, #ffae4e65, transparent 43%), radial-gradient(circle at 98% 6%, #f3afff66, transparent 35%); mix-blend-mode: screen; animation: hero-glow 7s ease-in-out infinite alternate; }
.reference-hero::after { inset: 9px; border: 1px solid #ffe9c840; border-radius: 10px; }
.site-layout .reference-hero-content { position: relative; z-index: 2; max-width: 560px; padding: 44px; }
.hero-kicker { color: #ffefc3; letter-spacing: 1.8px; font-size: 10px; background: #391c50bd; border: 1px solid #ffdaa45e; border-radius: 30px; padding: 6px 10px; }
.hero-kicker svg { color: #ffd285; }
.site-layout .reference-hero h1 { font-size: clamp(36px, 4.2vw, 58px); line-height: 1.16; letter-spacing: -.7px; text-shadow: 0 3px 16px #160f35a8; font-weight: 600; }
.site-layout .reference-hero h1 span { color: #ffd5fa; }
.site-layout .reference-hero p { color: #f9efff; max-width: 340px; line-height: 1.7; font-size: 14px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.hero-actions .hero-button { width: auto; min-width: 170px; background: linear-gradient(105deg, #ffe4ad, #ffc878 65%, #ffc3a5); border-color: #ffddab; color: #58305a; font-weight: 600; box-shadow: 0 5px 20px #ffa26042; transition: transform .2s ease, box-shadow .2s ease; }
.hero-actions .hero-button:hover { background: #ffe1a9; transform: translateY(-3px); box-shadow: 0 9px 28px #ffa96375; }
.hero-text-link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 7px; background: #26163c99; color: #fff4ff; font-size: 12px; text-shadow: 0 1px 4px #28153f; }
.hero-text-link:hover { color: #fff; }
.hero-bottom-note { display: flex; align-items: center; gap: 8px; margin-top: 27px; color: #ffe9d0; letter-spacing: 1.3px; font-size: 9px; }
.hero-bottom-note span { width: 25px; height: 1px; background: #ffcf90; }
.hero-particles { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.hero-particles i { position: absolute; display: block; width: 5px; height: 5px; border-radius: 50%; background: #fff0cb; box-shadow: 0 0 8px 2px #ffb35c; opacity: .7; animation: ember-rise 6s ease-in-out infinite; }
.hero-particles i:nth-child(1) { left: 4%; top: 77%; animation-delay: -1.4s; }.hero-particles i:nth-child(2) { left: 12%; top: 37%; width: 3px; height: 3px; animation-delay: -4s; }.hero-particles i:nth-child(3) { left: 32%; top: 86%; animation-delay: -2s; }.hero-particles i:nth-child(4) { left: 54%; top: 70%; width: 3px; height: 3px; animation-delay: -.7s; }.hero-particles i:nth-child(5) { left: 62%; top: 35%; animation-delay: -3.4s; }.hero-particles i:nth-child(6) { left: 76%; top: 79%; width: 3px; height: 3px; animation-delay: -5s; }.hero-particles i:nth-child(7) { left: 89%; top: 30%; animation-delay: -2.7s; }.hero-particles i:nth-child(8) { left: 94%; top: 70%; width: 4px; height: 4px; animation-delay: -4.7s; }
.site-layout .hero-side { position: relative; overflow: hidden; gap: 11px; border-color: #ead4ff; background: radial-gradient(circle at 50% 0%, #f3ccff 0%, transparent 48%), linear-gradient(160deg, #fff4fa, #f6eaff 54%, #eaf8ff); box-shadow: 0 12px 30px #9f69d21f; }
.hero-side::before { content: ''; position: absolute; width: 210px; height: 210px; top: -100px; right: -60px; border: 1px solid #ffffffbb; border-radius: 50%; box-shadow: 0 0 0 25px #fff3, 0 0 0 50px #fff3; pointer-events: none; }
.hero-side-spark { position: relative; display: grid; place-items: center; width: 49px; height: 49px; border-radius: 16px; color: #9950c4; background: #ffffffd9; border: 1px solid #edd7ff; box-shadow: 0 5px 20px #ab6cca33; animation: sparkle-float 4s ease-in-out infinite; }
.site-layout .hero-side-label { position: relative; color: #7044a5; border-color: #dfcaf5; font-size: 10px; font-weight: 500; }
.hero-feature { position: relative; background: #ffffffdd; border-color: #e9d9fa; box-shadow: 0 3px 10px #a675c710; transition: transform .2s, box-shadow .2s; }
.hero-feature svg { color: #9c55c2; }.hero-feature:hover { transform: translateX(4px); box-shadow: 0 5px 15px #a675c72d; }
.site-layout .hero-side .button { background: linear-gradient(100deg, #7447c1, #b043b5); border-color: #8c46ba; box-shadow: 0 6px 16px #a346bf38; }
.site-layout .hero-side .button:hover { background: linear-gradient(100deg, #6237ad, #913399); }
.site-layout .intro-card { position: relative; overflow: hidden; border-color: #e8daf5; box-shadow: 0 12px 32px #7250ad12; }
.site-layout .intro-card::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 2px; background: linear-gradient(90deg, transparent, #c489e5, #f8c890, #c489e5, transparent); }
.intro-eyebrow { color: #8444bd; }.site-layout .intro-card h2 { color: #5742a3; }.site-layout .intro-card h2 span { color: #a647b8; }
.intro-columns > div { transition: transform .25s, border-color .25s, box-shadow .25s; }.intro-columns > div:hover { transform: translateY(-3px); border-color: #dcc9f1; box-shadow: 0 8px 20px #7c57af12; }
.community-link { color: #633b9d; background: #f0eaff; }
.site-notice { border-color: #e5d6f7; box-shadow: 0 5px 20px #7c56b311; }.site-notice-icon { background: linear-gradient(135deg, #9e55d1, #7154cd); }.notice-hot { color: #713a9d; background: #f3eaff; }
.featured-grid { max-width: none; grid-template-columns: 1fr 1fr; }
.feature-tile, .product-card, .activity-card, .affiliate-home-stats > div, .steps-grid > div { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.feature-tile:hover, .product-card:hover, .activity-card:hover, .affiliate-home-stats > div:hover, .steps-grid > div:hover { transform: translateY(-5px); border-color: #d8c4ef; box-shadow: 0 15px 35px #684a9f20; }
.feature-tile > header { background: linear-gradient(100deg, #34205e, #634385); }
.feature-tile-art { min-height: 195px; background-image: linear-gradient(90deg, #211346e8, #3e1a6750), url('../images/chung-suc-flare.webp'); }
.feature-tile-art strong { color: #fff3e7; text-shadow: 0 3px 12px #211037; }
.guide-card { background: linear-gradient(135deg, #fbf4ff, #fffafa); }
.product-card { border-color: #e4ddf1; background: linear-gradient(150deg, #fff, #fbf9ff); }
.product-card .package-icon { box-shadow: 0 5px 14px #ad76d322; }.product-card h3 { color: #493d75; }
.product-card > p, .feature-tile-body > p, .guide-card p, .intro-columns ul, .steps-grid p { font-size: 13px; }
.product-card-price .unpriced-label { color: #52647a; }.product-card .unavailable-button { color: #52647a; }
.activity-card > header { background: linear-gradient(100deg, #42306e, #70469a); }.deposit-activity > header { background: linear-gradient(100deg, #116f70, #258e7d); }
.affiliate-home-stats > div { border-color: #e8ddf6; background: linear-gradient(135deg, #fff, #fbf8ff); }.affiliate-home-stats strong { color: #7440ac; }
.affiliate-home-link { border-color: #e8ddf6; background: linear-gradient(110deg, #fff, #fbf5ff); }
.affiliate-home-link .primary-button { background: linear-gradient(100deg, #6b4abe, #a046b6); border-color: #8250bc; }
.auth-modal { box-shadow: 0 24px 80px #48277155, 0 0 0 1px #e9d1fa; }.modal-brand .site-brand-icon { animation: sparkle-float 4s ease-in-out infinite; }
@keyframes hero-glow { from { opacity: .55; transform: scale(1); } to { opacity: .9; transform: scale(1.05); } }
@keyframes ember-rise { 0%,100% { opacity: .2; transform: translate3d(0, 10px, 0) scale(.6); } 50% { opacity: .9; transform: translate3d(7px, -16px, 0) scale(1); } }
@keyframes sparkle-float { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
@media (max-width: 760px) {
    .site-layout .reference-hero-grid { gap: 12px; }
    .site-layout .reference-hero { min-height: 315px; background-position: 59% center; }
    .site-layout .reference-hero-content { padding: 25px; }
    .site-layout .reference-hero h1 { font-size: 36px; }
    .site-layout .reference-hero p { font-size: 13px; max-width: 260px; }
    .hero-bottom-note { margin-top: 20px; }
    .site-layout .hero-side { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .hero-side-spark { display: none; }
    .featured-grid { grid-template-columns: 1fr; }
    .feature-tile-art { min-height: 165px; }
}
@media (max-width: 480px) { .hero-actions { gap: 9px; }.hero-text-link { font-size: 11px; }.hero-actions .hero-button { min-width: 150px; }.site-layout .reference-hero h1 { font-size: 34px; } }
@media (prefers-reduced-motion: reduce) {
    .hero-particles i, .reference-hero::before, .hero-side-spark, .modal-brand .site-brand-icon { animation: none !important; }
    .site-nav-link:hover, .hero-actions .hero-button:hover, .hero-feature:hover, .intro-columns > div:hover, .feature-tile:hover, .product-card:hover, .activity-card:hover, .affiliate-home-stats > div:hover, .steps-grid > div:hover { transform: none; }
}