/* Ultra 3D Robot from robot.html - Adapted for Index Page */
/* Slow left–right bounce: collide at corners and come back */
@keyframes robotTravel {
    0%   { transform: translateX(-42vw); }
    50%  { transform: translateX(42vw); }
    100% { transform: translateX(-42vw); }
}

.hero-robot-wrapper {
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    animation: robotTravel 35s ease-in-out infinite;
}

.robot-scene {
    width: clamp(120px, 15vw, 160px);
    height: clamp(144px, 18vw, 192px);
    position: relative;
    transform-style: preserve-3d;
    margin: 0 auto;
    transform: rotateX(0deg) rotateY(0deg);
    animation: sceneFloat 4s ease-in-out infinite;
    transform-origin: center center;
    animation: sceneFloat 4s ease-in-out infinite;
}

@keyframes sceneFloat {
    0%, 100% { 
        transform: rotateX(0deg) rotateY(0deg) translateY(0px) translateZ(0px); 
    }
    50% { 
        transform: rotateX(0deg) rotateY(0deg) translateY(-9px) translateZ(13px); 
    }
}

.hero-robot {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

/* Head - Ultra 3D */
.robot-head-3d {
    position: absolute;
    width: clamp(75px, 9.4vw, 94px);
    height: clamp(62px, 7.7vw, 77px);
    background: linear-gradient(145deg, #f5f9ff, #d4e7ff);
    border-radius: 50% 50% 45% 45%;
    top: clamp(17px, 2.1vw, 21px);
    left: clamp(48px, 6vw, 60px);
    transform-style: preserve-3d;
    transform: translateZ(43px);
    box-shadow: 
        inset -8px -8px 17px rgba(0,0,0,0.2),
        inset 8px 8px 17px rgba(255,255,255,1),
        -13px 13px 34px rgba(0,0,0,0.4),
        -17px 17px 43px rgba(0,0,0,0.3),
        0 21px 43px rgba(0,0,0,0.2);
    animation: headBob 2.5s ease-in-out infinite;
}

@keyframes headBob {
    0%, 100% { 
        transform: translateZ(43px) rotateX(0deg) rotateY(0deg); 
    }
    25% { 
        transform: translateZ(45px) rotateX(0deg) rotateY(0deg); 
    }
    75% { 
        transform: translateZ(45px) rotateX(0deg) rotateY(0deg); 
    }
}

.robot-head-3d::before {
    content: '';
    position: absolute;
    width: 110%;
    height: 110%;
    background: linear-gradient(135deg, rgba(255,255,255,0.6), transparent);
    border-radius: 50% 50% 45% 45%;
    top: -4px;
    left: -4px;
    filter: blur(6px);
    z-index: -1;
}

.robot-head-3d::after {
    content: '';
    position: absolute;
    width: clamp(27px, 3.4vw, 34px);
    height: clamp(27px, 3.4vw, 34px);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent);
    border-radius: 50%;
    top: 4px;
    right: 9px;
    filter: blur(4px);
}

/* Screen - Deep 3D */
.robot-screen-3d {
    position: absolute;
    width: clamp(62px, 7.7vw, 77px);
    height: clamp(39px, 4.9vw, 49px);
    background: linear-gradient(145deg, #0a1520, #1a2535);
    border-radius: 11px;
    top: clamp(12px, 1.5vw, 15px);
    left: clamp(7px, 0.9vw, 9px);
    overflow: hidden;
    transform: translateZ(11px);
    box-shadow: 
        inset 0 0 21px rgba(0,150,255,0.5),
        inset -4px -4px 13px rgba(0,0,0,0.8),
        inset 4px 4px 9px rgba(50,100,150,0.3),
        0 6px 17px rgba(0,0,0,0.7),
        0 0 26px rgba(0,100,200,0.4);
    border: 1px solid rgba(0,80,160,0.4);
}

.robot-screen-3d::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 60%;
    background: linear-gradient(180deg, rgba(255,255,255,0.15), transparent);
    top: 0;
    left: 0;
    border-radius: 11px 11px 0 0;
}

.robot-screen-3d::after {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    background: radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.2), transparent);
    top: -10%;
    left: -10%;
    filter: blur(9px);
}

