:root { --bg-black: #0A0A0A; --bg-charcoal: #1C1C1C; --neon-red: #FF2D2D; --electric-blue: #2D7DFF; --gold: #F5C542; --white: #FFFFFF; --gray-text: #A0A0A0; --glass-bg: rgba(28, 28, 28, 0.45); --glass-border: rgba(255, 255, 255, 0.07); --font-stack: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; } body { background-color: var(--bg-black); color: var(--white); font-family: var(--font-stack); overflow-x: hidden; line-height: 1.6; } #scroll-progress { position: fixed; top: 0; left: 0; height: 4px; background: linear-gradient(90deg, var(--neon-red), var(--electric-blue)); width: 0%; z-index: 10000; } #loader { position: fixed; inset: 0; background: var(--bg-black); z-index: 11000; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease; } .loader-content h1 { font-size: 3.5rem; font-weight: 900; letter-spacing: 8px; margin-bottom: 15px; } .loader-bar { width: 150px; height: 2px; background: var(--neon-red); animation: loadWidth 1.5s infinite alternate ease-in-out; } @keyframes loadWidth { 0% { width: 0px; } 100% { width: 180px; } } .container { width: 90%; max-width: 1400px; margin: 0 auto; } .section-padding { padding: 120px 0; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 40px; } .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; } .grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .center { text-align: center; } .m-top-20 { margin-top: 20px; } .m-top-40 { margin-top: 40px; } .w-100 { width: 100%; } h1, h2, h3, h4 { letter-spacing: -0.02em; font-weight: 800; text-transform: uppercase; } .section-title { font-size: 2.8rem; margin-bottom: 20px; font-weight: 900; } .section-desc { color: var(--gray-text); max-width: 700px; margin-bottom: 20px; font-size: 1.1rem; } .text-red { color: var(--neon-red); } .text-blue { color: var(--electric-blue); } .text-gold { color: var(--gold); } .gradient-text { background: linear-gradient(135deg, var(--neon-red), var(--electric-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .glass-panel { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 12px; padding: 30px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } #three-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; } .sticky-cta { position: fixed; bottom: 30px; right: 30px; z-index: 999; background: var(--neon-red); color: var(--white); padding: 14px 28px; font-weight: 900; border-radius: 50px; text-decoration: none; box-shadow: 0 0 20px rgba(255, 45, 45, 0.5); letter-spacing: 1px; font-size: 0.9rem; } .whatsapp-float { position: fixed; bottom: 30px; left: 30px; z-index: 999; background: #25D366; width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.8rem; text-decoration: none; box-shadow: 0 4px 15px rgba(0,0,0,0.3); } .btn { display: inline-block; padding: 15px 35px; font-weight: 700; text-transform: uppercase; border-radius: 6px; text-decoration: none; transition: all 0.3s ease; cursor: pointer; font-size: 0.9rem; letter-spacing: 0.5px; } .btn-primary { background: var(--white); color: var(--bg-black); border: 1px solid var(--white); } .btn-secondary { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.3); } .btn-secondary:hover { background: var(--white); color: var(--bg-black); } .glow-red:hover { box-shadow: 0 0 25px rgba(255,45,45,0.7); background: var(--neon-red); color: white; border-color: var(--neon-red); } .glow-blue:hover { box-shadow: 0 0 25px rgba(45,125,255,0.7); background: var(--electric-blue); color: white; border-color: var(--electric-blue); } .glow-gold:hover { box-shadow: 0 0 25px rgba(245,197,66,0.7); background: var(--gold); color: var(--bg-black); border-color: var(--gold); } .navbar { position: fixed; top: 0; width: 100%; z-index: 9999; background: rgba(10, 10, 10, 0.7); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-bottom: 1px solid var(--glass-border); transition: background 0.3s ease; } .nav-container { display: flex; justify-content: space-between; align-items: center; padding: 20px 5%; } .logo { color: var(--white); text-decoration: none; font-size: 1.6rem; font-weight: 900; letter-spacing: -1px; } .logo span { color: var(--neon-red); font-weight: 400; font-size: 1.1rem; letter-spacing: 2px; margin-left: 5px; } .nav-menu { display: flex; list-style: none; gap: 30px; } .nav-link { color: var(--gray-text); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: color 0.3s ease; position: relative; padding: 5px 0; } .nav-link:hover, .nav-link.active { color: var(--white); } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--neon-red); transition: width 0.3s ease; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .hamburger { display: none; flex-direction: column; gap: 6px; cursor: pointer; } .hamburger span { width: 25px; height: 2px; background: var(--white); transition: 0.3s; } .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 0 5%; padding-top: 100px; } .hero-content { max-width: 900px; z-index: 2; position: relative; } .hero h1 { font-size: 5.5rem; line-height: 1.05; font-weight: 900; margin-bottom: 25px; } .hero-subtext { font-size: 1.25rem; color: var(--gray-text); max-width: 650px; margin-bottom: 40px; } .hero-ctas { display: flex; gap: 20px; } .hero-stats { display: flex; gap: 20px; margin-top: 80px; z-index: 2; max-width: 700px; } .stat-card { flex: 1; text-align: left; padding: 20px 25px; } .stat-num { font-size: 2.2rem; font-weight: 900; color: var(--white); margin-bottom: 2px; } .stat-card p { color: var(--gray-text); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; } .scroll-down { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0.7; z-index: 2; } .scroll-down span { font-size: 0.75rem; letter-spacing: 2px; color: var(--gray-text); } .scroll-down .arrow { width: 2px; height: 40px; background: linear-gradient(to bottom, var(--neon-red), transparent); animation: scrollDrop 2s infinite ease-in-out; } @keyframes scrollDrop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } .about-img-container { position: relative; border-radius: 12px; overflow: hidden; } .about-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(30%); transition: transform 0.5s ease; } .about-img-container:hover .about-img { transform: scale(1.03); } .image-gradient-overlay { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg-black), transparent); z-index: 1; } .pillars { display: flex; flex-direction: column; gap: 25px; margin-top: 35px; } .pillar-item { display: flex; align-items: flex-start; gap: 15px; } .pillar-item i { font-size: 1.5rem; margin-top: 4px; } .pillar-item h4 { font-size: 1.2rem; margin-bottom: 5px; } .pillar-item p { color: var(--gray-text); font-size: 0.95rem; } .program-card { position: relative; overflow: hidden; cursor: pointer; } .card-icon { font-size: 2.5rem; margin-bottom: 20px; display: inline-block; } .program-card h3 { font-size: 1.3rem; margin-bottom: 12px; } .program-card p { color: var(--gray-text); font-size: 0.9rem; margin-bottom: 25px; } .explore-btn { color: var(--white); text-decoration: none; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; transition: gap 0.3s ease; } .program-card:hover .explore-btn { gap: 15px; color: var(--neon-red); } .hover-glow-blue:hover { border-color: rgba(45,125,255,0.4); box-shadow: 0 10px 30px rgba(45,125,255,0.15); transform: translateY(-5px); } .dash-card { display: flex; flex-direction: column; justify-content: space-between; } .dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .dash-header h4 { font-size: 0.9rem; color: var(--gray-text); letter-spacing: 0.5px; } .dash-value { font-size: 2.5rem; font-weight: 900; color: var(--white); margin-bottom: 10px; } .dash-value .unit { font-size: 1rem; color: var(--gray-text); font-weight: 400; } .progress-bar-container { background: rgba(255,255,255,0.1); height: 6px; border-radius: 10px; overflow: hidden; margin-bottom: 12px; } .progress-bar { height: 100%; border-radius: 10px; } .bg-red { background: var(--neon-red); box-shadow: 0 0 10px var(--neon-red); } .bg-blue { background: var(--electric-blue); box-shadow: 0 0 10px var(--electric-blue); } .dash-footer { font-size: 0.8rem; color: var(--gray-text); } .streak-dots { display: flex; gap: 8px; margin: 15px 0; } .streak-dots .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.1); } .streak-dots .dot.active { background: var(--electric-blue); box-shadow: 0 0 8px var(--electric-blue); } .calc-tabs { display: flex; gap: 15px; border-bottom: 1px solid var(--glass-border); padding-bottom: 15px; margin-bottom: 25px; } .calc-tab-btn { background: transparent; border: none; color: var(--gray-text); font-weight: 700; cursor: pointer; text-transform: uppercase; font-size: 0.9rem; padding: 5px 10px; transition: color 0.3s; } .calc-tab-btn.active { color: var(--white); border-bottom: 2px solid var(--neon-red); } .calc-content { display: none; } .calc-content.active { display: block; } .input-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; } .input-group label { font-size: 0.8rem; text-transform: uppercase; color: var(--gray-text); font-weight: 700; } .input-group input, .input-group select, .input-group textarea { background: rgba(0,0,0,0.4); border: 1px solid var(--glass-border); padding: 14px; border-radius: 6px; color: var(--white); font-family: var(--font-stack); font-size: 1rem; } .input-group input:focus, .input-group select:focus, .input-group textarea:focus { outline: none; border-color: var(--electric-blue); } .calc-result { padding: 15px; border-radius: 6px; font-weight: 700; font-size: 1.1rem; text-align: center; display: none; } .trainer-card { padding: 0; overflow: hidden; } .trainer-img-wrap { height: 380px; width: 100%; position: relative; overflow: hidden; } .trainer-img-wrap img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: all 0.5s ease; } .trainer-info { padding: 25px; background: var(--bg-charcoal); } .trainer-info h4 { font-size: 1.3rem; margin-bottom: 5px; } .specialty { color: var(--gold); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; margin-bottom: 15px; } .trainer-socials { display: flex; gap: 15px; } .trainer-socials a { color: var(--gray-text); font-size: 1.1rem; transition: color 0.3s; } .trainer-socials a:hover { color: var(--white); } .trainer-card:hover .trainer-img-wrap img { filter: grayscale(0%); transform: scale(1.04); } .trainer-card:hover { border-color: var(--gold); box-shadow: 0 10px 30px rgba(245,197,66,0.1); } .slider-wrapper { display: flex; justify-content: center; width: 100%; } .comparison-slider { position: relative; width: 100%; max-width: 850px; height: 500px; overflow: hidden; border-radius: 12px; border: 1px solid var(--glass-border); } .image-before, .image-after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .image-before img, .image-after img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .image-after { width: 50%; overflow: hidden; z-index: 2; border-right: 2px solid var(--neon-red); } .slider-handle { position: absolute; -webkit-appearance: none; appearance: none; width: 100%; height: 100%; background: transparent; outline: none; margin: 0; z-index: 3; cursor: ew-resize; inset: 0; } .slider-handle::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 4px; height: 500px; background: transparent; } .slider-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--neon-red); z-index: 2; pointer-events: none; box-shadow: 0 0 10px var(--neon-red); } .label-badge { position: absolute; bottom: 20px; padding: 6px 14px; border-radius: 4px; font-size: 0.75rem; text-transform: uppercase; font-weight: 900; z-index: 2; letter-spacing: 1px; } .label-before { left: 20px; background: rgba(0,0,0,0.7); color: var(--white); border: 1px solid rgba(255,255,255,0.2); } .label-after { right: 20px; background: var(--neon-red); color: var(--white); box-shadow: 0 0 10px var(--neon-red); } .price-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; text-align: center; min-height: 500px; } .price-card h3 { font-size: 1.5rem; letter-spacing: 1px; color: var(--gray-text); margin-bottom: 15px; } .price { font-size: 3.5rem; font-weight: 900; color: var(--white); margin-bottom: 30px; } .price span { font-size: 1rem; color: var(--gray-text); font-weight: 400; } .plan-features { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 15px; margin-bottom: 40px; } .plan-features li { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; color: #D0D0D0; } .plan-features i { font-size: 1rem; width: 20px; } .text-gray { color: rgba(255,255,255,0.15); } .price-card.popular { border-color: var(--electric-blue); background: rgba(45,125,255,0.03); } .badge-glow { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--electric-blue); font-size: 0.7rem; font-weight: 900; padding: 5px 15px; border-radius: 50px; box-shadow: 0 0 12px var(--electric-blue); letter-spacing: 1px; } .price-card.elite { border-color: var(--gold); background: rgba(245,197,66,0.02); } .badge-gold { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--bg-black); font-size: 0.7rem; font-weight: 900; padding: 5px 15px; border-radius: 50px; box-shadow: 0 0 12px var(--gold); letter-spacing: 1px; } .modal { display: none; position: fixed; inset: 0; z-index: 20000; background: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .modal.active { display: flex; opacity: 1; } .modal-content { max-width: 500px; width: 90%; background: var(--bg-charcoal); position: relative; border-radius: 12px; padding: 40px; border: 1px solid var(--glass-border); } .close-modal { position: absolute; top: 20px; right: 20px; font-size: 1.8rem; cursor: pointer; color: var(--gray-text); } .close-modal:hover { color: var(--white); } .payment-methods { display: flex; flex-direction: column; gap: 12px; } .pay-method { background: rgba(255,255,255,0.03); padding: 15px; border-radius: 6px; border: 1px solid var(--glass-border); display: flex; align-items: center; gap: 12px; cursor: pointer; } .testimonial-carousel { max-width: 800px; margin: 0 auto; text-align: center; } .testimonial-slide p { font-size: 1.5rem; font-style: italic; font-weight: 500; line-height: 1.5; margin-bottom: 20px; } .testimonial-slide .author { font-weight: 700; text-transform: uppercase; color: var(--electric-blue); font-size: 0.9rem; letter-spacing: 1px; } #ai-chat-container { position: fixed; bottom: 100px; right: 30px; width: 360px; max-height: 500px; height: 75vh; z-index: 10000; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: var(--bg-charcoal); border: 1px solid var(--glass-border); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 10px 40px rgba(0,0,0,0.5); } #ai-chat-container.chat-closed { height: 45px; width: 220px; transform: translateY(0); overflow: hidden; } #ai-chat-container.chat-closed .chat-body, #ai-chat-container.chat-closed .chat-footer { display: none; } .chat-header { background: rgba(255,255,255,0.03); padding: 12px 20px; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; cursor: pointer; border-bottom: 1px solid var(--glass-border); letter-spacing: 0.5px; } .chat-body { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; background: rgba(0,0,0,0.2); } .msg { padding: 10px 14px; border-radius: 8px; font-size: 0.9rem; max-width: 85%; line-height: 1.4; } .bot-msg { background: rgba(255,255,255,0.05); color: var(--white); align-self: flex-start; border-bottom-left-radius: 2px; border: 1px solid var(--glass-border); } .user-msg { background: var(--electric-blue); color: white; align-self: flex-end; border-bottom-right-radius: 2px; } .chat-footer { padding: 15px; display: flex; gap: 10px; background: var(--bg-charcoal); border-top: 1px solid var(--glass-border); } .chat-footer input { flex: 1; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); padding: 10px 15px; border-radius: 6px; color: white; font-family: var(--font-stack); } .chat-footer input:focus { outline: none; border-color: var(--electric-blue); } .chat-footer button { background: var(--electric-blue); border: none; width: 38px; height: 38px; border-radius: 6px; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; } .scroll-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .scroll-reveal.revealed { opacity: 1; transform: translateY(0); } .footer { padding: 40px 0; border-top: 1px solid var(--glass-border); background: var(--bg-black); } .footer p { font-size: 0.8rem; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 1px; } @media (max-width: 992px) { .hero h1 { font-size: 3.8rem; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .about-img-container { height: 350px; } .hero-stats { flex-direction: column; margin-top: 40px; } .hamburger { display: flex; } .nav-menu { position: fixed; top: 73px; left: -100%; width: 100%; height: calc(100vh - 73px); background: rgba(10,10,10,0.98); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); flex-direction: column; align-items: center; justify-content: center; gap: 40px; transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .nav-menu.active { left: 0; } .comparison-slider { height: 350px; } #ai-chat-container { width: calc(100% - 40px); right: 20px; left: 20px; } } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { overflow-x: hidden; } .container, .section, main { max-width: 100%; } @media (max-width: 768px) { .btn, .nav-links a, .nav-pills a { min-height: 44px; align-items: center; } .section { padding-block: 3rem; } .form-panel, .form-card, .form-elegant, .inquiry-float { padding: 1.25rem; } .inquiry-sidebar { padding: 2rem 1.25rem; } .form-area { padding: 2rem 1.25rem; } .hero-split { min-height: auto; } .hero-panel { padding: 2.5rem 0; } .hero-visual { min-height: 40vh; } .hero-center { min-height: auto; padding: 6rem 0 2.5rem; } .hero-portal { min-height: auto; padding-bottom: 2rem; } .hero-top { padding-top: 3rem; } .hero-img-wrap img { height: 40vh; min-height: 220px; } .product-row--reverse .product-row-img, .product-row--reverse .product-row-body { order: unset; } .product-num { font-size: 2.5rem; } .stat-pill { min-width: calc(50% - 0.5rem); flex: 1 1 calc(50% - 0.5rem); } .nav-float { top: 0.5rem; } .page-wrap { padding-top: 4.75rem; } .tab-label { flex: 1 1 auto; text-align: center; border-radius: 8px !important; margin-bottom: 0.25rem; } .tab-row { gap: 0.35rem; } } @media (min-width: 1200px) { .container { width: min(100% - 3rem, var(--max)); } } .inquiry-form input, .inquiry-form select, .inquiry-form textarea { max-width: 100%; }