<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Classs Robotics</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:'Poppins',sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a0e27;overflow:hidden;color:#fff}
        .stars{position:fixed;inset:0;z-index:0}
        .star{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;animation:twinkle 3s ease-in-out infinite alternate}
        @keyframes twinkle{0%{opacity:.2;transform:scale(1)}100%{opacity:1;transform:scale(1.5)}}
        .gear-ring{position:fixed;border:3px dashed rgba(102,126,234,0.15);border-radius:50%;animation:spin 30s linear infinite}
        .gear-ring:nth-child(1){width:500px;height:500px;top:-100px;left:-100px}
        .gear-ring:nth-child(2){width:400px;height:400px;bottom:-80px;right:-80px;animation-direction:reverse;border-color:rgba(118,75,162,0.15)}
        .gear-ring:nth-child(3){width:300px;height:300px;top:50%;left:50%;transform:translate(-50%,-50%);border-color:rgba(255,107,107,0.1)}
        @keyframes spin{to{transform:rotate(360deg)}}
        .gear-ring:nth-child(3){animation:spin3 25s linear infinite}
        @keyframes spin3{to{transform:translate(-50%,-50%) rotate(360deg)}}
        .bg-icons{position:fixed;inset:0;z-index:0;pointer-events:none}
        .bg-icon{position:absolute;font-size:36px;opacity:0.08;animation:floatIcon 8s ease-in-out infinite}
        @keyframes floatIcon{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-30px) rotate(15deg)}}
        .container{position:relative;z-index:10;text-align:center;padding:60px 40px;max-width:700px;width:90%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:30px;backdrop-filter:blur(20px);box-shadow:0 0 80px rgba(102,126,234,0.15),0 0 30px rgba(118,75,162,0.1)}
        .mascot{font-size:100px;display:block;margin-bottom:10px;animation:robotBounce 2.5s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(102,126,234,0.5))}
        @keyframes robotBounce{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-18px) rotate(3deg)}}
        .title{font-family:'Orbitron',sans-serif;font-size:48px;font-weight:900;background:linear-gradient(135deg,#667eea,#764ba2,#ff6b6b,#ffd93d);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease infinite;margin-bottom:8px}
        @keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
        .tagline{font-size:14px;color:rgba(255,255,255,0.45);letter-spacing:5px;text-transform:uppercase;margin-bottom:40px}
        .divider{width:80px;height:4px;background:linear-gradient(90deg,#667eea,#ff6b6b);border-radius:2px;margin:0 auto 35px}
        .badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,107,107,0.12);border:1px solid rgba(255,107,107,0.3);padding:10px 24px;border-radius:50px;font-size:14px;font-weight:600;color:#ff6b6b;margin-bottom:30px}
        .badge-dot{width:10px;height:10px;background:#ff6b6b;border-radius:50%;animation:blink 1.2s ease-in-out infinite}
        @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
        .coming-soon{font-family:'Orbitron',sans-serif;font-size:36px;font-weight:700;color:#fff;margin-bottom:15px;text-shadow:0 0 30px rgba(102,126,234,0.4)}
        .description{font-size:17px;color:rgba(255,255,255,0.6);line-height:1.8;margin-bottom:40px}
        .description span{color:#ffd93d}
        .progress-wrapper{margin-bottom:35px}
        .progress-label{display:flex;justify-content:space-between;font-size:13px;color:rgba(255,255,255,0.4);margin-bottom:8px}
        .progress-bar{width:100%;height:8px;background:rgba(255,255,255,0.08);border-radius:10px;overflow:hidden}
        .progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#667eea,#764ba2,#ff6b6b);background-size:200% 100%;border-radius:10px;animation:fillBar 2.5s ease-out forwards,shimmer 2s linear infinite}
        @keyframes fillBar{to{width:35%}}
        @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
        .footer-text{font-size:13px;color:rgba(255,255,255,0.25);margin-top:20px}
        @media(max-width:600px){.container{padding:40px 25px}.title{font-size:28px}.coming-soon{font-size:22px}.mascot{font-size:70px}.description{font-size:15px}}
    </style>
</head>
<body>
    <div class="stars" id="stars"></div>
    <div class="gear-ring"></div><div class="gear-ring"></div><div class="gear-ring"></div>
    <div class="bg-icons" id="bgIcons"></div>
    <div class="container">
        <span class="mascot">🤖</span>
        <h1 class="title">Classs Robotics</h1>
        <p class="tagline">Summer Robotics Camp for Kids</p>
        <div class="divider"></div>
        <div class="badge"><span class="badge-dot"></span> Website Under Construction</div>
        <h2 class="coming-soon">🚀 Coming Soon</h2>
        <p class="description">
            We're building something <span>awesome</span> for young innovators!<br>
            Our robotics summer camp website is getting assembled — just like a robot 🔧<br>
            Stay tuned for courses, challenges &amp; more!
        </p>
        <div class="progress-wrapper">
            <div class="progress-label"><span>Building Progress</span><span>35%</span></div>
            <div class="progress-bar"><div class="progress-fill"></div></div>
        </div>
        <p class="footer-text">© 2026 Classs Robotics · Launching Summer 2026</p>
    </div>
    <script>
        const starsEl=document.getElementById('stars');
        for(let i=0;i<120;i++){const s=document.createElement('div');s.className='star';s.style.left=Math.random()*100+'%';s.style.top=Math.random()*100+'%';s.style.animationDelay=Math.random()*3+'s';s.style.animationDuration=(2+Math.random()*3)+'s';starsEl.appendChild(s)}
        const icons=['🤖','⚙️','🔩','💡','🚀','🛸','🔋','🧲','📡','🛠️','🎮','💻'];
        const bg=document.getElementById('bgIcons');
        for(let i=0;i<18;i++){const s=document.createElement('span');s.className='bg-icon';s.textContent=icons[Math.floor(Math.random()*icons.length)];s.style.left=Math.random()*100+'%';s.style.top=Math.random()*100+'%';s.style.animationDelay=Math.random()*8+'s';s.style.animationDuration=(6+Math.random()*6)+'s';s.style.fontSize=(24+Math.random()*30)+'px';bg.appendChild(s)}
    </script>
</body>
</html>