/* Eyes - Hyper realistic glow */
.robot-eye-3d {
    position: absolute;
    width: clamp(6px, 0.8vw, 8px);
    height: clamp(27px, 3.4vw, 34px);
    background: linear-gradient(180deg, #00ffff 0%, #00ddff 30%, #0099ff 100%);
    border-radius: 5px;
    top: clamp(6px, 0.8vw, 8px);
    transform: translateZ(2px);
    animation: eyeGlow 2.5s ease-in-out infinite;
}

.robot-eye-3d::before {
    content: '';
    position: absolute;
    width: clamp(3px, 0.4vw, 4px);
    height: clamp(14px, 1.7vw, 17px);
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.4));
    border-radius: 3px;
    top: clamp(4px, 0.5vw, 5px);
    left: 1px;
    filter: blur(1px);
}

.robot-eye-3d::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 5px;
    filter: blur(4px);
    z-index: -1;
}

.robot-eye-left-3d {
    left: clamp(15px, 1.9vw, 19px);
    box-shadow: 
        0 0 17px rgba(0,255,255,1),
        0 0 34px rgba(0,200,255,0.8),
        0 0 51px rgba(0,150,255,0.6),
        inset 0 0 9px rgba(255,255,255,0.4);
}

.robot-eye-right-3d {
    right: clamp(15px, 1.9vw, 19px);
    box-shadow: 
        0 0 17px rgba(0,255,255,1),
        0 0 34px rgba(0,200,255,0.8),
        0 0 51px rgba(0,150,255,0.6),
        inset 0 0 9px rgba(255,255,255,0.4);
}

@keyframes eyeGlow {
    0%, 100% { 
        opacity: 1;
        filter: brightness(1.2);
    }
    50% { 
        opacity: 0.85;
        filter: brightness(1);
    }
}

/* Smile - Enhanced glow */
.robot-smile-3d {
    position: absolute;
    width: clamp(21px, 2.6vw, 26px);
    height: clamp(10px, 1.3vw, 13px);
    border: 2px solid #00ffff;
    border-top: none;
    border-radius: 0 0 26px 26px;
    bottom: clamp(6px, 0.8vw, 8px);
    left: clamp(21px, 2.6vw, 26px);
    transform: translateZ(2px);
    box-shadow: 
        0 0 13px rgba(0,255,255,1),
        0 0 26px rgba(0,200,255,0.6),
        inset 0 -3px 6px rgba(0,200,255,0.5);
    filter: brightness(1.2);
}

/* Hi Text - Ultra glow */
.robot-hi-text {
    position: absolute;
    top: clamp(2px, 0.3vw, 3px);
    left: 50%;
    transform: translateX(-50%) translateZ(3px);
    color: #00ffff;
    font-size: clamp(8px, 1vw, 9px);
    font-weight: bold;
    text-shadow: 
        0 0 9px rgba(0,255,255,1),
        0 0 17px rgba(0,255,255,0.9),
        0 0 26px rgba(0,255,255,0.7),
        0 0 34px rgba(0,200,255,0.5);
    animation: hiPulse 2s ease-in-out infinite;
    filter: brightness(1.3);
}

@keyframes hiPulse {
    0%, 100% { 
        transform: translateX(-50%) translateZ(3px) scale(1);
        filter: brightness(1.3);
    }
    50% { 
        transform: translateX(-50%) translateZ(3px) scale(1.15);
        filter: brightness(1.5);
    }
}

