/* ============================================
   SECTIONS.CSS — Features, How-it-works, Pricing, Testimonials, CTA
   ============================================ */

/* -- Features -- */
.features-section { background:var(--bg); text-align:center; }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }

/* Гэрэлт-тансаг feature карт — алтан accent, hover premium micro-interaction */
.feature-card { position:relative; background:var(--white); border-radius:18px; padding:34px 28px;
    border:1px solid var(--gray-200); overflow:hidden; text-align:left;
    transition:box-shadow 0.3s ease, border-color 0.3s ease; }
.feature-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--gold), #ffe37a);
    transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease; }
.feature-card:hover { border-color:rgba(249,215,28,0.5);
    box-shadow:0 18px 44px rgba(0,0,0,0.10), 0 0 0 1px rgba(249,215,28,0.25); }
.feature-card:hover::before { transform:scaleX(1); }

.feature-icon { width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center;
    margin-bottom:20px; color:#c79a06;
    background:linear-gradient(135deg, rgba(249,215,28,0.18), rgba(249,215,28,0.04));
    border:1px solid rgba(249,215,28,0.28);
    transition:transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; }
.feature-icon svg { width:24px; height:24px; }
.feature-card:hover .feature-icon { transform:translateY(-2px) scale(1.05);
    background:linear-gradient(135deg, rgba(249,215,28,0.34), rgba(249,215,28,0.1));
    box-shadow:0 8px 20px rgba(249,215,28,0.28); }

.feature-card h3 { font-size:1.0625rem; font-weight:700; color:var(--gray-900); margin-bottom:10px; letter-spacing:-0.2px; }
.feature-card p { font-size:0.875rem; color:var(--gray-600); line-height:1.7; }

/* -- How it works -- */
.how-section { background:var(--white); text-align:center; }

/* Амьд урсгал — 3 алхмыг холбосон track дагуу алтан импульс урсаж,
   гэрэлт давалгаа 1→2→3 алхмыг ээлжлэн асаана (тасралтгүй хөдөлгөөн) */
.steps-flow { display:flex; align-items:flex-start; justify-content:center; gap:0; margin-top:56px; }
.step-card { flex:1; max-width:260px; padding:0 16px; transition:transform 0.3s ease; }
.step-card:hover { transform:translateY(-4px); }

.step-badge { position:relative; width:72px; height:72px; margin:0 auto 22px; }
.step-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    border-radius:50%; font-size:1.5rem; font-weight:800; color:var(--gray-900);
    background:var(--white); border:2px solid var(--gray-200);
    animation:stepPop 4.8s ease-in-out infinite; animation-delay:calc(var(--i) * 1.6s); }
.step-ring { position:absolute; inset:0; border-radius:50%; border:2px solid var(--gold); opacity:0;
    animation:stepRing 4.8s ease-out infinite; animation-delay:calc(var(--i) * 1.6s); }

.step-card h3 { font-size:1.1875rem; font-weight:700; color:var(--gray-900); margin-bottom:10px; letter-spacing:-0.3px; }
.step-card p { font-size:0.9375rem; color:var(--gray-600); line-height:1.65; }

.step-connector { position:relative; flex:0 0 72px; height:3px; margin-top:35px; overflow:hidden;
    background:var(--gray-200); border-radius:2px; }
.step-connector .pulse { position:absolute; top:0; left:-45%; width:45%; height:100%;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
    animation:flowRight 4.8s ease-in-out infinite; }
.step-connector:nth-child(2) .pulse { animation-delay:0.8s; }
.step-connector:nth-child(4) .pulse { animation-delay:2.4s; }

