* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: system-ui, -apple-system, sans-serif; background: #030712; color: #f3f4f6; line-height: 1.6; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
.section { padding: 4rem 0; }
.section-title { font-size: 2.5rem; font-weight: bold; background: linear-gradient(to right, #8180ff, #fb923c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; margin-bottom: 1rem; }
.section-desc { font-size: 1.25rem; color: #d1d5db; text-align: center; max-width: 48rem; margin: 0 auto 4rem; }

.btn-primary { display: inline-block; background: linear-gradient(to right, #4f46e5, #6366f1); color: white; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.btn-primary:hover { background: #6366f1; transform: scale(1.05); }
.btn-secondary { display: inline-block; background: #1f2937; color: #8180ff; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none; border: 2px solid #6366f1; transition: all 0.2s; }
.btn-secondary:hover { background: #374151; transform: scale(1.05); }

/* Header */
.header { background: rgba(17, 24, 39, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid #374151; position: sticky; top: 0; z-index: 50; overflow: visible; }
.nav { max-width: 1280px; margin: 0 auto; padding: 0.25rem 1rem; display: flex; align-items: center; justify-content: space-between; height: 6rem; }
.logo-link { display: flex; align-items: center; height: 100%; }
.logo-img { height: 100%; width: auto; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; transform: scale(1.8); transform-origin: left center; }
.logo-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
@media (min-width: 768px) { .nav { height: 7rem; } }
@media (min-width: 1024px) { .nav { height: 7.5rem; } }
.desktop-menu { display: flex; gap: 2rem; align-items: center; }
.desktop-menu a { color: #d1d5db; text-decoration: none; font-weight: 500; transition: color 0.2s; }
.desktop-menu a:hover { color: #8180ff; }
.menu-btn { display: none; background: none; border: none; color: #d1d5db; font-size: 1.5rem; cursor: pointer; padding: 0.5rem; }
.mobile-menu { display: none; flex-direction: column; padding: 1rem; border-top: 1px solid #374151; }
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 0.5rem 0; color: #d1d5db; text-decoration: none; }
.mobile-menu a:hover { color: #8180ff; }
@media (max-width: 768px) { .desktop-menu { display: none; } .menu-btn { display: block; } .nav { height: 5.5rem; } }

/* Hero */
.hero { min-height: 100vh; background: linear-gradient(to bottom right, #030712, #111827, #1f2937); display: flex; align-items: center; padding: 2rem 0; }
.hero-content { max-width: 1280px; margin: 0 auto; padding: 0 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.hero-left { display: flex; flex-direction: column; gap: 2rem; }
.badge { display: inline-block; padding: 0.5rem 1.5rem; background: linear-gradient(to right, rgba(79, 70, 229, 0.2), rgba(234, 88, 12, 0.2)); border-radius: 9999px; font-size: 0.875rem; font-weight: 600; border: 1px solid rgba(99, 102, 241, 0.3); }
.hero h1 { font-size: 3.5rem; font-weight: bold; line-height: 1.2; }
.hero h1 .highlight { background: linear-gradient(to right, #8180ff, #fb923c, #8180ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
.hero p { font-size: 1.25rem; color: #d1d5db; }
.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-right { display: flex; flex-direction: column; gap: 1.5rem; }
.hero-video { height: 16rem; border-radius: 1rem; overflow: hidden; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; }
.feature-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.feature-card { background: rgba(31, 41, 55, 0.8); backdrop-filter: blur(12px); padding: 1rem; border-radius: 0.75rem; border: 1px solid rgba(99, 102, 241, 0.2); transition: all 0.3s; }
.feature-card:hover { border-color: rgba(99, 102, 241, 0.5); transform: scale(1.05); }
.feature-card img, .feature-card .icon { width: 3rem; height: 3rem; margin-bottom: 0.5rem; }
.feature-card h3 { font-size: 0.875rem; font-weight: bold; margin-bottom: 0.25rem; }
.feature-card p { font-size: 0.75rem; color: #9ca3af; }
@media (max-width: 1024px) { .hero-content { grid-template-columns: 1fr; } .hero h1 { font-size: 2.5rem; } }

/* About */
.about { background: #111827; }
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 4rem; }
.feature-box { background: linear-gradient(to bottom right, #1f2937, #111827); padding: 2rem; border-radius: 1rem; border: 1px solid #374151; transition: all 0.3s; }
.feature-box:hover { border-color: rgba(99, 102, 241, 0.5); transform: scale(1.02); }
.feature-box .icon { font-size: 2rem; margin-bottom: 1rem; }
.feature-box h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.feature-box p { color: #9ca3af; }
.about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.about-images { display: grid; grid-template-columns: 2fr 1fr; gap: 0.75rem; }
.about-images .img-large { grid-row: span 2; }
.about-images img { width: 100%; height: 100%; object-fit: cover; border-radius: 1rem; }
.about-images .img-large img { height: 16rem; }
.about-images .img-small img { height: 6rem; }
.about-text h3 { font-size: 2rem; font-weight: bold; background: linear-gradient(to right, #fef08a, #fde047, #fcd34d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.8)); }
.about-text p { color: #d1d5db; margin-bottom: 1rem; }
.about-text ul { list-style: none; }
.about-text li { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; color: #d1d5db; }
.about-text li::before { content: "✓"; display: inline-block; width: 1.5rem; height: 1.5rem; background: linear-gradient(to bottom right, #6366f1, #4f46e5); border-radius: 50%; text-align: center; font-size: 0.75rem; line-height: 1.5rem; }
@media (max-width: 1024px) { .features-grid { grid-template-columns: 1fr; } .about-content { grid-template-columns: 1fr; } }

/* Programs */
.programs { background: #1f2937; }
.programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.program-card { background: linear-gradient(to bottom right, #111827, #1f2937); border-radius: 1rem; border: 1px solid #374151; overflow: hidden; transition: all 0.3s; }
.program-card:hover { border-color: rgba(99, 102, 241, 0.5); transform: scale(1.02); }
.program-card img { width: 100%; height: 12rem; object-fit: cover; }
.program-body { padding: 2rem; }
.program-body h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.program-body p { color: #9ca3af; margin-bottom: 1.5rem; }
.program-body ul { list-style: none; }
.program-body li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.875rem; color: #d1d5db; }
.program-body li::before { content: ""; width: 0.5rem; height: 0.5rem; background: #6366f1; border-radius: 50%; }
@media (max-width: 768px) { .programs-grid { grid-template-columns: 1fr; } }

/* Workshop */
.workshop { background: linear-gradient(to bottom, #111827, #1f2937); }
.workshop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.workshop-card { background: #1f2937; border-radius: 1rem; border: 1px solid #374151; overflow: hidden; transition: all 0.3s; }
.workshop-card:hover { transform: scale(1.02); }
.workshop-card img { width: 100%; height: 12rem; object-fit: cover; }
.workshop-card .workshop-icon-img { object-fit: contain; padding: 1rem; background: #111827; }
.workshop-header { padding: 1.5rem; color: white; }
.workshop-header.purple { background: linear-gradient(to right, #6366f1, #4f46e5); }
.workshop-header.orange { background: linear-gradient(to right, #f97316, #ea580c); }
.workshop-header.accent { background: linear-gradient(to right, #fb923c, #f97316); }
.workshop-header.blue { background: linear-gradient(to right, #8180ff, #6366f1); }
.workshop-header.yellow { background: linear-gradient(to right, #eab308, #f59e0b); }
.workshop-header h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.workshop-header p { opacity: 0.9; font-size: 0.875rem; }
.workshop-body { padding: 1.5rem; background: #111827; }
.workshop-body h4 { font-size: 1rem; margin-bottom: 1rem; }
.workshop-body ul { list-style: none; }
.workshop-body li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; color: #d1d5db; font-size: 0.875rem; }
.workshop-body li::before { content: ""; width: 0.5rem; height: 0.5rem; background: #6366f1; border-radius: 50%; }
@media (max-width: 1024px) { .workshop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .workshop-grid { grid-template-columns: 1fr; } }

/* Robots */
.robots { background: #1f2937; }
.robots-header { position: relative; height: 20rem; border-radius: 1rem; overflow: hidden; margin-bottom: 4rem; }
.robots-header img { width: 100%; height: 100%; object-fit: cover; }
.robots-header-text { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; background: linear-gradient(to top, rgba(17, 24, 39, 0.9), transparent); }
.robots-header-text h2 { font-size: 2.5rem; background: linear-gradient(to right, #8180ff, #fb923c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem; }
.robots-header-text p { color: #e5e7eb; }
.robots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.robot-card { background: linear-gradient(to bottom right, #111827, #1f2937); border-radius: 1rem; border: 1px solid #374151; overflow: hidden; transition: all 0.3s; }
.robot-card:hover { border-color: rgba(99, 102, 241, 0.5); transform: scale(1.02); }
.robot-card img { width: 100%; height: 14rem; object-fit: cover; }
.robot-card h3 { padding: 1rem 1rem 0; font-size: 1.25rem; }
.robot-card p { padding: 0.5rem 1rem 1rem; font-size: 0.875rem; color: #9ca3af; }
.robots-info { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 4rem; padding: 2rem; background: linear-gradient(to bottom right, #111827, #1f2937); border-radius: 1rem; border: 1px solid #374151; align-items: center; }
.robots-info h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.robots-info p { color: #d1d5db; margin-bottom: 1rem; }
.robots-info ul { list-style: none; }
.robots-info li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; color: #d1d5db; }
.robots-info li::before { content: "✓"; display: inline-block; width: 1.5rem; height: 1.5rem; background: linear-gradient(to bottom right, #6366f1, #4f46e5); border-radius: 50%; text-align: center; font-size: 0.75rem; line-height: 1.5rem; }
.robots-info img { width: 100%; height: 20rem; object-fit: cover; border-radius: 0.75rem; }
@media (max-width: 1024px) { .robots-grid { grid-template-columns: repeat(2, 1fr); } .robots-info { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .robots-grid { grid-template-columns: 1fr; } }

/* Contact */
.contact { background: #111827; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.contact-info h3 { font-size: 1.5rem; margin-bottom: 1.5rem; }
.info-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.info-item .icon { font-size: 1.5rem; }
.info-item h4 { font-size: 1rem; margin-bottom: 0.25rem; }
.info-item p, .info-item a { color: #9ca3af; text-decoration: none; }
.info-item a:hover { color: #8180ff; }
.map { margin-top: 2rem; border-radius: 0.75rem; overflow: hidden; }
.contact-form { background: #1f2937; border: 1px solid #374151; border-radius: 1rem; padding: 2rem; }
.contact-form h3 { font-size: 1.5rem; margin-bottom: 1.5rem; }
.contact-form input, .contact-form textarea { width: 100%; padding: 0.75rem 1rem; background: #111827; border: 1px solid #4b5563; border-radius: 0.5rem; color: white; margin-bottom: 1rem; font-family: inherit; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: #6366f1; }
.contact-form button { width: 100%; padding: 0.75rem; margin-top: 0.5rem; }
@media (max-width: 1024px) { .contact-grid { grid-template-columns: 1fr; } }

/* Footer */
.footer { background: #030712; border-top: 1px solid #1f2937; padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 2rem; }
.footer h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.footer p, .footer a { color: #9ca3af; font-size: 0.875rem; text-decoration: none; display: block; margin-bottom: 0.5rem; }
.footer a:hover { color: white; }
.copyright { text-align: center; color: #6b7280; font-size: 0.875rem; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } }