/* ============================================
   HERO.CSS — Dark Premium Hero + Stats bar
   ============================================ */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--header-h) + 40px) 24px 80px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 38%, #14140f 0%, #0a0a0a 46%, #050505 100%);
    perspective: 1200px;
}

/* -- 3D Орбит: хазайсан цагираг + эргэлдэх алтан гэрэл + гүнгийн давхарга -- */
@property --ring-angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }

.hero-geo { position: absolute; inset: 0; pointer-events: none; z-index: 0; transform-style: preserve-3d; }
/* #4 Атмосферын vignette — зах харанхуйлж гүн үүсгэнэ */
.hero-geo::after { content:''; position:absolute; inset:0; z-index:3;
    background: radial-gradient(ellipse at 50% 44%, transparent 34%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.9) 100%); }

/* #2 Цэгэн тор — гүн рүү ухарч, захаараа бүдгэрнэ */
.geo-dots {
    position: absolute; inset: -25%;
    background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 34px 34px;
    transform: translateZ(-200px) scale(1.25);
    -webkit-mask: radial-gradient(ellipse at 50% 44%, #000 18%, transparent 62%);
            mask: radial-gradient(ellipse at 50% 44%, #000 18%, transparent 62%);
}

/* #1 Хазайсан орбит цагиргууд + #2 Z-давхарга */
.geo-ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px solid rgba(249,215,28,0.10); }
.geo-ring::before { content:''; position:absolute; inset:-1px; border-radius:50%;
    background: conic-gradient(from var(--ring-angle), transparent 0deg 235deg, rgba(249,215,28,0.9) 300deg, transparent 350deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); }
.geo-ring-1 { width: 660px; height: 660px;
    transform: translate(-50%,-50%) rotateX(60deg) translateZ(-40px);
    animation: ringBreathe1 9s ease-in-out infinite; }
.geo-ring-1::before { animation: ringSpin 8s linear infinite; }
/* #3 DoF — хол цагираг бүдэг */
.geo-ring-2 { width: 430px; height: 430px; border-color: rgba(249,215,28,0.07);
    transform: translate(-50%,-50%) rotateX(60deg) translateZ(-140px); filter: blur(1.6px);
    animation: ringBreathe2 12s ease-in-out infinite; }
.geo-ring-2::before { animation: ringSpin 11s linear infinite reverse; }

.geo-line { position: absolute; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(249,215,28,0.12), transparent); }
.geo-line-1 { width: 42%; top: 28%; left: 4%; transform: rotate(-8deg) translateZ(-80px); }
.geo-line-2 { width: 36%; bottom: 24%; right: 4%; transform: rotate(12deg) translateZ(-80px); }

/* #2 Гүн ард гэрэлтэх glow */
.geo-glow { position: absolute; top: 50%; left: 50%; width: 720px; height: 720px;
    transform: translate(-50%,-50%) translateZ(-260px);
    background: radial-gradient(circle, rgba(249,215,28,0.13) 0%, rgba(249,215,28,0.04) 36%, transparent 70%);
    filter: blur(24px); animation: geo-breathe 7s ease-in-out infinite; }

@keyframes ringSpin { to { --ring-angle: 360deg; } }
@keyframes ringBreathe1 {
    0%,100% { transform: translate(-50%,-50%) rotateX(60deg) translateZ(-40px) scale(1); }
    50% { transform: translate(-50%,-50%) rotateX(60deg) translateZ(-40px) scale(1.04); }
}
@keyframes ringBreathe2 {
    0%,100% { transform: translate(-50%,-50%) rotateX(60deg) translateZ(-140px) scale(1); }
    50% { transform: translate(-50%,-50%) rotateX(60deg) translateZ(-140px) scale(1.05); }
}
@keyframes geo-breathe { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .geo-ring, .geo-ring::before, .geo-glow { animation: none; }
}

/* -- Hero content (dark mode text) -- */
.hero-content { position: relative; z-index: 2; max-width: 900px; padding: 0 24px; }
.hero-eyebrow {
    font-size: 0.6875rem; font-weight: 700;
    color: var(--gold); letter-spacing: 4px;
    text-transform: uppercase; margin-bottom: 28px;
}
.hero h1 {
    font-size: clamp(2.75rem,7vw,5.5rem);
    color: #ffffff; line-height: 1.05;
    letter-spacing: -3px; margin-bottom: 0;
}
.hero-light { font-weight: 300; display: block; color: rgba(255,255,255,0.7); }
.hero-bold { font-weight: 800; display: block; text-shadow: 0 0 50px rgba(249,215,28,0.18); }
.hero-accent-line { width: 64px; height: 3px; background: var(--gold); margin: 28px auto; border-radius: 2px; box-shadow: 0 0 16px rgba(249,215,28,0.5); }
.hero p {
    font-size: 1.0625rem; color: rgba(255,255,255,0.5);
    max-width: 440px; margin: 0 auto 44px;
    line-height: 1.8; letter-spacing: 0.2px;
}

/* -- CTA buttons (gold primary) -- */
.hero-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 36px; background: var(--gold); color: #0a0a0a;
    font-weight: 700; font-size: 0.875rem; border-radius: var(--radius);
    transition: var(--transition); letter-spacing: 0.8px;
    position: relative; overflow: hidden;
}
/* Гэрэлт sheen — 5 секунд тутам нэг удаа гүйнэ */
.hero-cta::after {
    content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-18deg); animation: ctaSheen 5s ease-in-out infinite;
}
@keyframes ctaSheen { 0% { left: -130%; } 20% { left: 190%; } 100% { left: 190%; } }
.hero-cta:hover {
    background: var(--gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(249,215,28,0.25);
}
.hero-cta:active { transform: translateY(0) scale(0.98); }
.hero-cta svg { width: 15px; height: 15px; transition: var(--transition); }
.hero-cta:hover svg { transform: translateX(3px); }

.hero-actions { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; }
.hero-cta-secondary {
    font-size: 0.8125rem; font-weight: 600;
    color: rgba(255,255,255,0.5); letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 3px; transition: var(--transition);
}
.hero-cta-secondary:hover { color: #ffffff; border-color: rgba(255,255,255,0.5); }

/* -- Stats Bar -- */
.stats-bar { background: var(--gray-900); padding: 48px 24px; }
.stats-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; text-align: center; }
.stat-number { font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; color: var(--gold); letter-spacing: -1px; margin-bottom: 4px; }
.stat-label { font-size: 0.8125rem; font-weight: 500; color: var(--gray-400); }

@media (max-width:768px) {
    .hero { min-height: 100svh; padding: calc(var(--header-h) + 32px) 20px 60px; }
    .hero h1 { letter-spacing: -1px; }
    .hero-eyebrow { letter-spacing: 2px; font-size: 0.625rem; margin-bottom: 20px; }
    .hero-accent-line { margin: 20px auto; }
    .hero p { margin-bottom: 32px; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .geo-ring-1 { width: 350px; height: 350px; }
    .geo-ring-2 { width: 220px; height: 220px; }
    .geo-glow { width: 300px; height: 300px; }
}