@keyframes stepPop {
    0%,58%,100% { background:var(--white); border-color:var(--gray-200); color:var(--gray-900); transform:scale(1); box-shadow:none; }
    14%,40% { background:var(--gold); border-color:var(--gold); color:#111111; transform:scale(1.1); box-shadow:0 10px 28px rgba(249,215,28,0.45); }
}
@keyframes stepRing {
    0%,10% { opacity:0; transform:scale(1); }
    16% { opacity:0.7; transform:scale(1); }
    42%,100% { opacity:0; transform:scale(1.55); }
}
@keyframes flowRight {
    0% { left:-45%; opacity:0; }
    8% { opacity:1; }
    30% { left:100%; opacity:1; }
    32%,100% { left:100%; opacity:0; }
}
@media (prefers-reduced-motion:reduce) {
    .step-num,.step-ring,.step-connector .pulse { animation:none; }
    .step-num { background:var(--gray-50); }
}

/* -- Pricing -- */
/* Гэрэлт-тансаг үнийн санал — алтан accent, hover glow, өргөгдсөн popular */
.pricing-section { background:var(--bg); text-align:center; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px; align-items:start; }
.pricing-card { position:relative; background:var(--white); border-radius:18px; padding:40px 28px 32px; border:1px solid var(--gray-200); text-align:center; transition:box-shadow 0.3s ease, border-color 0.3s ease; }
.pricing-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:18px 18px 0 0;
    background:linear-gradient(90deg, var(--gold), #ffe37a); transform:scaleX(0); transition:transform 0.4s ease; }
.pricing-card:hover { border-color:rgba(249,215,28,0.5); box-shadow:0 18px 44px rgba(0,0,0,0.10), 0 0 0 1px rgba(249,215,28,0.2); }
.pricing-card:hover::before { transform:scaleX(1); }

/* Popular — өргөгдөж, алтан гэрэлт онцлол */
.pricing-card.popular { border:1px solid rgba(249,215,28,0.55); transform:translateY(-10px);
    background:linear-gradient(180deg, rgba(249,215,28,0.06), var(--white) 55%);
    box-shadow:0 24px 60px rgba(249,215,28,0.16), 0 8px 24px rgba(0,0,0,0.06); }
.pricing-card.popular::before { transform:scaleX(1); height:4px; }
.pricing-card.popular:hover { box-shadow:0 30px 72px rgba(249,215,28,0.24), 0 10px 28px rgba(0,0,0,0.08); }

.pricing-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-size:0.6875rem; font-weight:700;
    padding:5px 18px; border-radius:20px; white-space:nowrap; color:#111111;
    background:linear-gradient(135deg, var(--gold), #ffcf40); box-shadow:0 2px 6px rgba(0,0,0,0.12);
    transition:box-shadow 0.3s ease, transform 0.3s ease; }
.pricing-card.popular:hover .pricing-badge { box-shadow:0 6px 20px rgba(249,215,28,0.55); transform:translateX(-50%) translateY(-2px); }
.pricing-name { font-size:1.25rem; font-weight:800; color:var(--gray-900); margin-bottom:4px; letter-spacing:-0.3px; }
.pricing-desc { font-size:0.8125rem; color:var(--gray-500); margin-bottom:20px; }
.pricing-price { font-size:2.125rem; font-weight:800; color:var(--gray-900); margin-bottom:24px; letter-spacing:-1.5px; }
.pricing-price span { font-size:0.875rem; font-weight:500; color:var(--gray-500); letter-spacing:0; }
.pricing-features { list-style:none; text-align:left; margin-bottom:28px; }
.pricing-features li { padding:9px 0; font-size:0.8125rem; color:var(--gray-700); border-bottom:1px solid var(--gray-100); display:flex; align-items:center; gap:9px; }
.pricing-features li::before { content:'✓'; color:#c79a06; font-weight:800; flex-shrink:0;
    width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
    background:rgba(249,215,28,0.15); border-radius:50%; font-size:0.6875rem; }
.pricing-card .btn-gold { margin-top:0; }
.btn-gold-outline { width:100%; padding:12px; background:transparent; border:1px solid var(--gray-900); color:var(--gray-900); font-weight:700; font-size:0.875rem; border-radius:var(--radius); transition:var(--transition); }
.btn-gold-outline:hover { background:var(--gray-100); }

/* -- Testimonials -- */
.testimonial-section { background:var(--white); overflow:hidden; }
/* Marquee — баруунаас зүүн тийш тасралтгүй урсах (seamless loop) */
.testimonial-marquee { margin-top:48px; overflow:hidden;
    -webkit-mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.testimonial-track { display:flex; width:max-content; will-change:transform;
    animation:marqueeRTL 35s linear infinite; }
.testimonial-marquee:hover .testimonial-track { animation-play-state:paused; }
/* -50% = 7 картын өргөн (JS хувилсны дараа) → seamless */
@keyframes marqueeRTL { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .testimonial-track { animation:none; } }
/* Twitter/X постын карт загвар */
.testimonial-card { flex:0 0 340px; margin-right:24px; background:#f5f6fb; border-radius:20px; padding:24px 24px 20px; border:1px solid var(--gray-200); position:relative; transition:border-color 0.2s ease, box-shadow 0.2s ease; }
.testimonial-card:hover { border-color:rgba(249,215,28,0.5); box-shadow:var(--shadow-md); }
.tw-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.tw-avatar { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.0625rem; color:var(--white); flex-shrink:0; background-image:linear-gradient(var(--gray-900),var(--gray-900)),linear-gradient(135deg,#f9d71c,#8b5cf6,#3b82f6); background-origin:border-box; background-clip:content-box,border-box; border:2px solid transparent; }
.tw-id { min-width:0; }
.tw-name { display:flex; align-items:center; gap:5px; font-size:0.9375rem; font-weight:700; color:var(--gray-900); line-height:1.2; }
.tw-verified { flex-shrink:0; }
.tw-handle { font-size:0.8125rem; color:var(--gray-500); margin-top:2px; }
.tw-text { font-size:0.875rem; color:var(--gray-700); line-height:1.8; font-style:italic; text-align:justify; }
.tw-tags { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--gray-200); }
.tw-tags span { font-size:0.8125rem; font-weight:600; color:#3b82f6; }

/* -- CTA Section -- */
/* CTA — харанхуй тансаг (Vault логик: эргэлдэх алтан хүрээ + амьсгалах glow) */
.cta-section { background:var(--bg); padding:40px 24px 80px; }
.cta-card { position:relative; overflow:hidden; max-width:800px; margin:0 auto; text-align:center;
    background:radial-gradient(ellipse at 50% 0%, #1a1a1f 0%, #0b0b0e 70%);
    border:1px solid rgba(249,215,28,0.15); border-radius:24px; padding:64px 48px; }
.cta-card::before { content:''; position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:620px; height:620px;
    background:radial-gradient(circle, rgba(249,215,28,0.14), transparent 62%); pointer-events:none;
    animation:vaultBreath 7s ease-in-out infinite; }
.cta-card::after { content:''; position:absolute; inset:0; border-radius:24px; padding:1.5px;
    background:conic-gradient(from var(--vault-angle), transparent 0deg 240deg, var(--gold) 300deg, transparent 350deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:0.8;
    animation:vaultBorder 6s linear infinite; }
.cta-card h2 { position:relative; z-index:1; font-size:clamp(1.5rem,3vw,2rem); font-weight:800; color:var(--white); margin-bottom:12px; letter-spacing:-0.5px; text-shadow:0 0 40px rgba(249,215,28,0.15); }
.cta-card p { position:relative; z-index:1; font-size:0.9375rem; color:rgba(255,255,255,0.6); margin-bottom:30px; }
.btn-cta-white { position:relative; z-index:1; overflow:hidden; display:inline-block; padding:15px 40px;
    background:var(--gold); color:#0a0a0a; font-weight:700; font-size:0.9375rem; border-radius:12px;
    transition:transform 0.2s ease, box-shadow 0.2s ease; }
.btn-cta-white:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(249,215,28,0.35); }
.btn-cta-white::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; }
@media (prefers-reduced-motion:reduce) { .cta-card::before,.cta-card::after,.btn-cta-white::after { animation:none; } }

/* -- Services (legacy) -- */
.services { background:var(--bg); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.service-card { background:var(--white); border-radius:var(--radius-lg); padding:36px 28px; border:1px solid var(--gray-200); transition:var(--transition); position:relative; overflow:hidden; }
.service-card:hover { border-color:var(--gray-900); box-shadow:var(--shadow-md); transform:translateY(-4px); }
.service-num { font-size:3rem; font-weight:800; color:var(--gray-100); line-height:1; margin-bottom:16px; }
.service-card:hover .service-num { color:var(--gold-subtle); }
.service-icon { width:48px; height:48px; background:var(--gray-100); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.service-icon svg { width:24px; height:24px; color:var(--gray-900); }
.service-card h3 { font-size:1.125rem; font-weight:700; color:var(--gray-900); margin-bottom:8px; }
.service-card p { font-size:0.875rem; color:var(--gray-500); line-height:1.6; }

/* -- Mobile App (legacy) -- */
.mobile-section { background:var(--white); text-align:center; }
.phone-wrapper { display:flex; justify-content:center; margin-top:48px; }
.phone-mockup { width:260px; height:520px; background:var(--gray-900); border-radius:36px; padding:12px; box-shadow:var(--shadow-lg); position:relative; }
.phone-screen { width:100%; height:100%; border-radius:28px; overflow:hidden; background:linear-gradient(135deg,#667eea,#764ba2); display:flex; flex-direction:column; align-items:center; justify-content:center; color:white; }
.phone-screen h4 { font-size:1rem; font-weight:700; margin-bottom:16px; }
.phone-screen-item { background:rgba(255,255,255,0.15); padding:12px 24px; border-radius:10px; margin-bottom:8px; font-size:0.8125rem; width:80%; text-align:center; }

/* -- Loan Check (legacy) -- */
.loan-check { background:var(--bg); }
.loan-check-card { max-width:560px; margin:48px auto 0; background:var(--white); border-radius:var(--radius-lg); padding:32px; border:1px solid var(--gray-200); box-shadow:var(--shadow); }

/* -- Vault: харанхуй тансаг аюулгүй байдлын band -- */
@property --vault-angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }

.vault-section { background:#0b0b0e; position:relative; overflow:hidden; text-align:center; }
.vault-section .section-eyebrow { color:var(--gold); }
.vault-section .section-title { color:#ffffff; }
.vault-glow { position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:900px; height:900px;
    background:radial-gradient(circle, rgba(249,215,28,0.12), transparent 62%); pointer-events:none;
    animation:vaultBreath 7s ease-in-out infinite; }
@keyframes vaultBreath { 0%,100%{opacity:0.55; transform:translateX(-50%) scale(1);} 50%{opacity:1; transform:translateX(-50%) scale(1.08);} }

.vault-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px; position:relative; z-index:1; }
.vault-card { position:relative; padding:38px 30px; border-radius:20px; text-align:left;
    background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
    border:1px solid rgba(255,255,255,0.08); overflow:hidden;
    transition:transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.vault-card:hover { transform:translateY(-6px); border-color:rgba(249,215,28,0.45); box-shadow:0 24px 60px rgba(0,0,0,0.5); }

/* эргэлдэх алтан гэрэлт хүрээ */
.vault-card::before { content:''; position:absolute; inset:0; border-radius:20px; padding:1.5px;
    background:conic-gradient(from var(--vault-angle), transparent 0deg, transparent 60deg, var(--gold) 90deg, transparent 120deg, transparent 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:0.8;
    animation:vaultBorder 6s linear infinite; animation-delay:var(--d,0s); }
@keyframes vaultBorder { to { --vault-angle:360deg; } }

.vault-icon { position:relative; z-index:1; width:60px; height:60px; border-radius:16px;
    display:flex; align-items:center; justify-content:center; margin-bottom:24px; color:var(--gold);
    background:linear-gradient(135deg, rgba(249,215,28,0.22), rgba(249,215,28,0.04));
    border:1px solid rgba(249,215,28,0.3); box-shadow:0 0 28px rgba(249,215,28,0.18);
    animation:vaultPulse 4s ease-in-out infinite; animation-delay:var(--d,0s); }
.vault-icon svg { width:28px; height:28px; }
@keyframes vaultPulse { 0%,100%{box-shadow:0 0 22px rgba(249,215,28,0.14);} 50%{box-shadow:0 0 38px rgba(249,215,28,0.32);} }

.vault-card h3 { position:relative; z-index:1; color:#ffffff; font-size:1.0625rem; font-weight:700; margin-bottom:12px; line-height:1.4; letter-spacing:-0.2px; }
.vault-card p { position:relative; z-index:1; color:rgba(255,255,255,0.62); font-size:0.875rem; line-height:1.7; }

@media (prefers-reduced-motion:reduce) {
    .vault-glow,.vault-card::before,.vault-icon { animation:none; }
    .vault-card::before { background:conic-gradient(from 90deg, transparent, var(--gold), transparent 120deg); }
}

/* -- Responsive -- */
@media(max-width:1024px) {
    .services-grid,.features-grid,.pricing-grid,.testimonial-grid,.vault-grid { grid-template-columns:1fr; }
    .steps-flow { flex-direction:column; align-items:center; }
    .step-card { max-width:340px; }
    .step-connector { flex:0 0 44px; width:3px; height:44px; margin:8px 0; }
    .step-connector .pulse { width:100%; height:45%; top:-45%; left:0;
        background:linear-gradient(180deg, transparent, var(--gold), transparent);
        animation-name:flowDown; }
}
@keyframes flowDown {
    0% { top:-45%; opacity:0; }
    8% { opacity:1; }
    30% { top:100%; opacity:1; }
    32%,100% { top:100%; opacity:0; }
}
@media(max-width:768px) {
    .cta-card { padding:40px 24px; }
}