:root{--primary:#64ffda;--primary-bg:#020c1b;--secondary-bg:#0a192f;--tertiary-bg:#112240;--text-primary:#e6f1ff;--text-secondary:#8892b0;--text-accent:#ccd6f6;--font-main:"Outfit", sans-serif;--transition:all .3s cubic-bezier(.645, .045, .355, 1)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;overflow-x:hidden}body{font-family:var(--font-main);background-color:var(--primary-bg);color:var(--text-primary);line-height:1.6;overflow-x:hidden}#app{position:relative}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.underwater-overlay{z-index:-1;pointer-events:none;opacity:.6;background-color:#0000;background-image:radial-gradient(circle at 50% 20%,#0a192f66 0%,#020c1b 100%),url(/assets/bg.jpg);background-position:50%;background-repeat:repeat,repeat;background-size:cover;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;width:100%;height:100%;position:fixed;top:0;left:0}.underwater-overlay:before{content:"";opacity:.05;background-image:url(https://www.transparenttextures.com/patterns/cubes.png);width:100%;height:100%;position:absolute;top:0;left:0}header{z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #64ffda1a;width:100%;padding:1.5rem 0;position:fixed;top:0}nav{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 2rem;display:flex}.logo{color:var(--primary);letter-spacing:2px;font-size:1.5rem;font-weight:800}nav ul{gap:2rem;list-style:none;display:flex}nav ul li a{color:var(--text-primary);transition:var(--transition);font-size:.9rem;font-weight:400;text-decoration:none;position:relative}nav ul li a:hover,nav ul li a.active{color:var(--primary)}nav ul li a.active:after{content:"";background-color:var(--primary);width:100%;height:2px;position:absolute;bottom:-5px;left:0}#hero{text-align:center;justify-content:center;align-items:center;height:100vh;display:flex}h1{margin-bottom:1rem;font-size:4.5rem;font-weight:800;line-height:1.1}.gradient-text{background:linear-gradient(90deg, var(--primary), #00d2ff);-webkit-text-fill-color:transparent;-webkit-background-clip:text}#hero p{color:var(--text-secondary);max-width:600px;margin:0 auto 2rem;font-size:1.25rem}.hero-btns{justify-content:center;gap:1.5rem;display:flex}.btn{transition:var(--transition);border-radius:4px;padding:1rem 2rem;font-size:.9rem;font-weight:600;text-decoration:none}.btn.primary{color:var(--primary);border:1px solid var(--primary);background-color:#0000}.btn.primary:hover{background-color:#64ffda1a;transform:translateY(-3px)}.btn.secondary{color:var(--text-accent)}.section{padding:100px 0}.section-title{text-align:center;margin-bottom:3rem;font-size:2.5rem}.section-subtitle{text-align:center;color:var(--text-secondary);max-width:700px;margin-bottom:3rem;margin-left:auto;margin-right:auto}.features-grid,.hardware-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;display:grid}.hw-card{flex-direction:column;display:flex;padding:1rem!important}.hw-img{background-position:50%;background-size:cover;border:1px solid #ffffff1a;border-radius:8px;width:100%;height:200px;margin-bottom:1.5rem}.hw-info h4{color:var(--primary);margin-bottom:.5rem}.hw-info p{color:var(--text-secondary);font-size:.9rem}.glass{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:var(--transition);background:#112240b3;border:1px solid #64ffda1a;border-radius:12px;padding:2.5rem}.glass:hover{border-color:var(--primary);transform:translateY(-10px)}.feature-card .icon{margin-bottom:1.5rem;font-size:2.5rem}.feature-card h3{color:var(--text-accent);margin-bottom:1rem}.feature-card p{color:var(--text-secondary)}.dashboard-preview{padding:3rem}.dashboard-content{grid-template-columns:1fr 1fr;align-items:center;gap:3rem;display:grid}.architecture-content{grid-template-columns:1fr 1fr;align-items:center;gap:3rem;padding:3rem;display:grid}.arch-diagram img{border-radius:12px;width:100%;box-shadow:0 20px 40px #0006}.infra-grid{grid-template-columns:1fr 1fr;gap:2rem;display:grid}.infra-card{padding:1.5rem!important}.infra-card img{object-fit:cover;border-radius:8px;width:100%;height:300px;margin-bottom:1.5rem}.infra-info h4{color:var(--primary);margin-bottom:.5rem}.kits-content{padding:3rem}.kit-grid{grid-template-columns:1fr 1.2fr;align-items:center;gap:4rem;display:grid}.kit-item img{border-radius:12px;width:100%;box-shadow:0 15px 30px #0000004d}.kit-info{text-align:center;margin-top:1.5rem}.kit-info h4{color:var(--primary)}.check-list{margin-top:1.5rem;list-style:none}.check-list li{color:var(--text-secondary);align-items:center;gap:10px;margin-bottom:.8rem;display:flex}.check-list li:before{content:"✓";color:var(--primary)}.mockup-container{width:100%;height:400px;position:relative}.mockup-img{background-position:50%;background-size:cover;border:4px solid #ffffff1a;border-radius:20px;animation:6s ease-in-out infinite float;position:absolute;box-shadow:0 20px 40px #00000080,0 0 20px #64ffda33}#mockup-1{z-index:2;width:200px;height:400px;top:0;left:0}#mockup-2{z-index:1;width:300px;height:200px;animation-delay:2s;bottom:0;right:0}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.contact-card{text-align:center;max-width:800px;margin:0 auto}.contact-card h2{margin-bottom:1rem;font-size:2.5rem}#contact-form{justify-content:center;gap:1rem;margin-top:2rem;display:flex}#contact-form input{border:1px solid var(--text-secondary);color:#fff;background:#020c1b80;border-radius:4px;width:300px;padding:1rem}.fish-container{pointer-events:none;z-index:999;width:100vw;height:100vh;position:fixed;top:0;left:0}#swimming-fish{transform-origin:50%;mix-blend-mode:screen;filter:brightness(1.2)contrast(1.1);z-index:100;will-change:transform;width:350px;height:auto;transition:all .3s;position:absolute}#swimming-fish:hover{filter:brightness(1.3)drop-shadow(0 0 30px #64ffda66)}.cursor-follower{background:var(--primary);pointer-events:none;z-index:9999;mix-blend-mode:difference;border-radius:50%;width:20px;height:20px;position:fixed;transform:translate(-50%,-50%)}footer{text-align:center;color:var(--text-secondary);border-top:1px solid #64ffda1a;padding:3rem 0;font-size:.8rem}@media (width<=768px){h1{font-size:2.5rem}.dashboard-content{grid-template-columns:1fr}#swimming-fish{width:150px}#contact-form{flex-direction:column;align-items:center}#contact-form input{width:100%}}