/* Antenna - Ultra 3D */
.robot-antenna-3d {
    position: absolute;
    width: clamp(3px, 0.3vw, 3px);
    height: clamp(15px, 1.9vw, 19px);
    background: linear-gradient(180deg, #d4e7ff, #90c8ff);
    top: clamp(-12px, -1.5vw, -15px);
    left: clamp(36px, 4.5vw, 45px);
    border-radius: 2px;
    transform: translateZ(4px);
    box-shadow: 
        -1px 1px 5px rgba(0,0,0,0.4),
        inset 1px 1px 3px rgba(255,255,255,0.6),
        inset -1px -1px 3px rgba(0,0,0,0.2);
}

.robot-antenna-ball {
    position: absolute;
    width: clamp(9px, 1.1vw, 11px);
    height: clamp(9px, 1.1vw, 11px);
    background: radial-gradient(circle at 35% 35%, #3d5a7f, #0d1b2a);
    border-radius: 50%;
    top: clamp(-9px, -1.2vw, -12px);
    left: clamp(-3px, -0.4vw, -4px);
    transform: translateZ(3px);
    box-shadow: 
        -2px 3px 9px rgba(0,0,0,0.6),
        inset -2px -2px 5px rgba(0,0,0,0.6),
        inset 2px 2px 5px rgba(120,160,200,0.4);
    animation: antennaBounce 2.5s ease-in-out infinite;
}

.robot-antenna-ball::before {
    content: '';
    position: absolute;
    width: clamp(3px, 0.4vw, 4px);
    height: clamp(3px, 0.4vw, 4px);
    background: radial-gradient(circle, rgba(255,255,255,0.6), transparent);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    filter: blur(1px);
}

@keyframes antennaBounce {
    0%, 100% { transform: translateZ(3px) translateY(0); }
    50% { transform: translateZ(3px) translateY(-3px); }
}

/* Ears - Deep 3D projection */
.robot-ear-3d {
    position: absolute;
    width: clamp(17px, 2.1vw, 21px);
    height: clamp(21px, 2.6vw, 26px);
    background: linear-gradient(145deg, #3d5a7f, #0d1b2a);
    border-radius: 50%;
    top: clamp(21px, 2.6vw, 26px);
    box-shadow: 
        inset -3px -3px 9px rgba(0,0,0,0.7),
        inset 3px 3px 6px rgba(120,160,200,0.3);
}

.robot-ear-left-3d {
    left: clamp(-9px, -1.1vw, -11px);
    transform: translateZ(26px) rotateY(-25deg) translateX(-6px);
    box-shadow: 
        inset -3px -3px 9px rgba(0,0,0,0.7),
        inset 3px 3px 6px rgba(120,160,200,0.3),
        -6px 6px 17px rgba(0,0,0,0.5);
}

.robot-ear-right-3d {
    right: clamp(-9px, -1.1vw, -11px);
    transform: translateZ(26px) rotateY(25deg) translateX(6px);
    box-shadow: 
        inset -3px -3px 9px rgba(0,0,0,0.7),
        inset 3px 3px 6px rgba(120,160,200,0.3),
        6px 6px 17px rgba(0,0,0,0.5);
}

.robot-ear-inner {
    position: absolute;
    width: clamp(8px, 1vw, 10px);
    height: clamp(10px, 1.3vw, 13px);
    background: radial-gradient(circle, #2d4a6f, #0d1b2a);
    border-radius: 50%;
    top: clamp(5px, 0.6vw, 6px);
    left: clamp(4px, 0.5vw, 6px);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}

/* Body - Extreme 3D depth */
.robot-body-3d {
    position: absolute;
    width: clamp(69px, 8.6vw, 86px);
    height: clamp(55px, 6.9vw, 69px);
    background: linear-gradient(145deg, #f5f9ff, #d4e7ff);
    border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
    top: clamp(75px, 9.4vw, 94px);
    left: clamp(51px, 6.4vw, 64px);
    transform-style: preserve-3d;
    transform: translateZ(30px);
    box-shadow: 
        inset -9px -9px 17px rgba(0,0,0,0.2),
        inset 9px 9px 17px rgba(255,255,255,1),
        -13px 15px 34px rgba(0,0,0,0.4),
        -17px 19px 43px rgba(0,0,0,0.3);
}

.robot-body-3d::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 60%;
    background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent);
    border-radius: 50% 50% 0 0;
    top: 0;
}

.robot-body-3d::after {
    content: '';
    position: absolute;
    width: clamp(24px, 3vw, 30px);
    height: clamp(24px, 3vw, 30px);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent);
    border-radius: 50%;
    top: 6px;
    right: 11px;
    filter: blur(5px);
}

.robot-body-line {
    position: absolute;
    width: clamp(48px, 6vw, 60px);
    height: clamp(1px, 0.2vw, 2px);
    background: linear-gradient(90deg, transparent, rgba(100,181,246,0.5), transparent);
    left: clamp(10px, 1.3vw, 13px);
    top: clamp(24px, 3vw, 30px);
    border-radius: 1px;
    box-shadow: 0 1px 2px rgba(100,181,246,0.4);
}

/* Arms - Dynamic 3D positioning */
.robot-arm-3d {
    position: absolute;
    width: clamp(14px, 1.7vw, 17px);
    height: clamp(38px, 4.7vw, 47px);
    background: linear-gradient(145deg, #f5f9ff, #d4e7ff);
    border-radius: 11px;
    top: clamp(90px, 11.3vw, 113px);
    transform-style: preserve-3d;
    box-shadow: 
        inset -3px -3px 9px rgba(0,0,0,0.2),
        inset 3px 3px 9px rgba(255,255,255,1);
    transform-origin: top center;
}

.robot-arm-3d::before {
    content: '';
    position: absolute;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0.5), transparent);
    border-radius: 11px 0 0 11px;
    left: 0;
}

.robot-arm-left-3d {
    left: clamp(38px, 4.8vw, 48px);
    transform: translateZ(26px) rotateZ(-5deg) translateX(-4px);
    box-shadow: 
        inset -3px -3px 9px rgba(0,0,0,0.2),
        inset 3px 3px 9px rgba(255,255,255,1),
        -6px 9px 17px rgba(0,0,0,0.3);
    animation: armRelaxed 3s ease-in-out infinite;
}

.robot-arm-right-3d {
    right: clamp(38px, 4.8vw, 48px);
    transform: translateZ(26px) translateX(4px);
    box-shadow: 
        inset -3px -3px 9px rgba(0,0,0,0.2),
        inset 3px 3px 9px rgba(255,255,255,1),
        6px 9px 17px rgba(0,0,0,0.3);
    animation: waveRightArm 1.5s ease-in-out infinite;
}

@keyframes armRelaxed {
    0%, 100% { 
        transform: translateZ(26px) rotateZ(-5deg) translateX(-4px); 
    }
    50% { 
        transform: translateZ(27px) rotateZ(0deg) translateX(-4px); 
    }
}

@keyframes waveRightArm {
    0%, 100% { 
        transform: translateZ(26px) rotateZ(-145deg) translateX(4px); 
    }
    25% { 
        transform: translateZ(28px) rotateZ(-135deg) translateX(4px); 
    }
    50% { 
        transform: translateZ(27px) rotateZ(-145deg) translateX(4px); 
    }
    75% { 
        transform: translateZ(28px) rotateZ(-135deg) translateX(4px); 
    }
}

/* Hands - Ultra detailed */
.robot-hand-3d {
    position: absolute;
    width: clamp(12px, 1.5vw, 15px);
    height: clamp(14px, 1.7vw, 17px);
    background: linear-gradient(145deg, #f5f9ff, #d4e7ff);
    border-radius: 50%;
    bottom: clamp(-6px, -0.8vw, -8px);
    left: clamp(1px, 0.1vw, 1px);
    transform: translateZ(3px);
    box-shadow: 
        inset -2px -2px 5px rgba(0,0,0,0.2),
        inset 2px 2px 5px rgba(255,255,255,0.9),
        0 4px 9px rgba(0,0,0,0.3);
}

.robot-hand-3d::before {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    filter: blur(2px);
}

.robot-finger-3d {
    position: absolute;
    width: clamp(2px, 0.2vw, 2px);
    height: clamp(4px, 0.5vw, 5px);
    background: linear-gradient(145deg, #c5e1ff, #90c8ff);
    border-radius: 1px;
    bottom: clamp(-3px, -0.3vw, -3px);
    box-shadow: 
        -1px 1px 2px rgba(0,0,0,0.4),
        inset 0px 0px 1px rgba(255,255,255,0.6);
}

.robot-arm-right-3d .robot-finger-3d {
    animation: fingerWiggle 1.5s ease-in-out infinite;
}

.robot-finger-3d:nth-child(1) { left: clamp(3px, 0.3vw, 3px); }
.robot-finger-3d:nth-child(2) { left: clamp(5px, 0.6vw, 6px); animation-delay: 0.1s; }
.robot-finger-3d:nth-child(3) { left: clamp(8px, 1vw, 10px); animation-delay: 0.2s; }

@keyframes fingerWiggle {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50% { transform: translateY(-2px) scaleY(1.25); }
}

/* Legs - Perspective depth */
.robot-leg-3d {
    position: absolute;
    width: clamp(15px, 1.9vw, 19px);
    height: clamp(24px, 3vw, 30px);
    background: linear-gradient(145deg, #f5f9ff, #d4e7ff);
    border-radius: 8px 8px 11px 11px;
    top: clamp(137px, 17.1vw, 171px);
    transform-style: preserve-3d;
    box-shadow: 
        inset -3px -3px 9px rgba(0,0,0,0.2),
        inset 3px 3px 9px rgba(255,255,255,1);
}

.robot-leg-3d::before {
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0.5), transparent);
    border-radius: 8px 0 0 11px;
    left: 0;
}

.robot-leg-left-3d {
    left: clamp(55px, 6.9vw, 69px);
    transform: translateZ(21px) translateX(-3px);
    box-shadow: 
        inset -3px -3px 9px rgba(0,0,0,0.2),
        inset 3px 3px 9px rgba(255,255,255,1),
        -6px 9px 17px rgba(0,0,0,0.3);
}

.robot-leg-right-3d {
    right: clamp(55px, 6.9vw, 69px);
    transform: translateZ(21px) translateX(3px);
    box-shadow: 
        inset -3px -3px 9px rgba(0,0,0,0.2),
        inset 3px 3px 9px rgba(255,255,255,1),
        6px 9px 17px rgba(0,0,0,0.3);
}

/* Feet - Deep shadows */
.robot-foot-3d {
    position: absolute;
    width: clamp(20px, 2.5vw, 25px);
    height: clamp(9px, 1.2vw, 12px);
    background: linear-gradient(145deg, #3d5a7f, #0d1b2a);
    border-radius: 8px 8px 5px 5px;
    bottom: clamp(-4px, -0.5vw, -5px);
    left: clamp(-2px, -0.3vw, -3px);
    transform: translateZ(3px);
    box-shadow: 
        -2px 6px 13px rgba(0,0,0,0.6),
        inset -2px -2px 5px rgba(0,0,0,0.6),
        inset 2px 2px 5px rgba(120,160,200,0.4);
}

.robot-foot-3d::before {
    content: '';
    position: absolute;
    width: clamp(7px, 0.9vw, 9px);
    height: clamp(3px, 0.4vw, 4px);
    background: radial-gradient(circle, rgba(120,160,200,0.4), transparent);
    border-radius: 50%;
    top: 2px;
    left: clamp(3px, 0.3vw, 3px);
    filter: blur(1px);
}

/* Shadow - Extreme depth */
.robot-shadow-3d {
    position: absolute;
    width: clamp(96px, 12vw, 120px);
    height: clamp(15px, 1.9vw, 19px);
    background: radial-gradient(ellipse, rgba(0,0,0,0.7), transparent);
    bottom: clamp(-27px, -3.4vw, -34px);
    left: 50%;
    transform: translateX(-50%) translateZ(-21px) rotateX(90deg);
    border-radius: 50%;
    filter: blur(9px);
    animation: shadowPulse 4s ease-in-out infinite;
}

@keyframes shadowPulse {
    0%, 100% { 
        transform: translateZ(-21px) rotateX(90deg) scale(1); 
        opacity: 0.7; 
    }
    50% { 
        transform: translateZ(-21px) rotateX(90deg) scale(0.92); 
        opacity: 0.5; 
    }
}

/* Additional light spots */
.robot-light-spot {
    position: absolute;
    width: clamp(14px, 1.7vw, 17px);
    height: clamp(14px, 1.7vw, 17px);
    background: radial-gradient(circle, rgba(255,255,255,0.5), transparent);
    border-radius: 50%;
    filter: blur(3px);
    animation: lightShine 3.5s ease-in-out infinite;
}

.robot-head-spot {
    top: clamp(7px, 0.9vw, 9px);
    right: clamp(12px, 1.5vw, 15px);
}

.robot-body-spot {
    top: clamp(9px, 1.1vw, 11px);
    right: clamp(10px, 1.3vw, 13px);
}

@keyframes lightShine {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}

/* Ambient particles */
.robot-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255,255,255,0.8);
    animation: particleFloat 6s ease-in-out infinite;
}

.robot-particle:nth-child(1) {
    top: clamp(34px, 4.3vw, 43px);
    left: clamp(17px, 2.1vw, 21px);
    animation-delay: 0s;
}

.robot-particle:nth-child(2) {
    top: clamp(69px, 8.6vw, 86px);
    right: clamp(27px, 3.4vw, 34px);
    animation-delay: 2s;
}

.robot-particle:nth-child(3) {
    top: clamp(120px, 15vw, 150px);
    left: clamp(34px, 4.3vw, 43px);
    animation-delay: 4s;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateZ(9px) translateY(0);
        opacity: 0;
    }
    10%, 90% {
        opacity: 0.8;
    }
    50% {
        transform: translateZ(34px) translateY(-43px);
        opacity: 1;
    }
}

