/* AJOUTEZ SEULEMENT CECI AU DÉBUT */
html { overflow-x: hidden; }
.navbar{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background-color:#0a0f1ed9;padding:.5rem 1.5rem;position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #4361ee26;box-shadow:0 4px 16px #00000026;transition:all .25s ease}
.light-mode .navbar{background-color:#ffffffeb;border-bottom:1px solid #4361ee14;box-shadow:0 4px 16px #0000000f}
.navbar.scrolled{padding:.4rem 1.5rem;background-color:#0a0f1ef2}
.light-mode .navbar.scrolled{background-color:#fffffffa}
.logo{font-size:1.6rem;font-weight:800;letter-spacing:-.5px;display:flex;align-items:center;gap:.5rem;position:relative;transition:all .25s ease;text-decoration:none}
.logo:hover{transform:scale(1.03)}
.logo svg{height:28px;width:auto;margin-right:.3rem;filter:drop-shadow(0 2px 4px #4361ee4d);transition:all .25s ease}
.logo:hover svg{transform:rotate(5deg)}
.logo-text{background:linear-gradient(135deg,#4361EE,#7209B7);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.nav-links{display:flex;gap:1.5rem}
.nav-link{color:#ffffffd9;text-decoration:none;font-weight:600;position:relative;padding:.3rem 0;transition:all .25s ease;text-transform:uppercase;letter-spacing:.5px;font-size:.75rem}
.light-mode .nav-link{color:#1a1a2ed9}
.nav-link:hover{color:#fff;transform:translateY(-1px)}
.light-mode .nav-link:hover{color:#4361EE}
.nav-link::after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(90deg,#4361EE,#7209B7);transition:width .3s cubic-bezier(0.4,0,0.2,1);border-radius:2px}
.nav-link:hover::after{width:100%}
.login-button{display:flex;align-items:center;padding:.45rem 1.1rem;background:linear-gradient(135deg,#4361EE,#7209B7);border-radius:50px;color:#fff;font-weight:700;text-transform:uppercase;font-size:.75rem;letter-spacing:.5px;text-decoration:none;transition:all .3s ease;box-shadow:0 4px 12px #4361ee4d;border:none;cursor:pointer;overflow:hidden;position:relative;z-index:1}
.login-button::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:#fff3;transform:skewX(-15deg);transition:all .5s ease}
.login-button:hover{transform:translateY(-2px);box-shadow:0 6px 15px #4361ee66}
.login-button:hover::before{left:100%}
.login-button i{margin-right:.4rem;font-size:.9rem}
.mobile-menu-toggle{display:none;cursor:pointer;background:none;border:none;color:#fff;font-size:1.4rem;transition:all .25s ease;padding:.2rem}
.light-mode .mobile-menu-toggle{color:#1a1a2ee6}
.hamburger{width:22px;height:16px;position:relative;cursor:pointer}
.hamburger span{display:block;position:absolute;height:2px;width:100%;background:#fff;border-radius:3px;opacity:1;left:0;transform:rotate(0deg);transition:all .25s ease}
.light-mode .hamburger span{background:#1a1a2ee6}
.hamburger span:nth-child(1){top:0;width:70%}
.hamburger span:nth-child(2),.hamburger span:nth-child(3){top:7px}
.hamburger span:nth-child(4){top:14px;width:70%;right:0;left:auto}
.hamburger.active span:nth-child(1){top:7px;width:0;left:50%}
.hamburger.active span:nth-child(2){transform:rotate(45deg)}
.hamburger.active span:nth-child(3){transform:rotate(-45deg)}
.hamburger.active span:nth-child(4){top:7px;width:0;left:50%}
.mobile-menu{position:fixed;top:60px;left:0;right:0;background-color:#0a0f1efa;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-direction:column;z-index:999;padding:0;border-bottom:1px solid #4361ee26;box-shadow:0 6px 20px #0003;transform:translateY(-10px);opacity:0;transition:all .3s cubic-bezier(0.16,1,0.3,1);max-height:0;overflow:hidden;display:none}
.light-mode .mobile-menu{background-color:#fffffffa;border-bottom:1px solid #4361ee14;box-shadow:0 6px 20px #00000014}
.mobile-menu.active{display:flex;transform:translateY(0);opacity:1;max-height:100vh;overflow-y:auto}
.mobile-link{color:#ffffffe6;text-decoration:none;padding:.7rem 1.5rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;font-size:.85rem;border-bottom:1px solid #ffffff0f;transition:all .25s ease;display:flex;align-items:center}
.mobile-link:hover{background-color:#4361ee1a;padding-left:1.8rem}
.mobile-login-button{margin:.8rem 1.5rem;display:flex;align-items:center;justify-content:center;padding:.7rem 1rem;background:linear-gradient(135deg,#4361EE,#7209B7);border-radius:6px;color:#fff;font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.5px;text-decoration:none;box-shadow:0 4px 12px #4361ee4d;transition:all .3s ease}
.mobile-login-button:hover{transform:translateY(-2px);box-shadow:0 6px 15px #4361ee66}
.mobile-login-button i{margin-right:.5rem;font-size:.9rem}
@media (max-width: 768px) {
.navbar{padding:.4rem 1rem}
.logo{font-size:1.4rem}
.logo svg{height:24px}
.nav-links{display:none}
.login-button{display:none}
.mobile-menu-toggle{display:block}
}
@keyframes fadeIn {
from{opacity:0;transform:translateY(-10px)}
to{opacity:1;transform:translateY(0)}
}
.mobile-menu.active .mobile-link{animation:fadeIn .3s ease forwards;animation-delay:calc(var(--i,0) * 0.05s);opacity:0}
@media (max-width: 768px) {
.navbar{padding:.35rem .8rem;height:56px}
.logo{font-size:1.3rem}
.logo svg{height:22px;width:auto}
.hamburger{width:20px;height:14px}
.hamburger span{height:1.5px}
.hamburger span:nth-child(1){top:0}
.hamburger span:nth-child(2),.hamburger span:nth-child(3){top:6px}
.hamburger span:nth-child(4){top:12px}
.mobile-menu{top:56px;border-top:none}
.mobile-link{padding:.6rem 1.2rem;font-size:.8rem;border-bottom:1px solid #ffffff0a}
.mobile-login-button{margin:.6rem 1.2rem;padding:.6rem 1rem;font-size:.8rem}
}
.mobile-menu{transition:opacity .25s ease,transform .25s cubic-bezier(0.19,1,0.22,1);will-change:opacity,transform;transform-origin:top center}
.hamburger span{transition:all .2s cubic-bezier(0.19,1,0.22,1);will-change:transform,opacity}
@keyframes slideIn {
from{opacity:0;transform:translateY(-8px)}
to{opacity:1;transform:translateY(0)}
}
.mobile-menu .mobile-link{animation:slideIn .25s cubic-bezier(0.19,1,0.22,1) forwards;animation-delay:calc(var(--i,0) * 0.04s);opacity:0}
.mobile-link:active,.mobile-login-button:active{transform:scale(0.98)}
.navbar,.mobile-menu,.hamburger,.logo,.nav-link,.login-button,.mobile-link,.mobile-login-button{backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased}
.navbar{transition:all .2s cubic-bezier(0.19,1,0.22,1);will-change:padding,background-color}
.navbar.scrolled{backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}
:root{--primary:#2B7FFF;--primary-dark:#0a2463;--secondary:#8338ec;--tertiary:#7209b7;--success:#38b000;--info:#00b4d8;--warning:#ffbe0b;--danger:#ff006e;--light-background:#fff;--light-card-bg:#f8f9fa;--light-text:#343a40;--light-border:#2b7fff1a;--light-shadow:#0000001a;--dark-background:#070d20;--dark-card-bg:#0a1128b3;--dark-text:#f8f9fa;--dark-border:#2b7fff33;--dark-shadow:#0000004d;--gradient:linear-gradient(135deg,var(--primary),var(--secondary));--gradient-alt:linear-gradient(135deg,var(--secondary),var(--danger));--gradient-start:linear-gradient(135deg,#2B7FFF,#4361ee);--gradient-boost:linear-gradient(135deg,#4361ee,#3a0ca3);--gradient-elite:linear-gradient(135deg,#7209b7,#9d4edd);--gradient-ultime:linear-gradient(135deg,#9d4edd,#ff006e);--shadow-sm:0 5px 15px #0000001a;--shadow-md:0 8px 30px #0003;--shadow-lg:0 15px 50px #0000004d;--glow-primary:0 0 20px #2b7fff80;--glow-secondary:0 0 20px #8338ec80;--border-radius:12px;--transition-fast:all .3s cubic-bezier(0.25,0.8,0.25,1);--transition-bounce:all .5s cubic-bezier(0.25,1.5,0.5,1.2);--transition-smooth:all .6s cubic-bezier(0.33,1,0.68,1);--font-main:Montserrat,sans-serif;--white-10:#ffffff1a;--white-20:#fff3;--white-50:#ffffff80;--black-10:#0a11281a;--black-20:#0a112833;--black-50:#0a112880;--space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-xxl:48px;--space-xxxl:64px;--header-height:90px;--header-height-mobile:70px;--container-width:1280px;--background:var(--dark-background);--card-bg:var(--dark-card-bg);--text:var(--dark-text);--border:var(--dark-border);--shadow:var(--dark-shadow)}
.light-mode{--background:var(--light-background);--card-bg:var(--light-card-bg);--text:var(--light-text);--border:var(--light-border);--shadow:var(--light-shadow)}
*,::before,::after{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html{font-size:16px;scroll-behavior:smooth;scroll-padding-top:var(--header-height)}
body{font-family:var(--font-main);background-color:var(--background);color:var(--text);line-height:1.6;overflow-x:hidden;transition:background-color var(--transition-fast),color var(--transition-fast)}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;margin-bottom:var(--space-md)}
h1{font-size:4.5rem;font-weight:800;letter-spacing:-.03em;line-height:1}
p{margin-bottom:var(--space-md);font-size:1.1rem}
a{text-decoration:none;color:inherit;transition:color var(--transition-fast)}
img{max-width:100%;height:auto;display:block}
.container{width:100%;max-width:var(--container-width);margin:0 auto;padding:0 var(--space-xl)}
.section-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}
.pattern-grid{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grid' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 60 0 L 0 0 0 60' fill='none' stroke='#ffffff0d' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)'/%3E%3C/svg%3E");opacity:.3;z-index:-1}
.light-mode .pattern-grid{background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grid' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 60 0 L 0 0 0 60' fill='none' stroke='#0a0a180d' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)'/%3E%3C/svg%3E")}
.text-gradient{background:var(--gradient);background-size:200% 200%;animation:gradientShift 10s ease infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;display:inline-block}
.flex{display:flex}
.gap-xxl{gap:var(--space-xxl)}
.items-center{align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-md) var(--space-xl);border-radius:var(--border-radius);font-weight:600;font-size:1rem;position:relative;overflow:hidden;text-align:center;gap:var(--space-sm);z-index:1;transition:transform var(--transition-fast),box-shadow var(--transition-fast);box-shadow:var(--shadow-md);cursor:pointer}
.btn::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,#fff3,transparent);z-index:-1;transform:translateX(-100%);transition:transform .8s ease}
.btn:hover::before{transform:translateX(100%)}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.btn:active{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-primary{background:var(--gradient);background-size:200% 200%;animation:gradientShift 10s ease infinite;color:#fff}
.btn-primary:hover{box-shadow:var(--glow-primary),var(--shadow-lg)}
.btn-secondary{background:transparent;border:2px solid;border-image:var(--gradient) 1;background-clip:padding-box;color:var(--text);transition:color var(--transition-fast),border-image var(--transition-fast)}
.btn-secondary:hover{border-image:var(--gradient-alt) 1}
.btn-icon{transition:transform var(--transition-fast)}
.btn:hover .btn-icon{transform:translateX(5px)}
.hero-badge{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--border-radius);font-weight:600;margin-bottom:var(--space-xl);background:#8338ec1a;color:var(--secondary);transition:background-color var(--transition-fast),color var(--transition-fast)}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--info);position:relative}
.pulse-dot::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:var(--info);animation:pulse 2s infinite}
@keyframes gradientShift {
0%{background-position:0 50%}
50%{background-position:100% 50%}
100%{background-position:0 50%}
}
@keyframes pulse {
0%{transform:scale(1);opacity:.8}
50%{transform:scale(1.5);opacity:0}
100%{transform:scale(1);opacity:0}
}
@keyframes float {
0%,100%{transform:translateY(0)}
50%{transform:translateY(-20px)}
}
@keyframes floatSide {
0%,100%{transform:translateX(0)}
50%{transform:translateX(-20px)}
}
@keyframes scrollWheel {
0%{transform:translateY(0);opacity:1}
100%{transform:translateY(15px);opacity:0}
}
@keyframes arrowBounce {
0%,20%,50%,80%,100%{transform:translateY(0) rotate(45deg)}
40%{transform:translateY(-10px) rotate(45deg)}
60%{transform:translateY(-5px) rotate(45deg)}
}
.hero{min-height:100vh;display:flex;align-items:center;padding-top:var(--header-height);position:relative;overflow:hidden;background:var(--background);transition:background-color var(--transition-fast)}
.hero-content{max-width:800px;margin-right:auto;position:relative;z-index:10}
.hero-title{margin-bottom:var(--space-lg);font-size:4.5rem;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--text);transition:color var(--transition-fast)}
.hero-subtitle{font-size:1.25rem;font-weight:400;margin-bottom:var(--space-xl);color:var(--text);opacity:.8;transition:color var(--transition-fast);max-width:600px}
.hero-features{display:flex;flex-wrap:wrap;gap:var(--space-lg);margin-bottom:var(--space-xl)}
.hero-feature{display:flex;align-items:center;gap:var(--space-sm);color:var(--text);opacity:.9;transition:color var(--transition-fast)}
.hero-feature i{background:var(--gradient);background-size:200% 200%;animation:gradientShift 10s ease infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}
.hero-actions{display:flex;gap:var(--space-md);margin-bottom:var(--space-xxl)}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);padding:var(--space-lg);background:var(--card-bg);border:1px solid var(--border);border-radius:var(--border-radius);box-shadow:var(--shadow-md);transition:background-color var(--transition-fast),border-color var(--transition-fast)}
.counter{display:flex;flex-direction:column;align-items:center;text-align:center}
.counter-value{font-size:3rem;font-weight:800;line-height:1;background:var(--gradient);background-size:200% 200%;animation:gradientShift 10s ease infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}
.counter-label{margin-top:var(--space-xs);color:var(--text);opacity:.8;font-weight:500;transition:color var(--transition-fast)}
.hero-decoration{position:absolute;z-index:1}
/* REMPLACEZ SEULEMENT CES 3 SECTIONS : */

.hero-decoration-1 {
    top: 20%;
    right: 8%; /* Changé de 10% à 8% */
    width: 280px; /* Changé de 300px à 280px */
    height: 280px; /* Changé de 300px à 280px */
    border-radius: 50%;
    background: var(--gradient);
    background-size: 200% 200%;
    animation: gradientShift 10s ease infinite, float 6s ease-in-out infinite;
    filter: blur(60px);
    opacity: 0.2;
}

.hero-decoration-2 {
    bottom: 10%;
    left: 3%; /* Changé de 5% à 3% */
    width: 180px; /* Changé de 200px à 180px */
    height: 180px; /* Changé de 200px à 180px */
    border-radius: 50%;
    background: var(--gradient-boost);
    background-size: 200% 200%;
    animation: gradientShift 10s ease infinite, float 8s ease-in-out infinite;
    filter: blur(50px);
    opacity: 0.15;
}

.hero-decoration-3 {
    top: 30%;
    left: 10%; /* Changé de 15% à 10% */
    width: 130px; /* Changé de 150px à 130px */
    height: 130px; /* Changé de 150px à 130px */
    border-radius: 50%;
    background: var(--gradient-elite);
    background-size: 200% 200%;
    animation: gradientShift 10s ease infinite, floatSide 7s ease-in-out infinite;
    filter: blur(40px);
    opacity: 0.1;
}
.robot-container{position:relative;width:100%;max-width:500px;height:600px;perspective:1200px;margin:0 auto;z-index:5}
.robot{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(-10deg) rotateX(5deg);transition:transform var(--transition-bounce);animation:robotFloat 6s ease-in-out infinite}
.robot:hover{transform:rotateY(10deg) rotateX(5deg)}
.robot-head{position:absolute;top:50px;left:50%;transform:translateX(-50%);width:160px;height:140px;background:var(--card-bg);border-radius:var(--border-radius);border:2px solid var(--primary);box-shadow:0 0 30px #2b7fff4d inset 0 0 20px var(--shadow);z-index:10;transition:all var(--transition-fast)}
.robot-antenna{position:absolute;top:-30px;left:50%;transform:translateX(-50%);z-index:1}
.antenna-base{width:20px;height:20px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px #2b7fffb3}
.antenna-tip{position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:var(--secondary);box-shadow:0 0 15px var(--secondary);animation:pulseTip 2s infinite}
.robot-face{position:absolute;top:30px;left:20px;right:20px;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.robot-eye{position:absolute;width:40px;height:40px;border-radius:50%;background:var(--background);border:2px solid var(--primary);box-shadow:inset 0 0 10px #2b7fff80;top:0;overflow:hidden;transition:all var(--transition-fast)}
.robot-eye-left{left:15px}
.robot-eye-right{right:15px}
.robot-pupil{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:var(--gradient);background-size:200% 200%;animation:gradientShift 10s ease infinite,blinkEyes 5s infinite}
.robot-scan{position:absolute;top:0;left:-5px;width:50px;height:2px;background:var(--info);opacity:.7;animation:scanEyes 3s infinite}
.robot-mouth{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:60px;height:20px;display:flex;flex-direction:column;justify-content:space-between;padding:3px 0}
.robot-mouth-line{height:2px;width:100%;background:var(--primary);animation:pulseMouth 4s infinite}
.robot-mouth-line:nth-child(1){width:80%;align-self:flex-start}
.robot-mouth-line:nth-child(3){width:80%;align-self:flex-end}
.robot-ear{position:absolute;width:15px;height:40px;background:var(--primary-dark);top:50px;border-radius:8px;border:1px solid var(--primary);box-shadow:inset 0 0 5px #2b7fff80}
.robot-ear-left{left:-15px}
.robot-ear-right{right:-15px}
.robot-body{position:absolute;top:190px;left:50%;transform:translateX(-50%);width:220px;height:180px;background:var(--card-bg);border-radius:var(--border-radius);border:2px solid var(--primary);box-shadow:0 0 30px #2b7fff4d inset 0 0 20px var(--shadow);z-index:5;overflow:visible;transition:all var(--transition-fast)}
.robot-torso{position:relative;width:100%;height:100%}
.robot-chest{position:absolute;top:20px;left:0;width:100%;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.robot-logo{width:60px;height:60px;border-radius:50%;background:var(--background);border:2px solid var(--secondary);display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px #8338ec80;margin-bottom:10px;transition:all var(--transition-fast)}
.robot-logo-icon{font-size:24px;background:var(--gradient);background-size:200% 200%;animation:gradientShift 10s ease infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}
.robot-buttons{display:flex;gap:10px;margin-top:15px}
.robot-button{width:12px;height:12px;border-radius:50%;border:1px solid var(--primary)}
.robot-button-1{background:var(--primary);animation:pulseButton 2s infinite}
.robot-button-2{background:var(--secondary);animation:pulseButton 2s infinite .5s}
.robot-button-3{background:var(--danger);animation:pulseButton 2s infinite 1s}
.robot-gauge{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:150px;height:10px;background:var(--background);border-radius:5px;overflow:hidden;border:1px solid var(--primary);transition:all var(--transition-fast)}
.robot-gauge-fill{height:100%;width:80%;background:var(--gradient);background-size:200% 200%;animation:gradientShift 10s ease infinite,gaugeFluctuate 5s infinite}
.robot-arms{position:absolute;top:0;left:0;width:100%;height:100%}
.robot-arm{position:absolute;top:50px;width:30px}
.robot-arm-left{left:-40px;transform-origin:top center;animation:moveLeftArm 8s infinite}
.robot-arm-right{right:-40px;transform-origin:top center;animation:moveRightArm 8s infinite}
.robot-upper-arm{width:30px;height:80px;background:var(--primary-dark);border-radius:15px;border:1px solid var(--primary);position:relative}
.robot-elbow{position:absolute;top:78px;left:5px;width:20px;height:20px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px #2b7fff80}
.robot-forearm{position:absolute;top:96px;left:0;width:30px;height:70px;background:var(--primary-dark);border-radius:15px;border:1px solid var(--primary)}
.robot-hand{position:absolute;top:165px;left:0;width:40px;height:30px;background:var(--primary);border-radius:8px;display:flex;justify-content:space-around;align-items:flex-end;padding-bottom:5px}
.robot-finger{width:6px;height:15px;background:var(--primary-dark);border-radius:3px}
.robot-tablet{position:absolute;top:160px;right:-20px;width:70px;height:50px;background:var(--background);border:2px solid var(--primary);border-radius:8px;overflow:hidden;transition:all var(--transition-fast)}
.robot-tablet-screen{width:100%;height:100%;padding:5px}
.robot-chart{width:100%;height:100%;position:relative}
.robot-chart::before{content:'';position:absolute;top:50%;left:0;width:100%;height:1px;background:var(--primary);opacity:.5}
.robot-chart::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,var(--primary),transparent);background-size:200% 100%;animation:chartScan 3s infinite linear}
.robot-legs{position:absolute;top:178px;left:0;width:100%;height:200px}
.robot-leg{position:absolute;top:0;width:40px}
.robot-leg-left{left:50px}
.robot-leg-right{right:50px}
.robot-thigh{width:40px;height:70px;background:var(--primary-dark);border-radius:20px;border:1px solid var(--primary);position:relative}
.robot-knee{position:absolute;top:68px;left:10px;width:20px;height:20px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px #2b7fff80}
.robot-shin{position:absolute;top:86px;left:0;width:40px;height:70px;background:var(--primary-dark);border-radius:20px;border:1px solid var(--primary)}
.robot-foot{position:absolute;top:154px;left:-10px;width:60px;height:20px;background:var(--primary);border-radius:10px 10px 5px 5px;box-shadow:0 5px 10px #0003}
.robot-shadow{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);width:200px;height:30px;background:#0003;border-radius:50%;filter:blur(10px);animation:shadowPulse 6s infinite ease-in-out}
.robot-glow{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at center,var(--primary) 0%,transparent 70%);opacity:.1;filter:blur(30px);animation:glowPulse 4s infinite ease-in-out}
.robot-particles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.particle{position:absolute;width:8px;height:8px;border-radius:50%;opacity:.7;filter:blur(1px)}
.particle-1{top:30%;left:20%;background:var(--primary);animation:particleFloat 8s infinite ease-in-out}
.particle-2{top:50%;right:15%;background:var(--secondary);animation:particleFloat 7s infinite ease-in-out 1s}
.particle-3{top:70%;left:30%;background:var(--danger);animation:particleFloat 9s infinite ease-in-out 2s}
.particle-4{top:20%;right:25%;background:var(--info);animation:particleFloat 6s infinite ease-in-out 1.5s}
.particle-5{top:80%;right:30%;background:var(--primary);animation:particleFloat 10s infinite ease-in-out .5s}
.particle-6{top:40%;left:15%;background:var(--secondary);animation:particleFloat 7.5s infinite ease-in-out 2.5s}
@keyframes robotFloat {
0%,100%{transform:rotateY(-10deg) rotateX(5deg) translateY(0)}
50%{transform:rotateY(-10deg) rotateX(5deg) translateY(-20px)}
}
@keyframes pulseTip {
0%,100%{opacity:1;box-shadow:0 0 15px var(--secondary)}
50%{opacity:.5;box-shadow:0 0 5px var(--secondary)}
}
@keyframes blinkEyes {
0%,45%,50%,95%,100%{transform:translate(-50%,-50%) scaleY(1)}
48%,98%{transform:translate(-50%,-50%) scaleY(0.1)}
}
@keyframes scanEyes {
0%{top:-2px}
100%{top:40px}
}
@keyframes pulseMouth {
0%,100%{opacity:.8}
50%{opacity:.4}
}
@keyframes pulseButton {
0%,100%{opacity:1;box-shadow:0 0 5px currentColor}
50%{opacity:.5;box-shadow:0 0 2px currentColor}
}
@keyframes gaugeFluctuate {
0%,100%{width:80%}
25%{width:75%}
50%{width:85%}
75%{width:78%}
}
@keyframes moveLeftArm {
0%,100%{transform:rotate(0deg)}
25%{transform:rotate(-5deg)}
50%{transform:rotate(0deg)}
75%{transform:rotate(-5deg)}
}
@keyframes moveRightArm {
0%,100%{transform:rotate(0deg)}
25%{transform:rotate(5deg)}
50%{transform:rotate(0deg)}
75%{transform:rotate(5deg)}
}
@keyframes chartScan {
0%{background-position:-200% 0}
100%{background-position:300% 0}
}
@keyframes shadowPulse {
0%,100%{width:200px;opacity:.2}
50%{width:180px;opacity:.15}
}
@keyframes glowPulse {
0%,100%{opacity:.1}
50%{opacity:.2}
}
@keyframes particleFloat {
0%,100%{transform:translate(0,0)}
25%{transform:translate(10px,-10px)}
50%{transform:translate(0,-20px)}
75%{transform:translate(-10px,-10px)}
}
@media (max-width: 1280px) {
.hero-title{font-size:3.5rem}
.container{padding:0 var(--space-lg)}
}
@media (max-width: 1024px) {
:root{--header-height:80px}
.hero-title{font-size:3rem}
}
@media (max-width: 768px) {
:root{--header-height:70px}
.hero{text-align:center}
.hero-content{margin:0 auto}
.hero-title{font-size:2.5rem}
.hero-features{justify-content:center}
.hero-actions{justify-content:center}
.flex{flex-direction:column}
.robot-container{height:500px;margin-top:var(--space-xl)}
.robot{transform:scale(0.9) rotateY(-10deg) rotateX(5deg)}
.robot:hover{transform:scale(0.9) rotateY(10deg) rotateX(5deg)}
}
@media (max-width: 576px) {
:root{--header-height:60px}
.container{padding:0 var(--space-md)}
.hero-title{font-size:2rem}
.hero-subtitle{font-size:1.1rem}
.hero-features{flex-direction:column;align-items:center;gap:var(--space-md)}
.hero-actions{flex-direction:column;width:100%;gap:var(--space-md)}
.btn{width:100%}
.robot-container{height:400px}
.robot{transform:scale(0.7) rotateY(-10deg) rotateX(5deg)}
.robot:hover{transform:scale(0.7) rotateY(10deg) rotateX(5deg)}
}
@media (max-width: 768px) {
.navbar{padding:10px 15px!important;height:60px!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;border-bottom:1px solid #2b7fff33!important;box-shadow:0 4px 20px #00000026!important}
.mobile-menu-toggle{position:relative!important;width:40px!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:8px!important;transition:background .3s ease!important;z-index:1001!important}
.mobile-menu-toggle:active{background:#2b7fff1a!important}
.hamburger{width:22px!important;height:18px!important}
.hamburger span{display:block!important;position:absolute!important;height:2px!important;background:linear-gradient(to right,#2B7FFF,#8338ec)!important;border-radius:2px!important;transition:.3s cubic-bezier(0.25,1,0.5,1)!important}
.light-mode .hamburger span{background:linear-gradient(to right,#2B7FFF,#8338ec)!important}
.hamburger span:nth-child(1){top:0!important;width:70%!important;left:0!important}
.hamburger span:nth-child(2){top:8px!important;width:100%!important;left:0!important}
.hamburger span:nth-child(3){top:8px!important;width:100%!important;left:0!important}
.hamburger span:nth-child(4){top:16px!important;width:70%!important;left:30%!important}
.hamburger.active span:nth-child(1){top:8px!important;width:0!important;left:50%!important;opacity:0!important}
.hamburger.active span:nth-child(2){transform:rotate(45deg)!important}
.hamburger.active span:nth-child(3){transform:rotate(-45deg)!important}
.hamburger.active span:nth-child(4){top:8px!important;width:0!important;left:50%!important;opacity:0!important}
.mobile-menu{padding:10px 0!important;top:60px!important;border-bottom:1px solid #2b7fff33!important;box-shadow:0 10px 30px #0003!important;transform:translateY(-15px)!important;opacity:0!important;transition:all .3s cubic-bezier(0.25,1,0.5,1)!important;max-height:calc(100vh - 60px)!important;overflow-y:auto!important;background-color:#070d20f2!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
.light-mode .mobile-menu{background-color:#f8fafcf2!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
.mobile-menu.active{transform:translateY(0)!important;opacity:1!important}
.mobile-link{padding:12px 20px!important;border-left:3px solid transparent!important;transition:all .3s ease!important;font-weight:600!important;letter-spacing:.5px!important;display:flex!important;align-items:center!important;color:#fff!important;border-bottom:1px solid #ffffff0d!important}
.light-mode .mobile-link{color:#0f172a!important;border-bottom:1px solid #0000000d!important}
.mobile-link:active{border-left:3px solid #2B7FFF!important;padding-left:25px!important;background-color:#2b7fff1a!important}
.light-mode .mobile-link:active{background-color:#2b7fff0d!important}
.mobile-login-button{margin:15px 20px!important;padding:12px 16px!important;border-radius:8px!important;font-weight:700!important;letter-spacing:.5px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;transition:all .3s ease!important;box-shadow:0 4px 15px #2b7fff33!important;background:linear-gradient(135deg,#2B7FFF,#8338ec)!important;color:#fff!important}
.light-mode .mobile-login-button{background:linear-gradient(135deg,#2B7FFF,#8338ec)!important;color:#fff!important}
.mobile-login-button:active{transform:translateY(-2px)!important;box-shadow:0 6px 20px #2b7fff4d!important}
#hero{min-height:auto!important;padding-top:80px!important;padding-bottom:40px!important;overflow:hidden!important;position:relative!important}
#hero .robot-container{display:none!important}
#hero .flex{flex-direction:column!important}
#hero .hero-content{text-align:left!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0 20px!important;position:relative!important}
#hero .hero-badge{display:inline-flex!important;align-items:center!important;gap:8px!important;padding:6px 12px!important;border-radius:20px!important;margin-bottom:16px!important;position:relative!important;margin-left:0!important;max-width:80%!important;background:#8338ec26!important;border:1px solid #8338ec33!important}
.light-mode #hero .hero-badge{background:#8338ec1a!important;border:1px solid #8338ec26!important}
#hero .hero-badge::after{content:"";position:absolute!important;width:50px!important;height:1px!important;bottom:-8px!important;left:10px!important;background:linear-gradient(to right,#8338ec80,transparent)!important}
.light-mode #hero .hero-badge::after{background:linear-gradient(to right,#8338ec4d,transparent)!important}
#hero .pulse-dot{position:relative!important;width:8px!important;height:8px!important;border-radius:50%!important;background:#8338ec!important}
.light-mode #hero .pulse-dot{background:#8338ec!important}
#hero .pulse-dot::after{content:""!important;position:absolute!important;width:100%!important;height:100%!important;border-radius:50%!important;animation:pulse-badge 2s infinite!important;z-index:-1!important;background:#8338ec!important}
.light-mode #hero .pulse-dot::after{background:#8338ec!important}
@keyframes pulse-badge {
0%{transform:scale(1);opacity:.8}
50%{transform:scale(2);opacity:0}
100%{transform:scale(1);opacity:0}
}
#hero .hero-title{font-size:2.2rem!important;font-weight:800!important;line-height:1.2!important;margin-bottom:14px!important;position:relative!important;padding-left:3px!important}
#hero .hero-title::before{content:""!important;position:absolute!important;left:-3px!important;top:0!important;bottom:0!important;width:3px!important;border-radius:3px!important;background:linear-gradient(to bottom,#2B7FFF,transparent)!important}
.light-mode #hero .hero-title::before{background:linear-gradient(to bottom,#2B7FFF,transparent)!important}
#hero .hero-subtitle{font-size:.95rem!important;line-height:1.5!important;margin-bottom:20px!important;max-width:95%!important;text-align:left!important;position:relative!important;padding-right:10%!important;opacity:.85!important}
.light-mode #hero .hero-subtitle{opacity:.75!important}
#hero .hero-features{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:10px!important;margin-bottom:20px!important;width:100%!important;position:relative!important}
#hero .hero-features .hero-feature:first-child{grid-column:span 2!important;padding:12px!important}
#hero .hero-feature{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;padding:10px!important;border-radius:8px!important;position:relative!important;overflow:hidden!important;background:#0a112866!important;border:1px solid #2b7fff26!important}
.light-mode #hero .hero-feature{background:#f1f5f999!important;border:1px solid #2b7fff1a!important}
#hero .hero-feature::after{content:""!important;position:absolute!important;right:0!important;top:0!important;width:20px!important;height:20px!important;border-radius:0 0 0 4px!important;background:linear-gradient(135deg,transparent 50%,#2b7fff1a 50%)!important}
.light-mode #hero .hero-feature::after{background:linear-gradient(135deg,transparent 50%,#2b7fff14 50%)!important}
#hero .hero-feature i{font-size:1.2rem!important;color:transparent!important;background:linear-gradient(135deg,#2B7FFF,#8338ec)!important;-webkit-background-clip:text!important;background-clip:text!important;flex-shrink:0!important}
#hero .hero-feature span{font-size:.85rem!important;font-weight:500!important;text-align:left!important}
#hero .hero-actions{display:flex!important;flex-direction:row!important;gap:10px!important;margin-bottom:20px!important;width:100%!important;position:relative!important}
#hero .btn-primary{flex:3!important;border-radius:8px!important;padding:12px 16px!important;font-weight:600!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;position:relative!important;overflow:hidden!important;background:linear-gradient(135deg,#2B7FFF,#8338ec)!important;color:#fff!important}
.light-mode #hero .btn-primary{background:linear-gradient(135deg,#2B7FFF,#8338ec)!important;color:#fff!important}
#hero .btn-primary::before{content:""!important;position:absolute!important;top:0!important;left:-100%!important;width:100%!important;height:100%!important;background:linear-gradient(90deg,transparent,#fff3,transparent)!important;transition:left .8s ease!important}
#hero .btn-primary:active::before{left:100%!important}
#hero .btn-secondary{flex:2!important;border-radius:8px!important;padding:12px 16px!important;font-weight:600!important;background:#ffffff0d!important;border:1px solid #2b7fff33!important}
.light-mode #hero .btn-secondary{background:#2b7fff0d!important;border:1px solid #2b7fff33!important}
#hero .hero-stats{display:grid!important;grid-template-columns:1.5fr 1fr 1.5fr!important;gap:10px!important;padding:15px!important;border-radius:8px!important;position:relative!important;overflow:hidden!important;background:#0a112866!important;border:1px solid #2b7fff26!important}
.light-mode #hero .hero-stats{background:#f1f5f999!important;border:1px solid #2b7fff1a!important}
#hero .hero-stats::before{content:""!important;position:absolute!important;top:0!important;left:0!important;width:70%!important;height:3px!important;background:linear-gradient(90deg,#2B7FFF,#8338ec)!important}
.light-mode #hero .hero-stats::before{background:linear-gradient(90deg,#2B7FFF,#8338ec)!important}
#hero .counter{text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important}
#hero .counter:nth-child(2){transform:translateY(-5px)!important}
#hero .counter-value{font-size:1.4rem!important;font-weight:800!important;background:linear-gradient(135deg,#2B7FFF,#8338ec)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;margin-bottom:4px!important}
#hero .counter-label{font-size:.7rem!important;opacity:.8!important}
.light-mode #hero .counter-label{opacity:.7!important}
#hero .hero-content::after{display:block!important;width:90%!important;height:40px!important;margin-top:15px!important;margin-left:0!important;border-radius:8px!important;position:relative!important;overflow:hidden!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Cpath d='M0,15 C20,5 50,25 80,15 C90,10 95,20 100,15 L100,30 L0,30 Z' fill='%23000'/%3E%3C/svg%3E")!important;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Cpath d='M0,15 C20,5 50,25 80,15 C90,10 95,20 100,15 L100,30 L0,30 Z' fill='%23000'/%3E%3C/svg%3E")!important;mask-size:100% 100%!important;-webkit-mask-size:100% 100%!important;background:linear-gradient(90deg,#2b7fff1a,#8338ec26,#2b7fff0d)!important}
.light-mode #hero .hero-content::after{background:linear-gradient(90deg,#2b7fff14,#8338ec1f,#2b7fff0a)!important}
#hero .scroll-indicator{display:none!important}
#hero #dynamic-word{position:relative!important;display:inline-block!important;transition:opacity .3s ease,transform .3s ease!important}
.mobile-robot-transactions{width:100%;display:flex;flex-direction:column;gap:2px}
.mobile-transaction-line{width:100%;height:22px;display:flex;justify-content:space-between;align-items:center;padding:0 .5rem;background:#2b7fff0d;border-radius:4px;position:relative;transition:background .2s ease}
.mobile-transaction-line:active{background:#2b7fff14}
.mobile-transaction-line::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:12px;background:var(--primary);border-radius:1px;opacity:.6}
.mobile-tx-pair{font-size:.65rem;font-weight:600;color:#ffffffb3;letter-spacing:.3px}
.mobile-tx-profit{font-size:.7rem;font-weight:700;color:#38b000;display:flex;align-items:center;gap:2px}
.mobile-tx-profit::before{content:"↑";font-size:.55rem;opacity:.8}
.mobile-transaction-line{opacity:0;animation:fadeInUp .4s ease forwards}
.mobile-transaction-line:nth-child(1){animation-delay:.05s}
.mobile-transaction-line:nth-child(2){animation-delay:.1s}
.mobile-transaction-line:nth-child(3){animation-delay:.15s}
.mobile-transaction-line:nth-child(4){animation-delay:.2s}
.mobile-transaction-line:nth-child(5){animation-delay:.25s}
.mobile-transaction-line:nth-child(6){animation-delay:.3s}
.light-mode .mobile-chest-body{background:#ffffffb3;border:1px solid #2b7fff14;box-shadow:0 4px 24px #00000014}
.light-mode .mobile-chest-header{border-bottom:1px solid #0000000d}
.light-mode .mobile-chest-icon{background:#2b7fff1a}
.light-mode .mobile-chest-title{color:#000000b3}
.light-mode .mobile-transaction-line{background:#2b7fff08}
.light-mode .mobile-tx-pair{color:#000000b3}
@media (max-width: 375px) {
#hero .hero-title{font-size:2rem!important}
#hero .hero-subtitle{font-size:.9rem!important}
#hero .hero-features{gap:8px!important}
#hero .hero-actions{flex-direction:column!important}
#hero .btn-primary,#hero .btn-secondary{width:100%!important;padding:10px 16px!important}
}
}
.hero-performance-widget{display:inline-block;background:linear-gradient(135deg,#ffffff08,#ffffff03);border:1px solid #4361ee26;border-radius:16px;padding:1px;position:relative;overflow:hidden;margin:1.5rem 0;width:100%;max-width:450px}
.hero-performance-widget::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#4361ee80,transparent);animation:shimmer 3s infinite}
@keyframes shimmer {
0%{transform:translateX(-100%)}
100%{transform:translateX(100%)}
}
.widget-content{background:#0a0f1e66;backdrop-filter:blur(20px);border-radius:15px;padding:1rem 1.25rem;display:flex;align-items:center;gap:1.25rem}
.widget-icon{width:40px;height:40px;background:linear-gradient(135deg,#4361ee33,#7209b733);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.widget-icon i{font-size:1.1rem;background:linear-gradient(135deg,#4361EE,#7209B7);-webkit-background-clip:text;background-clip:text;color:transparent}
.widget-data{flex:1;display:flex;flex-direction:column;gap:.5rem}
.widget-label{font-size:.75rem;color:#fff9;font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.widget-chart{height:20px;display:flex;align-items:flex-end;gap:2px}
.chart-bar{flex:1;background:linear-gradient(to top,#4361EE,#7209B7);border-radius:2px;opacity:0;transform:scaleY(0);transform-origin:bottom;transition:all .5s cubic-bezier(0.4,0,0.2,1);position:relative}
.chart-bar.animate{opacity:1;transform:scaleY(1)}
.chart-bar::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to top,transparent,#ffffff1a);border-radius:2px}
.widget-result{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}
.result-value{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,#4361EE,#7209B7);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.result-trend{display:flex;align-items:center;gap:.25rem;font-size:.7rem;color:#38b000}
.result-trend i{font-size:.6rem}
.light-mode .hero-performance-widget{background:linear-gradient(135deg,#ffffffe6,#f8f9fae6);border-color:#4361ee1a}
.light-mode .widget-content{background:#fffc}
.light-mode .widget-icon{background:linear-gradient(135deg,#4361ee1a,#7209b71a)}
.light-mode .widget-label{color:#00000080}
.light-mode .hero-performance-widget::before{background:linear-gradient(90deg,transparent,#4361ee4d,transparent)}
@media (max-width: 768px) {
.hero-performance-widget{max-width:100%}
.widget-content{padding:.875rem 1rem;gap:1rem}
.widget-icon{width:36px;height:36px}
.widget-icon i{font-size:1rem}
.widget-label{font-size:.7rem}
.widget-chart{height:18px}
.result-value{font-size:1.35rem}
}
@media (max-width: 480px) {
.widget-content{padding:.75rem;gap:.75rem}
.widget-icon{width:32px;height:32px;border-radius:10px}
.widget-chart{gap:1.5px}
.result-value{font-size:1.25rem}
}
.hero .scroll-indicator{position:relative!important;left:10px!important;top:-2px!important;transform:none!important;bottom:auto!important;margin:0!important}
.hero-actions{display:flex!important;align-items:flex-start!important;gap:var(--space-md)!important;margin-bottom:var(--space-xxl)!important}
.hero .scroll-indicator:hover{opacity:1!important;transform:none!important;scale:1!important}
.hero .scroll-indicator{scale:1!important}
.robot-transactions{width:95%!important;height:100px!important;display:flex!important;flex-direction:column!important;justify-content:space-around!important;gap:2px!important;padding:8px 12px!important}
.transaction-line{width:100%!important;height:16px!important;display:flex!important;justify-content:space-between!important;align-items:center!important;padding:2px 16px!important;background:#2b7fff1f!important;border:none!important;border-left:4px solid var(--primary)!important;border-radius:4px!important}
.tx-pair{flex:1!important;text-align:left!important;font-size:14px!important;font-weight:600!important;color:#2b7fffe6!important;line-height:1!important}
.tx-profit{flex:0 0 auto!important;text-align:right!important;font-size:14px!important;font-weight:700!important;color:#38b000!important;line-height:1!important}
@media (max-width: 768px) {
.hero-performance-widget{display:none!important}
.mobile-robot-chest{display:block!important;width:100%;max-width:320px;margin:1.25rem auto;position:relative}
.mobile-chest-body{background:#0a112899;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:12px;padding:.75rem;position:relative;overflow:hidden;border:1px solid #2b7fff1a;box-shadow:0 4px 24px #00000026}
.mobile-chest-body::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#2b7fff80,transparent)}
.mobile-chest-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid #ffffff0d}
.mobile-chest-icon{width:24px;height:24px;background:#2b7fff26;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mobile-chest-icon i{font-size:.75rem;color:var(--primary);opacity:.9}
.mobile-chest-title{font-size:.7rem;font-weight:700;letter-spacing:1px;color:#ffffffb3;text-transform:uppercase;margin:0}
.mobile-chest-status{position:absolute;top:.75rem;right:.75rem;width:6px;height:6px;background:#38b000;border-radius:50%;box-shadow:0 0 8px #38b00099;animation:subtlePulse 3s ease-in-out infinite}
@keyframes subtlePulse {
0%,100%{opacity:.6}
50%{opacity:1}
}
@keyframes fadeInUp {
to{opacity:1;transform:translateY(0)}
from{opacity:0;transform:translateY(5px)}
}
@media (max-width: 375px) {
.mobile-robot-chest{max-width:100%;padding:0 15px}
.mobile-chest-body{padding:.6rem}
.mobile-transaction-line{height:20px;padding:0 .4rem}
.mobile-tx-pair{font-size:.6rem}
.mobile-tx-profit{font-size:.65rem}
}
}
@media (min-width: 769px) {
.mobile-robot-chest{display:none!important}
}
@media (max-width: 768px) {
.hero{margin-top:25px}
}
html[style]{overflow-x:hidden!important}
body[style]{overflow-x:hidden!important}
.hero-title{font-size:3rem;line-height:1.1;max-width:580px;text-align:left;margin-bottom:1.5rem}
@media (max-width: 1024px) {
.hero-title{font-size:2.6rem;max-width:480px;line-height:1.15}
}
@media (max-width: 768px) {
.hero-title{font-size:2.1rem;max-width:340px;line-height:1.2;margin-bottom:1.2rem}
}
@media (max-width: 480px) {
.hero-title{font-size:1.8rem;max-width:270px;line-height:1.25}
}
@media (max-width: 360px) {
.hero-title{font-size:1.6rem;max-width:240px;line-height:1.3}
}
#dynamic-word{display:inline-block;min-width:0;text-align:left}
.dubai-visualization{position:relative;width:100%;max-width:480px;height:520px;margin:0 auto;display:none;perspective:1200px;-webkit-font-smoothing:antialiased;image-rendering:crisp-edges}
.dubai-skyline{position:relative;width:100%;height:420px;display:flex;align-items:flex-end;justify-content:center;gap:6px;transform-style:preserve-3d;background:linear-gradient(to top,#0000000d 0%,transparent 15%)}
.burj-main{position:relative;width:45px;height:380px;background:linear-gradient(135deg,var(--card-bg) 0%,#2b7fff0a 15%,var(--background) 30%,#8338ec08 45%,var(--card-bg) 60%,#2b7fff05 75%,var(--background) 100%);border:1px solid #2b7fff2e;border-left:1px solid #2b7fff1f;border-right:1px solid #8338ec1f;border-radius:3px 3px 0 0;box-shadow:inset 3px 0 12px #0000001f inset -3px 0 12px #0000001f inset 0 -15px 30px #0000002e inset 0 5px 15px #ffffff08 inset 1px 0 2px #2b7fff26 inset -1px 0 2px #8338ec26 0 0 25px #2b7fff1a 0 0 50px #8338ec0d 0 12px 35px #00000040 0 6px 20px #00000026 0 3px 10px #0000001a;animation:buildingGlow 5s ease-in-out infinite;z-index:10;order:5;backface-visibility:hidden;transform:translateZ(0);will-change:box-shadow;filter:contrast(1.02) brightness(1.01)}
.burj-main::before{content:'';position:absolute;top:8%;left:3px;width:calc(100% - 6px);height:85%;background:repeating-linear-gradient(180deg,#ffffff06 0%,transparent 8%,transparent 16%,#2b7fff05 20%,transparent 24%,transparent 32%,#8338ec04 36%,transparent 40%,transparent 48%,#ffffff05 52%,transparent 56%,transparent 100%);border-radius:2px;pointer-events:none}
.building-spire{position:absolute;top:-70px;left:50%;transform:translateX(-50%);width:4px;height:70px;background:linear-gradient(to top,var(--primary) 0%,#2b7fffe6 25%,#8338ecd9 60%,#fffffff2 90%,#ffff 100%);border-radius:2px;box-shadow:0 0 15px #2b7fff80 0 0 30px #8338ec4d 0 4px 10px #0006 inset 0 2px 4px #fff6}
.spire-tip{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:8px;height:8px;background:radial-gradient(circle,#ffff 0%,#2b7fffe6 30%,var(--secondary) 60%,#2b7fff99 100%);border-radius:50%;box-shadow:0 0 25px #fffc 0 0 50px var(--secondary),0 0 75px #2b7fff99 0 4px 8px #00000080;animation:spireGlow 3s ease-in-out infinite}
.spire-antenna{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:2px;height:15px;background:linear-gradient(to top,#2b7fffb3 0%,#fffffff2 40%,#ffff 60%,#2b7fffe6 100%);border-radius:1px;animation:antennaFlash 4s ease-in-out infinite;box-shadow:0 0 12px #ffffffb3 0 0 20px #2b7fffcc}
.building-upper{position:absolute;top:0;width:100%;height:30%;background:repeating-linear-gradient(90deg,transparent 0%,#ffffff02 20%,transparent 40%),linear-gradient(135deg,var(--card-bg) 0%,#2b7fff06 35%,var(--background) 65%,#8338ec05 100%);border-radius:3px 3px 0 0;box-shadow:inset 0 -10px 20px #0000001a inset 2px 0 8px #0000000f inset -2px 0 8px #0000000f inset 0 3px 6px #ffffff08;border-bottom:1px solid #2b7fff14}
.building-middle{position:absolute;top:30%;width:100%;height:40%;background:repeating-linear-gradient(90deg,transparent 0%,#8338ec02 25%,transparent 50%),linear-gradient(135deg,var(--card-bg) 0%,#8338ec08 25%,var(--background) 50%,#2b7fff06 75%,var(--background) 100%);border-top:1px solid #2b7fff14;border-bottom:1px solid #8338ec14;box-shadow:inset 0 -8px 16px #00000014 inset 2px 0 10px #0000000f inset -2px 0 10px #0000000f}
.building-base{position:absolute;top:70%;width:100%;height:30%;background:repeating-linear-gradient(90deg,transparent 0%,#00000004 15%,transparent 30%),linear-gradient(135deg,var(--card-bg) 0%,#00000006 15%,var(--background) 40%,#2b7fff05 70%,var(--card-bg) 100%);border-top:1px solid #8338ec14;box-shadow:inset 0 10px 30px #00000026 inset 3px 0 12px #0000001a inset -3px 0 12px #0000001a inset 0 -4px 8px #00000014}
.floor-lights{position:relative;width:100%;height:18%;margin:3px 0;display:flex;justify-content:space-around;align-items:center;padding:0 6px}
.floor-lights::before,.floor-lights::after{content:'';width:4px;height:2px;background:linear-gradient(90deg,transparent 0%,#2b7fff4d 15%,#ffffffe6 50%,#2b7fff4d 85%,transparent 100%);border-radius:1px;opacity:.9;animation:floorLightFlicker 7s ease-in-out infinite;box-shadow:0 0 8px #2b7fff80 0 0 15px #ffffff4d inset 0 0 3px #fff9}
.floor-lights::after{animation-delay:2s;background:linear-gradient(90deg,transparent 0%,#8338ec4d 15%,#ffffffe6 50%,#8338ec4d 85%,transparent 100%);box-shadow:0 0 8px #8338ec80 0 0 15px #ffffff4d}
.building-left-1{width:20px;height:130px;background:linear-gradient(135deg,var(--card-bg) 0%,#2b7fff04 50%,var(--background) 100%);border:1px solid #2b7fff1a;border-radius:2px 2px 0 0;order:1;opacity:.88;transform:translateZ(-35px) rotateY(1deg);box-shadow:inset 1px 0 4px #00000014 0 4px 12px #0000001f 0 0 8px #2b7fff0a;filter:blur(0.2px) contrast(0.98)}
.building-left-2{width:24px;height:170px;background:linear-gradient(135deg,var(--card-bg) 0%,#8338ec05 50%,var(--background) 100%);border:1px solid #8338ec1a;border-radius:2px 2px 0 0;order:2;opacity:.9;transform:translateZ(-28px) rotateY(0.5deg);box-shadow:inset 1px 0 5px #00000014 0 5px 15px #00000024 0 0 10px #8338ec0a;filter:blur(0.15px) contrast(0.99)}
.tower-left{width:28px;height:220px;background:linear-gradient(135deg,var(--card-bg) 0%,#2b7fff05 50%,var(--background) 100%);border:1px solid #2b7fff1f;border-radius:2px 2px 0 0;order:3;opacity:.92;transform:translateZ(-20px) rotateY(0.8deg);box-shadow:inset 1px 0 6px #00000014 0 6px 18px #00000029 0 0 12px #2b7fff0f;filter:contrast(1.01)}
.building-left-close{width:32px;height:260px;background:linear-gradient(135deg,var(--card-bg) 0%,#2b7fff06 40%,var(--background) 70%,#8338ec05 100%);border:1px solid #2b7fff26;border-radius:2px 2px 0 0;order:4;opacity:.94;transform:translateZ(-12px) rotateY(-0.3deg);box-shadow:inset 1px 0 8px #0000001a 0 8px 22px #0000002e 0 0 15px #2b7fff12}
.tower-right{width:34px;height:270px;background:linear-gradient(135deg,var(--card-bg) 0%,#8338ec06 40%,var(--background) 70%,#2b7fff05 100%);border:1px solid #8338ec1f;border-radius:2px 2px 0 0;order:6;opacity:.92;transform:translateZ(-15px) rotateY(-1deg);box-shadow:inset -1px 0 6px #00000014 0 8px 20px #0000002e 0 0 12px #8338ec0f}
.building-right-close{width:30px;height:240px;background:linear-gradient(135deg,var(--card-bg) 0%,#8338ec06 50%,var(--background) 100%);border:1px solid #8338ec26;border-radius:2px 2px 0 0;order:7;opacity:.93;transform:translateZ(-14px) rotateY(-0.5deg);box-shadow:inset -1px 0 7px #00000017 0 7px 18px #00000029 0 0 12px #8338ec0f}
.building-right-1{width:22px;height:150px;background:linear-gradient(135deg,var(--card-bg) 0%,#2b7fff05 50%,var(--background) 100%);border:1px solid #2b7fff1a;border-radius:2px 2px 0 0;order:8;opacity:.88;transform:translateZ(-30px) rotateY(-1.2deg);box-shadow:inset -1px 0 5px #00000014 0 5px 12px #00000021;filter:blur(0.2px) contrast(0.98)}
.building-right-2{width:18px;height:110px;background:linear-gradient(135deg,var(--card-bg) 0%,#8338ec04 50%,var(--background) 100%);border:1px solid #8338ec14;border-radius:1px 1px 0 0;order:9;opacity:.85;transform:translateZ(-38px) rotateY(-1.5deg);box-shadow:inset -1px 0 4px #00000012 0 4px 10px #0000001c;filter:blur(0.3px) contrast(0.97)}
.building-back-left{position:absolute;left:50px;width:14px;height:85px;background:linear-gradient(135deg,var(--card-bg) 0%,var(--background) 100%);border:1px solid #2b7fff0f;opacity:.7;transform:translateZ(-45px) rotateY(2deg);box-shadow:0 3px 8px #0000001a;filter:blur(0.4px) contrast(0.95)}
.building-back-right{position:absolute;right:55px;width:16px;height:95px;background:linear-gradient(135deg,var(--card-bg) 0%,var(--background) 100%);border:1px solid #8338ec0f;opacity:.72;transform:translateZ(-42px) rotateY(-2deg);box-shadow:0 3px 9px #0000001c;filter:blur(0.35px) contrast(0.96)}
.tower-back{position:absolute;right:80px;width:22px;height:160px;background:linear-gradient(135deg,var(--card-bg) 0%,#2b7fff02 50%,var(--background) 100%);border:1px solid #2b7fff0f;opacity:.68;transform:translateZ(-32px) rotateY(1.5deg);box-shadow:0 4px 12px #0000001f 0 0 10px #2b7fff06;filter:blur(0.5px) contrast(0.94)}
.building-left-1::before,.building-left-2::before,.building-left-close::before,.building-right-close::before,.building-right-1::before,.building-right-2::before{content:'';position:absolute;top:0;left:0;width:100%;height:14px;background:linear-gradient(135deg,#2b7fff66 0%,#8338ec80 50%,#2b7fff66 100%);border-radius:2px 2px 0 0;opacity:.8;box-shadow:0 0 8px #2b7fff4d 0 2px 4px #0003 inset 0 1px 2px #fff3}
.building-left-2::after,.building-left-close::after,.building-right-close::after{content:'';position:absolute;top:25%;left:2px;width:calc(100% - 4px);height:50%;background:repeating-linear-gradient(to bottom,transparent 0%,transparent 10px,#2b7fff26 10px,#2b7fff26 12px,transparent 12px,transparent 22px);opacity:.6;animation:buildingLightsSlow 10s ease-in-out infinite}
.building-left-close::after{animation-delay:3s}
.building-right-close::after{animation-delay:6s;background:repeating-linear-gradient(to bottom,transparent 0%,transparent 10px,#8338ec26 10px,#8338ec26 12px,transparent 12px,transparent 22px)}
.building-top,.building-crown{width:100%;height:16px;background:linear-gradient(135deg,#2b7fff99 0%,#8338eccc 50%,#2b7fff99 100%);border-radius:2px 2px 0 0;opacity:.85;box-shadow:0 0 12px #2b7fff66 0 0 25px #8338ec4d 0 3px 6px #00000040 inset 0 1px 3px #ffffff40}
.building-body{width:100%;height:calc(100% - 16px);display:flex;flex-direction:column;justify-content:space-around;padding:6px 0;background:linear-gradient(90deg,transparent 0%,#00000005 50%,transparent 100%)}
.dubai-effects{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}
.light-beam{position:absolute;width:2px;background:linear-gradient(to top,transparent 0%,#2b7fff33 25%,#2b7fff66 50%,#2b7fff33 75%,transparent 100%);opacity:.7;animation:beamScan 8s ease-in-out infinite;filter:blur(0.4px);box-shadow:0 0 6px #2b7fff4d}
.beam-1{height:220px;left:50%;bottom:110px;animation-delay:0s}
.beam-2{height:170px;left:28%;bottom:85px;animation-delay:2.5s;background:linear-gradient(to top,transparent 0%,#8338ec33 25%,#8338ec66 50%,#8338ec33 75%,transparent 100%)}
.beam-3{height:190px;left:72%;bottom:125px;animation-delay:5s}
.floating-particle{position:absolute;width:5px;height:5px;background:radial-gradient(circle,#fff6 0%,#2b7fff4d 40%,#8338ec33 80%,transparent 100%);border-radius:50%;opacity:.8;animation:particleFloat 12s ease-in-out infinite;filter:blur(0.3px);box-shadow:0 0 4px #2b7fff4d}
.particle-1{top:15%;left:18%;animation-delay:0s}
.particle-2{top:35%;right:22%;animation-delay:3s;background:radial-gradient(circle,#ffffff59 0%,#8338ec4d 40%,#ff006e33 80%,transparent 100%)}
.particle-3{top:55%;left:12%;animation-delay:6s}
.particle-4{top:25%;right:12%;animation-delay:9s}
@keyframes buildingGlow {
0%,100%{box-shadow:inset 3px 0 12px #0000001f inset -3px 0 12px #0000001f inset 0 -15px 30px #0000002e inset 0 5px 15px #ffffff08 inset 1px 0 2px #2b7fff26 inset -1px 0 2px #8338ec26 0 0 25px #2b7fff1a 0 0 50px #8338ec0d 0 12px 35px #00000040 0 6px 20px #00000026 0 3px 10px #0000001a;filter:contrast(1.02) brightness(1.01)}
50%{box-shadow:inset 4px 0 16px #00000026 inset -4px 0 16px #00000026 inset 0 -20px 40px #00000038 inset 0 6px 20px #ffffff0a inset 1px 0 3px #2b7fff33 inset -1px 0 3px #8338ec33 0 0 35px #2b7fff26 0 0 70px #8338ec14 0 15px 45px #0000004d 0 8px 25px #0000002e 0 4px 15px #0000001f;filter:contrast(1.03) brightness(1.02)}
}
@keyframes spireGlow {
0%,100%{box-shadow:0 0 25px #fffc 0 0 50px var(--secondary),0 0 75px #2b7fff99 0 4px 8px #00000080;opacity:1}
50%{box-shadow:0 0 35px #ffff 0 0 70px var(--secondary),0 0 100px #2b7fffcc 0 5px 12px #0009;opacity:.95}
}
@keyframes antennaFlash {
0%,85%,100%{opacity:.8;box-shadow:0 0 12px #ffffffb3 0 0 20px #2b7fffcc}
90%,95%{opacity:1;box-shadow:0 0 20px #ffff 0 0 35px #2b7fffff}
}
@keyframes floorLightFlicker {
0%,100%{opacity:.9}
12%{opacity:.4}
18%{opacity:1}
28%{opacity:.3}
35%{opacity:.95}
48%{opacity:.5}
58%{opacity:1}
68%{opacity:.6}
78%{opacity:.9}
88%{opacity:.45}
95%{opacity:.85}
}
@keyframes buildingLightsSlow {
0%,100%{opacity:.6}
15%{opacity:.25}
30%{opacity:.8}
45%{opacity:.35}
60%{opacity:.7}
75%{opacity:.4}
90%{opacity:.65}
}
@keyframes beamScan {
0%{opacity:0;transform:translateY(70px) scale(0.8)}
25%{opacity:.4;transform:translateY(35px) scale(0.9)}
50%{opacity:.7;transform:translateY(0) scale(1)}
75%{opacity:.4;transform:translateY(-35px) scale(0.9)}
100%{opacity:0;transform:translateY(-70px) scale(0.8)}
}
@keyframes particleFloat {
0%,100%{transform:translateY(0) rotate(0deg) scale(1);opacity:.8}
25%{transform:translateY(-18px) rotate(90deg) scale(1.1);opacity:1}
50%{transform:translateY(-40px) rotate(180deg) scale(0.9);opacity:.5}
75%{transform:translateY(-22px) rotate(270deg) scale(1.05);opacity:.9}
}
.dubai-branding{position:absolute;bottom:20px;right:0;text-align:right;z-index:15}
.brand-line{width:60px;height:2px;background:var(--gradient);margin-left:auto;margin-bottom:8px;animation:brandLineGlow 3s ease-in-out infinite}
.brand-text{display:block;font-size:1.1rem;font-weight:300;line-height:1.2}
.brand-building{display:block;color:var(--text);opacity:.7;font-size:.9rem;letter-spacing:1px;text-transform:lowercase}
.brand-dubai{display:block;background:var(--gradient);background-size:200% 200%;animation:gradientShift 10s ease infinite;-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;font-size:1.3rem;letter-spacing:2px}
.brand-subtitle{font-size:.75rem;color:var(--text);opacity:.6;margin-top:4px;font-style:italic}
@keyframes brandLineGlow {
0%,100%{opacity:.8}
50%{opacity:1}
}
@media (min-width: 769px) {
.dubai-visualization{display:block!important}
}
@media (max-width: 768px) {
.dubai-visualization{display:none!important}
}
@media (max-width: 1200px) {
.dubai-visualization{max-width:420px;height:480px}
.dubai-skyline{height:380px}
.burj-main{height:340px;width:40px}
.building-left-1{height:110px;width:18px}
.building-left-2{height:145px;width:22px}
.tower-left{height:185px;width:25px}
.building-left-close{height:220px;width:28px}
.tower-right{height:230px;width:30px}
.building-right-close{height:200px;width:26px}
.building-right-1{height:125px;width:20px}
.building-right-2{height:95px;width:16px}
.tower-back{height:135px;width:20px}
.building-back-left{height:70px;width:12px}
.building-back-right{height:80px;width:14px}
}
@media (max-width: 768px) {
.brand-text,.dubai-branding{display:none!important}
}
body.light-mode .burj-main{background:linear-gradient(135deg,#fffffff2 0%,#f8fafcff 15%,#fffffffa 30%,#f8fafcf2 45%,#ffff 60%,#f8fafcfa 75%,#fffffff2 100%);border:2px solid #1e40af66;box-shadow:inset 3px 0 12px #1e40af14 inset -3px 0 12px #1e40af14 inset 0 -15px 30px #1e40af1f inset 0 5px 15px #fffc inset 1px 0 2px #1e40af33 inset -1px 0 2px #1e40af33 0 0 25px #1e40af4d 0 0 50px #1e40af33 0 12px 35px #1e40af26 0 6px 20px #1e40af1a 0 3px 10px #1e40af14}
body.light-mode .building-upper{background:repeating-linear-gradient(90deg,transparent 0%,#1e40af0d 20%,transparent 40%),linear-gradient(135deg,#ffff 0%,#f8fafcf2 35%,#fffffffa 65%,#f8fafcff 100%);border-bottom:1px solid #1e40af26;box-shadow:inset 0 -10px 20px #1e40af0f inset 2px 0 8px #1e40af0a inset -2px 0 8px #1e40af0a inset 0 3px 6px #ffffffe6}
body.light-mode .building-middle{background:repeating-linear-gradient(90deg,transparent 0%,#1e40af0a 25%,transparent 50%),linear-gradient(135deg,#fffffffa 0%,#f8fafcff 25%,#ffff 50%,#f8fafcf2 75%,#fffffffa 100%);border-top:1px solid #1e40af26;border-bottom:1px solid #1e40af1f;box-shadow:inset 0 -8px 16px #1e40af0d inset 2px 0 10px #1e40af0a inset -2px 0 10px #1e40af0a}
body.light-mode .building-base{background:repeating-linear-gradient(90deg,transparent 0%,#1e40af0f 15%,transparent 30%),linear-gradient(135deg,#ffff 0%,#f0f4f8ff 15%,#fffffff2 40%,#f8fafcff 70%,#fffffffa 100%);border-top:1px solid #1e40af1f;box-shadow:inset 0 10px 30px #1e40af14 inset 3px 0 12px #1e40af0f inset -3px 0 12px #1e40af0f inset 0 -4px 8px #1e40af0d}
body.light-mode .building-left-1,body.light-mode .building-left-2,body.light-mode .tower-left,body.light-mode .building-left-close,body.light-mode .tower-right,body.light-mode .building-right-close,body.light-mode .building-right-1,body.light-mode .building-right-2{background:linear-gradient(135deg,#fffffffa 0%,#f8fafcff 50%,#fffffff2 100%)!important;border:1px solid #1e40af4d;box-shadow:inset 1px 0 6px #1e40af0f 0 0 15px #1e40af26 0 5px 20px #1e40af1a}
body.light-mode .building-back-left,body.light-mode .building-back-right,body.light-mode .tower-back{background:linear-gradient(135deg,#ffffffe6 0%,#f8fafcf2 100%)!important;border:1px solid #1e40af33}
body.light-mode .building-body{background:linear-gradient(90deg,transparent 0%,#1e40af08 50%,transparent 100%)}
body.light-mode .burj-main::before{background:repeating-linear-gradient(180deg,#1e40af14 0%,transparent 8%,transparent 16%,#1e40af0f 20%,transparent 24%,transparent 32%,#1e40af0a 36%,transparent 40%,transparent 48%,#1e40af0d 52%,transparent 56%,transparent 100%)}
body.light-mode .dubai-skyline{background:transparent!important}
body.light-mode{--building-bg:#fffffffa;--building-border:#1e40af4d;--building-border-secondary:#1e40af40;--building-shadow:#1e40af1a;--building-glow:#1e40af33;--building-text:#1e40afe6;--particle-color:#1e40afb3;--window-light:#ffffffe6;--window-accent-blue:#1e40af14;--window-accent-purple:#1e40af0f}
body.light-mode .dubai-visualization::before,body.light-mode .dubai-visualization::after{content:'';position:absolute;width:3px;height:3px;background:radial-gradient(circle,#ffff 0%,#1e40afcc 40%,#1e40af66 80%,transparent 100%);border-radius:50%;box-shadow:0 0 8px #ffffffe6 0 0 16px #1e40af99 inset 0 0 4px #ffff;animation:lightModeParticleFloat 12s ease-in-out infinite;z-index:8}
body.light-mode .dubai-visualization::before{top:25%;left:12%;animation-delay:2s}
body.light-mode .dubai-visualization::after{top:60%;right:15%;animation-delay:6s}
@keyframes lightModeParticleFloat {
0%,100%{transform:translateY(0) rotate(0deg) scale(1);opacity:.9}
25%{transform:translateY(-20px) rotate(90deg) scale(1.2);opacity:1}
50%{transform:translateY(-35px) rotate(180deg) scale(0.8);opacity:.7}
75%{transform:translateY(-15px) rotate(270deg) scale(1.1);opacity:.95}
}
body.light-mode .burj-main::before{content:'';position:absolute;top:10%;left:8%;width:calc(100% - 16%);height:80%;background:radial-gradient(circle at 25% 20%,#1e40afb3 1.5px,transparent 1.5px),radial-gradient(circle at 75% 25%,#1e40afcc 1.2px,transparent 1.2px),radial-gradient(circle at 50% 35%,#1e40af99 1.8px,transparent 1.8px),radial-gradient(circle at 30% 50%,#1e40afe6 1px,transparent 1px),radial-gradient(circle at 70% 55%,#1e40afb3 1.4px,transparent 1.4px),radial-gradient(circle at 20% 70%,#1e40afcc 1.3px,transparent 1.3px),radial-gradient(circle at 80% 75%,#1e40af99 1.6px,transparent 1.6px),radial-gradient(circle at 45% 85%,#1e40afb3 1.1px,transparent 1.1px);background-size:100% 100%;animation:burjInteriorDots 8s ease-in-out infinite;pointer-events:none;z-index:1}
body.light-mode .building-upper::after{content:'';position:absolute;top:20%;left:15%;width:70%;height:60%;background:radial-gradient(circle at 30% 30%,#1e40afcc 1px,transparent 1px),radial-gradient(circle at 70% 40%,#1e40af99 1.2px,transparent 1.2px),radial-gradient(circle at 50% 70%,#1e40afb3 0.8px,transparent 0.8px);background-size:100% 100%;animation:sectionInteriorDots 6s ease-in-out infinite;pointer-events:none}
body.light-mode .building-middle::after{content:'';position:absolute;top:15%;left:12%;width:76%;height:70%;background:radial-gradient(circle at 25% 25%,#1e40afb3 1.1px,transparent 1.1px),radial-gradient(circle at 75% 30%,#1e40afcc 0.9px,transparent 0.9px),radial-gradient(circle at 40% 60%,#1e40af99 1.3px,transparent 1.3px),radial-gradient(circle at 60% 80%,#1e40afb3 1px,transparent 1px);background-size:100% 100%;animation:sectionInteriorDots 7s ease-in-out infinite;animation-delay:2s;pointer-events:none}
body.light-mode .building-base::after{content:'';position:absolute;top:10%;left:10%;width:80%;height:80%;background:radial-gradient(circle at 35% 20%,#1e40afcc 1.2px,transparent 1.2px),radial-gradient(circle at 65% 35%,#1e40af99 1.4px,transparent 1.4px),radial-gradient(circle at 20% 60%,#1e40afb3 1px,transparent 1px),radial-gradient(circle at 80% 70%,#1e40afcc 1.1px,transparent 1.1px),radial-gradient(circle at 50% 85%,#1e40af99 1.3px,transparent 1.3px);background-size:100% 100%;animation:sectionInteriorDots 9s ease-in-out infinite;animation-delay:4s;pointer-events:none}
body.light-mode .building-left-1::after{content:'';position:absolute;top:15%;left:15%;width:70%;height:70%;background:radial-gradient(circle at 30% 30%,#1e40afb3 1px,transparent 1px),radial-gradient(circle at 70% 60%,#1e40afcc 1.2px,transparent 1.2px),radial-gradient(circle at 50% 80%,#1e40af99 0.9px,transparent 0.9px);background-size:100% 100%;animation:buildingInteriorDots 5s ease-in-out infinite;pointer-events:none}
body.light-mode .building-left-2::after{content:'';position:absolute;top:12%;left:12%;width:76%;height:76%;background:radial-gradient(circle at 25% 25%,#1e40afcc 1.1px,transparent 1.1px),radial-gradient(circle at 75% 40%,#1e40af99 1.3px,transparent 1.3px),radial-gradient(circle at 40% 70%,#1e40afb3 1px,transparent 1px),radial-gradient(circle at 60% 85%,#1e40afcc 1.2px,transparent 1.2px);background-size:100% 100%;animation:buildingInteriorDots 6s ease-in-out infinite;animation-delay:1.5s;pointer-events:none}
body.light-mode .building-left-close::after{content:'';position:absolute;top:10%;left:10%;width:80%;height:80%;background:radial-gradient(circle at 20% 20%,#1e40afb3 1.2px,transparent 1.2px),radial-gradient(circle at 80% 25%,#1e40afcc 1px,transparent 1px),radial-gradient(circle at 35% 50%,#1e40af99 1.4px,transparent 1.4px),radial-gradient(circle at 65% 55%,#1e40afb3 1.1px,transparent 1.1px),radial-gradient(circle at 25% 80%,#1e40afcc 1.3px,transparent 1.3px),radial-gradient(circle at 75% 85%,#1e40af99 1px,transparent 1px);background-size:100% 100%;animation:buildingInteriorDots 7s ease-in-out infinite;animation-delay:3s;pointer-events:none}
body.light-mode .tower-left .building-body::after{content:'';position:absolute;top:10%;left:15%;width:70%;height:80%;background:radial-gradient(circle at 30% 25%,#1e40afcc 1.1px,transparent 1.1px),radial-gradient(circle at 70% 45%,#1e40af99 1.3px,transparent 1.3px),radial-gradient(circle at 40% 65%,#1e40afb3 1px,transparent 1px),radial-gradient(circle at 60% 85%,#1e40afcc 1.2px,transparent 1.2px);background-size:100% 100%;animation:towerInteriorDots 8s ease-in-out infinite;pointer-events:none}
body.light-mode .tower-right .building-body::after{content:'';position:absolute;top:8%;left:12%;width:76%;height:84%;background:radial-gradient(circle at 25% 20%,#1e40afb3 1.2px,transparent 1.2px),radial-gradient(circle at 75% 30%,#1e40afcc 1px,transparent 1px),radial-gradient(circle at 35% 50%,#1e40af99 1.4px,transparent 1.4px),radial-gradient(circle at 65% 60%,#1e40afb3 1.1px,transparent 1.1px),radial-gradient(circle at 20% 80%,#1e40afcc 1.3px,transparent 1.3px),radial-gradient(circle at 80% 85%,#1e40af99 1px,transparent 1px);background-size:100% 100%;animation:towerInteriorDots 9s ease-in-out infinite;animation-delay:2.5s;pointer-events:none}
body.light-mode .building-right-close::after{content:'';position:absolute;top:12%;left:12%;width:76%;height:76%;background:radial-gradient(circle at 30% 30%,#1e40afcc 1.1px,transparent 1.1px),radial-gradient(circle at 70% 35%,#1e40af99 1.3px,transparent 1.3px),radial-gradient(circle at 40% 60%,#1e40afb3 1px,transparent 1px),radial-gradient(circle at 25% 80%,#1e40afcc 1.2px,transparent 1.2px),radial-gradient(circle at 75% 85%,#1e40af99 1.4px,transparent 1.4px);background-size:100% 100%;animation:buildingInteriorDots 6s ease-in-out infinite;animation-delay:4s;pointer-events:none}
body.light-mode .building-right-1::after{content:'';position:absolute;top:15%;left:15%;width:70%;height:70%;background:radial-gradient(circle at 35% 35%,#1e40afb3 1px,transparent 1px),radial-gradient(circle at 65% 50%,#1e40afcc 1.2px,transparent 1.2px),radial-gradient(circle at 45% 75%,#1e40af99 0.9px,transparent 0.9px);background-size:100% 100%;animation:buildingInteriorDots 5s ease-in-out infinite;animation-delay:1s;pointer-events:none}
body.light-mode .building-right-2::after{content:'';position:absolute;top:18%;left:18%;width:64%;height:64%;background:radial-gradient(circle at 40% 40%,#1e40afcc 1.1px,transparent 1.1px),radial-gradient(circle at 60% 70%,#1e40af99 1px,transparent 1px);background-size:100% 100%;animation:buildingInteriorDots 4s ease-in-out infinite;animation-delay:2s;pointer-events:none}
@keyframes burjInteriorDots {
0%,100%{opacity:.6;transform:scale(1)}
25%{opacity:.9;transform:scale(1.05)}
50%{opacity:.8;transform:scale(0.95)}
75%{opacity:1;transform:scale(1.02)}
}
@keyframes sectionInteriorDots {
0%,100%{opacity:.5;filter:brightness(1)}
33%{opacity:.8;filter:brightness(1.2)}
66%{opacity:.7;filter:brightness(1.1)}
}
@keyframes buildingInteriorDots {
0%,100%{opacity:.6;transform:translateY(0)}
50%{opacity:.9;transform:translateY(-1px)}
}
@keyframes towerInteriorDots {
0%,100%{opacity:.5;transform:scale(1) rotate(0deg)}
25%{opacity:.8;transform:scale(1.03) rotate(1deg)}
50%{opacity:.7;transform:scale(0.97) rotate(-1deg)}
75%{opacity:.9;transform:scale(1.01) rotate(0.5deg)}
}
.hero-subtitle-premium{font-family:'Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;font-weight:450;font-size:1.4rem;line-height:1.5;letter-spacing:-.03em;color:var(--text);opacity:.85;margin-bottom:3rem;max-width:620px;position:relative;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:all .4s cubic-bezier(0.16,1,0.3,1)}
.hero-subtitle-premium::before{content:'';position:absolute;top:-8px;left:0;width:40px;height:2px;background:linear-gradient(90deg,var(--primary),transparent);border-radius:1px;opacity:.4;transition:all .3s ease}
.hero-subtitle-premium:hover::before{width:60px;opacity:.8}
.hero-subtitle-premium:hover{transform:translateY(-1px);opacity:.95}
@media (max-width: 1024px) {
.hero-subtitle-premium{font-size:1.25rem;line-height:1.6;margin-bottom:2.5rem}
}
@media (max-width: 768px) {
.hero-subtitle-premium{font-size:1.125rem;line-height:1.65;margin-bottom:2rem;max-width:100%}
.hero-subtitle-premium::before{display:none}
}
@media (max-width: 480px) {
.hero-subtitle-premium{font-size:1.05rem;line-height:1.7;margin-bottom:1.75rem}
}
.hero-subtitle-premium{opacity:0;transform:translateY(20px);animation:subtitleFadeIn .8s ease-out .3s forwards}
@keyframes subtitleFadeIn {
to{opacity:.85;transform:translateY(0)}
}
.hero-actions-premium{display:flex;gap:1rem;margin-bottom:3rem}
.cta-btn{display:flex;align-items:center;justify-content:center;padding:.875rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;text-decoration:none;transition:all .25s ease;position:relative;overflow:hidden;gap:.5rem;flex:1}
.cta-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,#ffffff1a,transparent);transition:left .5s ease}
.cta-btn:hover::before{left:100%}
.btn-icon{font-size:.85rem;transition:transform .25s ease}
.cta-btn:hover .btn-icon{transform:translateX(2px)}
.cta-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:0 4px 12px #2b7fff40}
.cta-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #2b7fff59}
.cta-community{background:linear-gradient(135deg,#08c,#229ED9);color:#fff;box-shadow:0 4px 12px #0088cc40}
.cta-community:hover{transform:translateY(-1px);box-shadow:0 6px 20px #0088cc59}
@media (max-width: 768px) {
.hero-actions-premium{gap:.75rem;margin-bottom:2rem}
.cta-btn{padding:.875rem 1rem;font-size:.85rem}
}
@media (max-width: 480px) {
.cta-btn{padding:.75rem .875rem;font-size:.8rem}
.btn-text{font-size:.8rem}
.btn-icon{font-size:.75rem}
}
.cta-btn{opacity:0;transform:translateY(10px);animation:ctaFadeIn .5s ease-out forwards}
.cta-btn:nth-child(1){animation-delay:.1s}
.cta-btn:nth-child(2){animation-delay:.2s}
@keyframes ctaFadeIn {
to{opacity:1;transform:translateY(0)}
}
.hero-title::before{content:'';position:absolute;left:-1rem;top:0;bottom:0;width:4px;background:linear-gradient(to bottom,var(--primary),transparent);border-radius:2px}
@media (max-width: 768px) {
.hero-title::before{left:-.75rem;width:3px}
.hero-subtitle-premium::before{display:block!important;top:-6px;width:35px;height:2px}
.hero-subtitle-premium:hover::before{width:50px}
}
.rotating-word-container{display:inline-block;position:relative;height:1.2em;overflow:visible;vertical-align:baseline;min-width:120px}
.rotating-word{position:absolute;top:0;left:0;font-weight:900;white-space:nowrap;opacity:0;transform:translateY(0);transition:all .4s cubic-bezier(0.25,0.8,0.25,1);background:linear-gradient(135deg,#2B7FFF,#8338ec);color:#fff;padding:1px 5px;letter-spacing:1px;border-radius:3px}
.rotating-word:first-child{opacity:1;position:relative}
@keyframes fadeInOut {
0%,20%{opacity:1;transform:translateY(0) scale(1)}
25%,100%{opacity:0;transform:translateY(-10px) scale(0.95)}
}
@keyframes fadeInOut2 {
0%,24%{opacity:0;transform:translateY(10px) scale(0.95)}
25%,45%{opacity:1;transform:translateY(0) scale(1)}
50%,100%{opacity:0;transform:translateY(-10px) scale(0.95)}
}
@keyframes fadeInOut3 {
0%,49%{opacity:0;transform:translateY(10px) scale(0.95)}
50%,70%{opacity:1;transform:translateY(0) scale(1)}
75%,100%{opacity:0;transform:translateY(-10px) scale(0.95)}
}
@keyframes fadeInOut4 {
0%,74%{opacity:0;transform:translateY(10px) scale(0.95)}
75%,95%{opacity:1;transform:translateY(0) scale(1)}
100%{opacity:0;transform:translateY(-10px) scale(0.95)}
}
.rotating-word:nth-child(1){animation:fadeInOut 8s infinite;background:linear-gradient(135deg,#2B7FFF,#8338ec)}
.rotating-word:nth-child(2){animation:fadeInOut2 8s infinite;background:linear-gradient(135deg,#ff006e,#2B7FFF)}
.rotating-word:nth-child(3){animation:fadeInOut3 8s infinite;background:linear-gradient(135deg,#8338ec,#ff006e)}
.rotating-word:nth-child(4){animation:fadeInOut4 8s infinite;background:linear-gradient(135deg,#2B7FFF,#ff006e,#8338ec)}
@media (max-width: 768px) {
.rotating-word-container{min-width:100px;height:1.1em}
.rotating-word{font-size:.95em;padding:1px 4px}
}
@media (max-width: 480px) {
.rotating-word-container{min-width:80px;height:1em}
.rotating-word{font-size:.9em;padding:1px 3px}
}
html{overflow-x:hidden!important}
body{overflow-x:hidden!important}
.hero-decoration-1,.hero-decoration-2,.hero-decoration-3{max-width:calc(100vw - 20px)}
.building-back-left,.building-back-right,.tower-back,.floating-particle,.light-beam,.dubai-effects{display:none!important}

.dubai-skyline{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:420px;width:100%;position:relative;background:transparent}
.building-left-1{order:1;width:24px;height:130px}
.building-left-2{order:2;width:28px;height:170px}
.tower-left{order:3;width:32px;height:210px}
.building-left-close{order:4;width:36px;height:250px}
.burj-main{order:5;width:50px;height:380px}
.tower-right{order:6;width:38px;height:260px}
.building-right-close{order:7;width:34px;height:230px}
.building-right-1{order:8;width:30px;height:150px}
.building-right-2{order:9;width:26px;height:110px}
.burj-main,.building-left-1,.building-left-2,.tower-left,.building-left-close,.tower-right,.building-right-close,.building-right-1,.building-right-2{background:var(--card-bg);border:1px solid var(--border);border-radius:3px 3px 0 0;box-shadow:inset 2px 0 8px #0000001a inset -2px 0 8px #0000001a 0 6px 20px #00000026;transition:all .6s ease}
body.light-mode .burj-main,body.light-mode .building-left-1,body.light-mode .building-left-2,body.light-mode .tower-left,body.light-mode .building-left-close,body.light-mode .tower-right,body.light-mode .building-right-close,body.light-mode .building-right-1,body.light-mode .building-right-2{background:linear-gradient(135deg,#fff 0%,#f8fafc 20%,#f1f5f9 40%,#e2e8f0 60%,#cbd5e1 80%,#94a3b8 100%)!important;border:1px solid #47556966!important;box-shadow:inset 2px 0 10px #4755691a inset -2px 0 10px #4755691a inset 0 -15px 30px #47556926 inset 0 3px 8px #fffc 0 8px 25px #47556933 0 4px 12px #47556926!important;filter:contrast(1.1) brightness(1.05)!important}
body.light-mode .burj-main{background:linear-gradient(135deg,#fff 0%,#f8fafc 15%,#f1f5f9 30%,#e2e8f0 50%,#cbd5e1 70%,#94a3b8 90%,#64748b 100%)!important;border:2px solid #47556980!important;border-left:3px solid #3b82f666!important;border-right:3px solid #3b82f666!important;box-shadow:inset 3px 0 15px #4755691f inset -3px 0 15px #4755691f inset 0 -25px 50px #47556933 inset 0 5px 12px #ffffffe6 0 0 20px #3b82f626 0 12px 40px #47556940!important}
.floor-lights::before,.floor-lights::after{content:'';width:4px;height:2px;background:linear-gradient(90deg,transparent 0%,#2b7fff4d 15%,#ffffffe6 50%,#2b7fff4d 85%,transparent 100%);border-radius:1px;opacity:.9;animation:floorLightFlicker 7s ease-in-out infinite;box-shadow:0 0 8px #2b7fff80 0 0 15px #ffffff4d}
body.light-mode .floor-lights::before{background:linear-gradient(90deg,transparent 0%,#ec489999 15%,#a855f7ff 50%,#ec489999 85%,transparent 100%)!important;box-shadow:0 0 10px #a855f7b3 0 0 18px #ec489980!important}
body.light-mode .floor-lights::after{background:linear-gradient(90deg,transparent 0%,#8b5cf680 15%,#c484fccc 50%,#8b5cf680 85%,transparent 100%)!important;box-shadow:0 0 8px #c484fc99 0 0 15px #8b5cf666!important;animation-delay:3s!important}
.building-top,.building-crown,.building-left-1::before,.building-left-2::before,.building-left-close::before,.building-right-close::before,.building-right-1::before,.building-right-2::before{width:100%;height:14px;background:linear-gradient(135deg,#2b7fff66 0%,#8338ec80 50%,#2b7fff66 100%);border-radius:2px 2px 0 0;box-shadow:0 0 8px #2b7fff4d 0 2px 4px #0003}
body.light-mode .building-top,body.light-mode .building-crown,body.light-mode .building-left-1::before,body.light-mode .building-left-2::before,body.light-mode .building-left-close::before,body.light-mode .building-right-close::before,body.light-mode .building-right-1::before,body.light-mode .building-right-2::before{background:linear-gradient(135deg,#ec4899 0%,#a855f7 40%,#8b5cf6 70%,#7c3aed 100%)!important;box-shadow:0 0 12px #a855f799 0 0 20px #ec489966 0 2px 6px #0003!important}
body.light-mode .spire-tip{background:radial-gradient(circle,#ec4899 0%,#a855f7 50%,#8b5cf6 100%)!important;box-shadow:0 0 18px #a855f7cc 0 0 35px #ec489999!important}
.dubai-effects,.floating-particle,.light-beam,.particle-1,.particle-2,.particle-3,.particle-4,body.light-mode .dubai-visualization::before,body.light-mode .dubai-visualization::after{display:none!important}

.weather-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}