.promo-page { background: var(--bg-secondary); } .promo-hero { position: relative; padding: 100px 0 80px; background: #1a0a0a; overflow: hidden; } .promo-hero-bg { position: absolute; inset: 0; z-index: 0; } .promo-hero-gradient { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 59, 48, 0.25) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(255, 59, 48, 0.12) 0%, transparent 50%), linear-gradient(180deg, #1a0a0a 0%, #0d0505 100%); } .promo-hero-particles { position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.15), transparent), radial-gradient(1px 1px at 60% 70%, rgba(255, 59, 48, 0.2), transparent), radial-gradient(1px 1px at 80% 20%, rgba(255, 255, 255, 0.1), transparent); background-size: 200px 200px; animation: promoParticlesFloat 20s linear infinite; pointer-events: none; } .promo-hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; text-align: center; } .promo-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: linear-gradient(135deg, var(--accent-red) 0%, #cc2f26 100%); border-radius: 50px; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 1px; margin-bottom: 24px; box-shadow: 0 4px 20px rgba(255, 59, 48, 0.4); } .promo-hero-badge i { font-size: 14px; } .promo-hero-title { font-size: clamp(36px, 6vw, 64px); font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 20px; } .promo-hero-title .promo-gradient-text { background: linear-gradient(135deg, var(--accent-red) 0%, #ff6b62 50%, #fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .promo-hero-subtitle { font-size: 18px; color: rgba(255, 255, 255, 0.7); max-width: 600px; margin: 0 auto 40px; line-height: 1.6; } .promo-hero-stats { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; } .promo-stat-item { text-align: center; } .promo-stat-value { display: block; font-size: 24px; font-weight: 700; color: var(--accent-red); margin-bottom: 4px; } .promo-stat-value i { font-size: 28px; } .promo-stat-label { font-size: 14px; color: rgba(255, 255, 255, 0.5); } .promo-ring-section { padding: 60px 0 80px; margin-top: -40px; } .promo-ring { position: relative; min-height: 520px; display: flex; align-items: center; justify-content: center; border-radius: 28px; transform: translateY(var(--promo-parallax-y, 0)); overflow: hidden; background: radial-gradient(ellipse 90% 90% at 50% 50%, rgba(255, 59, 48, 0.15) 0%, rgba(139, 0, 0, 0.35) 35%, rgba(45, 15, 15, 0.98) 65%, #0f0505 100%); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 32px 64px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 0 1px rgba(255, 59, 48, 0.08); transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease; } .promo-ring:hover { transform: translateY(var(--promo-parallax-y, 0)) scale(1.015); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), 0 56px 112px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 80px rgba(255, 59, 48, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(255, 59, 48, 0.15); } .promo-ring-bg { position: absolute; inset: 0; z-index: 0; } .promo-ring-mesh { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; } .promo-ring-shimmer { position: absolute; inset: -50%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.02) 50%, transparent 60%); animation: promoShimmer 8s ease-in-out infinite; pointer-events: none; } .promo-ring-particles { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 15% 25%, rgba(255, 59, 48, 0.3), transparent), radial-gradient(2px 2px at 85% 75%, rgba(255, 255, 255, 0.1), transparent); background-size: 150px 150px; animation: promoParticlesFloat 25s linear infinite reverse; pointer-events: none; } .promo-ring-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; display: flex; align-items: center; justify-content: center; } .promo-ring-decorative { position: absolute; width: 170px; height: 170px; border-radius: 50%; border: 1px solid rgba(255, 59, 48, 0.25); box-shadow: 0 0 50px rgba(255, 59, 48, 0.15), inset 0 0 40px rgba(255, 59, 48, 0.04); opacity: 0; transform: scale(0.9); transition: opacity 0.8s ease 0.3s, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s, box-shadow 0.5s ease, border-color 0.5s ease; } .promo-ring:hover .promo-ring-decorative { border-color: rgba(255, 59, 48, 0.4); box-shadow: 0 0 70px rgba(255, 59, 48, 0.2), inset 0 0 50px rgba(255, 59, 48, 0.06); } .promo-ring-pulse { position: absolute; width: 110px; height: 110px; border-radius: 50%; border: 2px solid rgba(255, 59, 48, 0.35); animation: promoRingPulse 3s ease-in-out infinite; } .promo-ring:hover .promo-ring-pulse { animation-duration: 1.8s; border-color: rgba(255, 59, 48, 0.5); } .promo-ring-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); color: var(--accent-red); font-size: 36px; box-shadow: 0 0 40px rgba(255, 59, 48, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .promo-ring:hover .promo-ring-icon { background: linear-gradient(145deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%); color: #fff; box-shadow: 0 0 60px rgba(255, 59, 48, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); transform: scale(1.05); } .promo-ring-orbit { position: absolute; top: 50%; left: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; z-index: 3; } .promo-ring-card { position: absolute; width: 140px; padding: 16px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); text-align: center; transition: all 0.4s ease; opacity: 0; transform: translateY(20px); } .promo-ring-card-1 { top: 11%; left: 50%; transform: translate(-50%, -50%); transition-delay: 0.1s; } .promo-ring-card-2 { top: 69%; left: 84%; transform: translate(-50%, -50%); transition-delay: 0.25s; } .promo-ring-card-3 { top: 69%; left: 16%; transform: translate(-50%, -50%); transition-delay: 0.4s; } .promo-ring-card:hover { background: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%); border-color: rgba(255, 59, 48, 0.35); transform: translate(-50%, -50%) scale(1.1) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 40px rgba(255, 59, 48, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12); animation: none; } .promo-ring-card-icon { font-size: 26px; color: var(--accent-red); margin-bottom: 10px; filter: drop-shadow(0 0 8px rgba(255, 59, 48, 0.4)); transition: filter 0.3s ease; } .promo-ring-card:hover .promo-ring-card-icon { filter: drop-shadow(0 0 12px rgba(255, 59, 48, 0.6)); } .promo-ring-card-text { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.95); display: block; line-height: 1.35; letter-spacing: 0.02em; } .promo-ring-lines { position: absolute; top: 50%; left: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; z-index: 2; pointer-events: none; } .promo-line { stroke: rgba(255, 59, 48, 0.3); stroke-width: 1.5; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1s cubic-bezier(0.34, 1.56, 0.64, 1); } .promo-ring:hover .promo-line { stroke: rgba(255, 59, 48, 0.45); } .promo-line-1 { transition-delay: 0.5s; } .promo-line-2 { transition-delay: 0.6s; } .promo-line-3 { transition-delay: 0.7s; } .promo-ring-cta { position: relative; z-index: 10; display: inline-flex; align-items: center; gap: 12px; padding: 18px 36px; background: linear-gradient(135deg, #ff4d42 0%, var(--accent-red) 50%, #c92a22 100%); color: #fff; font-size: 16px; font-weight: 700; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.25); text-decoration: none; box-shadow: 0 4px 24px rgba(255, 59, 48, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); opacity: 0; transform: translateY(10px); } .promo-ring-cta:hover { background: linear-gradient(135deg, #ff5c52 0%, #ff4d42 50%, var(--accent-red) 100%); transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 40px rgba(255, 59, 48, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .promo-content-section { padding: 60px 0 40px; } .promo-content-block { max-width: 700px; margin: 0 auto; text-align: center; } .promo-content-text { font-size: 18px; line-height: 1.7; color: var(--text-primary); margin-bottom: 20px; } .promo-content-text-2 { margin-bottom: 0; color: var(--text-secondary); } .promo-screen-section { padding: 40px 0 60px; } .promo-screen-block { max-width: 260px; margin: 0 auto; text-align: center; } .promo-screen-title { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; } .promo-screen-desc { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 24px; } .promo-screen-image-wrap { border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); border: 1px solid rgba(0, 0, 0, 0.06); } .promo-screen-image { display: block; width: 100%; height: auto; vertical-align: top; } .promo-cta-section { padding: 60px 0 100px; } .promo-cta-content { text-align: center; } .promo-cta-title { font-size: 28px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; } .promo-cta-description { font-size: 16px; color: var(--text-secondary); margin-bottom: 28px; } .promo-cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .btn-promo { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; font-size: 15px; font-weight: 600; border-radius: 12px; text-decoration: none; transition: all 0.3s ease; } .btn-promo-primary { background: linear-gradient(135deg, var(--accent-red) 0%, #cc2f26 100%); color: #fff; border: none; } .btn-promo-primary:hover { background: linear-gradient(135deg, #ff4d42 0%, var(--accent-red) 100%); color: #fff; transform: translateY(-2px); } .btn-promo-outline { background: transparent; color: var(--accent-primary); border: 2px solid var(--border-color); } .btn-promo-outline:hover { border-color: var(--accent-red); color: var(--accent-red); } @media (max-width: 992px) { .promo-ring { min-height: 460px; } .promo-ring-orbit { width: 300px; height: 300px; margin: -150px 0 0 -150px; } .promo-ring-card { width: 120px; padding: 12px; } .promo-ring-card-text { font-size: 12px; } .promo-ring-lines { width: 300px; height: 300px; margin: -150px 0 0 -150px; } } @media (max-width: 768px) { .promo-hero { padding: 80px 0 60px; } .promo-hero-stats { gap: 24px; } .promo-ring-section { padding: 40px 0 60px; } .promo-ring { min-height: 420px; border-radius: 20px; } .promo-ring-decorative { width: 120px; height: 120px; } .promo-ring-icon { width: 60px; height: 60px; font-size: 26px; } .promo-ring-pulse { width: 80px; height: 80px; } .promo-ring-orbit { width: 260px; height: 260px; margin: -130px 0 0 -130px; } .promo-ring-card { width: 100px; padding: 12px; } .promo-ring-card-text { font-size: 11px; } .promo-ring-lines { width: 260px; height: 260px; margin: -130px 0 0 -130px; } .promo-ring-cta { padding: 14px 24px; font-size: 15px; } .promo-screen-section { padding: 32px 0 48px; } .promo-screen-title { font-size: 20px; } .promo-screen-desc { font-size: 14px; } .promo-screen-block { max-width: 220px; } .promo-screen-image-wrap { border-radius: 12px; } .promo-cta-actions { flex-direction: column; } .btn-promo { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .promo-hero-particles, .promo-ring-shimmer, .promo-ring-particles, .promo-ring-decorative, .promo-ring-card-1, .promo-ring-card-2, .promo-ring-card-3 { animation: none; } }