Issues:
1/* ==========================================================================
2 Base & Variables
3 ========================================================================== */
4:root {
5 --bg-base: #1a202c;
6 --bg-surface: #52358e;
7 --bg-surface-light: #2D3748;
8
9 --primary: #e60fc2;
10 --primary-glow: rgba(230, 15, 194, 0.4);
11 --secondary: #1a202c;
12
13 --text-main: #F7FAFC;
14 --text-muted: #e2e8f0;
15
16 --gradient-primary: linear-gradient(135deg, var(--primary), var(--bg-surface));
17 --gradient-text: linear-gradient(to right, var(--primary), #ffffff);
18
19 --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
20 --heading-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
21
22 --radius-sm: 8px;
23 --radius-md: 12px;
24 --radius-lg: 24px;
25 --radius-pill: 50px;
26 --transition: all 0.3s ease;
27}
28
29* {
30 margin: 0;
31 padding: 0;
32 box-sizing: border-box;
33}
34
35html {
36 scroll-behavior: smooth;
37}
38
39body {
40 font-family: var(--font-family);
41 font-size: 20px;
42 font-weight: 400;
43 background-color: var(--bg-base);
44 color: var(--text-main);
45 line-height: 1.6;
46 overflow-x: hidden;
47 padding-bottom: 70px;
48 /* Space for mobile sticky CTA */
49}
50
51h1,
52h2,
53h3,
54h4,
55h5,
56h6 {
57 font-family: var(--heading-font);
58}
59
60p {
61 font-size: 22px;
62 line-height: 1.8;
63}
64
65.container {
66 width: 100%;
67 max-width: 1290px;
68 margin: 0 auto;
69 padding: 0 1.5rem;
70}
71
72.highlight {
73 color: var(--primary);
74}
75
76.text-gradient {
77 background: var(--gradient-text);
78
-webkit-background-clip: text;
79
-webkit-text-fill-color: transparent;
80 background-clip: text;
81}
82
83.bg-surface {
84 background: var(--bg-surface);
85}
86
87.mb-4 {
88 margin-bottom: 1rem;
89}
90
91.mt-4 {
92 margin-top: 1rem;
93}
94
95.small-text {
96 font-size: 0.85rem;
97 color: var(--text-muted);
98}
99
100/* ==========================================================================
101 Buttons
102 ========================================================================== */
103.btn {
104 display: inline-flex;
105 align-items: center;
106 justify-content: center;
107 text-decoration: none;
108 font-weight: 600;
109 border-radius: var(--radius-pill);
110 transition: var(--transition);
111 cursor: pointer;
112 border: 2px solid transparent;
113 gap: 8px;
114}
115
116.btn-primary {
117 background: var(--primary);
118 color: #010101;
119 padding: 12px 28px;
120}
121
122.btn-primary:hover {
123 transform: translateY(-2px);
124 box-shadow: 0 15px 25px -7px rgba(17, 236, 161, 0.4);
125 background: #010101;
126 color: var(--primary);
127 border-color: var(--primary);
128}
129
130.btn-large {
131 font-size: 1.1rem;
132 padding: 16px 40px;
133}
134
135.btn-full {
136 width: 100%;
137}
138
139.btn-nav {
140 background: transparent;
141 color: var(--text-main);
142 padding: 8px 20px;
143 border: 2px solid rgba(255, 255, 255, 0.2);
144}
145
146.btn-nav:hover {
147 background: var(--primary);
148 color: #010101;
149 border-color: var(--primary);
150}
151
152.btn-3d {
153 background: linear-gradient(to bottom, #00f260, #00d956);
154 border: none !important;
155 color: #000 !important;
156 font-weight: 800;
157 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
158 box-shadow:
159 0 4px 0 #00993d,
160 0 5px 10px rgba(0, 0, 0, 0.3),
161 inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
162 transform: translateY(0);
163 transition: transform 0.1s ease, box-shadow 0.1s ease;
164}
165
166.btn-3d:hover {
167 background: linear-gradient(to bottom, #1aff75, #00e65c);
168 border: none !important;
169 transform: translateY(2px);
170 box-shadow:
171 0 2px 0 #00993d,
172 0 3px 6px rgba(0, 0, 0, 0.3),
173 inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
174}
175
176.btn-3d:active {
177 transform: translateY(4px);
178 box-shadow:
179 0 0 0 #00993d,
180 0 1px 3px rgba(0, 0, 0, 0.3),
181 inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
182}
183
184.btn-glow {
185 box-shadow: 0 0 20px var(--primary-glow);
186}
187
188@keyframes pulse {
189 0% {
190 box-shadow: 0 0 0 0 var(--primary-glow);
191 }
192
193 70% {
194 box-shadow: 0 0 0 15px rgba(0, 242, 96, 0);
195 }
196
197 100% {
198 box-shadow: 0 0 0 0 rgba(0, 242, 96, 0);
199 }
200}
201
202/* ==========================================================================
203 Navbar
204 ========================================================================== */
205.navbar {
206 position: fixed;
207 top: 0;
208 width: 100%;
209 background: var(--bg-base);
210 z-index: 1000;
211 padding: 15px 0;
212 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
213 transition: var(--transition);
214}
215
216.navbar.scrolled {
217 background: var(--bg-base);
218 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
219}
220
221.nav-content {
222 display: flex;
223 justify-content: space-between;
224 align-items: center;
225}
226
227.logo {
228 display: flex;
229 align-items: center;
230 gap: 10px;
231 font-size: 1.5rem;
232 font-weight: 800;
233 font-family: var(--heading-font);
234}
235
236.logo-icon {
237 background: var(--primary);
238 color: var(--bg-base);
239 padding: 4px 8px;
240 border-radius: var(--radius-sm);
241 font-size: 1.2rem;
242}
243
244.nav-links {
245 display: flex;
246 gap: 30px;
247}
248
249.nav-links a {
250 position: relative;
251 color: var(--text-muted);
252 text-decoration: none;
253 font-weight: 500;
254 transition: var(--transition);
255 padding: 10px 0;
256}
257
258.nav-links a::after {
259 content: '';
260 position: absolute;
261 bottom: 0;
262 left: 50%;
263 transform: translateX(-50%) scaleX(0);
264 width: 100%;
265 height: 2px;
266 background: var(--primary);
267 transition: transform 0.3s ease;
268}
269
270.nav-links a:hover {
271 color: var(--primary);
272}
273
274.nav-links a:hover::after {
275 transform: translateX(-50%) scaleX(1);
276}
277
278/* Mobile Menu Toggle Button */
279.menu-toggle {
280 display: none;
281 flex-direction: column;
282 justify-content: space-between;
283 width: 30px;
284 height: 21px;
285 background: transparent;
286 border: none;
287 cursor: pointer;
288 z-index: 1001;
289 padding: 0;
290}
291
292.menu-toggle span {
293 display: block;
294 width: 100%;
295 height: 3px;
296 background-color: var(--text-main);
297 border-radius: 3px;
298 transition: all 0.3s ease;
299}
300
301.menu-toggle.active span:nth-child(1) {
302 transform: translateY(9px) rotate(45deg);
303}
304
305.menu-toggle.active span:nth-child(2) {
306 opacity: 0;
307}
308
309.menu-toggle.active span:nth-child(3) {
310 transform: translateY(-9px) rotate(-45deg);
311}
312
313@media (max-width: 768px) {
314 .menu-toggle {
315 display: flex;
316 }
317
318 .header-right .btn-nav {
319 display: none;
320 }
321
322 .nav-links .mobile-only-btn {
323 display: inline-block !important;
324 margin-top: 20px;
325 }
326
327 .nav-links {
328 position: fixed;
329 top: 0;
330 left: 0;
331 width: 100%;
332 height: 100vh;
333 background: linear-gradient(135deg, rgba(82, 53, 142, 0.98), rgba(26, 32, 44, 0.98));
334 flex-direction: column;
335 justify-content: center;
336 align-items: center;
337 gap: 35px;
338 opacity: 0;
339 visibility: hidden;
340 transform: translateY(-20px) scale(0.98);
341 transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
342 z-index: 1000;
343
backdrop-filter: blur(20px);
344
-webkit-backdrop-filter: blur(20px);
345 }
346
347 .nav-links.active {
348 opacity: 1;
349 visibility: visible;
350 transform: translateY(0) scale(1);
351 }
352
353 .nav-links a {
354 font-size: 1.8rem;
355 font-weight: 800;
356 letter-spacing: 2px;
357 text-transform: uppercase;
358 color: #fff;
359 background: linear-gradient(to right, #fff, #e2e8f0);
360
-webkit-background-clip: text;
361
-webkit-text-fill-color: transparent;
362 transition: transform 0.2s ease;
363 }
364
365 .nav-links a:active {
366 transform: scale(0.95);
367 }
368
369 .nav-links .mobile-only-btn {
370 margin-top: 20px;
371 font-size: 1.2rem;
372 padding: 15px 40px;
373 background: linear-gradient(135deg, var(--primary), #b30095);
374
-webkit-background-clip: border-box;
375
-webkit-text-fill-color: #fff;
376 border-radius: var(--radius-pill);
377 box-shadow: 0 10px 30px rgba(230, 15, 194, 0.5);
378 }
379}
380
381/* ==========================================================================
382 Mobile Sticky CTA
383 ========================================================================== */
384.mobile-sticky-cta {
385 position: fixed;
386 bottom: 0;
387 left: 0;
388 width: 100%;
389 background: var(--bg-surface);
390 padding: 10px 20px;
391 border-top: 1px solid rgba(255, 255, 255, 0.1);
392 z-index: 999;
393 box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
394}
395
396@media (min-width: 769px) {
397 .mobile-sticky-cta {
398 display: none;
399 }
400
401 body {
402 padding-bottom: 0;
403 }
404}
405
406/* ==========================================================================
407 Hero Official
408 ========================================================================== */
409.hero-official {
410 position: relative;
411 padding: 160px 0 80px;
412 overflow: hidden;
413}
414
415.hero-bg-glow {
416 display: none;
417}
418
419.hero-grid {
420 display: grid;
421 grid-template-columns: 1.2fr 0.8fr;
422 gap: 40px;
423 align-items: center;
424}
425
426.badge-new {
427 display: inline-block;
428 background: rgba(0, 242, 96, 0.1);
429 color: var(--primary);
430 padding: 5px 12px;
431 border-radius: var(--radius-pill);
432 border: 1px solid rgba(0, 242, 96, 0.3);
433 font-size: 0.85rem;
434 font-weight: 600;
435 margin-bottom: 20px;
436 text-transform: uppercase;
437 letter-spacing: 1px;
438}
439
440.hero-title {
441 font-size: 4rem;
442 font-weight: 800;
443 line-height: 1.1;
444 margin-bottom: 20px;
445}
446
447.hero-subtitle {
448 font-size: 1.1rem;
449 color: var(--text-muted);
450 margin-bottom: 30px;
451 max-width: 90%;
452}
453
454.hero-actions {
455 display: flex;
456 flex-direction: column;
457 align-items: flex-start;
458 gap: 15px;
459}
460
461.version-info {
462 font-size: 0.9rem;
463 color: var(--text-muted);
464 padding-left: 10px;
465 border-left: 2px solid var(--primary);
466}
467
468.mockup-placeholder {
469 background: linear-gradient(135deg, var(--bg-surface-light), var(--bg-surface));
470 border: 1px solid rgba(255, 255, 255, 0.05);
471 border-radius: 40px;
472 padding: 15px;
473 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
474 transform: rotate(-5deg);
475 transition: var(--transition);
476}
477
478.mockup-placeholder:hover {
479 transform: rotate(0deg) translateY(-10px);
480}
481
482.mockup-screen {
483 background: #000;
484 border-radius: 30px;
485 height: 500px;
486 width: 100%;
487 display: flex;
488 flex-direction: column;
489 align-items: center;
490 justify-content: center;
491 border: 2px solid #222;
492 position: relative;
493 overflow: hidden;
494}
495
496.mockup-logo {
497 font-size: 3rem;
498 font-weight: 800;
499 color: var(--primary);
500 text-shadow: 0 0 20px var(--primary-glow);
501}
502
503.mockup-btn {
504 margin-top: 30px;
505 background: var(--primary);
506 color: #000;
507 padding: 10px 20px;
508 border-radius: 20px;
509 font-weight: bold;
510}
511
512@media (max-width: 992px) {
513 .hero-grid {
514 grid-template-columns: 1fr;
515 text-align: center;
516 }
517
518 .hero-title {
519 font-size: 3rem;
520 }
521
522 .hero-subtitle {
523 margin: 0 auto 30px;
524 }
525
526 .hero-actions {
527 align-items: center;
528 margin: 0 auto;
529 }
530
531 .mockup-placeholder {
532 max-width: 300px;
533 margin: 50px auto 0;
534 }
535}
536
537/* ==========================================================================
538 Trust Ribbon
539 ========================================================================== */
540.trust-ribbon {
541 background: var(--bg-surface-light);
542 padding: 20px 0;
543 border-top: 1px solid rgba(255, 255, 255, 0.02);
544 border-bottom: 1px solid rgba(255, 255, 255, 0.02);
545}
546
547.trust-flex {
548 display: flex;
549 justify-content: space-between;
550 flex-wrap: wrap;
551 gap: 20px;
552}
553
554.trust-item {
555 display: flex;
556 align-items: center;
557 gap: 10px;
558 font-weight: 500;
559 font-size: 1rem;
560 color: var(--text-main);
561}
562
563.trust-item svg {
564 color: var(--primary);
565}
566
567@media (max-width: 768px) {
568 .trust-flex {
569 justify-content: center;
570 }
571}
572
573/* ==========================================================================
574 Sections & Utilities
575 ========================================================================== */
576.section {
577 padding: 100px 0;
578}
579
580.section-header {
581 text-align: center;
582 max-width: 700px;
583 margin: 0 auto 60px;
584}
585
586.section-header h2 {
587 font-size: 2.5rem;
588 font-weight: 800;
589 margin-bottom: 15px;
590}
591
592.section-header p {
593 color: var(--text-muted);
594 font-size: 1.3rem;
595 line-height: 1.8;
596}
597
598/* ==========================================================================
599 Game Grid
600 ========================================================================== */
601.game-grid {
602 display: grid;
603 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
604 gap: 30px;
605}
606
607.game-card {
608 background: var(--bg-surface);
609 padding: 30px;
610 border-radius: var(--radius-lg);
611 border: 1px solid rgba(255, 255, 255, 0.03);
612 transition: var(--transition);
613 box-shadow: 0px 15px 15px -10px rgba(0, 0, 0, 0.05);
614}
615
616.game-card:hover {
617 transform: translateY(-5px);
618 border-color: rgba(17, 236, 161, 0.3);
619 box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
620}
621
622.game-icon {
623 width: 60px;
624 height: 60px;
625 background: rgba(0, 242, 96, 0.05);
626 border-radius: var(--radius-md);
627 display: flex;
628 align-items: center;
629 justify-content: center;
630 margin-bottom: 20px;
631}
632
633.spec-icon svg {
634 width: 30px;
635 height: 30px;
636}
637
638.game-card h3 {
639 font-size: 1.4rem;
640 margin-bottom: 10px;
641}
642
643.game-card p {
644 color: var(--text-muted);
645 font-size: 1.15rem;
646 line-height: 1.6;
647}
648
649/* ==========================================================================
650 Inline CTA Banner
651 ========================================================================== */
652.cta-banner {
653 background: var(--gradient-primary);
654 padding: 60px 0;
655 text-align: center;
656}
657
658.cta-banner-content h2 {
659 font-size: 2.2rem;
660 margin-bottom: 10px;
661 color: #fff;
662}
663
664.cta-banner-content p {
665 color: rgba(255, 255, 255, 0.8);
666 margin-bottom: 30px;
667 font-size: 1.1rem;
668}
669
670.cta-banner .btn {
671 background: #fff;
672 color: #000;
673}
674
675/* ==========================================================================
676 Zig-Zag (Bonuses)
677 ========================================================================== */
678.zig-zag {
679 display: grid;
680 grid-template-columns: 1fr 1fr;
681 gap: 60px;
682 align-items: center;
683 margin-bottom: 80px;
684}
685
686.zig-zag.reverse .zz-text {
687 order: 2;
688}
689
690.zig-zag.reverse .zz-image {
691 order: 1;
692}
693
694.promo-badge {
695 color: #ffd700;
696 font-weight: 600;
697 text-transform: uppercase;
698 letter-spacing: 2px;
699 font-size: 0.85rem;
700 margin-bottom: 10px;
701}
702
703.zz-text h3 {
704 font-size: 2.2rem;
705 margin-bottom: 20px;
706 line-height: 1.2;
707}
708
709.zz-text p {
710 color: var(--text-muted);
711 margin-bottom: 15px;
712 font-size: 1.05rem;
713}
714
715.image-placeholder {
716 width: 100%;
717 height: 350px;
718 border-radius: var(--radius-lg);
719 background: var(--bg-surface-light);
720 display: flex;
721 align-items: center;
722 justify-content: center;
723 border: 1px dashed rgba(255, 255, 255, 0.2);
724 color: var(--text-muted);
725 font-weight: 500;
726}
727
728.promo-style {
729 background: linear-gradient(45deg, #1a1a2e, #16213e);
730 border: 2px solid rgba(255, 215, 0, 0.2);
731 color: #ffd700;
732}
733
734@media (max-width: 768px) {
735 .zig-zag {
736 grid-template-columns: 1fr;
737 gap: 40px;
738 }
739
740 .zig-zag.reverse .zz-text {
741 order: 1;
742 }
743
744 .zig-zag.reverse .zz-image {
745 order: 2;
746 }
747}
748
749/* ==========================================================================
750 Split Layout (Install & Payments)
751 ========================================================================== */
752.split-layout {
753 display: grid;
754 grid-template-columns: 1.2fr 0.8fr;
755 gap: 50px;
756}
757
758@media (max-width: 992px) {
759 .split-layout {
760 grid-template-columns: 1fr;
761 }
762}
763
764/* Timeline */
765.timeline {
766 position: relative;
767 padding-left: 30px;
768}
769
770.timeline::before {
771 content: '';
772 position: absolute;
773 left: 0;
774 top: 10px;
775 bottom: 10px;
776 width: 2px;
777 background: rgba(255, 255, 255, 0.1);
778}
779
780.timeline-item {
781 position: relative;
782 margin-bottom: 30px;
783}
784
785.timeline-dot {
786 position: absolute;
787 left: -42px;
788 top: 0;
789 width: 26px;
790 height: 26px;
791 background: var(--primary);
792 border-radius: 50%;
793 color: #000;
794 display: flex;
795 align-items: center;
796 justify-content: center;
797 font-weight: bold;
798 font-size: 0.8rem;
799 box-shadow: 0 0 10px var(--primary-glow);
800}
801
802.timeline-content h4 {
803 font-size: 1.2rem;
804 margin-bottom: 5px;
805 color: var(--text-main);
806}
807
808.timeline-content p {
809 color: var(--text-muted);
810 font-size: 0.95rem;
811}
812
813/* Download & Payment Cards */
814.download-card-official {
815 background: var(--bg-base);
816 padding: 40px;
817 border-radius: var(--radius-lg);
818 border: 1px solid rgba(0, 242, 96, 0.3);
819 text-align: center;
820 margin-bottom: 30px;
821 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
822}
823
824.download-card-official h2 {
825 font-size: 1.8rem;
826 margin-bottom: 10px;
827}
828
829.download-card-official p {
830 color: var(--text-muted);
831}
832
833.payment-methods-card {
834 background: var(--bg-base);
835 padding: 30px;
836 border-radius: var(--radius-lg);
837 text-align: center;
838 border: 1px solid rgba(255, 255, 255, 0.05);
839}
840
841.payment-methods-card h3 {
842 font-size: 1.2rem;
843 margin-bottom: 5px;
844}
845
846.payment-methods-card p {
847 color: var(--text-muted);
848 font-size: 1.15rem;
849 line-height: 1.6;
850}
851
852.payment-logos {
853 display: flex;
854 justify-content: center;
855 gap: 15px;
856 flex-wrap: wrap;
857}
858
859.pay-logo {
860 background: var(--bg-surface-light);
861 padding: 8px 15px;
862 border-radius: var(--radius-sm);
863 font-size: 0.85rem;
864 font-weight: 600;
865 color: var(--text-main);
866 border: 1px solid rgba(255, 255, 255, 0.05);
867}
868
869/* ==========================================================================
870 Text Grid (Tips & Specs)
871 ========================================================================== */
872.text-grid {
873 display: grid;
874 grid-template-columns: 1fr 1fr;
875 gap: 40px;
876}
877
878.card-basic {
879 background: var(--bg-surface);
880 padding: 40px;
881 border-radius: var(--radius-lg);
882 border: 1px solid rgba(255, 255, 255, 0.02);
883}
884
885.card-basic h3 {
886 font-size: 1.5rem;
887 margin-bottom: 20px;
888 color: var(--primary);
889}
890
891.styled-list {
892 list-style: none;
893}
894
895.styled-list li {
896 position: relative;
897 padding-left: 20px;
898 margin-bottom: 15px;
899 color: var(--text-muted);
900 line-height: 1.6;
901}
902
903.styled-list li::before {
904 content: '•';
905 position: absolute;
906 left: 0;
907 color: var(--primary);
908 font-size: 1.5rem;
909 line-height: 1;
910 top: -2px;
911}
912
913.styled-list strong {
914 color: var(--text-main);
915}
916
917/* Data Table */
918.data-table {
919 width: 100%;
920 border-collapse: collapse;
921}
922
923.data-table td {
924 padding: 12px 0;
925 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
926 color: var(--text-muted);
927}
928
929.data-table tr:last-child td {
930 border-bottom: none;
931}
932
933.data-table strong {
934 color: var(--text-main);
935}
936
937@media (max-width: 768px) {
938 .text-grid {
939 grid-template-columns: 1fr;
940 }
941}
942
943/* ==========================================================================
944 FAQ Grid
945 ========================================================================== */
946.faq-grid {
947 display: grid;
948 grid-template-columns: 1fr 1fr;
949 gap: 30px;
950}
951
952.faq-item {
953 background: var(--bg-base);
954 border-radius: var(--radius-md);
955 margin-bottom: 15px;
956 border: 1px solid rgba(255, 255, 255, 0.05);
957 overflow: hidden;
958}
959
960.faq-question {
961 width: 100%;
962 padding: 20px;
963 display: flex;
964 justify-content: space-between;
965 align-items: center;
966 background: none;
967 border: none;
968 color: var(--text-main);
969 font-size: 1.05rem;
970 font-weight: 600;
971 font-family: var(--font-family);
972 text-align: left;
973 cursor: pointer;
974 transition: var(--transition);
975}
976
977.faq-question:hover {
978 background: rgba(255, 255, 255, 0.02);
979}
980
981.faq-question svg {
982 transition: transform 0.3s ease;
983 color: var(--primary);
984}
985
986.faq-question.active svg {
987 transform: rotate(180deg);
988}
989
990.faq-answer {
991 max-height: 0;
992 overflow: hidden;
993 transition: max-height 0.3s ease;
994}
995
996.faq-answer p {
997 padding: 0 20px 20px;
998 color: var(--text-muted);
999 font-size: 0.95rem;
1000}
1001
1002@media (max-width: 768px) {
1003 .faq-grid {
1004 grid-template-columns: 1fr;
1005 gap: 0;
1006 }
1007}
1008
1009/* ==========================================================================
1010 Mega Footer
1011 ========================================================================== */
1012.mega-footer {
1013 background: #050508;
1014 padding: 80px 0 30px;
1015 border-top: 1px solid rgba(255, 255, 255, 0.05);
1016}
1017
1018.footer-grid {
1019 display: grid;
1020 grid-template-columns: 2fr 1fr 1fr 1.5fr;
1021 gap: 40px;
1022 margin-bottom: 60px;
1023}
1024
1025.footer-desc {
1026 color: var(--text-muted);
1027 margin: 15px 0;
1028 font-size: 0.95rem;
1029 line-height: 1.6;
1030 max-width: 300px;
1031}
1032
1033.age-badge {
1034 display: inline-block;
1035 background: #e74c3c;
1036 color: #fff;
1037 padding: 3px 8px;
1038 border-radius: 4px;
1039 font-weight: bold;
1040 font-size: 0.8rem;
1041 margin-bottom: 10px;
1042}
1043
1044.warning-text {
1045 color: #888;
1046 font-size: 0.8rem;
1047 max-width: 300px;
1048}
1049
1050.footer-col h4 {
1051 font-size: 1.1rem;
1052 margin-bottom: 20px;
1053 color: #fff;
1054}
1055
1056.footer-col a {
1057 display: block;
1058 color: var(--text-muted);
1059 text-decoration: none;
1060 margin-bottom: 10px;
1061 transition: var(--transition);
1062}
1063
1064.footer-col a:hover {
1065 color: var(--primary);
1066}
1067
1068.footer-pay-icons {
1069 display: flex;
1070 flex-wrap: wrap;
1071 gap: 10px;
1072}
1073
1074.pay-tag {
1075 background: rgba(255, 255, 255, 0.05);
1076 padding: 5px 10px;
1077 border-radius: 4px;
1078 font-size: 0.8rem;
1079 color: #ccc;
1080}
1081
1082.footer-bottom {
1083 text-align: center;
1084 color: #666;
1085 font-size: 0.85rem;
1086 border-top: 1px solid rgba(255, 255, 255, 0.05);
1087 padding-top: 30px;
1088}
1089
1090@media (max-width: 992px) {
1091 .footer-grid {
1092 grid-template-columns: 1fr 1fr;
1093 }
1094
1095 .brand-col {
1096 grid-column: span 2;
1097 }
1098}
1099
1100@media (max-width: 576px) {
1101 .footer-grid {
1102 grid-template-columns: 1fr;
1103 }
1104
1105 .brand-col {
1106 grid-column: span 1;
1107 }
1108}
1109
1110/* ==========================================================================
1111 App Specifications Grid
1112 ========================================================================== */
1113.specs-grid {
1114 display: grid;
1115 grid-template-columns: repeat(3, 1fr);
1116 gap: 20px;
1117}
1118
1119.spec-card {
1120 background-color: #0d1a12;
1121 border: 1px solid rgba(0, 242, 96, 0.2);
1122 border-radius: var(--radius-md);
1123 padding: 30px 15px;
1124 text-align: center;
1125 display: flex;
1126 flex-direction: column;
1127 align-items: center;
1128 justify-content: center;
1129 transition: var(--transition);
1130}
1131
1132.spec-card:hover {
1133 transform: translateY(-5px);
1134 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
1135 border-color: rgba(0, 242, 96, 0.5);
1136}
1137
1138.spec-icon {
1139 margin-bottom: 15px;
1140 color: #fff;
1141}
1142
1143.spec-icon svg {
1144 width: 30px;
1145 height: 30px;
1146}
1147
1148.spec-label {
1149 font-size: 0.9rem;
1150 text-transform: uppercase;
1151 letter-spacing: 1px;
1152 color: #fff;
1153 margin-bottom: 15px;
1154}
1155
1156.spec-value {
1157 font-size: 1.3rem;
1158 font-weight: 700;
1159 color: #fff;
1160}
1161
1162@media (max-width: 768px) {
1163 .specs-grid {
1164 grid-template-columns: repeat(2, 1fr);
1165 }
1166}
1167
1168@media (max-width: 480px) {
1169 .specs-grid {
1170 grid-template-columns: 1fr;
1171 }
1172}
1173
1174/* ==========================================================================
1175 Author Directory & Profile
1176 ========================================================================== */
1177.authors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 40px; }
1178.author-card {
1179 background: var(--bg-surface); padding: 30px; border-radius: var(--radius-lg);
1180 border: 1px solid rgba(255,255,255,0.03); transition: var(--transition); text-align: center;
1181 text-decoration: none; display: block;
1182}
1183.author-card:hover { transform: translateY(-5px); border-color: rgba(0, 242, 96, 0.3); box-shadow: 0 10px 30px rgba(0,0,0,0.5); cursor: pointer; }
1184.author-avatar {
1185 width: 100px; height: 100px; border-radius: 50%; margin: 0 auto 20px;
1186 background: var(--bg-surface-light); border: 2px solid var(--primary); display: flex;
1187 align-items: center; justify-content: center; font-size: 2rem; font-weight: bold; color: var(--primary);
1188 box-shadow: 0 0 15px var(--primary-glow);
1189}
1190.author-card h3 { font-size: 1.4rem; margin-bottom: 10px; color: var(--text-main); }
1191.author-card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 20px; }
1192.author-profile-hero {
1193 background: var(--bg-surface); border-radius: var(--radius-lg); padding: 50px;
1194 border: 1px solid rgba(255,255,255,0.05); text-align: center; margin-bottom: 40px;
1195}
1196.author-profile-avatar {
1197 width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 25px;
1198 background: var(--bg-surface-light); border: 3px solid var(--primary); display: flex;
1199 align-items: center; justify-content: center; font-size: 3rem; font-weight: bold; color: var(--primary);
1200 box-shadow: 0 0 30px var(--primary-glow);
1201}
1202.author-profile-role { color: var(--primary); font-weight: 600; margin-bottom: 20px; display: inline-block; padding: 5px 15px; background: rgba(0, 242, 96, 0.1); border-radius: var(--radius-pill); }