/* Cryptography.sh — Neo Robots Revamp */
:root{
--bg:#07080a;
--bg-2:#0b0e12;
--fg:#e8edf6;
--muted:#9aa7bd;
--cyan:#00f0ff;
--magenta:#ff3db8;
--purple:#7a5cff;
--orange:#ff8a3d;
--card:#0c1118;
--border:rgba(255,255,255,0.09);
--glow:0 0 28px rgba(0,240,255,0.35), 0 0 54px rgba(255,61,184,0.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji';}
html{scroll-behavior:smooth}
body{scroll-behavior:smooth;overflow-x:hidden}
/* Enhanced smooth scrolling performance */
*{
scroll-behavior:smooth;
}
/* Optimize scroll performance */
html{
scroll-padding-top:80px;
}
/* Smooth scroll for all anchor links */
a[href^="#"]{
scroll-behavior:smooth;
}
/* Global focus management for better UX */
*:focus:not(:focus-visible){
outline:none;
}
/* Ensure smooth transitions without lingering effects */
a, button, .nav a, .cta{
transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Clear any unwanted focus states after interactions */
a:active, button:active, .nav a:active, .cta:active{
transform:scale(0.98);
}
/* Light theme (when .dark class is removed) */
:root:not(.dark) {
--bg:#f8fafc;
--bg-2:#f1f5f9;
--fg:#1e293b;
--muted:#64748b;
--card:#ffffff;
--border:rgba(0,0,0,0.1);
--primary:#ff6b35;
--secondary:#8b5cf6;
--accent:#1e40af;
--dark:#0f172a;
}
.dark{
--bg:#05060a;
--bg-2:#090b10;
--fg:#eef2fb;
--muted:#9aa7bd;
--card:#0a0f16;
--border:rgba(255,255,255,0.12);
}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;padding:8px 10px;background:#000;color:#fff;border-radius:8px;z-index:100}
img{max-width:100%;display:block}
.container{width:min(1120px,92vw);margin:0 auto}
.site-header{
position:sticky;top:0;z-index:50;
display:flex;align-items:center;justify-content:space-between;
gap:16px;padding:14px 4vw;
background:rgba(12,12,18,0.4);
backdrop-filter:blur(20px);
border-bottom:1px solid rgba(0,240,255,0.1);
transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:0 4px 32px rgba(0,0,0,0.1);
}
/* Enhanced sticky navbar with scroll effects */
.site-header.scrolled{
background:rgba(12,12,18,0.85);
backdrop-filter:blur(25px);
border-bottom:1px solid rgba(0,240,255,0.2);
box-shadow:0 8px 40px rgba(0,0,0,0.2), 0 0 20px rgba(0,240,255,0.1);
}
/* Light theme header */
:root:not(.dark) .site-header{
background:rgba(255,255,255,0.7);
border-bottom:1px solid rgba(255,107,53,0.15);
box-shadow:0 4px 32px rgba(0,0,0,0.05);
}
:root:not(.dark) .site-header.scrolled{
background:rgba(255,255,255,0.95);
backdrop-filter:blur(25px);
border-bottom:1px solid rgba(255,107,53,0.25);
box-shadow:0 8px 40px rgba(0,0,0,0.1), 0 0 20px rgba(255,107,53,0.1);
}
.brand{
display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:0.3px;
position:relative;
transition:all 0.3s ease;
overflow:visible;
}
.brand .logo-dot{
width:12px;height:12px;border-radius:50%;
background:linear-gradient(135deg,var(--cyan),var(--magenta));
box-shadow:var(--glow);
position:relative;
overflow:visible;
display:flex;
align-items:center;
justify-content:center;
}
/* RippleLoader component */
.brand .logo-dot::before,
.brand .logo-dot::after{
content:'';
position:absolute;
border-radius:50%;
border:1px solid var(--cyan);
animation:ripple-loader 2s ease-in-out infinite;
box-shadow:0 0 8px rgba(0,240,255,0.3);
}
.brand .logo-dot::before{
width:16px;
height:16px;
animation-delay:0s;
border-color:var(--cyan);
box-shadow:0 0 8px rgba(0,240,255,0.6);
opacity:0.8;
}
.brand .logo-dot::after{
width:20px;
height:20px;
animation-delay:0.5s;
border-color:var(--magenta);
box-shadow:0 0 8px rgba(255,61,184,0.6);
opacity:0.8;
}
.brand .brand-logo{
width:32px;
height:32px;
object-fit:contain;
filter:drop-shadow(0 0 8px rgba(0,240,255,0.4));
transition:all 0.3s ease;
animation:logo-float 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
transform-origin:center center;
will-change:transform, filter;
}
.brand .brand-word{
letter-spacing:0.2px;
position:relative;
background:linear-gradient(135deg, var(--fg), var(--cyan));
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
transition:all 0.3s ease;
}
.brand:hover .brand-logo{
filter:drop-shadow(0 0 12px rgba(0,240,255,0.6));
transform:scale(1.05);
}
.brand:hover .brand-word{
background:linear-gradient(135deg, var(--cyan), var(--magenta));
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
/* Enhanced ripple on hover */
.brand:hover .logo-dot::before,
.brand:hover .logo-dot::after{
animation-duration:1s;
border-width:2px;
}
.brand:hover .logo-dot::before{
box-shadow:0 0 12px rgba(0,240,255,0.6);
}
.brand:hover .logo-dot::after{
box-shadow:0 0 12px rgba(255,61,184,0.6);
}
.brand.small span{font-size:14px;color:var(--muted)}
@keyframes ripple-loader{
0%{
transform:scale(0.5);
opacity:0.8;
}
50%{
transform:scale(1.5);
opacity:0.4;
}
100%{
transform:scale(2.5);
opacity:0;
}
}
.nav{
display:flex;gap:16px;flex-wrap:wrap;
position:relative;
}
.nav a{
color:var(--muted);text-decoration:none;font-weight:700;
position:relative;
padding:8px 12px;
border-radius:8px;
transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow:hidden;
}
/* Animated underline effect */
.nav a::before{
content:'';
position:absolute;
bottom:0;left:50%;
width:0;height:2px;
background:linear-gradient(90deg, var(--cyan), var(--magenta));
transform:translateX(-50%);
transition:width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:0 0 8px rgba(0,240,255,0.5);
}
/* Glowing border effect */
.nav a::after{
content:'';
position:absolute;
inset:0;
border-radius:inherit;
padding:1px;
background:linear-gradient(135deg, var(--cyan), var(--magenta), var(--purple), var(--cyan));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:0;
transition:opacity 0.3s ease;
z-index:-1;
}
.nav a:hover{
color:var(--fg);
background:rgba(0,240,255,0.05);
transform:translateY(-1px);
}
.nav a:hover::before{
width:80%;
}
.nav a:hover::after{
opacity:0.6;
}
.nav a.active{
color:var(--cyan);
background:rgba(0,240,255,0.1);
}
.nav a.active::before{
width:100%;
background:var(--cyan);
}
.nav a.active::after{
opacity:0.8;
}
/* Ensure focus states don't interfere with user experience */
.nav a:focus{
outline:none;
color:var(--cyan);
background:rgba(0,240,255,0.1);
}
.nav a:focus::before{
width:100%;
background:var(--cyan);
}
.nav a:focus::after{
opacity:0.8;
}
/* Remove focus ring after click */
.nav a:focus:not(:focus-visible){
outline:none;
}
.cta{
padding:10px 16px;
border:1px solid var(--border);
border-radius:10px;
text-decoration:none;
color:var(--fg);
font-weight:800;
background:transparent;
cursor:pointer;
position:relative;
overflow:hidden;
transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Subtle neon glow effect */
.cta::before{
content:'';
position:absolute;
inset:0;
border-radius:inherit;
padding:1px;
background:linear-gradient(135deg, var(--cyan), var(--magenta), var(--purple), var(--cyan));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:0.3;
transition:opacity 0.3s ease;
z-index:-1;
}
/* Pulsing glow animation */
.cta::after{
content:'';
position:absolute;
inset:-2px;
border-radius:inherit;
background:linear-gradient(135deg, var(--cyan), var(--magenta));
opacity:0;
filter:blur(8px);
transition:opacity 0.3s ease;
z-index:-2;
animation:cta-pulse 2s ease-in-out infinite;
}
.cta:hover{
border-color:var(--cyan);
color:var(--cyan);
transform:translateY(-1px);
box-shadow:0 4px 20px rgba(0,240,255,0.2);
}
.cta:hover::before{
opacity:0.8;
}
.cta:hover::after{
opacity:0.4;
}
/* CTA focus management */
.cta:focus{
outline:none;
border-color:var(--cyan);
color:var(--cyan);
transform:translateY(-1px);
box-shadow:0 4px 20px rgba(0,240,255,0.2);
}
.cta:focus::before{
opacity:0.8;
}
.cta:focus::after{
opacity:0.4;
}
/* Remove focus ring after click */
.cta:focus:not(:focus-visible){
outline:none;
}
@keyframes cta-pulse{
0%, 100%{opacity:0}
50%{opacity:0.1}
}
/* Enhanced Mobile nav */
.nav-toggle{
display:none;
flex-direction:column;
gap:4px;
background:transparent;
border:none;
padding:8px;
border-radius:8px;
cursor:pointer;
position:relative;
transition:all 0.3s ease;
}
.nav-toggle:hover{
background:rgba(0,240,255,0.1);
}
.nav-toggle .bar{
width:24px;height:2px;
background:var(--fg);
display:block;
border-radius:2px;
transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position:relative;
}
/* Animated hamburger bars - X close icon when open */
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){
transform:rotate(45deg) translate(5px, 5px);
background:var(--cyan);
box-shadow:0 0 8px rgba(0,240,255,0.5);
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){
opacity:0;
transform:scaleX(0);
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){
transform:rotate(-45deg) translate(5px, -5px);
background:var(--cyan);
box-shadow:0 0 8px rgba(0,240,255,0.5);
}
/* Enhanced hamburger hover effects */
.nav-toggle:hover .bar{
background:var(--cyan);
box-shadow:0 0 4px rgba(0,240,255,0.3);
}
.nav-toggle[aria-expanded="true"]:hover .bar{
background:var(--magenta);
box-shadow:0 0 8px rgba(255,61,184,0.5);
}
/* Desktop Navigation - Hidden on Mobile */
.desktop-nav{
display:flex;
gap:16px;
flex-wrap:wrap;
position:relative;
}
/* Mobile Navigation - Hidden on Desktop */
.mobile-nav-overlay{
display:none;
}
/* Mobile Navigation Styles - All Mobile Screen Sizes */
@media (max-width: 1024px), (max-height: 768px) and (orientation: landscape), (max-width: 768px), (max-width: 480px), (max-width: 360px){
/* Hide desktop nav on mobile */
.desktop-nav{
display:none;
}
/* Show mobile nav toggle */
.nav-toggle{
display:flex;
order:2;
}
/* Mobile: click to flip */
.flip.mobile-flipped .flip-inner{transform:rotateY(180deg) !important}
/* Show traits on mobile - override base CSS */
.flip-back .traits{display:grid !important;visibility:visible !important;opacity:1 !important}
/* Hide CTA on mobile */
.cta{
display:none;
}
/* Mobile Navigation Overlay */
.mobile-nav-overlay{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.8);
backdrop-filter:blur(10px);
z-index:1000;
display:flex;
align-items:flex-end;
opacity:0;
visibility:hidden;
transition:all 0.3s ease;
}
.mobile-nav-overlay[aria-hidden="false"]{
opacity:1;
visibility:visible;
}
/* Mobile Navigation Panel */
.mobile-nav{
width:100%;
height:85vh;
background:var(--bg);
border-top-left-radius:24px;
border-top-right-radius:24px;
border:1px solid rgba(0,240,255,0.2);
box-shadow:0 -10px 40px rgba(0,0,0,0.3);
transform:translateY(100%);
transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y:auto;
display:flex;
flex-direction:column;
}
.mobile-nav-overlay[aria-hidden="false"] .mobile-nav{
transform:translateY(0);
}
/* Mobile Nav Header */
.mobile-nav-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:24px 24px 20px;
border-bottom:1px solid rgba(0,240,255,0.1);
flex-shrink:0;
}
.mobile-brand{
display:flex;
align-items:center;
gap:12px;
font-weight:800;
font-size:18px;
}
.mobile-brand .brand-logo{
width:28px;
height:28px;
object-fit:contain;
filter:drop-shadow(0 0 6px rgba(0,240,255,0.4));
animation:logo-float 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
transform-origin:center center;
will-change:transform, filter;
}
.mobile-brand .logo-dot{
width:12px;
height:12px;
border-radius:50%;
background:linear-gradient(135deg,var(--cyan),var(--magenta));
box-shadow:0 0 8px rgba(0,240,255,0.5);
}
.mobile-close{
background:none;
border:none;
width:32px;
height:32px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
cursor:pointer;
position:relative;
}
.mobile-close span{
width:20px;
height:2px;
background:var(--fg);
border-radius:1px;
transition:all 0.3s ease;
}
.mobile-close span:first-child{
transform:rotate(45deg) translate(1px, 1px);
}
.mobile-close span:last-child{
transform:rotate(-45deg) translate(1px, -1px);
}
/* Mobile Nav Body */
.mobile-nav-body{
padding:16px 0;
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
gap:8px;
}
.mobile-link{
display:flex;
align-items:center;
justify-content:space-between;
padding:20px 24px;
text-decoration:none;
color:var(--fg);
transition:all 0.2s ease;
border-left:3px solid transparent;
margin:0 16px;
border-radius:12px;
}
.mobile-link:hover, .mobile-link:active{
background:rgba(0,240,255,0.05);
border-left-color:var(--cyan);
}
.link-content{
display:flex;
flex-direction:column;
gap:2px;
}
.link-title{
font-weight:700;
font-size:18px;
color:var(--fg);
}
.link-subtitle{
font-size:14px;
color:var(--muted);
font-weight:500;
}
.link-arrow{
font-size:20px;
color:var(--muted);
transition:all 0.2s ease;
}
.mobile-link:hover .link-arrow{
color:var(--cyan);
transform:translateX(4px);
}
/* Mobile Nav Footer */
.mobile-nav-footer{
padding:20px 24px 24px;
border-top:1px solid rgba(0,240,255,0.1);
flex-shrink:0;
}
.mobile-cta{
width:100%;
padding:16px 20px;
border-radius:12px;
background:linear-gradient(135deg, var(--cyan), var(--magenta));
border:none;
color:#000;
font-weight:800;
font-size:16px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
cursor:pointer;
transition:all 0.3s ease;
position:relative;
overflow:hidden;
}
.mobile-cta::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(90deg, rgba(255,255,255,0.2), transparent);
transform:translateX(-100%);
transition:transform 0.6s ease;
}
.mobile-cta:hover::before{
transform:translateX(100%);
}
.mobile-cta:disabled{
opacity:0.6;
cursor:not-allowed;
}
.cta-text{
font-weight:800;
}
.cta-badge{
background:rgba(0,0,0,0.2);
padding:2px 8px;
border-radius:8px;
font-size:12px;
font-weight:600;
}
/* Enhanced mobile navbar */
.site-header{
padding:12px 4vw;
min-height:60px;
}
.brand{
font-size:16px;
order:1;
}
/* Responsive navbar adjustments */
@media (max-width: 360px) {
.site-header{
padding:10px 3vw;
min-height:56px;
}
.brand{
font-size:14px;
}
.nav-toggle{
width:36px;
height:36px;
}
}
@media (max-width: 480px) {
.site-header{
padding:11px 3.5vw;
min-height:58px;
}
.brand{
font-size:15px;
}
}
@media (max-height: 768px) and (orientation: landscape) {
.site-header{
padding:8px 4vw;
min-height:50px;
}
.brand{
font-size:15px;
}
}
@media (max-width: 1024px) and (min-width: 769px) {
.site-header{
padding:16px 5vw;
min-height:70px;
}
.brand{
font-size:18px;
}
.nav-toggle{
width:44px;
height:44px;
}
}
.only-desktop{display:none}
}
/* Extra Small Mobile Screens (360px and below) */
@media (max-width: 360px) {
.mobile-nav{
height:90vh;
}
.mobile-nav-header{
padding:20px 20px 16px;
}
.mobile-brand{
font-size:16px;
}
.mobile-link{
padding:16px 20px;
margin:0 12px;
}
.link-title{
font-size:16px;
}
.link-subtitle{
font-size:13px;
}
.mobile-nav-footer{
padding:16px 20px 20px;
}
.mobile-cta{
padding:14px 16px;
font-size:15px;
}
}
/* Small Mobile Screens (480px and below) */
@media (max-width: 480px) {
.mobile-nav{
height:88vh;
}
.mobile-nav-header{
padding:22px 22px 18px;
}
.mobile-link{
padding:18px 22px;
margin:0 14px;
}
.link-title{
font-size:17px;
}
.link-subtitle{
font-size:13px;
}
}
/* Medium Mobile Screens (768px and below) */
@media (max-width: 768px) {
.mobile-nav{
height:85vh;
}
.mobile-nav-header{
padding:24px 24px 20px;
}
.mobile-link{
padding:20px 24px;
margin:0 16px;
}
.link-title{
font-size:18px;
}
.link-subtitle{
font-size:14px;
}
}
/* Landscape Mobile Screens */
@media (max-height: 768px) and (orientation: landscape) {
.mobile-nav{
height:95vh;
}
.mobile-nav-body{
padding:8px 0;
gap:4px;
}
.mobile-link{
padding:12px 24px;
}
.link-title{
font-size:16px;
}
.link-subtitle{
font-size:12px;
}
.mobile-nav-header{
padding:16px 24px 12px;
}
.mobile-nav-footer{
padding:12px 24px 16px;
}
.mobile-cta{
padding:12px 20px;
font-size:15px;
}
}
/* Large Mobile/Tablet Screens (1024px and below) */
@media (max-width: 1024px) and (min-width: 769px) {
.mobile-nav{
height:80vh;
max-width:500px;
margin:0 auto;
}
.mobile-nav-header{
padding:28px 28px 24px;
}
.mobile-brand{
font-size:20px;
}
.mobile-link{
padding:22px 28px;
margin:0 20px;
}
.link-title{
font-size:19px;
}
.link-subtitle{
font-size:15px;
}
.mobile-nav-footer{
padding:24px 28px 28px;
}
.mobile-cta{
padding:18px 24px;
font-size:17px;
}
}
.hero{position:relative;min-height:78vh;display:grid;place-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;opacity:0.9}
.hero-lottie{position:relative;width:min(520px,80vw);height:280px;margin:16px auto}
.hero-content{position:relative;text-align:center;padding:18vh 0 12vh}
.hero .glow{color:var(--cyan);text-shadow:0 0 28px rgba(0,240,255,0.35)}
/* Light theme glow effect */
:root:not(.dark) .hero .glow{
background:linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
text-shadow:none;
}
:root:not(.dark) .hero-bg{
background:transparent;
}
.hero h1{font-size:clamp(36px,6vw,64px);margin:0 0 10px;line-height:1.2}
.hero h1 .glow{display:block;margin-top:8px}
.hero .lead{color:var(--muted);font-size:clamp(16px,2vw,20px);margin:0 auto 24px;max-width:820px}
.hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* Glitch headline */
#hero-title{position:relative;filter:drop-shadow(0 0 18px rgba(0,240,255,0.25))}
#hero-title::before,#hero-title::after{content:attr(data-text);position:absolute;left:0;top:0;mix-blend-mode:screen;opacity:0.6;clip-path:inset(0 0 0 0)}
#hero-title::before{color:var(--cyan);transform:translate(2px,0)}
#hero-title::after{color:var(--magenta);transform:translate(-2px,0)}
/* Light theme - remove glitch effects */
:root:not(.dark) #hero-title{
filter:none;
}
:root:not(.dark) #hero-title::before,
:root:not(.dark) #hero-title::after{
display:none;
}
.scanline{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);animation:scan 4s linear infinite;opacity:0.5}
/* Light theme - remove scanline overlay */
:root:not(.dark) .scanline{
display:none;
}
@keyframes scan{0%{transform:translateY(-60px)}100%{transform:translateY(60px)}}
.hero-grid-overlay{
position:absolute;inset:0;
background-image:linear-gradient(rgba(0,240,255,0.06),rgba(255,61,184,0.06)),
radial-gradient(circle at 30% 20%, rgba(0,240,255,0.12), transparent 30%),
radial-gradient(circle at 80% 70%, rgba(255,61,184,0.12), transparent 35%);
pointer-events:none;
}
/* Light theme - remove hero grid overlay */
:root:not(.dark) .hero-grid-overlay{
display:none;
}
.btn{padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:800;border:1px solid var(--border)}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--magenta));color:#0b0b10;border:none;box-shadow:var(--glow)}
.btn-ghost{background:transparent;color:var(--fg)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
button.btn, .btn, .cta{transition:transform .15s ease}
button.btn:active, .btn:active, .cta:active{transform:scale(0.98)}
button.btn[disabled], .btn[disabled]{opacity:0.6;cursor:not-allowed}
/* Ripple effect */
.ripple{position:relative;overflow:hidden}
.btn, .cta{
position:relative;isolation:isolate
}
.btn::before, .cta::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from 180deg, var(--cyan), var(--magenta), var(--purple), var(--cyan));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0.35;transition:opacity .3s ease;z-index:-1}
.btn:hover::before, .cta:hover::before{opacity:0.7}
.btn-primary{position:relative}
.btn-primary::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg, rgba(255,255,255,0.15), transparent 40%, transparent 60%, rgba(255,255,255,0.15));transform:skewX(-20deg) translateX(-120%);transition:transform .6s ease}
.btn-primary:hover::after{transform:skewX(-20deg) translateX(120%)}
.ripple::after{content:"";position:absolute;inset:auto;left:50%;top:50%;width:0;height:0;background:radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%);transform:translate(-50%,-50%);transition:width .4s ease, height .4s ease;pointer-events:none}
.ripple:active::after{width:220px;height:220px}
.section{padding:72px 0}
.section-contrast{background:var(--bg-2);position:relative}
.section-title{font-size:clamp(28px,4.6vw,46px);margin:0 0 10px;position:relative;animation:title-glow 4s ease-in-out infinite}
.section-title::after{content:'';position:absolute;bottom:-8px;left:0;width:100%;height:2px;background:linear-gradient(90deg, transparent, var(--cyan), var(--magenta), transparent);opacity:0.6;animation:scan-line 3s ease-in-out infinite}
@keyframes title-glow{0%,100%{filter:drop-shadow(0 0 20px rgba(0,240,255,0.3))}50%{filter:drop-shadow(0 0 30px rgba(255,61,184,0.4))}}
@keyframes scan-line{0%,100%{transform:translateX(-100%);opacity:0}50%{transform:translateX(0);opacity:1}}
.section-sub{color:var(--muted);margin:4px 0 28px}
.accent{background:linear-gradient(135deg,var(--cyan),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 6px}
.filter-btn{border:1px solid var(--border);background:transparent;color:var(--muted);padding:8px 12px;border-radius:999px;cursor:pointer}
.filter-btn.active,.filter-btn:hover{border-color:rgba(0,240,255,0.4);color:var(--cyan)}
.sort{margin-left:auto}
.sort select{background:var(--card);color:var(--fg);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.grid{display:grid;gap:18px}
.collection-scroll-container{position:relative;margin:60px 0;padding:0 20px}
.robots-grid{display:flex;gap:24px;overflow-x:auto;padding:30px 0;scroll-behavior:smooth;scrollbar-width:none;position:relative;mask:linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);-webkit-overflow-scrolling:touch}
.robots-grid::-webkit-scrollbar{display:none}
.scroll-btn{position:absolute;top:50%;transform:translateY(-50%);background:linear-gradient(135deg, rgba(0,240,255,0.15), rgba(255,61,184,0.15));border:2px solid var(--cyan);color:var(--cyan);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);z-index:10;backdrop-filter:blur(12px);box-shadow:0 8px 32px rgba(0,240,255,0.2)}
.scroll-btn:hover{background:linear-gradient(135deg, rgba(0,240,255,0.25), rgba(255,61,184,0.25));transform:translateY(-50%) scale(1.15);box-shadow:0 12px 40px rgba(0,240,255,0.4), 0 0 20px rgba(255,61,184,0.3);border-color:var(--magenta)}
.scroll-btn:active{transform:translateY(-50%) scale(1.05)}
.scroll-left{left:0;animation:float-left 3s ease-in-out infinite}
.scroll-right{right:0;animation:float-right 3s ease-in-out infinite}
@keyframes float-left{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(4px)}}
@keyframes float-right{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(-4px)}}
@media (max-width:720px){.scroll-btn{display:flex;width:40px;height:40px;font-size:14px}.collection-scroll-container{padding:0 10px}}
#grid-glow{position:absolute;inset:-20px;pointer-events:none;background:radial-gradient(800px 280px at 50% -10%, rgba(0,240,255,0.08), transparent 60%)}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0));backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.card .flip-front img{display:block !important;width:100% !important;height:100% !important;object-fit:cover !important;opacity:1 !important;visibility:visible !important;transform:none !important}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 40px rgba(0,240,255,0.14), 0 4px 18px rgba(255,61,184,0.12)}
.card.neon:hover{border-color:rgba(0,240,255,0.35)}
.card-meta{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-top:1px solid var(--border)}
.robot{display:flex;flex-direction:column;min-height:400px;flex:0 0 300px;width:300px;position:relative;background:linear-gradient(135deg, rgba(0,240,255,0.03), rgba(255,61,184,0.03));border-radius:20px;overflow:hidden;transition:all .4s cubic-bezier(0.4, 0, 0.2, 1)}
.robot::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg, rgba(0,240,255,0.1), transparent 50%, rgba(255,61,184,0.1));opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:1}
/* Desktop robot hover effects - only applies to screens wider than 768px */
@media (min-width: 769px) {
.robot:hover::before{opacity:1}
.robot:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 60px rgba(0,240,255,0.2), 0 8px 32px rgba(255,61,184,0.15), 0 0 0 1px rgba(0,240,255,0.25) inset}
.robot:hover .holo-overlay{opacity:0.8}
.robot:hover .holo-badge::after{opacity:1}
.robot:hover .traits{transform:translateY(0)}
}
.robot .flip-inner{height:100%}
.flip-front,.flip-back{min-height:0}
.flip-front{display:grid;place-items:center;opacity:1;visibility:visible}
.flip-front img{width:100%;height:100%;object-fit:cover;border-bottom:1px solid var(--border);display:block;visibility:visible;opacity:1;position:relative;z-index:10}
.flip-front img[src$=".svg"]{object-fit:contain;padding:10px}
.flip-front,.flip-back{aspect-ratio:3/4}
.flip-back{display:grid;place-items:stretch}
.flip-back .meta{width:100%;flex:1;overflow:hidden;padding:0;display:flex;flex-direction:column;gap:8px;justify-content:center;align-items:center}
.flip-back .traits{position:static;transform:none;background:transparent;border-top:none;grid-template-columns:repeat(2,1fr);gap:4px;flex:1;overflow:hidden;padding:0;margin:0;display:none}
.trait{word-break:break-word;font-size:8px;line-height:1.2;padding:1px 0;display:flex;justify-content:space-between;align-items:center}
.trait-value{color:var(--cyan);font-weight:600}
.rarity-bar{width:100%;height:4px;background:rgba(255,255,255,0.1);border-radius:2px;margin:6px 0 8px;overflow:hidden}
.rarity-fill{height:100%;border-radius:2px;transition:width .6s ease}
.rarity-fill.legendary{width:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta))}
.rarity-fill.mythic{width:85%;background:linear-gradient(90deg,var(--magenta),var(--purple))}
.rarity-fill.epic{width:70%;background:linear-gradient(90deg,var(--purple),var(--cyan))}
.rarity-fill.rare{width:55%;background:linear-gradient(90deg,var(--cyan),var(--orange))}
.rarity-fill.elite{width:40%;background:linear-gradient(90deg,var(--orange),var(--muted))}
.flip-back .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 4px 0;padding:0;width:100%;max-width:300px}
.flip-back .stat-item{text-align:center;background:rgba(0,240,255,0.08);border:1px solid rgba(0,240,255,0.2);border-radius:8px;padding:12px 6px !important;min-width:auto !important;min-height:50px !important;display:flex !important;flex-direction:column !important;justify-content:center !important}
.flip-back .stat-label{display:block;font-size:9px !important;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;line-height:1.3;margin-bottom:4px}
.flip-back .stat-value{display:block;font-size:16px !important;font-weight:800;color:var(--cyan);line-height:1.2}
.flip-back .price{display:flex !important;justify-content:space-between;align-items:center;margin:0;padding:8px 12px;background:rgba(0,240,255,0.08);border-radius:6px;border:1px solid rgba(0,240,255,0.2);width:100%;max-width:300px}
.flip-back .price-label{font-size:10px;color:var(--muted);text-transform:uppercase;line-height:1.2;font-weight:600}
.flip-back .price-value{font-size:12px;font-weight:800;color:var(--cyan);line-height:1.2}
.flip{perspective:1000px}
.flip-inner{position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.flip-front{position:relative;backface-visibility:hidden;z-index:2}
.flip-back{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;z-index:1;display:flex;flex-direction:column;padding:8px;overflow:hidden;justify-content:center;align-items:center}
/* Desktop hover behavior - only applies to screens wider than 768px */
@media (min-width: 769px) {
.flip:hover .flip-inner{transform:rotateY(180deg)}
}
.flip .meta h4{margin:0 0 4px;font-size:12px;line-height:1.2;text-align:center}
.zoomable{cursor:zoom-in}
.holo-overlay{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:100px;height:100px;opacity:0.0;transition:opacity .25s ease;pointer-events:none;z-index:2}
/* Desktop hover effects moved to media query above */
.holo-badge{position:relative}
.holo-badge::after{content:"";position:absolute;left:-2px;right:-2px;top:-2px;bottom:-2px;border-radius:999px;background:conic-gradient(from 0deg, rgba(0,240,255,0.3), rgba(255,61,184,0.3), rgba(0,240,255,0.3));filter:blur(8px);opacity:0;transition:opacity .3s ease}
/* Desktop hover effects moved to media query above */
.robot{position:relative}
.robot .traits{position:absolute;left:0;right:0;bottom:0;background:rgba(7,8,10,0.8);backdrop-filter:blur(6px);padding:10px 12px;transform:translateY(100%);transition:transform .25s ease;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
/* Desktop hover effects moved to media query above */
.trait{font-size:12px;color:var(--muted)}
.trait strong{color:var(--fg)}
.card-meta h3{margin:0;font-size:18px}
.tag{border:1px solid var(--border);padding:4px 8px;border-radius:999px;color:var(--muted);font-weight:700;font-size:12px}
.tag-cyan{color:var(--cyan);border-color:rgba(0,240,255,0.4)}
.tag-magenta{color:var(--magenta);border-color:rgba(255,61,184,0.45)}
.note{color:var(--muted);margin-top:30px;padding:16px 24px;background:linear-gradient(135deg, rgba(0,240,255,0.05), rgba(255,61,184,0.05));border:1px solid rgba(0,240,255,0.1);border-radius:12px;backdrop-filter:blur(8px);position:relative;overflow:hidden;text-align:center;font-size:14px}
.note::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);animation:shimmer 3s ease-in-out infinite}
@keyframes shimmer{0%{left:-100%}100%{left:100%}}
/* JEEL Showcase Section */
.jeel-showcase{position:relative;overflow:hidden;background:linear-gradient(135deg, rgba(0,240,255,0.02), rgba(255,61,184,0.02))}
.jeel-bg-overlay{position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(0,240,255,0.05) 0%, transparent 70%), radial-gradient(ellipse at 30% 20%, rgba(255,61,184,0.03) 0%, transparent 50%);animation:bg-pulse 8s ease-in-out infinite}
.jeel-particles{position:absolute;inset:0;pointer-events:none;background:url('data:image/svg+xml,') repeat;animation:particle-drift 20s linear infinite}
@keyframes bg-pulse{0%,100%{opacity:1}50%{opacity:0.7}}
@keyframes particle-drift{0%{transform:translateY(0) translateX(0)}100%{transform:translateY(-100px) translateX(50px)}}
.jeel-hero{text-align:center;margin-bottom:80px;position:relative}
.jeel-token-showcase{display:flex;align-items:center;justify-content:center;gap:60px;margin-bottom:40px;flex-wrap:wrap}
.token-container{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center}
.jeel-token-lottie{width:100px;height:100px;z-index:3;position:relative;animation:token-float 4s ease-in-out infinite}
.token-glow-ring{position:absolute;inset:0;border:3px solid rgba(0,240,255,0.4);border-radius:50%;animation:glow-pulse 3s ease-in-out infinite}
.token-orbit-particles{position:absolute;inset:0;pointer-events:none}
.orbit-particle{position:absolute;width:6px;height:6px;background:var(--cyan);border-radius:50%;animation:orbit 6s linear infinite}
.orbit-particle:nth-child(1){top:0;left:50%;transform:translateX(-50%);animation-delay:0s}
.orbit-particle:nth-child(2){top:50%;right:0;transform:translateY(-50%);animation-delay:2s}
.orbit-particle:nth-child(3){bottom:0;left:50%;transform:translateX(-50%);animation-delay:4s}
@keyframes token-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.05)}}
@keyframes glow-pulse{0%,100%{opacity:0.4;transform:scale(1)}50%{opacity:0.8;transform:scale(1.1)}}
@keyframes orbit{0%{transform:rotate(0deg) translateX(75px) rotate(0deg)}100%{transform:rotate(360deg) translateX(75px) rotate(-360deg)}}
.token-stats{display:flex;gap:40px;flex-wrap:wrap;justify-content:center}
.stat-item{text-align:center;padding:20px;background:rgba(0,240,255,0.05);border-radius:16px;border:1px solid rgba(0,240,255,0.2);backdrop-filter:blur(8px);min-width:120px}
.stat-value{display:block;font-size:28px;font-weight:800;color:var(--cyan);margin-bottom:4px}
.stat-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
.jeel-title{position:relative;animation:title-glow 4s ease-in-out infinite;margin-bottom:16px}
.jeel-title::after{content:'';position:absolute;bottom:-8px;left:0;width:100%;height:2px;background:linear-gradient(90deg, transparent, var(--cyan), var(--magenta), transparent);opacity:0.6;animation:scan-line 3s ease-in-out infinite}
.glow-text{background:linear-gradient(135deg, var(--cyan), var(--magenta), var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;animation:text-shimmer 2s ease-in-out infinite}
@keyframes text-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* JEEL Central Hub - Orbital Layout */
.jeel-central-hub{position:relative;width:100%;height:700px;display:flex;align-items:center;justify-content:center;margin:60px 0 140px 0;overflow:visible}
/* Central JEEL Token */
.jeel-centerpiece{position:relative;z-index:1000;display:flex;flex-direction:column;align-items:center;gap:30px;margin-top:60px}
.token-container{position:relative;width:180px;height:180px;display:flex;align-items:center;justify-content:center;z-index:1001}
.jeel-token-lottie{width:120px;height:120px;z-index:1002;position:relative;animation:token-float 4s ease-in-out infinite}
.token-glow-ring{position:absolute;inset:0;border:3px solid rgba(0,240,255,0.6);border-radius:50%;animation:none;box-shadow:none;overflow:hidden;display:flex;align-items:center;justify-content:center;z-index:1003;mix-blend-mode:normal}
.jeelan-utility-video{width:100%;height:100%;object-fit:cover;border-radius:50%;opacity:0.8;transition:opacity 0.3s ease;filter:brightness(1.2) contrast(1.1);z-index:111}
.jeelan-utility-video:hover{opacity:1}
.token-orbit-particles{position:absolute;inset:0;pointer-events:none}
.orbit-particle{position:absolute;width:8px;height:8px;background:var(--cyan);border-radius:50%;animation:orbit 8s linear infinite;box-shadow:0 0 10px rgba(0,240,255,0.6)}
.orbit-particle:nth-child(1){top:0;left:50%;transform:translateX(-50%);animation-delay:0s}
.orbit-particle:nth-child(2){top:50%;right:0;transform:translateY(-50%);animation-delay:2s}
.orbit-particle:nth-child(3){bottom:0;left:50%;transform:translateX(-50%);animation-delay:4s}
.orbit-particle:nth-child(4){top:50%;left:0;transform:translateY(-50%);animation-delay:6s}
.token-stats{display:flex;gap:30px;flex-wrap:wrap;justify-content:center}
.stat-item{text-align:center;padding:16px 20px;background:rgba(0,240,255,0.08);border-radius:12px;border:1px solid rgba(0,240,255,0.3);backdrop-filter:blur(8px);min-width:100px;transition:all 0.3s ease}
.stat-item:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,240,255,0.2)}
.stat-value{display:block;font-size:24px;font-weight:800;color:var(--cyan);margin-bottom:4px}
.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
/* Orbital Cards Container */
.utility-cards-orbital{position:absolute;inset:0;pointer-events:none;z-index:2}
/* Individual Orbital Cards - Circular Design */
.utility-card-orbital{position:absolute;width:160px;height:160px;pointer-events:auto;cursor:pointer;transition:all 0.4s ease}
.utility-card-orbital .card-inner{width:100%;height:100%;background:linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));border:3px solid rgba(0,240,255,0.4);border-radius:50%;padding:20px;text-align:center;position:relative;overflow:hidden;backdrop-filter:blur(12px);transition:box-shadow 0.3s ease, border-color 0.3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center}
.utility-card-orbital:hover .card-inner{border-color:var(--cyan);box-shadow:0 20px 40px rgba(0,240,255,0.4)}
/* Card Positioning - Circular Layout */
/* Positional hints are overridden by JS layoutOrbitalCards; keep minimal defaults */
.staking-card{top:40px;left:50%;transform:translate(-50%, -50%);z-index:5}
.upgrades-card{top:50%;right:40px;transform:translate(-50%, -50%);z-index:4}
.governance-card{bottom:40px;left:50%;transform:translate(-50%, -50%);z-index:3}
.arena-card{top:50%;left:40px;transform:translate(-50%, -50%);z-index:2}
/* Card Content - Circular Design */
.card-icon{width:40px;height:40px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;background:rgba(0,240,255,0.15);border-radius:50%;border:2px solid rgba(0,240,255,0.4);color:var(--cyan);font-size:18px;transition:all 0.3s ease}
.utility-card-orbital:hover .card-icon{background:rgba(0,240,255,0.25);border-color:var(--cyan);transform:scale(1.1)}
.utility-card-orbital h3{margin:0 0 6px;color:var(--fg);font-size:14px;font-weight:700;line-height:1.2}
.utility-card-orbital p{margin:0 0 8px;color:var(--muted);font-size:10px;line-height:1.3;text-align:center}
.utility-cost{font-size:10px;font-weight:700;color:var(--cyan);margin-bottom:6px;padding:3px 6px;background:rgba(0,240,255,0.15);border-radius:10px;border:1px solid rgba(0,240,255,0.3);display:inline-block}
.utility-status{display:flex;align-items:center;justify-content:center;gap:4px;font-size:9px;font-weight:600;margin-top:4px}
.utility-status.active{color:var(--cyan)}
.utility-status.coming-soon{color:var(--magenta)}
/* Card Glow Effect - Circular */
.card-glow{position:absolute;inset:0;background:linear-gradient(135deg, rgba(0,240,255,0.1), rgba(255,61,184,0.1));opacity:0;transition:opacity 0.4s ease;border-radius:50%;pointer-events:none}
.utility-card-orbital:hover .card-glow{opacity:1}
/* Dynamic SVG Connection Lines */
.connection-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.connection-line{pointer-events:none}
@keyframes dashFlow{to{stroke-dashoffset:-18}}
@keyframes lineFlow{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-12}}
@keyframes energyFlow{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-24}}
/* Token Stats at Bottom */
.token-stats-bottom{position:absolute;bottom:-120px;left:50%;transform:translateX(-50%);display:flex;gap:30px;z-index:15;background:rgba(7,8,10,0.8);backdrop-filter:blur(12px);padding:16px 24px;border-radius:16px;border:1px solid rgba(0,240,255,0.2);box-shadow:0 8px 32px rgba(0,240,255,0.15)}
.token-stats-bottom .stat-item{text-align:center;padding:8px 12px;background:rgba(0,240,255,0.08);border-radius:8px;border:1px solid rgba(0,240,255,0.2);min-width:80px;transition:all 0.3s ease}
.token-stats-bottom .stat-item:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,240,255,0.2)}
.token-stats-bottom .stat-value{display:block;font-size:18px;font-weight:800;color:var(--cyan);margin-bottom:4px}
.token-stats-bottom .stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
/* Staking Panel */
.staking-showcase{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.staking-visual{display:flex;justify-content:center;align-items:center}
.staking-circle{position:relative;width:200px;height:200px;border-radius:50%;background:conic-gradient(from 0deg, var(--cyan) 0deg, var(--cyan) 270deg, rgba(255,255,255,0.1) 270deg);display:flex;align-items:center;justify-content:center;animation:rotate 10s linear infinite}
.staking-progress{position:absolute;inset:10px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center}
.staking-center{text-align:center}
.apy-display{display:block;font-size:36px;font-weight:800;color:var(--cyan);line-height:1}
.apy-label{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.staking-info h3{margin:0 0 16px;color:var(--fg);font-size:24px;font-weight:700}
.staking-info p{margin:0 0 24px;color:var(--muted);font-size:16px;line-height:1.5}
.staking-features{display:grid;gap:12px;margin-bottom:32px}
.feature-item{display:flex;align-items:center;gap:12px;padding:12px;background:rgba(0,240,255,0.05);border-radius:8px;border:1px solid rgba(0,240,255,0.1)}
.feature-item i{color:var(--cyan);font-size:16px;width:20px}
.feature-item span{color:var(--fg);font-size:14px;font-weight:500}
/* Upgrades Panel */
.upgrades-showcase{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.upgrade-categories{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.upgrade-category{background:rgba(0,240,255,0.05);border:1px solid rgba(0,240,255,0.2);border-radius:12px;padding:20px;text-align:center;transition:all 0.3s ease;cursor:pointer}
.upgrade-category:hover{background:rgba(0,240,255,0.1);border-color:var(--cyan);transform:translateY(-4px)}
.category-icon{width:50px;height:50px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:rgba(0,240,255,0.1);border-radius:50%;color:var(--cyan);font-size:20px}
.upgrade-category h4{margin:0 0 8px;color:var(--fg);font-size:16px;font-weight:700}
.upgrade-category p{margin:0;color:var(--cyan);font-size:14px;font-weight:600}
.upgrade-preview h3{margin:0 0 16px;color:var(--fg);font-size:24px;font-weight:700}
.upgrade-preview p{margin:0 0 24px;color:var(--muted);font-size:16px;line-height:1.5}
.upgrade-benefits{display:grid;gap:12px;margin-bottom:32px}
.benefit-item{display:flex;align-items:center;gap:12px;padding:12px;background:rgba(0,240,255,0.05);border-radius:8px;border:1px solid rgba(0,240,255,0.1)}
.benefit-item i{color:var(--cyan);font-size:16px;width:20px}
.benefit-item span{color:var(--fg);font-size:14px;font-weight:500}
/* Governance Panel */
.governance-showcase{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.governance-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}
.stat-card{background:rgba(0,240,255,0.05);border:1px solid rgba(0,240,255,0.2);border-radius:12px;padding:20px;text-align:center;transition:all 0.3s ease}
.stat-card:hover{background:rgba(0,240,255,0.1);border-color:var(--cyan);transform:translateY(-4px)}
.stat-number{display:block;font-size:28px;font-weight:800;color:var(--cyan);margin-bottom:4px}
.stat-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
.governance-info h3{margin:0 0 16px;color:var(--fg);font-size:24px;font-weight:700}
.governance-info p{margin:0 0 24px;color:var(--muted);font-size:16px;line-height:1.5}
.governance-powers{display:grid;gap:12px;margin-bottom:32px}
.power-item{display:flex;align-items:center;gap:12px;padding:12px;background:rgba(0,240,255,0.05);border-radius:8px;border:1px solid rgba(0,240,255,0.1)}
.power-item i{color:var(--cyan);font-size:16px;width:20px}
.power-item span{color:var(--fg);font-size:14px;font-weight:500}
/* Arena Panel */
.arena-showcase{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.arena-visual{display:flex;justify-content:center;align-items:center;position:relative}
.vr-headset{width:120px;height:120px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(0,240,255,0.2), rgba(255,61,184,0.2));border-radius:50%;border:3px solid var(--cyan);color:var(--cyan);font-size:48px;animation:vr-pulse 3s ease-in-out infinite}
.arena-particles{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 30% 20%, rgba(0,240,255,0.3) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(255,61,184,0.3) 0%, transparent 50%);animation:arena-glow 4s ease-in-out infinite}
@keyframes vr-pulse{0%,100%{transform:scale(1);box-shadow:0 0 20px rgba(0,240,255,0.3)}50%{transform:scale(1.1);box-shadow:0 0 40px rgba(0,240,255,0.6)}}
@keyframes arena-glow{0%,100%{opacity:0.3}50%{opacity:0.8}}
.arena-info h3{margin:0 0 16px;color:var(--fg);font-size:24px;font-weight:700}
.arena-info p{margin:0 0 24px;color:var(--muted);font-size:16px;line-height:1.5}
.arena-features{display:grid;gap:12px;margin-bottom:24px}
.feature-item{display:flex;align-items:center;gap:12px;padding:12px;background:rgba(0,240,255,0.05);border-radius:8px;border:1px solid rgba(0,240,255,0.1)}
.feature-item i{color:var(--cyan);font-size:16px;width:20px}
.feature-item span{color:var(--fg);font-size:14px;font-weight:500}
.coming-soon-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:linear-gradient(135deg, rgba(255,61,184,0.2), rgba(255,61,184,0.1));border:1px solid var(--magenta);border-radius:20px;color:var(--magenta);font-size:14px;font-weight:600;animation:pulse 2s ease-in-out infinite}
/* CTA Buttons */
.cta-btn{background:linear-gradient(135deg, var(--cyan), var(--magenta));border:none;color:#000;padding:12px 24px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:0.5px}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,240,255,0.4);color:#000}
/* Mobile Responsive Design - JEEL Section */
@media (max-width: 1024px) {
/* Convert orbital layout to vertical stack on mobile */
.jeel-central-hub {
height: auto;
margin: 40px 0 20px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
overflow: visible;
}
.jeel-centerpiece {
margin-top: 0;
order: 1;
}
.utility-cards-orbital {
position: static;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
width: 100%;
max-width: 600px;
order: 2;
pointer-events: auto;
}
.utility-card-orbital {
position: static;
width: 100%;
height: auto;
min-height: 140px;
transform: none !important;
}
.utility-card-orbital .card-inner {
width: 100%;
height: 100%;
border-radius: 16px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.token-stats-bottom {
position: static;
bottom: auto;
left: auto;
transform: none;
order: 3;
margin-top: 10px;
}
.connection-lines {
display: none;
}
}
@media (max-width:768px){
.jeel-central-hub {
margin: 30px 0 15px 0;
gap: 30px;
}
.token-container {
width: 140px;
height: 140px;
}
.jeel-token-lottie {
width: 100px;
height: 100px;
}
.jeelan-utility-video {
opacity: 0.7;
}
.utility-cards-orbital {
grid-template-columns: 1fr;
gap: 16px;
max-width: 400px;
}
.utility-card-orbital {
min-height: 120px;
}
.utility-card-orbital .card-inner {
padding: 16px;
}
.card-icon {
width: 32px;
height: 32px;
font-size: 16px;
}
.utility-card-orbital h3 {
font-size: 14px;
margin: 8px 0 4px;
}
.utility-card-orbital p {
font-size: 11px;
line-height: 1.3;
}
.utility-cost {
font-size: 10px;
padding: 4px 8px;
}
.utility-status {
font-size: 9px;
padding: 2px 6px;
}
.token-stats {
gap: 8px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.stat-item {
min-width: 120px;
padding: 2px 20px;
background: rgba(0,0,0,0.8);
}
.stat-value {
font-size: 20px;
margin-bottom: 0;
}
.stat-label {
font-size: 10px;
}
.token-stats-bottom {
gap: 8px;
padding: 6px 16px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.token-stats-bottom .stat-item {
min-width: 100px;
padding: 1px 14px;
background: rgba(0,0,0,0.8);
}
.token-stats-bottom .stat-value {
font-size: 16px;
margin-bottom: 0;
}
.token-stats-bottom .stat-label {
font-size: 9px;
}
}
@media (max-width:480px){
.jeel-central-hub {
margin: 20px 0 10px 0;
gap: 24px;
}
.token-container {
width: 120px;
height: 120px;
}
.jeel-token-lottie {
width: 80px;
height: 80px;
}
.jeelan-utility-video {
opacity: 0.6;
}
.utility-cards-orbital {
gap: 12px;
max-width: 320px;
}
.utility-card-orbital {
min-height: 100px;
}
.utility-card-orbital .card-inner {
padding: 12px;
}
.card-icon {
width: 28px;
height: 28px;
font-size: 14px;
}
.utility-card-orbital h3 {
font-size: 13px;
margin: 6px 0 3px;
}
.utility-card-orbital p {
font-size: 10px;
line-height: 1.2;
}
.utility-cost {
font-size: 9px;
padding: 3px 6px;
}
.utility-status {
font-size: 8px;
padding: 2px 4px;
}
.token-stats {
gap: 6px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.stat-item {
padding: 1px 16px;
min-width: 110px;
background: rgba(0,0,0,0.8);
}
.stat-value {
font-size: 18px;
margin-bottom: 0;
}
.token-stats-bottom {
gap: 6px;
padding: 4px 12px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
margin-top: 8px;
}
.token-stats-bottom .stat-item {
min-width: 90px;
padding: 1px 12px;
background: rgba(0,0,0,0.8);
}
.token-stats-bottom .stat-value {
font-size: 14px;
margin-bottom: 0;
}
.token-stats-bottom .stat-label {
font-size: 8px;
}
}
@media (max-width: 360px) {
.jeel-central-hub {
margin: 16px 0 8px 0;
gap: 20px;
}
.token-container {
width: 100px;
height: 100px;
}
.jeel-token-lottie {
width: 70px;
height: 70px;
}
.utility-cards-orbital {
gap: 10px;
max-width: 280px;
}
.utility-card-orbital {
min-height: 90px;
}
.utility-card-orbital .card-inner {
padding: 10px;
}
.card-icon {
width: 24px;
height: 24px;
font-size: 12px;
}
.utility-card-orbital h3 {
font-size: 12px;
margin: 4px 0 2px;
}
.utility-card-orbital p {
font-size: 9px;
line-height: 1.1;
}
.utility-cost {
font-size: 8px;
padding: 2px 4px;
}
.utility-status {
font-size: 7px;
padding: 1px 3px;
}
.stat-item {
padding: 1px 12px;
min-width: 90px;
flex: 1;
background: rgba(0,0,0,0.8);
}
.stat-value {
font-size: 14px;
margin-bottom: 0;
}
.stat-label {
font-size: 7px;
}
.token-stats-bottom {
gap: 4px;
padding: 3px 10px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
margin-top: 6px;
}
.token-stats-bottom .stat-item {
min-width: 80px;
padding: 0px 10px;
flex: 1;
background: rgba(0,0,0,0.8);
}
.token-stats-bottom .stat-value {
font-size: 12px;
margin-bottom: 0;
}
.token-stats-bottom .stat-label {
font-size: 7px;
}
}
/* Landscape Mobile Optimization */
@media (max-height: 768px) and (orientation: landscape) {
.jeel-central-hub {
margin: 20px 0 10px 0;
gap: 20px;
}
.utility-cards-orbital {
grid-template-columns: 1fr 1fr;
gap: 12px;
max-width: 500px;
}
.utility-card-orbital {
min-height: 80px;
}
.utility-card-orbital .card-inner {
padding: 10px;
}
.card-icon {
width: 24px;
height: 24px;
font-size: 12px;
}
.utility-card-orbital h3 {
font-size: 12px;
margin: 4px 0 2px;
}
.utility-card-orbital p {
font-size: 9px;
line-height: 1.1;
}
.utility-cost {
font-size: 8px;
padding: 2px 4px;
}
.utility-status {
font-size: 7px;
padding: 1px 3px;
}
.token-stats-bottom {
gap: 6px;
padding: 4px 12px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
margin-top: 8px;
}
.token-stats-bottom .stat-item {
min-width: 90px;
padding: 1px 12px;
flex: 1;
background: rgba(0,0,0,0.8);
}
.token-stats-bottom .stat-value {
font-size: 13px;
margin-bottom: 0;
}
.token-stats-bottom .stat-label {
font-size: 8px;
}
}
/* JEEL Modals */
.jeel-modal{max-width:600px;background:linear-gradient(135deg, rgba(0,240,255,0.05), rgba(255,61,184,0.05));border:1px solid rgba(0,240,255,0.2)}
.jeel-modal-header{text-align:center;margin-bottom:30px;position:relative}
.jeel-token-icon{width:60px;height:60px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center}
.jeel-token-icon .lottie-icon{width:100%;height:100%}
.jeel-modal-content{display:grid;gap:24px}
.exchange-links h4,.token-info h4{margin:0 0 16px;color:var(--cyan);font-size:18px}
.exchange-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.exchange-link{display:flex;flex-direction:column;align-items:center;padding:16px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--fg);transition:all 0.3s ease}
.exchange-link:hover{background:rgba(0,240,255,0.1);border-color:var(--cyan);transform:translateY(-2px)}
.exchange-link i{font-size:24px;margin-bottom:8px;color:var(--cyan)}
.exchange-link span{font-size:12px;font-weight:600}
.info-grid{display:grid;gap:12px}
.info-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:rgba(255,255,255,0.03);border-radius:8px;border:1px solid rgba(255,255,255,0.1)}
.info-item .label{color:var(--muted);font-size:14px}
.info-item .value{color:var(--cyan);font-weight:600;font-size:14px}
.tokenomics-modal{max-width:700px;background:linear-gradient(135deg, rgba(0,240,255,0.05), rgba(255,61,184,0.05));border:1px solid rgba(0,240,255,0.2)}
.tokenomics-content{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.chart-container{display:flex;justify-content:center;align-items:center}
.distribution-list{display:flex;flex-direction:column;gap:12px}
.distribution-item{display:flex;align-items:center;gap:12px;padding:12px;background:rgba(255,255,255,0.03);border-radius:8px;border:1px solid rgba(255,255,255,0.1)}
.color-indicator{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.distribution-item .label{flex:1;color:var(--fg);font-size:14px}
.distribution-item .percentage{color:var(--cyan);font-weight:700;font-size:16px}
/* Responsive Design */
@media (max-width:768px){
.utility-cards-grid{grid-template-columns:1fr;gap:20px}
.utility-card{height:280px}
.jeel-token-centerpiece{width:100px;height:100px}
.jeel-token-lottie{width:60px;height:60px}
.tokenomics-content{grid-template-columns:1fr;gap:20px}
.chart-container{order:2}
.distribution-list{order:1}
.exchange-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:480px){
.utility-card{height:260px}
.card-front,.card-back{padding:16px}
.progress-ring{width:50px;height:50px}
.progress-text{font-size:10px}
.rarity-badge{font-size:8px;padding:2px 6px}
.exchange-grid{grid-template-columns:1fr;gap:8px}
}
.neon-band{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),var(--magenta),transparent);filter:blur(0.4px)}
.feature-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.feature{padding:18px}
/* JEEL stats */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:20px 0 18px 0}
.stat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px}
.stat .label{display:block;color:var(--muted);font-size:12px}
.stat .value{display:block;font-weight:800;font-size:22px}
.chart-wrap{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px}
.chart-wrap{min-height:180px;position:relative;margin-bottom:20px}
.chart-wrap canvas{width:100% !important;height:100% !important}
.chart-container{min-height:280px;position:relative;margin-bottom:24px}
.chart-container canvas{width:100% !important;height:100% !important}
/* Subtle animated grid background */
.grid-bg{position:relative}
.grid-bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);background-size:40px 40px;mask-image:radial-gradient(circle at 50% 50%, black 40%, transparent 75%);opacity:0.25;animation:gridFloat 16s linear infinite;pointer-events:none}
@keyframes gridFloat{0%{transform:translateY(0)}100%{transform:translateY(-40px)}}
/* Hologram feature panels */
.feature{position:relative;overflow:hidden}
.feature::before{content:"";position:absolute;inset:-1px;border-radius:16px;padding:1px;background:linear-gradient(90deg, rgba(0,240,255,0.5), rgba(255,61,184,0.5));-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0.25}
.feature::after{content:"";position:absolute;left:-120%;top:0;bottom:0;width:50%;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);transform:skewX(-20deg);transition:transform .9s ease}
.feature:hover::after{transform:skewX(-20deg) translateX(240%)}
/* ===== VR Crypto Arena Hub ===== */
.arena-hub{position:relative;height:640px;margin:40px 0 20px;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:radial-gradient(900px 500px at 50% 110%, rgba(0,240,255,0.07), transparent 60%)}
#arena-bg{position:absolute;inset:0;opacity:0.75}
.arena-grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(0,240,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,61,184,0.06) 1px, transparent 1px);background-size:60px 60px;mask-image:radial-gradient(circle at 50% 50%, black 45%, transparent 80%);animation:arenaGridDrift 24s linear infinite;pointer-events:none}
@keyframes arenaGridDrift{0%{transform:translateY(0)}100%{transform:translateY(-60px)}}
.arena-holograms{position:absolute;inset:0;pointer-events:none}
.arena-holograms .ring{position:absolute;left:50%;top:50%;width:340px;height:340px;border-radius:50%;transform:translate(-50%,-50%);border:2px dashed rgba(0,240,255,0.35);filter:drop-shadow(0 0 18px rgba(0,240,255,0.35));animation:none}
.arena-holograms .ring:nth-child(2){width:480px;height:480px;border-color:rgba(255,61,184,0.28)}
@keyframes ringSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.arena-holograms .pulse{position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 0 rgba(0,240,255,0.45);animation:corePulse 2.6s ease-in-out infinite}
@keyframes corePulse{0%{box-shadow:0 0 0 0 rgba(0,240,255,0.45)}70%{box-shadow:0 0 0 40px rgba(0,240,255,0)}100%{box-shadow:0 0 0 0 rgba(0,240,255,0)}}
.arena-holograms .particles{position:absolute;inset:0;background:radial-gradient(circle at 50% 90%, rgba(0,240,255,0.14) 0%, transparent 50%);mask-image:linear-gradient(transparent, black 20%, black 80%, transparent);animation:particlesRise 12s linear infinite}
@keyframes particlesRise{0%{transform:translateY(0)}100%{transform:translateY(-80px)}}
.arena-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:200px;height:200px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2}
#arena-core-3d{position:absolute;inset:0;display:grid;place-items:center;z-index:3}
.arena-core canvas{display:block;width:100% !important;height:100% !important;border-radius:50%;mask-image:radial-gradient(circle at 50% 50%, black 70%, transparent 100%)}
/* VR Hub Controls */
.arena-controls{position:absolute;top:20px;right:20px;z-index:10}
.control-panel{background:linear-gradient(135deg, rgba(0,0,0,0.8), rgba(12,17,24,0.9));backdrop-filter:blur(12px);border:1px solid rgba(0,240,255,0.3);border-radius:12px;padding:16px;min-width:200px;box-shadow:0 8px 32px rgba(0,240,255,0.15)}
.control-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--cyan);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px}
.control-header i{font-size:14px;filter:drop-shadow(0 0 8px rgba(0,240,255,0.6))}
.control-group{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.control-group:last-child{margin-bottom:0}
.control-group label{color:var(--muted);font-size:10px;min-width:80px;text-transform:uppercase;letter-spacing:0.3px}
.control-group input[type="range"]{flex:1;height:4px;background:rgba(0,240,255,0.2);border-radius:2px;outline:none;cursor:pointer}
.control-group input[type="range"]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:linear-gradient(135deg, var(--cyan), var(--magenta));border-radius:50%;cursor:pointer;box-shadow:0 0 8px rgba(0,240,255,0.6)}
.control-group input[type="range"]::-moz-range-thumb{width:12px;height:12px;background:linear-gradient(135deg, var(--cyan), var(--magenta));border-radius:50%;cursor:pointer;border:none;box-shadow:0 0 8px rgba(0,240,255,0.6)}
.control-value{color:var(--cyan);font-size:10px;font-weight:700;min-width:30px;text-align:right;font-family:monospace}
.core-glow{position:absolute;inset:-2px;border-radius:50%;background:transparent;filter:none;animation:none}
.arena-cards{position:absolute;inset:0;z-index:200;pointer-events:none}
.arena-card-panel{position:absolute;width:170px;height:170px;pointer-events:auto;background:transparent;border:none;padding:0;cursor:pointer;overflow:hidden;-webkit-clip-path:polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%) !important;clip-path:polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%) !important;background:transparent;z-index:210;box-shadow:0 14px 36px rgba(0,0,0,0.55), 0 0 22px rgba(0,240,255,0.16)}
.panel-inner{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--fg);transition:box-shadow .3s ease}
.panel-inner.hex{-webkit-clip-path:polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%) !important;clip-path:polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%) !important;will-change:clip-path;background:linear-gradient(135deg, rgba(12,17,24,0.95), rgba(8,12,16,0.9));border:2px solid rgba(0,240,255,0.6);box-shadow:0 0 0 2px rgba(0,240,255,0.3) inset, 0 8px 24px rgba(0,240,255,0.2), 0 0 40px rgba(0,240,255,0.15)}
.panel-inner.hex *{position:relative;z-index:1}
.panel-inner.hex::before,.panel-inner.hex::after{z-index:0}
.panel-inner.hex::after{content:"";position:absolute;inset:0;-webkit-clip-path:polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%) !important;clip-path:polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%) !important;pointer-events:none;background:url("data:image/svg+xml;utf8,") center/100% 100% no-repeat}
.panel-inner::before{content:"";position:absolute;inset:0;-webkit-clip-path:polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%) !important;clip-path:polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%) !important;background:conic-gradient(from 180deg, rgba(0,240,255,0.35), rgba(255,61,184,0.35), rgba(122,92,255,0.35), rgba(0,240,255,0.35));-webkit-mask:none;mask:none;opacity:0.18;filter:blur(3px)}
.panel-inner i{font-size:26px;color:var(--cyan);text-shadow:0 0 16px rgba(0,240,255,0.6);margin-bottom:8px}
.panel-inner h3{margin:0 0 6px;font-size:16px}
.panel-inner p{margin:0;color:var(--muted);font-size:11px}
.arena-card-panel:hover .panel-inner{transform:none;box-shadow:inset 0 0 0 2px rgba(0,240,255,0.7), inset 0 16px 48px rgba(0,240,255,0.25), 0 0 48px rgba(0,240,255,0.35)}
/* shimmer on hover removed to keep dotted border clean */
/* Animated connection lines */
.arena-lines{position:absolute;inset:0;z-index:1;pointer-events:none}
/* Cyberpunk CTA */
.btn-cyber{position:relative;background:transparent;color:var(--fg);border:none;padding:14px 22px;border-radius:14px;font-weight:800;cursor:pointer}
.btn-cyber::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from 180deg, var(--cyan), var(--magenta), var(--purple), var(--cyan));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0.8}
.btn-cyber::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg, rgba(255,255,255,0.15), transparent 40%, transparent 60%, rgba(255,255,255,0.15));transform:skewX(-20deg) translateX(-120%);transition:transform .6s ease}
.btn-cyber:hover::after{transform:skewX(-20deg) translateX(120%)}
.btn-cyber:hover{box-shadow:0 8px 30px rgba(0,240,255,0.35), 0 0 60px rgba(255,61,184,0.2)}
.btn-cyber:active{transform:scale(0.98)}
/* Mobile Responsive Arena Layout */
@media (max-width: 1024px) {
.arena-hub {
height: auto;
min-height: 400px;
margin: 30px 0 20px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
padding: 20px;
}
.arena-core {
position: static;
transform: none;
width: 120px;
height: 120px;
order: 1;
}
.arena-cards {
position: static;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
width: 100%;
max-width: 400px;
order: 2;
pointer-events: auto;
}
.arena-card-panel {
position: static;
width: 100%;
height: auto;
min-height: 120px;
transform: none !important;
clip-path: none !important;
-webkit-clip-path: none !important;
border-radius: 12px;
background: rgba(12,17,24,0.95);
border: 1px solid rgba(0,240,255,0.3);
box-shadow: 0 8px 24px rgba(0,240,255,0.2);
}
.panel-inner {
clip-path: none !important;
-webkit-clip-path: none !important;
border-radius: 12px;
background: linear-gradient(135deg, rgba(12,17,24,0.95), rgba(8,12,16,0.9));
border: 1px solid rgba(0,240,255,0.3);
padding: 16px;
}
.arena-controls {
display: none; /* Hide full control panel on mobile */
}
/* Simple mobile controls at top */
.arena-hub::before {
content: "";
position: absolute;
top: 10px;
right: 10px;
width: 60px;
height: 30px;
background: rgba(12,17,24,0.9);
border: 1px solid rgba(0,240,255,0.3);
border-radius: 15px;
backdrop-filter: blur(8px);
z-index: 10;
}
.arena-hub::after {
content: "⚙️";
position: absolute;
top: 15px;
right: 25px;
font-size: 12px;
color: var(--cyan);
z-index: 11;
pointer-events: none;
}
.arena-lines {
display: none;
}
}
@media (max-width: 768px) {
.arena-hub {
margin: 20px 0 15px 0;
gap: 24px;
padding: 16px;
}
.arena-core {
width: 100px;
height: 100px;
}
.arena-cards {
grid-template-columns: 1fr;
gap: 16px;
max-width: 320px;
}
.arena-card-panel {
min-height: 100px;
}
.panel-inner {
padding: 12px;
}
.panel-inner h3 {
font-size: 14px;
margin: 0 0 4px;
}
.panel-inner p {
font-size: 10px;
}
.arena-controls {
display: none; /* Hide full control panel on mobile */
}
}
@media (max-width: 480px) {
.arena-hub {
margin: 16px 0 12px 0;
gap: 20px;
padding: 12px;
}
.arena-core {
width: 80px;
height: 80px;
}
.arena-cards {
gap: 12px;
max-width: 280px;
}
.arena-card-panel {
min-height: 90px;
}
.panel-inner {
padding: 10px;
}
.panel-inner h3 {
font-size: 13px;
margin: 0 0 3px;
}
.panel-inner p {
font-size: 9px;
}
.arena-controls {
display: none; /* Hide full control panel on mobile */
}
}
@media (max-width: 360px) {
.arena-hub {
margin: 12px 0 10px 0;
gap: 16px;
padding: 10px;
}
.arena-core {
width: 70px;
height: 70px;
}
.arena-cards {
gap: 10px;
max-width: 240px;
}
.arena-card-panel {
min-height: 80px;
}
.panel-inner {
padding: 8px;
}
.panel-inner h3 {
font-size: 12px;
margin: 0 0 2px;
}
.panel-inner p {
font-size: 8px;
}
.arena-controls {
display: none; /* Hide full control panel on mobile */
}
}
/* Landscape Mobile Optimization */
@media (max-height: 768px) and (orientation: landscape) {
.arena-hub {
margin: 16px 0 12px 0;
gap: 16px;
padding: 12px;
}
.arena-cards {
grid-template-columns: 1fr 1fr;
gap: 12px;
max-width: 400px;
}
.arena-card-panel {
min-height: 80px;
}
.panel-inner {
padding: 10px;
}
.panel-inner h3 {
font-size: 13px;
margin: 0 0 3px;
}
.panel-inner p {
font-size: 9px;
}
.arena-controls {
display: none; /* Hide full control panel on mobile */
}
}
.timeline{list-style:none;padding:0;margin:20px 0;counter-reset:steps}
.timeline li{padding:14px 16px;margin:0 0 12px;background:var(--card);border:1px solid var(--border);border-radius:12px;position:relative}
.timeline li span{display:inline-block;font-weight:800;color:var(--cyan);margin-right:6px}
.timeline li::before{content:"";position:absolute;left:-10px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--magenta);box-shadow:0 0 16px rgba(255,61,184,0.8)}
.timeline li::after{content:"";position:absolute;left:-7px;top:calc(50% + 8px);width:2px;height:22px;background:linear-gradient(var(--magenta), transparent)}
.timeline-wrap{position:relative}
.timeline-progress{position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--magenta),var(--cyan));opacity:0.35;transform:scaleY(0);transform-origin:top left}
.timeline li.current{border-color:rgba(0,240,255,0.4);box-shadow:0 0 22px rgba(0,240,255,0.2)}
/* Cursor orb */
#cursor-orb{position:fixed;left:0;top:0;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle, rgba(0,240,255,0.7), rgba(0,240,255,0.1));box-shadow:0 0 28px rgba(0,240,255,0.5);pointer-events:none;mix-blend-mode:screen;transform:translate(-50%,-50%);z-index:70}
/* Page transitions */
#page-transition{position:fixed;inset:0;background:linear-gradient(135deg, rgba(0,240,255,0.04), rgba(255,61,184,0.04));backdrop-filter:blur(6px);z-index:9998;pointer-events:none;opacity:0;transition:opacity .5s ease}
#page-transition.active{opacity:1}
/* Lightbox */
#lightbox{position:fixed;inset:0;display:none;z-index:10010}
#lightbox[aria-hidden="false"]{display:block}
#lightbox .lb-backdrop{position:absolute;inset:0;background:rgba(7,8,10,0.8);backdrop-filter:blur(8px)}
#lightbox img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:92vw;max-height:86vh;border-radius:14px;border:1px solid var(--border);box-shadow:0 20px 80px rgba(0,240,255,0.18)}
/* Modal */
.modal{position:fixed;inset:0;display:none;z-index:10001}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(7,8,10,0.7);backdrop-filter:blur(6px)}
.modal-dialog{position:relative;z-index:1;width:min(520px,92vw);margin:12vh auto;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 20px 80px rgba(0,240,255,0.15)}
.modal-close{position:absolute;right:10px;top:10px;border:none;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}
.modal h3{margin:0 0 8px}
.modal .muted{color:var(--muted)}
/* Mint controls */
.mint-controls{display:grid;grid-template-columns:1fr;gap:12px;margin:10px 0}
.counter{display:flex;align-items:center;gap:8px}
.counter input{width:70px;text-align:center;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--fg);padding:8px}
/* Toast */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);padding:10px 14px;background:linear-gradient(135deg, rgba(0,240,255,0.15), rgba(255,61,184,0.15));backdrop-filter:blur(10px);border:1px solid rgba(0,240,255,0.35);border-radius:12px;color:var(--fg);box-shadow:0 10px 40px rgba(0,240,255,0.25), 0 0 60px rgba(255,61,184,0.18);opacity:0;transition:opacity .25s ease, transform .25s ease;z-index:10002}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.site-footer{border-top:1px solid var(--border);padding:22px 0;background:var(--bg-2)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:10px}
@media (max-width:720px){.footer-inner{flex-direction:column;align-items:flex-start}}
/* FAQ */
.faq details{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:800;display:flex;align-items:center;justify-content:space-between}
.faq summary .chev{margin-left:10px;transition:transform .25s ease;color:var(--muted)}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq p{color:var(--muted);margin:10px 0 0}
/* Community extras */
.social-counters{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 10px}
.social-counters .badge{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:6px 10px}
.signup{display:flex;gap:10px;margin-top:14px}
.signup input{flex:1;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--fg);padding:10px 12px}
.faq-search{margin:8px 0 14px}
.faq-search input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--fg)}
/* Responsiveness tweaks */
@media (max-width:960px){
.section{padding:56px 0}
}
@media (max-width:720px){
.hero-content{padding:16vh 0 10vh}
.hero-lottie{height:220px}
.robot{min-height:360px;flex:0 0 260px;width:260px}
.collection-scroll-container{margin:40px 0;padding:0 15px}
.robots-grid{padding:20px 0;gap:16px;overflow-x:auto !important;overflow-y:hidden !important}
}
@media (max-width:520px){
.robot{min-height:340px;flex:0 0 220px;width:220px}
.collection-scroll-container{padding:0 10px}
.robots-grid{padding:15px 0;gap:12px;overflow-x:auto !important;overflow-y:hidden !important}
.scroll-btn{width:36px;height:36px;font-size:12px}
}
/* Modern Cryptocurrency Preloader */
#preloader{
position:fixed;
inset:0;
background:radial-gradient(ellipse at center, rgba(0,240,255,0.03) 0%, rgba(7,8,10,0.95) 50%, #07080a 100%);
display:grid;
place-items:center;
z-index:9999;
transition:opacity .6s ease, visibility .6s ease;
overflow:hidden;
}
#preloader.hidden{
opacity:0;
visibility:hidden;
}
.crypto-loader{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
gap:40px;
width:100%;
height:100%;
justify-content:center;
}
/* Blockchain Network Background */
.blockchain-network{
position:absolute;
inset:0;
pointer-events:none;
opacity:0.4;
}
.network-node{
position:absolute;
width:8px;
height:8px;
background:var(--cyan);
border-radius:50%;
box-shadow:0 0 12px rgba(0,240,255,0.6);
animation:node-pulse 3s ease-in-out infinite;
}
.node-1{top:15%;left:20%;animation-delay:0s}
.node-2{top:25%;right:15%;animation-delay:0.5s}
.node-3{top:60%;left:10%;animation-delay:1s}
.node-4{top:70%;right:25%;animation-delay:1.5s}
.node-5{bottom:20%;left:30%;animation-delay:2s}
.node-6{bottom:30%;right:20%;animation-delay:2.5s}
.node-7{top:40%;left:80%;animation-delay:0.8s}
.node-8{top:80%;left:70%;animation-delay:1.8s}
.network-connections{
position:absolute;
inset:0;
background:linear-gradient(45deg, transparent 48%, rgba(0,240,255,0.1) 49%, rgba(0,240,255,0.1) 51%, transparent 52%);
background-size:20px 20px;
animation:network-flow 8s linear infinite;
}
/* Central Logo Hub */
.logo-hub{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:200px;
height:200px;
}
/* Coin Ring Animation */
.coin-ring{
position:absolute;
width:180px;
height:180px;
border-radius:50%;
animation:coin-spin 4s linear infinite;
}
.coin-segment{
position:absolute;
width:20px;
height:4px;
background:linear-gradient(90deg, var(--cyan), var(--magenta));
border-radius:2px;
box-shadow:0 0 8px rgba(0,240,255,0.5);
transform-origin:90px 0;
}
.coin-segment:nth-child(1){transform:rotate(0deg) translateX(90px)}
.coin-segment:nth-child(2){transform:rotate(45deg) translateX(90px)}
.coin-segment:nth-child(3){transform:rotate(90deg) translateX(90px)}
.coin-segment:nth-child(4){transform:rotate(135deg) translateX(90px)}
.coin-segment:nth-child(5){transform:rotate(180deg) translateX(90px)}
.coin-segment:nth-child(6){transform:rotate(225deg) translateX(90px)}
.coin-segment:nth-child(7){transform:rotate(270deg) translateX(90px)}
.coin-segment:nth-child(8){transform:rotate(315deg) translateX(90px)}
/* Logo Container */
.logo-container{
position:relative;
width:120px;
height:120px;
z-index:2;
}
.crypto-logo{
width:100%;
height:100%;
object-fit:contain;
filter:drop-shadow(0 0 20px rgba(0,240,255,0.8));
animation:crypto-logo-float 3s ease-in-out infinite;
}
.logo-shimmer{
position:absolute;
inset:0;
background:linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
animation:shimmer-sweep 2s ease-in-out infinite;
border-radius:50%;
}
/* Pulse Waves */
.pulse-waves{
position:absolute;
inset:0;
pointer-events:none;
}
.pulse-wave{
position:absolute;
inset:0;
border:2px solid var(--cyan);
border-radius:50%;
opacity:0;
animation:pulse-expand 3s ease-out infinite;
}
.wave-1{animation-delay:0s}
.wave-2{animation-delay:1s}
.wave-3{animation-delay:2s}
/* Loading Progress */
.loading-progress{
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
margin-top:20px;
}
.progress-bar{
width:200px;
height:4px;
background:rgba(0,240,255,0.1);
border-radius:2px;
overflow:hidden;
position:relative;
}
.progress-fill{
height:100%;
background:linear-gradient(90deg, var(--cyan), var(--magenta));
border-radius:2px;
width:0%;
animation:progress-load 3s ease-in-out infinite;
box-shadow:0 0 10px rgba(0,240,255,0.5);
}
.loading-text{
display:flex;
align-items:center;
gap:8px;
color:var(--cyan);
font-size:16px;
font-weight:600;
text-transform:uppercase;
letter-spacing:1px;
}
.loading-word{
animation:text-glow 2s ease-in-out infinite;
}
.loading-dots{
display:flex;
gap:2px;
}
.dot{
animation:dot-bounce 1.4s ease-in-out infinite;
}
.dot:nth-child(1){animation-delay:0s}
.dot:nth-child(2){animation-delay:0.2s}
.dot:nth-child(3){animation-delay:0.4s}
@keyframes rotate3d{0%,100%{transform:rotateY(0deg) rotateX(10deg) scale(1)}25%{transform:rotateY(90deg) rotateX(5deg) scale(1.05)}50%{transform:rotateY(180deg) rotateX(0deg) scale(1.1)}75%{transform:rotateY(270deg) rotateX(-5deg) scale(1.05)}}
@keyframes pulse-glow{0%,100%{opacity:0.3;transform:scale(1)}50%{opacity:0.8;transform:scale(1.2)}}
@keyframes orbit1{0%{transform:translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg)}100%{transform:translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg)}}
@keyframes orbit2{0%{transform:translateY(-50%) rotate(0deg) translateX(50px) rotate(0deg)}100%{transform:translateY(-50%) rotate(360deg) translateX(50px) rotate(-360deg)}}
@keyframes orbit3{0%{transform:translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg)}100%{transform:translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg)}}
@keyframes orbit4{0%{transform:translateY(-50%) rotate(0deg) translateX(50px) rotate(0deg)}100%{transform:translateY(-50%) rotate(360deg) translateX(50px) rotate(-360deg)}}
@keyframes text-pulse{0%,100%{opacity:0.7;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
/* Cryptocurrency Loading Animations */
@keyframes node-pulse{
0%,100%{opacity:0.3;transform:scale(1)}
50%{opacity:1;transform:scale(1.2)}
}
@keyframes network-flow{
0%{transform:translateX(-20px) translateY(-20px)}
100%{transform:translateX(20px) translateY(20px)}
}
@keyframes coin-spin{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
@keyframes crypto-logo-float{
0%,100%{transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 20px rgba(0,240,255,0.8))}
25%{transform:scale(1.05) rotate(1deg);filter:drop-shadow(0 0 25px rgba(0,240,255,0.9))}
50%{transform:scale(1.1) rotate(0deg);filter:drop-shadow(0 0 30px rgba(255,61,184,0.7))}
75%{transform:scale(1.05) rotate(-1deg);filter:drop-shadow(0 0 25px rgba(0,240,255,0.9))}
}
@keyframes shimmer-sweep{
0%{transform:translateX(-100%) rotate(45deg)}
100%{transform:translateX(100%) rotate(45deg)}
}
@keyframes pulse-expand{
0%{opacity:0.8;transform:scale(0.8)}
50%{opacity:0.4;transform:scale(1.2)}
100%{opacity:0;transform:scale(1.6)}
}
@keyframes progress-load{
0%{width:0%}
50%{width:70%}
100%{width:100%}
}
@keyframes text-glow{
0%,100%{text-shadow:0 0 5px rgba(0,240,255,0.5)}
50%{text-shadow:0 0 15px rgba(0,240,255,0.8), 0 0 25px rgba(255,61,184,0.3)}
}
@keyframes dot-bounce{
0%,100%{transform:translateY(0);opacity:0.5}
50%{transform:translateY(-8px);opacity:1}
}
/* Keep the original logo-float for header logos */
@keyframes logo-float{
0%{transform:rotate(0deg) scale(1) translateY(0px);filter:drop-shadow(0 0 8px rgba(0,240,255,0.4)) hue-rotate(0deg)}
20%{transform:rotate(5deg) scale(1.05) translateY(-2px);filter:drop-shadow(0 0 12px rgba(0,240,255,0.6)) hue-rotate(20deg)}
40%{transform:rotate(-3deg) scale(1.08) translateY(-4px);filter:drop-shadow(0 0 16px rgba(255,61,184,0.5)) hue-rotate(40deg)}
60%{transform:rotate(3deg) scale(1.05) translateY(-2px);filter:drop-shadow(0 0 12px rgba(0,240,255,0.6)) hue-rotate(20deg)}
80%{transform:rotate(-2deg) scale(1.02) translateY(-1px);filter:drop-shadow(0 0 10px rgba(0,240,255,0.5)) hue-rotate(10deg)}
100%{transform:rotate(0deg) scale(1) translateY(0px);filter:drop-shadow(0 0 8px rgba(0,240,255,0.4)) hue-rotate(0deg)}
}
/* Scroll progress */
#scroll-progress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--cyan),var(--magenta));box-shadow:var(--glow);z-index:60}
/* UI floating controls */
.ui-controls{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:60}
.ui-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:rgba(12,12,18,0.6);backdrop-filter:blur(8px);color:var(--fg);display:grid;place-items:center;cursor:pointer;transition:transform .2s ease, border-color .2s ease}
.ui-btn:hover{transform:translateY(-2px);border-color:rgba(0,240,255,0.4)}
/* Light theme UI controls */
:root:not(.dark) .ui-btn{
background:rgba(255,255,255,0.9);
border:1px solid rgba(255,107,53,0.3);
}
:root:not(.dark) .ui-btn:hover{
border-color:var(--primary);
background:rgba(255,107,53,0.1);
}
/* Light theme main content */
:root:not(.dark) .hero{
background:transparent;
}
:root:not(.dark) .hero-content{
background:transparent;
border:none;
}
:root:not(.dark) .hero-title{
background:linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
:root:not(.dark) .hero-subtitle{
color:#cc5500;
}
:root:not(.dark) .hero-cta{
background:linear-gradient(135deg, var(--primary), var(--secondary));
border:1px solid var(--primary);
}
:root:not(.dark) .hero-cta:hover{
background:linear-gradient(135deg, var(--secondary), var(--accent));
transform:translateY(-2px);
box-shadow:0 8px 25px rgba(255,107,53,0.3);
}
/* Light theme cards */
:root:not(.dark) .card{
background:rgba(255,255,255,0.9);
border:1px solid rgba(255,107,53,0.2);
box-shadow:0 4px 6px rgba(0,0,0,0.05);
}
:root:not(.dark) .card:hover{
border-color:var(--primary);
box-shadow:0 8px 25px rgba(255,107,53,0.15);
}
:root:not(.dark) .card-title{
color:var(--dark);
}
:root:not(.dark) .card-subtitle{
color:var(--accent);
}
/* Light theme buttons */
:root:not(.dark) .btn{
background:linear-gradient(135deg, var(--primary), var(--secondary));
border:1px solid var(--primary);
color:white;
}
:root:not(.dark) .btn:hover{
background:linear-gradient(135deg, var(--secondary), var(--accent));
transform:translateY(-2px);
box-shadow:0 8px 25px rgba(255,107,53,0.3);
}
:root:not(.dark) .btn.secondary{
background:transparent;
color:var(--primary);
border:1px solid var(--primary);
}
:root:not(.dark) .btn.secondary:hover{
background:var(--primary);
color:white;
}
/* Light theme footer - simple and clean */
:root:not(.dark) .site-footer{
background: white !important;
border-top: 1px solid #e2e8f0 !important;
padding: 40px 0 !important;
margin-top: 0 !important;
}
:root:not(.dark) .footer-inner{
background: transparent !important;
padding: 20px 0 !important;
}
:root:not(.dark) .footer-content{
background: transparent !important;
gap: 30px !important;
margin-bottom: 20px !important;
}
:root:not(.dark) .footer-logo{
background: transparent !important;
border: 1px solid #e2e8f0 !important;
padding: 15px 20px !important;
border-radius: 8px !important;
}
:root:not(.dark) .footer-logo:hover{
background: #f8fafc !important;
border-color: #cbd5e1 !important;
}
:root:not(.dark) .logo-text{
color: #1e293b !important;
font-size: 18px !important;
font-weight: 600 !important;
}
:root:not(.dark) .footer-tagline{
color: #64748b !important;
font-size: 14px !important;
margin-top: 5px !important;
}
:root:not(.dark) .footer-section-title{
color: #1e293b !important;
font-size: 16px !important;
font-weight: 600 !important;
margin-bottom: 12px !important;
}
:root:not(.dark) .footer-nav{
gap: 8px !important;
}
:root:not(.dark) .footer-link{
color: #64748b !important;
font-size: 14px !important;
padding: 8px 12px !important;
border-radius: 6px !important;
text-decoration: none !important;
}
:root:not(.dark) .footer-link:hover{
background: #f8fafc !important;
color: #1e293b !important;
}
:root:not(.dark) .copyright{
color: #64748b !important;
font-size: 14px !important;
margin: 15px 0 !important;
text-align: center !important;
}
:root:not(.dark) .legal-links{
gap: 15px !important;
margin-bottom: 10px !important;
justify-content: center !important;
}
:root:not(.dark) .legal-link{
color: #64748b !important;
font-size: 13px !important;
text-decoration: none !important;
}
:root:not(.dark) .legal-link:hover{
color: #1e293b !important;
}
/* Additional footer zone styles for light theme */
:root:not(.dark) .footer-zone{
opacity: 1 !important;
transform: translateY(0) !important;
}
:root:not(.dark) .footer-brand-content{
background: transparent !important;
}
:root:not(.dark) .footer-links-content{
background: transparent !important;
}
:root:not(.dark) .footer-legal-content{
background: transparent !important;
}
/* Light theme navigation */
:root:not(.dark) .nav-link{
color:var(--dark);
}
:root:not(.dark) .nav-link:hover{
color:var(--primary);
background:rgba(255,107,53,0.1);
}
/* Light theme sections */
:root:not(.dark) .section{
background:rgba(255,255,255,0.5);
}
:root:not(.dark) .section-title{
color:var(--dark);
}
:root:not(.dark) .section-subtitle{
color:var(--accent);
}
/* Light theme form elements */
:root:not(.dark) .form-input{
background:rgba(255,255,255,0.9);
border:1px solid rgba(255,107,53,0.3);
color:var(--dark);
}
:root:not(.dark) .form-input:focus{
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(255,107,53,0.1);
}
:root:not(.dark) .form-input::placeholder{
color:var(--muted);
}
/* Light theme token stats */
:root:not(.dark) .token-stats{
gap:30px;
}
:root:not(.dark) .stat-item{
background:rgba(255,107,53,0.1);
border:1px solid rgba(255,107,53,0.3);
color:var(--dark);
}
:root:not(.dark) .stat-item:hover{
background:rgba(255,107,53,0.15);
border-color:var(--primary);
box-shadow:0 8px 25px rgba(255,107,53,0.2);
}
:root:not(.dark) .stat-value{
color:var(--primary);
}
:root:not(.dark) .stat-label{
color:var(--accent);
}
/* Light theme token stats bottom */
:root:not(.dark) .token-stats-bottom{
background:rgba(255,255,255,0.9);
border:1px solid rgba(255,107,53,0.3);
box-shadow:0 8px 32px rgba(255,107,53,0.15);
}
:root:not(.dark) .token-stats-bottom .stat-item{
background:rgba(255,107,53,0.1);
border:1px solid rgba(255,107,53,0.3);
}
:root:not(.dark) .token-stats-bottom .stat-item:hover{
background:rgba(255,107,53,0.15);
border-color:var(--primary);
box-shadow:0 4px 15px rgba(255,107,53,0.2);
}
:root:not(.dark) .token-stats-bottom .stat-value{
color:var(--primary);
}
:root:not(.dark) .token-stats-bottom .stat-label{
color:var(--accent);
}
/* Light theme arena hub */
:root:not(.dark) .arena-hub{
background:radial-gradient(900px 500px at 50% 110%, rgba(255,107,53,0.1), transparent 60%);
border:1px solid rgba(255,107,53,0.3);
}
:root:not(.dark) .arena-grid-overlay{
background-image:linear-gradient(rgba(255,107,53,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,0.08) 1px, transparent 1px);
}
/* Light theme arena holograms */
:root:not(.dark) .arena-holograms .ring{
border-color:rgba(255,107,53,0.4);
filter:drop-shadow(0 0 18px rgba(255,107,53,0.4));
}
:root:not(.dark) .arena-holograms .ring:nth-child(2){
border-color:rgba(139,92,246,0.35);
}
:root:not(.dark) .arena-holograms .pulse{
box-shadow:0 0 0 0 rgba(255,107,53,0.5);
}
:root:not(.dark) .arena-holograms .particles{
background:radial-gradient(circle at 50% 90%, rgba(255,107,53,0.2) 0%, transparent 50%);
}
/* Light theme arena controls */
:root:not(.dark) .control-panel{
background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,250,252,0.95));
border:1px solid rgba(255,107,53,0.4);
box-shadow:0 8px 32px rgba(255,107,53,0.2);
}
:root:not(.dark) .control-header{
color:var(--primary);
}
:root:not(.dark) .control-header i{
filter:drop-shadow(0 0 8px rgba(255,107,53,0.6));
}
/* Light theme arena card panels */
:root:not(.dark) .arena-card-panel{
box-shadow:0 14px 36px rgba(0,0,0,0.2), 0 0 22px rgba(255,107,53,0.2);
}
:root:not(.dark) .panel-inner.hex{
background:linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,250,252,0.9));
border:3px solid #8b5cf6;
box-shadow:0 0 0 2px rgba(255,107,53,0.3) inset, 0 8px 24px rgba(255,107,53,0.2), 0 0 40px rgba(255,107,53,0.15);
}
:root:not(.dark) .arena-card-panel:hover .panel-inner{
border:3px solid #ff6b35;
box-shadow:inset 0 0 0 2px rgba(255,107,53,0.7), inset 0 16px 48px rgba(255,107,53,0.25), 0 0 48px rgba(255,107,53,0.35);
}
/* Light theme hologram counter */
:root:not(.dark) .hologram-counter{
background:rgba(255,255,255,0.9);
border:1px solid rgba(255,107,53,0.4);
}
:root:not(.dark) .hologram-counter:hover{
border-color:rgba(255,107,53,0.6);
box-shadow:0 20px 40px rgba(255,107,53,0.2);
}
/* Light theme roadmap section */
:root:not(.dark) .roadmap-section{
background:radial-gradient(ellipse at center, rgba(255,107,53,0.05) 0%, transparent 70%);
}
:root:not(.dark) .roadmap-grid-overlay{
background-image:linear-gradient(rgba(255,107,53,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,0.08) 1px, transparent 1px);
}
/* Light theme timeline */
:root:not(.dark) .timeline-container::before{
background:linear-gradient(180deg, var(--primary), var(--secondary));
}
:root:not(.dark) .timeline-node-dot{
background:rgba(255,255,255,0.95);
border:3px solid var(--primary);
}
:root:not(.dark) .timeline-node[data-status="completed"] .timeline-node-dot{
border-color:var(--primary);
background:rgba(255,255,255,0.95);
}
:root:not(.dark) .timeline-node[data-status="current"] .timeline-node-dot{
border-color:var(--secondary);
background:rgba(255,255,255,0.95);
box-shadow:0 0 20px rgba(139,92,246,0.4);
}
:root:not(.dark) .timeline-node[data-status="upcoming"] .timeline-node-dot{
border-color:var(--accent);
background:rgba(255,255,255,0.95);
}
:root:not(.dark) .timeline-node:hover .timeline-node-dot{
box-shadow:0 0 25px rgba(255,107,53,0.5);
}
/* Light theme node content */
:root:not(.dark) .node-content{
background:rgba(255,255,255,0.9);
border:1px solid rgba(255,107,53,0.3);
backdrop-filter:blur(12px);
}
:root:not(.dark) .timeline-node:hover .node-content{
border-color:rgba(255,107,53,0.5);
box-shadow:0 8px 32px rgba(255,107,53,0.2);
}
/* Light theme phase elements */
:root:not(.dark) .phase-title{
color:var(--dark);
}
:root:not(.dark) .phase-description{
color:var(--accent);
}
:root:not(.dark) .phase-icon{
color:var(--primary);
}
/* Light theme phase status */
:root:not(.dark) .phase-status.completed{
background:rgba(255,107,53,0.15);
color:var(--primary);
border-color:rgba(255,107,53,0.4);
}
:root:not(.dark) .phase-status.current{
background:rgba(139,92,246,0.15);
color:var(--secondary);
border-color:rgba(139,92,246,0.4);
}
:root:not(.dark) .phase-status.upcoming{
background:rgba(30,64,175,0.15);
color:var(--accent);
border-color:rgba(30,64,175,0.4);
}
/* Light theme phase number */
:root:not(.dark) .phase-number{
color:var(--dark);
}
/* Light theme connection lines */
:root:not(.dark) .timeline-node:not(:last-child)::after{
background:linear-gradient(180deg, var(--primary), var(--secondary));
}
/* Light theme FAQ section */
:root:not(.dark) .faq-section{
background:radial-gradient(ellipse at center, rgba(255,107,53,0.05) 0%, transparent 70%);
}
:root:not(.dark) .faq-search input{
background:rgba(255,255,255,0.9);
border:1px solid rgba(255,107,53,0.3);
color:var(--dark);
}
:root:not(.dark) .faq-search input:focus{
border-color:rgba(255,107,53,0.6);
box-shadow:0 0 20px rgba(255,107,53,0.2);
}
:root:not(.dark) .faq-search input::placeholder{
color:var(--muted);
}
/* Light theme FAQ items */
:root:not(.dark) .faq-item{
background:rgba(255,255,255,0.9);
border:1px solid rgba(255,107,53,0.2);
}
:root:not(.dark) .faq-item:hover{
border-color:rgba(255,107,53,0.4);
box-shadow:0 8px 32px rgba(255,107,53,0.15);
}
:root:not(.dark) .faq-item.active{
border-color:rgba(255,107,53,0.5);
box-shadow:0 8px 32px rgba(255,107,53,0.25);
}
/* Light theme FAQ header */
:root:not(.dark) .faq-header:hover{
background:rgba(255,107,53,0.1);
}
:root:not(.dark) .faq-header:focus{
background:rgba(255,107,53,0.15);
}
:root:not(.dark) .question-text{
color:var(--dark);
}
:root:not(.dark) .question-icon{
color:var(--primary);
}
/* Light theme FAQ chevron */
:root:not(.dark) .faq-chevron{
background:rgba(255,107,53,0.1);
border:1px solid rgba(255,107,53,0.3);
}
:root:not(.dark) .faq-chevron i{
color:var(--primary);
}
:root:not(.dark) .faq-item.active .faq-chevron{
background:rgba(255,107,53,0.2);
}
/* Light theme FAQ answer */
:root:not(.dark) .answer-content p{
color:var(--accent);
}
/* Light theme FAQ no results */
:root:not(.dark) .faq-no-results{
color:var(--muted);
}
:root:not(.dark) .faq-no-results h3{
color:var(--dark);
}
/* Light theme community section */
:root:not(.dark) .community-section{
background:radial-gradient(ellipse at center, rgba(255,107,53,0.05) 0%, transparent 70%);
}
:root:not(.dark) .community-grid-overlay{
background-image:linear-gradient(rgba(255,107,53,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,0.08) 1px, transparent 1px);
}
:root:not(.dark) .community-particles::before,
:root:not(.dark) .community-particles::after{
background:var(--primary);
box-shadow:0 0 10px rgba(255,107,53,0.5);
}
/* Light theme social counters */
:root:not(.dark) .social-counters .badge{
background:rgba(255,255,255,0.9);
border:1px solid rgba(255,107,53,0.3);
color:var(--dark);
}
:root:not(.dark) .social-counters-enhanced .badge{
background:rgba(255,255,255,0.9);
border:1px solid rgba(255,107,53,0.3);
color:var(--dark);
}
/* Light theme email signup */
:root:not(.dark) .signup input{
background:rgba(255,255,255,0.9);
border:1px solid rgba(255,107,53,0.3);
color:var(--dark);
}
:root:not(.dark) .signup-title{
color:var(--dark);
}
:root:not(.dark) .signup-subtitle{
color:var(--accent);
}
:root:not(.dark) .signup-form input{
background:rgba(255,255,255,0.9);
border:1px solid rgba(255,107,53,0.3);
color:var(--dark);
}
:root:not(.dark) .signup-form input:focus{
border-color:rgba(255,107,53,0.6);
box-shadow:0 0 20px rgba(255,107,53,0.2);
}
:root:not(.dark) .signup-form input::placeholder{
color:var(--muted);
}
/* Light theme signup button */
:root:not(.dark) .btn-signup{
background:rgba(255,255,255,0.9);
border:1px solid rgba(255,107,53,0.4);
color:var(--dark);
}
:root:not(.dark) .btn-signup:not(:disabled):hover{
border-color:rgba(255,107,53,0.6);
box-shadow:0 12px 24px rgba(255,107,53,0.2);
background:rgba(255,107,53,0.1);
}
:root:not(.dark) .btn-signup-glow{
background:linear-gradient(135deg, var(--primary), var(--secondary));
}
:root:not(.dark) .btn-signup:not(:disabled):hover .btn-signup-glow{
opacity:0.3;
}
/* Light theme signup feedback */
:root:not(.dark) .signup-feedback{
color:var(--muted);
}
:root:not(.dark) .signup-feedback.success{
color:#00ff88;
}
:root:not(.dark) .signup-feedback.error{
color:#ff3d61;
}
/* Light theme enhanced buttons */
:root:not(.dark) .btn-neon-glass{
background:rgba(255,255,255,0.9);
border:1px solid rgba(255,107,53,0.4);
color:var(--dark);
}
:root:not(.dark) .btn-neon-glass:hover{
border-color:rgba(255,107,53,0.6);
box-shadow:0 16px 32px rgba(255,107,53,0.2);
background:rgba(255,107,53,0.1);
}
:root:not(.dark) .btn-glow{
background:linear-gradient(135deg, var(--primary), var(--secondary));
}
:root:not(.dark) .btn-neon-glass:hover .btn-glow{
opacity:0.3;
}
:root:not(.dark) .btn-content i{
color:var(--primary);
}
/* Light theme cyberpunk button */
:root:not(.dark) .btn-cyber{
background:rgba(255,255,255,0.9);
color:var(--dark);
border:1px solid rgba(255,107,53,0.4);
}
:root:not(.dark) .btn-cyber::before{
background:conic-gradient(from 180deg, var(--primary), var(--secondary), var(--accent), var(--primary));
}
:root:not(.dark) .btn-cyber:hover{
box-shadow:0 8px 30px rgba(255,107,53,0.35), 0 0 60px rgba(139,92,246,0.2);
}
/* Light theme primary button enhancements */
:root:not(.dark) .btn-primary{
background:linear-gradient(135deg, var(--primary), var(--secondary));
color:white;
border:none;
}
:root:not(.dark) .btn-primary:hover{
background:linear-gradient(135deg, var(--secondary), var(--accent));
transform:translateY(-2px);
box-shadow:0 8px 25px rgba(255,107,53,0.3);
}
/* Light theme social media specific elements */
:root:not(.dark) .hologram-counter .counter-icon{
background:rgba(255,107,53,0.1);
border:1px solid rgba(255,107,53,0.3);
}
:root:not(.dark) .hologram-counter:hover .counter-icon{
background:rgba(255,107,53,0.2);
}
:root:not(.dark) .hologram-counter .counter-icon i{
color:var(--primary);
}
:root:not(.dark) .hologram-counter .counter-number{
color:var(--dark);
}
:root:not(.dark) .hologram-counter .counter-label{
color:var(--accent);
}
:root:not(.dark) .hologram-counter .counter-glow{
background:linear-gradient(135deg, var(--primary), var(--secondary));
}
/* Light theme brand logo */
:root:not(.dark) .brand .logo-dot{
background:linear-gradient(135deg, var(--primary), var(--secondary));
box-shadow:0 0 20px rgba(255,107,53,0.5);
}
/* Light theme decorative elements */
:root:not(.dark) .decorative-line{
background:linear-gradient(90deg, var(--primary), var(--secondary));
}
:root:not(.dark) .decorative-dot{
background:var(--primary);
box-shadow:0 0 10px rgba(255,107,53,0.5);
}
/* Light theme scrollbar */
:root:not(.dark) ::-webkit-scrollbar{
width:8px;
}
:root:not(.dark) ::-webkit-scrollbar-track{
background:var(--bg-2);
}
:root:not(.dark) ::-webkit-scrollbar-thumb{
background:linear-gradient(135deg, var(--primary), var(--secondary));
border-radius:4px;
}
:root:not(.dark) ::-webkit-scrollbar-thumb:hover{
background:linear-gradient(135deg, var(--secondary), var(--accent));
}
/* Light theme hero section enhancements */
:root:not(.dark) .hero{
position:relative;
overflow:hidden;
}
:root:not(.dark) .hero::before{
display:none;
}
/* Light theme text highlights */
:root:not(.dark) .text-highlight{
background:linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
/* Light theme status indicators */
:root:not(.dark) .status-online{
background:var(--primary);
box-shadow:0 0 10px rgba(255,107,53,0.5);
}
:root:not(.dark) .status-offline{
background:var(--muted);
}
/* Light theme loading states */
:root:not(.dark) .loading-spinner{
border:2px solid rgba(255,107,53,0.3);
border-top:2px solid var(--primary);
}
/* Light theme mobile responsiveness */
@media (max-width: 768px) {
:root:not(.dark) .hero{
background:transparent;
}
:root:not(.dark) .hero-content{
background:transparent;
}
:root:not(.dark) .card{
background:rgba(255,255,255,0.95);
}
}
@media (max-width: 480px) {
:root:not(.dark) .site-header{
background:rgba(255,255,255,0.95);
}
:root:not(.dark) .ui-btn{
background:rgba(255,255,255,0.95);
}
}
#to-top{display:none}
/* Tilt base state to preserve space */
.tilt{transform-style:preserve-3d}
/* ========================================
COMPACT ROADMAP TIMELINE
======================================== */
/* Roadmap Section Background */
.roadmap-section {
position: relative;
overflow: hidden;
background: radial-gradient(ellipse at center, rgba(0,240,255,0.02) 0%, transparent 70%);
padding: 30px 0 60px 0; /* Reduced top padding from 60px to 30px */
}
.roadmap-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.roadmap-grid-overlay {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0,240,255,0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,240,255,0.08) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
animation: gridFloat 25s linear infinite;
}
/* Roadmap Title - Simple */
.roadmap-title {
position: relative;
text-align: center;
margin-bottom: 50px;
}
.title-text {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
background: linear-gradient(135deg, #00f0ff, #ff3db8, #7a5cff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.title-glow {
display: none;
}
/* Timeline Container */
.timeline-container {
position: relative;
max-width: 900px;
margin: 0 auto;
z-index: 1;
}
.timeline-container::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg,
transparent 0%,
#00f0ff 10%,
#ff3db8 50%,
#7a5cff 90%,
transparent 100%
);
transform: translateX(-50%);
z-index: 1;
}
/* Timeline Nodes */
.timeline-nodes {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 5px 0;
z-index: 2;
}
.timeline-node {
position: relative;
display: flex;
align-items: center;
opacity: 0;
transform: translateY(30px);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.timeline-node:nth-child(odd) {
justify-content: flex-start;
}
.timeline-node:nth-child(even) {
justify-content: flex-end;
}
.timeline-node.revealed {
opacity: 1;
transform: translateY(0);
}
/* Node Content */
.node-content {
flex: 1;
background: rgba(12,17,24,0.9);
backdrop-filter: blur(12px);
border: 1px solid rgba(0,240,255,0.2);
border-radius: 12px;
padding: 20px;
position: relative;
max-width: 350px;
transition: all 0.3s ease;
}
.node-content {
margin: 0 60px;
}
.timeline-node:hover .node-content {
border-color: rgba(0,240,255,0.4);
box-shadow: 0 8px 32px rgba(0,240,255,0.15);
transform: translateY(-2px);
}
.phase-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.phase-title {
margin: 0;
font-size: 16px;
font-weight: 800;
color: var(--fg);
letter-spacing: 1px;
text-transform: uppercase;
background: linear-gradient(135deg, #00f0ff, #ff3db8);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.phase-icon {
font-size: 20px;
opacity: 0.8;
}
.phase-description {
margin: 0 0 10px;
color: var(--muted);
line-height: 1.4;
font-size: 13px;
}
.phase-details {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.detail-item {
font-size: 11px;
padding: 3px 8px;
background: rgba(0,240,255,0.1);
border: 1px solid rgba(0,240,255,0.2);
border-radius: 12px;
color: var(--muted);
font-weight: 500;
}
.phase-status {
display: inline-block;
padding: 6px 12px;
border-radius: 16px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border: 1px solid;
}
.phase-status.completed {
background: rgba(0,240,255,0.15);
color: #00f0ff;
border-color: rgba(0,240,255,0.4);
}
.phase-status.current {
background: rgba(255,61,184,0.15);
color: #ff3db8;
border-color: rgba(255,61,184,0.4);
}
.phase-status.upcoming {
background: rgba(122,92,255,0.15);
color: #7a5cff;
border-color: rgba(122,92,255,0.4);
}
/* Timeline Node Dot */
.timeline-node-dot {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 24px;
background: rgba(12, 17, 24, 0.95);
border: 3px solid #00f0ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10000 !important;
transition: all 0.3s ease;
}
.timeline-node[data-status="completed"] .timeline-node-dot {
border-color: #00f0ff;
background: rgba(12, 17, 24, 0.95);
}
.timeline-node[data-status="current"] .timeline-node-dot {
border-color: #ff3db8;
background: rgba(12, 17, 24, 0.95);
box-shadow: 0 0 20px rgba(255,61,184,0.3);
}
.timeline-node[data-status="upcoming"] .timeline-node-dot {
border-color: #7a5cff;
background: rgba(12, 17, 24, 0.95);
}
.timeline-node:hover .timeline-node-dot {
transform: translateX(-50%) scale(1.2);
box-shadow: 0 0 25px rgba(0,240,255,0.4);
}
.phase-number {
font-size: 12px;
font-weight: 800;
color: var(--fg);
}
/* Connection Lines */
.timeline-node:not(:last-child)::after {
content: '';
position: absolute;
left: 50%;
top: 36px;
width: 2px;
height: 8px;
background: linear-gradient(180deg,
rgba(0,240,255,0.6) 0%,
rgba(255,61,184,0.6) 50%,
rgba(122,92,255,0.6) 100%
);
transform: translateX(-50%);
z-index: 2;
}
/* Animations */
@keyframes gridFloat {
0% { transform: translateY(0); }
100% { transform: translateY(-40px); }
}
/* ========================================
ENHANCED FAQ SECTION
======================================== */
.faq-section {
position: relative;
overflow: hidden;
padding: 20px 0; /* Further reduced padding */
}
/* FAQ Search Container */
.faq-search-container {
margin-bottom: 10px; /* Further reduced margin */
}
.faq-search {
position: relative;
max-width: 500px;
margin: 0 auto;
}
.faq-search input {
width: 100%;
padding: 16px 50px 16px 50px;
background: rgba(12, 17, 24, 0.8);
border: 2px solid rgba(0, 240, 255, 0.2);
border-radius: 12px;
color: var(--fg);
font-size: 16px;
backdrop-filter: blur(12px);
transition: all 0.3s ease;
}
.faq-search input:focus {
outline: none;
border-color: rgba(0, 240, 255, 0.6);
box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}
.faq-search input::placeholder {
color: var(--muted);
}
.search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: rgba(0, 240, 255, 0.6);
font-size: 16px;
pointer-events: none;
}
.search-clear {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background: rgba(255, 61, 184, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: all 0.3s ease;
color: #ff3db8;
}
.search-clear.visible {
opacity: 1;
}
.search-clear:hover {
background: rgba(255, 61, 184, 0.3);
transform: translateY(-50%) scale(1.1);
}
.search-results-info {
text-align: center;
margin-top: 12px;
color: var(--muted);
font-size: 14px;
opacity: 0;
transition: opacity 0.3s ease;
}
.search-results-info.visible {
opacity: 1;
}
/* FAQ Container */
.faq-container {
position: relative;
}
.faq-accordion {
display: flex;
flex-direction: column;
gap: 4px; /* Further reduced gap */
}
/* FAQ Items */
.faq-item {
background: rgba(12, 17, 24, 0.6);
border: 1px solid rgba(0, 240, 255, 0.15);
border-radius: 16px;
overflow: hidden;
transition: all 0.3s ease;
opacity: 1;
transform: scale(1);
}
.faq-item.hidden {
opacity: 0;
transform: scale(0.95);
pointer-events: none;
margin: 0;
height: 0;
border: none;
}
.faq-item:hover {
border-color: rgba(0, 240, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 240, 255, 0.1);
}
.faq-item.active {
border-color: rgba(0, 240, 255, 0.5);
box-shadow: 0 8px 32px rgba(0, 240, 255, 0.2);
}
/* FAQ Header */
.faq-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px; /* Further reduced padding */
cursor: pointer;
transition: all 0.3s ease;
user-select: none;
}
.faq-header:hover {
background: rgba(0, 240, 255, 0.05);
}
.faq-header:focus {
outline: none;
background: rgba(0, 240, 255, 0.1);
}
.faq-question {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
}
.question-icon {
font-size: 18px; /* Reduced icon size */
opacity: 0.8;
}
.question-text {
margin: 0;
font-size: 14px; /* Reduced font size */
font-weight: 600;
color: var(--fg);
line-height: 1.3;
}
/* FAQ Chevron */
.faq-chevron {
width: 24px; /* Reduced size */
height: 24px; /* Reduced size */
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 240, 255, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
flex-shrink: 0;
}
.faq-chevron i {
color: #00f0ff;
font-size: 12px; /* Reduced icon size */
transition: transform 0.3s ease;
}
.faq-item.active .faq-chevron {
background: rgba(0, 240, 255, 0.2);
transform: scale(1.1);
}
.faq-item.active .faq-chevron i {
transform: rotate(180deg);
}
/* FAQ Answer */
.faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
}
.faq-answer.active {
max-height: 500px;
opacity: 1;
}
.answer-content {
padding: 0 16px 12px 16px; /* Further reduced padding */
}
.answer-content p {
margin: 0 0 10px; /* Reduced margin */
color: var(--muted);
line-height: 1.4;
font-size: 13px; /* Reduced font size */
}
.answer-details {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.detail-tag {
display: inline-block;
padding: 4px 12px;
background: rgba(0, 240, 255, 0.1);
border: 1px solid rgba(0, 240, 255, 0.2);
border-radius: 20px;
font-size: 12px;
font-weight: 500;
color: #00f0ff;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* No Results */
.faq-no-results {
text-align: center;
padding: 60px 20px;
color: var(--muted);
}
.no-results-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.6;
}
.faq-no-results h3 {
margin: 0 0 8px;
font-size: 20px;
color: var(--fg);
}
.faq-no-results p {
margin: 0;
font-size: 14px;
}
/* Search Highlighting */
.search-highlight {
background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(255, 61, 184, 0.3));
color: var(--fg);
padding: 2px 4px;
border-radius: 4px;
font-weight: 600;
}
/* Animations */
@keyframes faqSlideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.faq-item {
animation: faqSlideIn 0.5s ease-out;
}
.faq-item:nth-child(1) { animation-delay: 0.1s; }
.faq-item:nth-child(2) { animation-delay: 0.2s; }
.faq-item:nth-child(3) { animation-delay: 0.3s; }
.faq-item:nth-child(4) { animation-delay: 0.4s; }
.faq-item:nth-child(5) { animation-delay: 0.5s; }
.faq-item:nth-child(6) { animation-delay: 0.6s; }
/* Responsive Design */
@media (max-width: 768px) {
.faq-search input {
padding: 14px 45px 14px 45px;
font-size: 15px;
}
.search-icon {
left: 14px;
font-size: 14px;
}
.search-clear {
right: 14px;
width: 20px;
height: 20px;
}
.faq-header {
padding: 16px 20px;
}
.question-text {
font-size: 16px;
}
.question-icon {
font-size: 20px;
}
.faq-chevron {
width: 28px;
height: 28px;
}
.answer-content {
padding: 0 20px 20px 20px;
}
.answer-content p {
font-size: 14px;
}
}
@media (max-width: 480px) {
.faq-accordion {
gap: 8px;
}
.faq-header {
padding: 14px 16px;
}
.faq-question {
gap: 12px;
}
.question-text {
font-size: 15px;
}
.answer-content {
padding: 0 16px 16px 16px;
}
.detail-tag {
font-size: 11px;
padding: 3px 10px;
}
}
/* ========================================
FUTURISTIC FOOTER SECTION
======================================== */
.site-footer {
position: relative;
background: linear-gradient(135deg, #0a0f1a 0%, #1a1f2e 50%, #0f1419 100%);
border-top: 1px solid rgba(0, 240, 255, 0.2);
overflow: hidden;
margin-top: 10px; /* Significantly reduced margin */
}
/* Footer Background Effects - Removed for compact design */
/* Footer Inner Container */
.footer-inner {
position: relative;
z-index: 2;
padding: 12px 0 8px; /* Compact but visible padding */
}
.footer-content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px; /* Compact but visible gap */
margin-bottom: 8px; /* Compact but visible margin */
}
/* Footer Zones */
.footer-zone {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-zone.revealed {
opacity: 1;
transform: translateY(0);
}
.footer-zone:nth-child(1) { transition-delay: 0.1s; }
.footer-zone:nth-child(2) { transition-delay: 0.2s; }
.footer-zone:nth-child(3) { transition-delay: 0.3s; }
/* Brand Zone */
.footer-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.footer-logo {
position: relative;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
padding: 8px 12px;
background: rgba(0, 240, 255, 0.05);
border: 1px solid rgba(0, 240, 255, 0.2);
border-radius: 8px;
transition: all 0.3s ease;
}
.footer-logo:hover {
background: rgba(0, 240, 255, 0.1);
border-color: rgba(0, 240, 255, 0.4);
box-shadow: 0 8px 32px rgba(0, 240, 255, 0.2);
}
.logo-text {
font-size: 14px;
font-weight: 800;
color: var(--fg);
letter-spacing: 0.8px;
}
.logo-glow {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, #00f0ff, #ff3db8, #7a5cff);
border-radius: 14px;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.footer-logo:hover .logo-glow {
opacity: 0.3;
}
.footer-tagline {
margin: 0 0 6px;
font-size: 12px;
color: var(--muted);
font-weight: 500;
letter-spacing: 0.5px;
}
/* Social links removed - already in community section */
/* Links Zone */
.footer-links {
display: flex;
flex-direction: column;
}
.footer-section-title {
margin: 0 0 8px;
font-size: 12px;
font-weight: 700;
color: var(--fg);
text-transform: uppercase;
letter-spacing: 0.8px;
position: relative;
}
.footer-section-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 30px;
height: 2px;
background: linear-gradient(90deg, #00f0ff, #ff3db8);
}
.footer-nav {
display: flex;
flex-direction: column;
gap: 6px;
}
.footer-link {
display: flex;
align-items: center;
padding: 6px 10px;
color: var(--muted);
text-decoration: none;
border-radius: 6px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
font-size: 12px;
}
.footer-link::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #00f0ff, #ff3db8);
transition: width 0.3s ease;
}
.footer-link:hover::before {
width: 100%;
}
.footer-link:hover {
color: #00f0ff;
background: rgba(0, 240, 255, 0.05);
transform: translateX(8px);
}
.link-icon {
font-size: 16px;
opacity: 0.8;
}
.link-text {
font-size: 14px;
font-weight: 500;
}
.link-glow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(255, 61, 184, 0.1));
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 8px;
}
.footer-link:hover .link-glow {
opacity: 1;
}
/* Legal Zone */
.footer-legal {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.copyright {
margin: 0 0 8px;
font-size: 11px;
color: var(--muted);
line-height: 1.3;
}
.legal-links {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 6px;
}
.legal-link {
color: var(--muted);
text-decoration: none;
font-size: 10px;
transition: all 0.3s ease;
position: relative;
}
.legal-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: #00f0ff;
transition: width 0.3s ease;
}
.legal-link:hover::after {
width: 100%;
}
.legal-link:hover {
color: #00f0ff;
}
/* Status indicator removed for compact design */
/* Bottom bar removed for compact design */
/* Footer animations removed for compact design */
/* Responsive Design */
@media (max-width: 1024px) {
.footer-inner {
padding: 20px 16px 16px;
max-width: 100%;
}
.footer-content {
display: flex;
flex-direction: column;
gap: 20px;
text-align: center;
margin-bottom: 16px;
width: 100%;
align-items: center;
}
.footer-brand {
order: 1;
align-items: center;
width: 100%;
display: flex;
flex-direction: column;
}
.footer-links {
order: 2;
align-items: center;
width: 100%;
display: flex;
flex-direction: column;
}
.footer-legal {
order: 3;
align-items: center;
width: 100%;
display: flex;
flex-direction: column;
}
.footer-nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 8px;
width: 100%;
}
.legal-links {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 8px;
width: 100%;
}
}
@media (max-width: 768px) {
.site-footer {
margin-top: 20px;
}
.footer-inner {
padding: 20px 12px 16px;
max-width: 100%;
}
.footer-content {
gap: 24px;
margin-bottom: 16px;
}
.footer-brand {
order: 1;
}
.footer-logo {
padding: 12px 16px;
margin-bottom: 8px;
}
.logo-text {
font-size: 16px;
}
.footer-tagline {
font-size: 13px;
margin-bottom: 0;
}
.footer-links {
order: 2;
}
.footer-section-title {
font-size: 14px;
margin-bottom: 12px;
font-weight: 600;
}
.footer-nav {
gap: 8px;
margin-top: 0;
}
.footer-link {
padding: 8px 12px;
font-size: 13px;
background: rgba(0, 240, 255, 0.05);
border: 1px solid rgba(0, 240, 255, 0.2);
border-radius: 6px;
transition: all 0.3s ease;
}
.footer-link:hover {
background: rgba(0, 240, 255, 0.1);
border-color: rgba(0, 240, 255, 0.4);
}
.footer-legal {
order: 3;
}
.copyright {
font-size: 12px;
margin-bottom: 12px;
color: var(--muted);
}
.legal-links {
gap: 8px;
margin-top: 0;
}
.legal-link {
font-size: 12px;
padding: 4px 8px;
color: var(--muted);
transition: color 0.3s ease;
}
.legal-link:hover {
color: var(--cyan);
}
}
@media (max-width: 480px) {
.site-footer {
margin-top: 16px;
}
.footer-inner {
padding: 16px 8px 12px;
max-width: 100%;
}
.footer-content {
gap: 20px;
margin-bottom: 12px;
}
.footer-logo {
padding: 10px 14px;
margin-bottom: 6px;
}
.logo-text {
font-size: 15px;
}
.footer-tagline {
font-size: 12px;
margin-bottom: 0;
}
.footer-section-title {
font-size: 13px;
margin-bottom: 10px;
font-weight: 600;
}
.footer-nav {
gap: 6px;
flex-wrap: wrap;
}
.footer-link {
padding: 6px 10px;
font-size: 12px;
background: rgba(0, 240, 255, 0.05);
border: 1px solid rgba(0, 240, 255, 0.2);
border-radius: 6px;
transition: all 0.3s ease;
}
.footer-link:hover {
background: rgba(0, 240, 255, 0.1);
border-color: rgba(0, 240, 255, 0.4);
}
.copyright {
font-size: 11px;
margin-bottom: 10px;
color: var(--muted);
}
.legal-links {
gap: 6px;
flex-wrap: wrap;
}
.legal-link {
font-size: 11px;
padding: 3px 6px;
color: var(--muted);
transition: color 0.3s ease;
}
.legal-link:hover {
color: var(--cyan);
}
}
@media (max-width: 360px) {
.site-footer {
margin-top: 12px;
}
.footer-inner {
padding: 12px 6px 8px;
max-width: 100%;
}
.footer-content {
gap: 16px;
margin-bottom: 8px;
}
.footer-logo {
padding: 8px 12px;
margin-bottom: 4px;
}
.logo-text {
font-size: 14px;
}
.footer-tagline {
font-size: 11px;
margin-bottom: 0;
}
.footer-section-title {
font-size: 12px;
margin-bottom: 8px;
font-weight: 600;
}
.footer-nav {
gap: 4px;
flex-wrap: wrap;
}
.footer-link {
padding: 5px 8px;
font-size: 11px;
background: rgba(0, 240, 255, 0.05);
border: 1px solid rgba(0, 240, 255, 0.2);
border-radius: 6px;
transition: all 0.3s ease;
}
.footer-link:hover {
background: rgba(0, 240, 255, 0.1);
border-color: rgba(0, 240, 255, 0.4);
}
.copyright {
font-size: 10px;
margin-bottom: 8px;
color: var(--muted);
}
.legal-links {
gap: 4px;
flex-wrap: wrap;
}
.legal-link {
font-size: 10px;
padding: 2px 4px;
color: var(--muted);
transition: color 0.3s ease;
}
.legal-link:hover {
color: var(--cyan);
}
}
/* ========================================
ENHANCED COMMUNITY SECTION
======================================== */
.community-section {
position: relative;
overflow: hidden;
background: radial-gradient(ellipse at center, rgba(0,240,255,0.03) 0%, transparent 70%);
padding: 30px 0; /* Added compact padding */
}
/* Two Column Layout */
.community-two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
margin-top: 20px;
}
.community-left-column {
display: flex;
flex-direction: column;
gap: 20px;
}
.community-right-column {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 40px;
}
/* Community Background Effects */
.community-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
.community-grid-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(0, 240, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 240, 255, 0.02) 1px, transparent 1px);
background-size: 30px 30px;
animation: gridFloat 40s linear infinite;
}
.community-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.community-particles::before,
.community-particles::after {
content: '';
position: absolute;
width: 3px;
height: 3px;
background: #00f0ff;
border-radius: 50%;
animation: particleFloat 12s ease-in-out infinite;
}
.community-particles::before {
top: 20%;
left: 15%;
animation-delay: 0s;
}
.community-particles::after {
top: 70%;
right: 20%;
animation-delay: 6s;
}
/* Enhanced Social Counters */
.social-counters-enhanced {
display: flex;
justify-content: center;
gap: 12px; /* Further reduced gap */
margin: 15px 0; /* Further reduced margin */
position: relative;
z-index: 2;
}
.hologram-counter {
position: relative;
background: rgba(12, 17, 24, 0.8);
border: 1px solid rgba(0, 240, 255, 0.3);
border-radius: 12px; /* Further reduced border radius */
padding: 10px 12px; /* Further reduced padding */
backdrop-filter: blur(12px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
overflow: hidden;
min-width: 80px; /* Further reduced min width */
text-align: center;
}
.hologram-counter:hover {
transform: translateY(-8px) scale(1.05);
border-color: rgba(0, 240, 255, 0.6);
box-shadow: 0 20px 40px rgba(0, 240, 255, 0.2);
}
.counter-glow {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, #00f0ff, #ff3db8, #7a5cff);
border-radius: 22px;
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.hologram-counter:hover .counter-glow {
opacity: 0.4;
}
.counter-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px; /* Further reduced gap */
position: relative;
z-index: 2;
}
.counter-icon {
width: 24px; /* Further reduced size */
height: 24px; /* Further reduced size */
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 240, 255, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.counter-icon i {
font-size: 14px; /* Further reduced icon size */
color: #00f0ff;
transition: all 0.3s ease;
}
.hologram-counter:hover .counter-icon {
background: rgba(0, 240, 255, 0.2);
transform: scale(1.1);
}
.hologram-counter:hover .counter-icon i {
transform: rotate(360deg);
}
.counter-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.counter-number {
font-size: 16px; /* Further reduced font size */
font-weight: 800;
color: var(--fg);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.counter-label {
font-size: 8px; /* Further reduced font size */
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
.counter-tooltip {
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
background: rgba(12, 17, 24, 0.95);
color: #00f0ff;
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
white-space: nowrap;
border: 1px solid rgba(0, 240, 255, 0.3);
}
.hologram-counter:hover .counter-tooltip {
opacity: 1;
transform: translateX(-50%) translateY(-8px);
}
/* Enhanced CTA Buttons */
.cta-row {
display: flex;
justify-content: center;
gap: 12px; /* Reduced gap */
margin: 15px 0; /* Reduced margin */
position: relative;
z-index: 2;
}
.btn-neon-glass {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px; /* Reduced padding */
background: rgba(12, 17, 24, 0.6);
border: 2px solid rgba(0, 240, 255, 0.3);
border-radius: 12px; /* Reduced border radius */
color: var(--fg);
text-decoration: none;
font-weight: 600;
font-size: 14px; /* Reduced font size */
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
backdrop-filter: blur(12px);
cursor: pointer;
user-select: none;
}
.btn-neon-glass:hover {
transform: translateY(-4px);
border-color: rgba(0, 240, 255, 0.6);
box-shadow: 0 16px 32px rgba(0, 240, 255, 0.2);
}
.btn-glow {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, #00f0ff, #ff3db8, #7a5cff);
border-radius: 18px;
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.btn-neon-glass:hover .btn-glow {
opacity: 0.3;
}
.btn-content {
display: flex;
align-items: center;
gap: 12px;
position: relative;
z-index: 2;
}
.btn-content i {
font-size: 18px;
color: #00f0ff;
transition: all 0.3s ease;
}
.btn-neon-glass:hover .btn-content i {
transform: scale(1.2);
}
.btn-ripple {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(0, 240, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.6s ease;
z-index: 1;
}
.btn-neon-glass:active .btn-ripple {
width: 300px;
height: 300px;
opacity: 0;
}
/* Enhanced Email Signup */
.email-signup-enhanced {
max-width: 600px;
margin: 20px auto 0; /* Reduced margin */
position: relative;
z-index: 2;
}
.signup-title {
text-align: center;
font-size: 18px; /* Reduced font size */
font-weight: 700;
color: var(--fg);
margin: 0 0 4px; /* Reduced margin */
}
.signup-subtitle {
text-align: center;
color: var(--muted);
margin: 0 0 20px; /* Reduced margin */
font-size: 14px; /* Reduced font size */
}
.signup-form {
display: flex;
gap: 16px;
align-items: flex-end;
}
.input-container {
flex: 1;
position: relative;
}
.input-glow {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, #00f0ff, #ff3db8);
border-radius: 14px;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.input-container.focused .input-glow {
opacity: 0.4;
}
.input-container input {
width: 100%;
padding: 16px 50px 16px 20px;
background: rgba(12, 17, 24, 0.8);
border: 2px solid rgba(0, 240, 255, 0.2);
border-radius: 12px;
color: var(--fg);
font-size: 16px;
backdrop-filter: blur(12px);
transition: all 0.3s ease;
}
.input-container input:focus {
outline: none;
border-color: rgba(0, 240, 255, 0.6);
box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}
.input-container input::placeholder {
color: var(--muted);
transition: all 0.3s ease;
}
.input-container input:focus::placeholder {
transform: translateY(-2px);
opacity: 0.7;
}
.input-icon {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: rgba(0, 240, 255, 0.6);
font-size: 16px;
pointer-events: none;
transition: all 0.3s ease;
}
.input-container.focused .input-icon {
color: #00f0ff;
transform: translateY(-50%) scale(1.1);
}
.input-validation {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
opacity: 0;
transition: all 0.3s ease;
}
.input-container.valid .input-validation {
opacity: 1;
background: #00ff88;
box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}
.input-container.invalid .input-validation {
opacity: 1;
background: #ff3d61;
box-shadow: 0 0 10px rgba(255, 61, 97, 0.5);
}
.btn-signup {
position: relative;
padding: 16px 32px;
background: rgba(12, 17, 24, 0.8);
border: 2px solid rgba(0, 240, 255, 0.3);
border-radius: 12px;
color: var(--fg);
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(12px);
overflow: hidden;
min-width: 140px;
}
.btn-signup:not(:disabled):hover {
transform: translateY(-2px);
border-color: rgba(0, 240, 255, 0.6);
box-shadow: 0 12px 24px rgba(0, 240, 255, 0.2);
}
.btn-signup:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-signup-glow {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, #00f0ff, #ff3db8);
border-radius: 14px;
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.btn-signup:not(:disabled):hover .btn-signup-glow {
opacity: 0.3;
}
.btn-signup-content {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
z-index: 2;
}
.btn-icon {
transition: all 0.3s ease;
}
.btn-signup:not(:disabled):hover .btn-icon {
transform: translateX(4px);
}
.btn-signup-ripple {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(0, 240, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.6s ease;
z-index: 1;
}
.btn-signup:active .btn-signup-ripple {
width: 200px;
height: 200px;
opacity: 0;
}
/* Signup Animation */
.signup-animation {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
z-index: 10;
}
.signup-animation.active {
opacity: 1;
}
.animation-rocket {
font-size: 48px;
color: #00f0ff;
animation: rocketLaunch 2s ease-out forwards;
}
.animation-trail {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100px;
background: linear-gradient(180deg, #00f0ff, transparent);
opacity: 0;
animation: trailFade 2s ease-out forwards;
}
.signup-feedback {
text-align: center;
margin-top: 20px;
font-size: 14px;
font-weight: 500;
opacity: 0;
transition: all 0.3s ease;
}
.signup-feedback.success {
color: #00ff88;
opacity: 1;
}
.signup-feedback.error {
color: #ff3d61;
opacity: 1;
}
/* Animations */
@keyframes rocketLaunch {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
50% {
transform: translateY(-100px) rotate(180deg);
opacity: 1;
}
100% {
transform: translateY(-200px) rotate(360deg);
opacity: 0;
}
}
@keyframes trailFade {
0% {
opacity: 0;
height: 0;
}
50% {
opacity: 1;
height: 100px;
}
100% {
opacity: 0;
height: 200px;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.community-two-column {
grid-template-columns: 1fr;
gap: 30px;
}
.community-left-column {
gap: 15px;
}
.social-counters-enhanced {
flex-direction: row; /* Keep in single row */
gap: 8px; /* Reduced gap for mobile */
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.hologram-counter {
min-width: 100px; /* Much smaller for mobile */
padding: 8px 10px; /* Reduced padding */
flex: 1;
max-width: 120px;
}
.counter-content {
gap: 4px; /* Reduced gap between icon and text */
}
.counter-icon {
width: 24px; /* Smaller icon */
height: 24px;
font-size: 12px; /* Smaller icon font */
}
.counter-number {
font-size: 14px; /* Smaller number */
}
.counter-label {
font-size: 10px; /* Smaller label */
}
.cta-row {
flex-direction: row;
gap: 12px;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.btn-neon-glass {
width: 100%;
max-width: 280px;
}
.signup-form {
flex-direction: column;
gap: 12px;
align-items: center;
width: 100%;
}
.input-container {
width: 100%;
flex: none;
}
.signup-form input {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.btn-signup {
width: auto;
min-width: 140px;
align-self: center;
}
}
@media (max-width: 480px) {
.social-counters-enhanced {
gap: 6px; /* Even smaller gap */
}
.hologram-counter {
padding: 6px 8px; /* Much smaller padding */
min-width: 80px; /* Much smaller min width */
max-width: 100px;
}
.counter-icon {
width: 20px; /* Even smaller icon */
height: 20px;
font-size: 10px;
}
.counter-number {
font-size: 12px; /* Smaller font size */
}
.counter-label {
font-size: 9px; /* Smaller label */
}
.signup-form {
gap: 10px;
width: 100%;
}
.input-container {
width: 100%;
flex: none;
}
.signup-form input {
width: 100%;
max-width: 100%;
padding: 12px 16px;
box-sizing: border-box;
}
.btn-signup {
width: auto;
min-width: 120px;
padding: 12px 24px;
}
.signup-title {
font-size: 20px;
}
.signup-subtitle {
font-size: 14px;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.roadmap-section {
padding: 20px 0 40px 0; /* Reduced top padding from 40px to 20px */
}
.roadmap-title {
margin-bottom: 30px;
}
.timeline-nodes {
gap: 6px;
padding: 5px 0;
}
.timeline-node {
flex-direction: column;
text-align: center;
gap: 15px;
}
/* Reorder elements on mobile: dot first, then content */
.timeline-node-dot {
order: 1; /* Phase number appears first */
position: relative;
left: auto;
transform: none;
}
.node-content.left,
.node-content.right {
order: 2; /* Card content appears second */
margin: 0;
max-width: 100%;
}
.timeline-center-line {
display: none;
}
.timeline-node:not(:last-child)::after {
display: none;
}
.phase-title {
font-size: 16px;
}
.phase-description {
font-size: 13px;
}
}
@media (max-width: 480px) {
.roadmap-section {
padding: 15px 0 30px 0; /* Reduced top padding from 30px to 15px */
}
.timeline-nodes {
gap: 5px;
}
.node-content {
padding: 16px;
}
.phase-title {
font-size: 15px;
}
.phase-description {
font-size: 12px;
}
}