/* Tablet and mobile - robot centered with margin (no left/transform to avoid right shift) */
@media (max-width: 1024px) {
    .hero-robot-wrapper {
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .robot-scene {
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }
}

@keyframes sceneFloatTablet {
    0%, 100% { transform: translateX(-8px) rotateX(0deg) rotateY(0deg) translateY(0px) translateZ(0px); }
    50% { transform: translateX(-8px) rotateX(0deg) rotateY(0deg) translateY(-9px) translateZ(13px); }
}

@media (max-width: 768px) {
    .hero-robot-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0 auto;
    }
    
    .robot-scene {
        width: clamp(100px, 20vw, 140px);
        height: clamp(120px, 24vw, 168px);
        margin-left: auto;
        margin-right: auto;
        display: block;
        position: relative;
        animation: sceneFloatTablet 4s ease-in-out infinite;
    }
}

@keyframes sceneFloatMobile {
    0%, 100% { transform: translateX(-10px) rotateX(0deg) rotateY(0deg) translateY(0px) translateZ(0px); }
    50% { transform: translateX(-10px) rotateX(0deg) rotateY(0deg) translateY(-9px) translateZ(13px); }
}

@media (max-width: 480px) {
    .hero-robot-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0 auto;
    }
    
    .robot-scene {
        width: clamp(90px, 22vw, 120px);
        height: clamp(108px, 26vw, 144px);
        margin-left: auto;
        margin-right: auto;
        display: block;
        position: relative;
        animation: sceneFloatMobile 4s ease-in-out infinite;
    }
    
    .robot-hi-text {
        font-size: clamp(6px, 1.5vw, 7px);
    }
    
    .robot-screen-3d {
        border-radius: 8px;
    }
    
    .robot-eye-3d {
        width: clamp(4px, 1vw, 5px);
        height: clamp(20px, 5vw, 25px);
    }
    
    .robot-smile-3d {
        width: clamp(16px, 4vw, 20px);
        height: clamp(8px, 2vw, 10px);
        border-width: 1.5px;
    }
}