.objects-page-main{position:relative;color:var(--text-main);overflow-x:hidden} .objects-hero{position:relative;padding:10rem 0 6rem;overflow:hidden;text-align:center} .objects-hero-content{position:relative;z-index:10;max-width:800px;margin:0 auto} .objects-hero h1{font-size:clamp(3rem,5vw,4.5rem);line-height:1.1;margin-bottom:1.5rem;font-weight:700;letter-spacing:-1px} .objects-hero p{font-size:1.15rem;color:var(--text-muted);line-height:1.7;margin-bottom:2rem} .object-category-title{font-size:1.6rem;color:#fff;margin:3rem 0 2rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:12px;font-weight:600} .object-category-title iconify-icon{color:var(--primary);font-size:1.8rem;filter:drop-shadow(0 0 8px rgba(0,123,255,0.4))} .objects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem} .object-card{--accent:var(--primary);background:rgba(13,17,22,0.4);backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);position:relative;overflow:hidden;display:flex;flex-direction:column} .object-card.dev-tier{--accent:#a855f7} .object-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,0.15);box-shadow:0 20px 40px rgba(0,0,0,0.5),inset 0 0 20px rgba(255,255,255,0.02);background:rgba(13,17,22,0.8)} .object-card h4{font-size:1.25rem;margin-top:1.5rem;margin-bottom:0.5rem;color:#fff} .object-card p{font-size:0.9rem;color:var(--text-muted);margin:0 0 1.5rem 0;line-height:1.6;flex-grow:1} .obj-capabilities{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;border-top:1px solid rgba(255,255,255,0.05);padding-top:1rem} .obj-capabilities span{font-size:0.75rem;color:#8b949e;background:rgba(255,255,255,0.03);padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,0.05);transition:all 0.3s ease} .object-card:hover .obj-capabilities span{color:var(--accent);border-color:rgba(var(--accent-rgb),0.3);background:rgba(var(--accent-rgb),0.05)} .dev-badge{position:absolute;top:12px;right:12px;z-index:10;display:inline-flex;align-items:center;gap:4px;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:4px 10px;border-radius:20px;background:rgba(168,85,247,0.1);color:#c084fc;border:1px solid rgba(168,85,247,0.3);backdrop-filter:blur(4px);box-shadow:0 0 15px rgba(168,85,247,0.15)} .obj-visual{height:130px;background:#050608;border-radius:8px;border:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:inset 0 0 30px rgba(0,0,0,0.6);transition:border-color 0.3s ease} .object-card:hover .obj-visual{border-color:rgba(255,255,255,0.1)} .obj-visual::before{content:'';position:absolute;width:120px;height:120px;background:var(--accent);filter:blur(60px);opacity:0.1;transition:opacity 0.3s ease} .object-card:hover .obj-visual::before{opacity:0.25} .mock-text{font-family:monospace;font-size:1.4rem;font-weight:bold;color:#fff;text-shadow:0 0 10px var(--accent);letter-spacing:2px} .mock-image{width:70px;height:50px;border:1px dashed var(--accent);border-radius:6px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.02);color:var(--accent);font-size:1.8rem} .mock-gif{border-style:solid;animation:pulseBorder 2s infinite} .mock-gif span{font-size:0.8rem;font-weight:bold;letter-spacing:1px} .mock-video{width:90px;height:55px;background:#111;border:1px solid #333;border-radius:6px;position:relative;display:flex;align-items:center;justify-content:center} .mock-play-btn{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:14px solid var(--accent);filter:drop-shadow(0 0 8px var(--accent))} .mock-video-bar{position:absolute;bottom:5px;left:5px;right:5px;height:3px;background:rgba(255,255,255,0.2);border-radius:2px} .mock-video-bar::after{content:'';position:absolute;left:0;top:0;height:100%;width:45%;background:var(--accent);border-radius:2px} .mock-ticker{width:85%;height:24px;background:#111;border-left:2px solid var(--accent);border-right:2px solid var(--accent);overflow:hidden;display:flex;align-items:center} .ticker-text{white-space:nowrap;font-size:0.7rem;color:var(--accent);animation:mockScroll 6s linear infinite} .mock-slider{width:100px;height:55px;background:#111;border:1px solid #333;border-radius:6px;position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 6px} .mock-arrow{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent} .mock-arrow.left{border-right:8px solid #555} .mock-arrow.right{border-left:8px solid #555} .mock-slide{width:50px;height:30px;border:1px dashed var(--accent);border-radius:3px} .mock-dots{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);display:flex;gap:4px} .mock-dots span{width:4px;height:4px;background:#555;border-radius:50%} .mock-dots span.active{background:var(--accent)} .mock-button{padding:8px 20px;background:var(--accent);color:#fff;font-size:0.8rem;font-weight:bold;border-radius:6px;box-shadow:0 0 15px rgba(0,0,0,0.5);transition:transform 0.2s} .object-card:hover .mock-button{transform:scale(1.08);box-shadow:0 0 20px var(--accent)} .mock-image-button{position:relative;width:90px;height:40px;border-radius:6px;overflow:hidden} .ib-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;font-size:0.7rem;font-weight:bold;transition:opacity 0.3s} .ib-idle{background:rgba(255,255,255,0.05);border:1px dashed #555;color:#888} .ib-hover{background:rgba(0,123,255,0.15);border:1px solid var(--accent);color:var(--accent);opacity:0;box-shadow:inset 0 0 15px var(--accent)} .object-card:hover .ib-idle{opacity:0} .object-card:hover .ib-hover{opacity:1} .mock-listbox{width:75%;height:70px;background:#111;border:1px solid #333;border-radius:6px;padding:6px;position:relative;display:flex;flex-direction:column;gap:4px} .object-card:hover .mock-listbox{border-color:var(--accent)} .mock-list-item{font-size:0.65rem;color:#888;padding:4px 6px;border-radius:3px} .mock-list-item.active{background:var(--accent);color:#fff;box-shadow:0 0 8px var(--accent)} .mock-scrollbar{position:absolute;right:3px;top:3px;bottom:3px;width:4px;background:#222;border-radius:2px} .mock-scrollbar::after{content:'';position:absolute;top:2px;right:0;width:4px;height:25px;background:var(--accent);border-radius:2px} .mock-input{width:75%;height:30px;background:#111;border:1px solid #333;border-radius:6px;color:#888;font-size:0.8rem;display:flex;align-items:center;padding:0 10px;font-family:monospace} .object-card:hover .mock-input{border-color:var(--accent)} .mock-cursor{display:inline-block;width:2px;height:12px;background:var(--accent);margin-left:2px;animation:blink 1s infinite} .mock-progress-container{width:80%;height:10px;background:#222;border-radius:5px;overflow:hidden} .mock-progress-fill{height:100%;width:0%;background:var(--accent);box-shadow:0 0 15px var(--accent);animation:mockFill 3s ease-in-out infinite} .mock-checkbox-group{display:flex;align-items:center;gap:10px} .mock-checkbox{width:20px;height:20px;border:2px solid #555;border-radius:4px;display:flex;align-items:center;justify-content:center;color:transparent;font-size:1rem;transition:all 0.3s} .object-card:hover .mock-checkbox{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 12px var(--accent)} .mock-check-label{font-size:0.8rem;color:#888} .mock-slider-track{width:80%;height:6px;background:#333;border-radius:3px;position:relative} .mock-slider-fill{width:60%;height:100%;background:var(--accent);border-radius:3px} .mock-slider-thumb{position:absolute;top:50%;left:60%;transform:translate(-50%,-50%);width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 0 10px var(--accent)} .mock-webview{width:100px;height:65px;background:#111;border:1px solid #333;border-radius:6px;display:flex;flex-direction:column;overflow:hidden} .object-card:hover .mock-webview{border-color:var(--accent);box-shadow:0 0 15px rgba(0,123,255,0.2)} .mock-browser-top{height:12px;background:#222;display:flex;align-items:center;gap:4px;padding-left:6px;border-bottom:1px solid #333} .mock-browser-top span{width:5px;height:5px;border-radius:50%;background:#555} .object-card:hover .mock-browser-top span:nth-child(1){background:#ff5f56} .object-card:hover .mock-browser-top span:nth-child(2){background:#ffbd2e} .object-card:hover .mock-browser-top span:nth-child(3){background:#27c93f} .mock-browser-content{flex:1;background:rgba(255,255,255,0.02)} .mock-update-check{position:relative;font-size:2.5rem;color:#555;transition:color 0.3s;display:flex;align-items:center;justify-content:center} .object-card:hover .mock-update-check{color:var(--accent);text-shadow:0 0 20px var(--accent)} .mock-sync-ring{position:absolute;inset:-8px;border:2px dashed transparent;border-radius:50%;transition:all 0.3s} .object-card:hover .mock-sync-ring{border-color:var(--accent);animation:rotateSync 4s linear infinite} .mock-json{font-family:monospace;font-size:0.75rem;color:#888;display:flex;flex-direction:column;transition:transform 0.3s} .json-indent{padding-left:15px;color:#fff} .json-val{color:var(--accent);text-shadow:0 0 8px var(--accent)} .object-card:hover .mock-json{transform:scale(1.1)} @keyframes mockScroll{0%{transform:translateX(100%)} 100%{transform:translateX(-150%)}} @keyframes blink{0%,100%{opacity:1} 50%{opacity:0}} @keyframes mockFill{0%{width:0%} 50%{width:85%} 100%{width:0%}} @keyframes pulseBorder{0%,100%{border-color:rgba(0,123,255,0.2)} 50%{border-color:var(--accent);box-shadow:0 0 15px inset rgba(0,123,255,0.2)}} @keyframes rotateSync{100%{transform:rotate(360deg)}} @media(max-width:992px){.objects-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:768px){.objects-hero h1{font-size:2.5rem} .objects-grid{grid-template-columns:1fr}} .exclusive-banner-section{padding:2rem 0 6rem;position:relative;z-index:5} .exclusive-glass-card{background:linear-gradient(145deg,rgba(13,17,22,0.8) 0%,rgba(5,6,8,0.9) 100%);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(0,123,255,0.2);border-radius:16px;padding:4rem;position:relative;box-shadow:inset 0 0 40px rgba(0,123,255,0.05),0 20px 40px rgba(0,0,0,0.5);overflow:hidden} .exclusive-glow-line{position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);box-shadow:0 0 20px var(--primary)} .exclusive-content{display:flex;align-items:center;gap:4rem;position:relative;z-index:2} .exclusive-text{flex:1.2} .exclusive-text h2{font-size:2.2rem;margin-bottom:1rem;letter-spacing:-0.5px} .exclusive-text p{font-size:1.05rem;color:#cbd5e1;line-height:1.7;margin-bottom:0} .exclusive-actions{margin-top:2.5rem} .exclusive-visual{flex:1;display:flex;justify-content:center;align-items:center} .logic-nodes-mockup{display:flex;flex-direction:column;align-items:center;gap:12px} .node-item{background:var(--bg-card);border:1px solid var(--border-color);padding:1rem;border-radius:12px;font-size:0.95rem;font-weight:600;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 10px 20px rgba(0,0,0,0.4);position:relative;z-index:2;transition:all 0.3s ease;width:220px} .node-item iconify-icon{font-size:1.4rem} .drag-node{border-color:rgba(255,255,255,0.2)} .logic-node{border-color:var(--primary);box-shadow:0 0 20px rgba(0,123,255,0.15)} .logic-node iconify-icon{color:var(--primary)} .deploy-node{border-color:#2ea043} .deploy-node iconify-icon{color:#2ea043} .node-connector{width:2px;height:35px;background:rgba(255,255,255,0.1);position:relative;z-index:1} .node-connector::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(--primary);transform:scaleY(0);transform-origin:top;animation:pulseConnectVertical 3s infinite} .node-connector.connector-success::after{background:#2ea043;animation-delay:1.5s} @keyframes pulseConnectVertical{0%{transform:scaleY(0);opacity:1} 50%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(1);opacity:0}} @media(max-width:992px){.exclusive-content{flex-direction:column;text-align:center;gap:3rem} .exclusive-glass-card{padding:2.5rem 1.5rem} .exclusive-actions{margin-top:2rem}}