*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,sans-serif;background:#0e0f13;color:#f4f6f8;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-family:Space Grotesk,sans-serif}a{text-decoration:none;color:inherit}.clip-hexagon{clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}.glass-panel{background:#1a1c2199;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1)}.neon-glow-cyan{box-shadow:0 0 15px #00f0ff66}.neon-glow-blue{box-shadow:0 0 20px #3b82f680}.hex-pattern{background-image:url("data:image/svg+xml,%3Csvg width='24' height='40' viewBox='0 0 24 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40c5.523 0 10-4.477 10-10V10c0-5.523 4.477-10 10-10H0v40z' fill='%231A1C21' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E")}.animate-gradient{background-size:200% auto;animation:shine 4s linear infinite}@keyframes shine{to{background-position:200% center}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse{animation:pulse 2s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-float{animation:float 3s ease-in-out infinite}@keyframes bounce-y{0%,to{transform:translateY(0) translate(-50%)}50%{transform:translateY(10px) translate(-50%)}}.animate-bounce-y{animation:bounce-y 2s ease-in-out infinite}.container{max-width:1280px;margin:0 auto;padding:0 1.5rem}.section{padding:5rem 1.5rem}.site-nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:all .3s ease;height:5rem}.site-nav.scrolled{height:4rem}.site-nav .nav-inner{max-width:1280px;margin:0 auto;padding:0 1.5rem;height:100%;display:flex;align-items:center;justify-content:space-between}.site-nav .nav-links{display:flex;gap:2rem;list-style:none}.site-nav .nav-links a{font-size:.875rem;font-weight:500;color:#9ca3af;transition:color .2s}.site-nav .nav-links a:hover{color:#fff}.nav-brand{display:flex;align-items:center;gap:.5rem}.nav-brand-icon{position:relative;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center}.nav-brand-icon .hex-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:#3b82f633}.nav-brand span{font-family:Space Grotesk,sans-serif;font-weight:700;font-size:1.125rem;color:#fff;letter-spacing:-.02em}.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5rem 1.5rem 3rem;overflow:hidden}.hero-glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(100px)}.hero-glow.primary{top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:#3b82f61a}.hero-glow.secondary{top:0;right:0;width:300px;height:300px;background:#a855f71a}.hero-title{font-size:clamp(2.5rem,7vw,4.5rem);font-weight:700;letter-spacing:-.03em;color:#fff;margin-bottom:1.5rem;position:relative;z-index:10}.hero-title .gradient-text{background:linear-gradient(to right,#3b82f6,#00f5d4,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:clamp(1rem,2.5vw,1.25rem);color:#9ca3af;max-width:500px;line-height:1.6;font-weight:300;margin-bottom:2.5rem}.hero-subtitle .sub-line{font-size:.875rem;opacity:.6}.scroll-indicator{position:absolute;bottom:2.5rem;left:50%;opacity:.5;color:#fff}.spectrum-logo{position:relative;margin-bottom:2rem}.spectrum-logo .outer-glow{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to right,#a78bfa,#3b82f6,#00f5d4);opacity:.4;filter:blur(30px);border-radius:50%;transition:opacity .7s}.spectrum-logo:hover .outer-glow{opacity:.6}.spectrum-logo .hex-outer{position:relative;width:10rem;height:10rem;display:flex;align-items:center;justify-content:center;z-index:10}.spectrum-logo .hex-border{position:absolute;top:0;right:0;bottom:0;left:0;background:#22d3ee;filter:blur(2px);opacity:.8}.spectrum-logo .hex-inner{position:absolute;top:2px;right:2px;bottom:2px;left:2px;background:#0e0f13;z-index:10;display:flex;align-items:center;justify-content:center}.spectrum-logo .spectrum-dots{display:flex;flex-direction:column;align-items:center;gap:0;padding-top:.5rem;z-index:20}.spectrum-logo .spectrum-dot{width:1.5rem;height:1.25rem;margin-top:-4px}.spectrum-logo .side-bar{position:absolute;height:4rem;width:3px;background:#22d3ee;border-radius:9999px;opacity:.8;box-shadow:0 0 5px #00f0ff;top:2.5rem;z-index:5}.spectrum-logo .side-bar.left{left:1.5rem}.spectrum-logo .side-bar.right{right:1.5rem}.cta-button{position:relative;display:inline-flex;align-items:center;gap:.5rem;padding:1rem 2rem;background:transparent;overflow:hidden;border-radius:.5rem;cursor:pointer;border:none;font-family:Space Grotesk,sans-serif;font-weight:700;font-size:1rem;color:#fff;transition:transform .2s}.cta-button:hover{transform:scale(1.05)}.cta-button:active{transform:scale(.95)}.cta-button .btn-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:#3b82f633;border:1px solid rgba(59,130,246,.5);border-radius:.5rem;transition:background .2s}.cta-button:hover .btn-bg{background:#3b82f64d}.cta-button .btn-content{position:relative;z-index:10;display:flex;align-items:center;gap:.5rem}.cta-button .btn-content svg{transition:transform .2s}.cta-button:hover .btn-content svg{transform:translate(4px)}.spectrum-separator{width:100%;padding:2.5rem 0;background:#0e0f13;position:relative;z-index:20}.spectrum-separator .dots{display:flex;justify-content:center;align-items:center;gap:1rem;opacity:.6}.spectrum-separator .sep-dot{width:1rem;height:1rem}.spectrum-separator .sep-dot.center-dot{width:1.5rem;height:1.5rem}.about-section{padding:5rem 1.5rem;position:relative}.about-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.about-image-wrapper{position:relative}.about-image-wrapper .img-glow{position:absolute;top:0;right:0;bottom:0;left:0;background:#3b82f633;filter:blur(40px);border-radius:50%}.about-image-container{position:relative;z-index:10;border-radius:1rem;padding:3px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center}.about-image-container img{width:100%;height:100%;object-fit:cover;border-radius:.75rem;opacity:.8;mix-blend-mode:screen}.about-image-container .img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,#0E0F13,transparent,transparent)}.about-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:9999px;border:1px solid rgba(59,130,246,.3);background:#3b82f61a;color:#3b82f6;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1.5rem}.about-badge .badge-dot{width:.5rem;height:.5rem;border-radius:50%;background:#3b82f6}.about-title{font-size:clamp(2rem,5vw,3rem);font-weight:700;color:#fff;margin-bottom:1.5rem;line-height:1.2}.about-title .fade-text{background:linear-gradient(to right,#fff,#64748b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.about-description{color:#9ca3af;font-size:1.125rem;line-height:1.7;margin-bottom:2rem}.about-features{display:flex;flex-direction:column;gap:1.5rem}.about-feature{display:flex;align-items:center;gap:1rem;cursor:pointer}.about-feature .feature-icon{width:3rem;height:3rem;border-radius:.5rem;background:#1a1c21;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:border-color .2s;flex-shrink:0}.about-feature:hover .feature-icon{border-color:#3b82f680}.about-feature h4{color:#fff;font-weight:700;font-size:1rem;margin-bottom:.125rem}.about-feature p{color:#64748b;font-size:.875rem}.products-section{padding:6rem 1.5rem;background:#0e0f13;position:relative;overflow:hidden}.products-section .dot-grid{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.1;background-image:radial-gradient(#3B82F6 1px,transparent 1px);background-size:32px 32px}.products-header{text-align:center;margin-bottom:4rem;position:relative;z-index:10}.products-header h2{font-size:2rem;font-weight:700;color:#fff;margin-bottom:.75rem}.products-header p{color:#9ca3af}.products-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;position:relative;z-index:10}.product-card{position:relative;transition:transform .3s ease}.product-card:hover{transform:translateY(-10px)}.product-card .card-glow{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:1rem;filter:blur(8px);opacity:.2;transition:opacity .5s}.product-card:hover .card-glow{opacity:.6}.product-card.astroware .card-glow{background:linear-gradient(to right,#ea580c,#d97706)}.product-card.skillmatch .card-glow{background:linear-gradient(to right,#3b82f6,#6366f1)}.product-card.hexagon .card-glow{background:linear-gradient(to right,#2563eb,#3b82f6)}.product-card .card-body{position:relative;height:100%;border-radius:1rem;padding:2rem;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.1);transition:border-color .3s}.product-card.astroware:hover .card-body{border-color:#fb923c80}.product-card.skillmatch:hover .card-body{border-color:#3b82f680}.product-card.hexagon:hover .card-body{border-color:#3b82f64d}.product-card .card-icon{width:3rem;height:3rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;transition:transform .3s}.product-card:hover .card-icon{transform:scale(1.1)}.product-card.astroware .card-icon{background:#fb923c33;color:#fb923c}.product-card.skillmatch .card-icon,.product-card.hexagon .card-icon{background:#3b82f633;color:#3b82f6}.product-card h3{font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:.5rem;transition:color .3s}.product-card.astroware:hover h3{color:#fb923c}.product-card.skillmatch:hover h3,.product-card.hexagon:hover h3{color:#3b82f6}.product-card .card-desc{color:#9ca3af;font-size:.875rem;margin-bottom:1.5rem;flex-grow:1;line-height:1.6}.product-card .card-features{list-style:none;display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.product-card .card-features li{display:flex;align-items:flex-start;gap:.5rem;font-size:.875rem;color:#cbd5e1}.product-card .card-features li svg{flex-shrink:0;margin-top:2px}.product-card .card-btn{width:100%;padding:.75rem;border-radius:.5rem;font-size:.875rem;font-weight:700;font-family:Space Grotesk,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s;border:none;color:#fff}.product-card.astroware .card-btn{background:#fb923c;box-shadow:0 8px 20px #fb923c33}.product-card.astroware .card-btn:hover{background:#f97316}.product-card.skillmatch .card-btn{background:#3b82f6;box-shadow:0 8px 20px #3b82f633}.product-card.skillmatch .card-btn:hover{background:#2563eb}.product-card.hexagon .card-btn{background:transparent;border:1px solid rgba(59,130,246,.3);color:#3b82f6}.product-card.hexagon .card-btn:hover{background:#3b82f61a}.product-card .card-btn.secondary{background:transparent;border:1px solid rgba(255,255,255,.1);color:#9ca3af;margin-top:.75rem;font-weight:500;text-decoration:none}.product-card .card-btn.secondary:hover{color:#fff;border-color:#fff3;background:#ffffff0d}.tech-section{padding:5rem 1.5rem;background:#0e0f13}.tech-header{max-width:800px;margin:0 auto 2.5rem;display:flex;align-items:center;gap:1rem}.tech-header .line{flex:1;height:1px;background:#ffffff1a}.tech-header h2{font-size:1.25rem;font-weight:700;color:#cbd5e1;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}.tech-grid{max-width:800px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.tech-item{padding:1.5rem;border-radius:.5rem;background:#1a1c21;border:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;gap:.75rem;cursor:default;transition:all .3s}.tech-item svg{width:2.5rem;height:2.5rem;color:#64748b;transition:color .3s}.tech-item span{color:#9ca3af;font-weight:500;transition:color .3s}.tech-item:hover span{color:#fff}.tech-item.react:hover{border-color:#3b82f680;box-shadow:0 0 15px #3b82f626}.tech-item.react:hover svg{color:#3b82f6}.tech-item.spring:hover{border-color:#22c55e80;box-shadow:0 0 15px #22c55e26}.tech-item.spring:hover svg{color:#22c55e}.tech-item.supabase:hover{border-color:#06b6d480;box-shadow:0 0 15px #06b6d426}.tech-item.supabase:hover svg{color:#06b6d4}.tech-item.gcloud:hover{border-color:#f9731680;box-shadow:0 0 15px #f9731626}.tech-item.gcloud:hover svg{color:#f97316}.tech-item.java:hover{border-color:#ef444480;box-shadow:0 0 15px #ef444426}.tech-item.java:hover svg{color:#ef4444}.tech-item.javascript:hover{border-color:#eab30880;box-shadow:0 0 15px #eab30826}.tech-item.javascript:hover svg{color:#eab308}.tech-item.typescript:hover{border-color:#3b82f680;box-shadow:0 0 15px #3b82f626}.tech-item.typescript:hover svg{color:#3b82f6}.tech-item.firebase:hover{border-color:#fb923c80;box-shadow:0 0 15px #fb923c26}.tech-item.firebase:hover svg{color:#fb923c}.site-footer{background:#1a1c21;border-top:1px solid rgba(255,255,255,.05);padding:3rem 1.5rem}.footer-inner{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:2rem}.footer-brand{display:flex;align-items:center;gap:.75rem}.footer-brand .hex-logo{width:2rem;height:2rem;background:#fff;color:#0e0f13;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.25rem;font-family:Space Grotesk,sans-serif}.footer-brand-text span:first-child{color:#fff;font-weight:700;font-family:Space Grotesk,sans-serif;letter-spacing:-.02em;display:block}.footer-brand-text span:last-child{color:#64748b;font-size:.75rem;display:block}.footer-links{display:flex;gap:1.5rem}.footer-links a{font-size:.875rem;color:#9ca3af;transition:color .2s}.footer-links a:hover{color:#3b82f6}.footer-copy{color:#4b5563;font-size:.875rem}.mobile-menu-btn{display:none;background:none;border:none;color:#fff;padding:.5rem;cursor:pointer}@media (max-width: 768px){.about-grid{grid-template-columns:1fr}.about-image-wrapper{order:2}.products-grid{grid-template-columns:1fr}.tech-grid{grid-template-columns:repeat(2,1fr)}.footer-inner{flex-direction:column;text-align:center}.site-nav .nav-links{display:none}.mobile-menu-btn{display:block}.spectrum-logo .hex-outer{width:8rem;height:8rem}}@media (min-width: 769px) and (max-width: 1024px){.products-grid{grid-template-columns:1fr 1fr}}.detail-page{min-height:100vh;background:#0e0f13;color:#f4f6f8;padding-top:5rem}.detail-hero{padding:3rem 1.5rem 4rem;text-align:center;position:relative;overflow:hidden}.detail-hero .hero-glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(100px)}.detail-hero-inner{max-width:800px;margin:0 auto;position:relative;z-index:10}.detail-hero h1{font-size:clamp(2.5rem,6vw,3.5rem);font-weight:700;color:#fff;margin-bottom:1rem;letter-spacing:-.03em}.detail-hero .tagline{font-size:1.25rem;color:#9ca3af;max-width:600px;margin:0 auto 2rem;line-height:1.6}.story-section{padding:4rem 1.5rem}.story-inner{max-width:900px;margin:0 auto}.story-section h2{font-size:2rem;font-weight:700;color:#fff;margin-bottom:2rem}.story-content{display:flex;flex-direction:column;gap:1.5rem;color:#cbd5e1;font-size:1.1rem;line-height:1.8}.screenshots-section{padding:4rem 1.5rem;background:#1a1c214d}.screenshots-inner{max-width:1200px;margin:0 auto}.screenshots-section h2{font-size:1.5rem;font-weight:700;color:#fff;text-align:center;margin-bottom:3rem}.screenshots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.features-section{padding:4rem 1.5rem}.features-inner{max-width:1000px;margin:0 auto}.features-section h2{font-size:1.5rem;font-weight:700;color:#fff;text-align:center;margin-bottom:3rem}.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.faq-section{padding:4rem 1.5rem;background:#1a1c214d}.faq-inner{max-width:800px;margin:0 auto}.faq-section h2{font-size:1.5rem;font-weight:700;color:#fff;text-align:center;margin-bottom:3rem}.detail-cta-section{padding:4rem 1.5rem;text-align:center}.detail-cta-section h2{font-size:1.75rem;font-weight:700;color:#fff;margin-bottom:.75rem}.detail-cta-buttons{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}@media (max-width: 768px){.detail-page{padding-top:4rem}.detail-hero{padding:2rem 1rem 3rem}.detail-hero h1{font-size:2rem}.detail-hero .tagline{font-size:1rem}.story-section{padding:3rem 1rem}.story-content{font-size:1rem}.screenshots-section{padding:3rem 1rem}.screenshots-grid{grid-template-columns:1fr}.features-section{padding:3rem 1rem}.features-grid{grid-template-columns:1fr}.faq-section,.detail-cta-section{padding:3rem 1rem}.detail-cta-section h2{font-size:1.5rem}.detail-cta-buttons{flex-direction:column;align-items:center}}