.home-page{width:100%;display:block}.hero-section{background-color:var(--bg-main);min-height:100vh;transition:background-color .3s;position:relative;overflow:hidden}.top-banner{background:linear-gradient(90deg, var(--secondary), var(--accent-2));text-align:center;cursor:pointer;padding:.75rem 2rem;text-decoration:none;transition:transform .3s;display:block;position:relative;overflow:hidden}.top-banner:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;animation:3s infinite shimmer;position:absolute;top:0;transform:translate(-100%)}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.banner-content{justify-content:center;align-items:center;gap:.5rem;display:flex}.banner-text{color:var(--bg-main);font-size:.9rem;font-weight:500}.banner-icon{color:var(--bg-main);font-size:18px;transition:transform .3s}.top-banner:hover .banner-icon{transform:translate(4px)}.hero-container{grid-template-columns:1fr 1.2fr;align-items:center;gap:4rem;max-width:1400px;min-height:600px;margin:0 auto;padding:2rem;display:grid}.hero-content{z-index:2;flex-direction:column;gap:2rem;display:flex}.hero-title{color:var(--text-main);margin-bottom:0;font-size:clamp(2rem,5vw,4rem);font-weight:800;line-height:1.1;transition:color .3s}.highlight-primary{background:linear-gradient(135deg, var(--highlight-primary), var(--highlight-tertiary));-webkit-text-fill-color:transparent;background-size:200% 200%;-webkit-background-clip:text;background-clip:text;animation:3s infinite gradient-shift}@keyframes gradient-shift{0%,to{background-position:0%}50%{background-position:100%}}.highlight-secondary{color:var(--highlight-primary);transition:color .3s}.hero-description{color:var(--text-muted);max-width:560px;margin-bottom:0;font-size:1.1rem;line-height:1.8;transition:color .3s}.cta-buttons{flex-wrap:wrap;gap:1rem;display:flex}.btn{cursor:pointer;white-space:nowrap;border:none;border-radius:12px;align-items:center;gap:.5rem;padding:1rem 2rem;font-family:Onest,sans-serif;font-size:1rem;font-weight:600;text-decoration:none;transition:all .3s;display:flex}.btn-primary{background:var(--btn-primary-bg);color:var(--neutral-white)}.btn-primary:hover{background:var(--btn-primary-hover);box-shadow:0 8px 24px var(--hover-overlay);transform:translateY(-2px)}.btn-secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-hover);border:2px solid var(--btn-secondary-border)}.btn-secondary:hover{background:var(--btn-secondary-hover-bg);color:var(--neutral-white);box-shadow:0 8px 24px var(--hover-overlay);transform:translateY(-2px)}.social-icons{flex-wrap:wrap;gap:1rem;display:flex}.social-icon{background-color:var(--bg-surface);width:48px;height:48px;color:var(--text-main);border:1px solid var(--border-subtle);border-radius:12px;justify-content:center;align-items:center;text-decoration:none;transition:all .3s;display:flex}.social-icon .icon{font-size:22px}.social-icon:hover{background:linear-gradient(135deg, var(--secondary), var(--accent-2));color:var(--neutral-white);box-shadow:var(--shadow-md);border-color:#0000;transform:translateY(-4px)scale(1.05)}.project-stats{border-top:1px solid var(--border-subtle);grid-template-columns:repeat(3,1fr);gap:2rem;min-height:120px;padding:2rem 0;display:grid}.stat-item{flex-direction:column;gap:.5rem;display:flex}.stat-number{background:linear-gradient(135deg, var(--secondary), var(--accent-2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2.5rem;font-weight:800;line-height:1;animation:2s ease-in-out infinite number-pulse}@keyframes number-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.stat-label{color:var(--text-muted);font-size:.9rem;font-weight:500;transition:color .3s}.hero-visual{perspective:1500px;z-index:1}.dashboard-mockup{background:var(--bg-surface);border:1px solid var(--border-subtle);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow-lg);border-radius:16px;min-height:550px;transition:all .5s;overflow:hidden;transform:rotateY(-5deg)rotateX(2deg)}.dashboard-mockup:hover{transform:rotateY(0)rotateX(0)scale(1.02);box-shadow:0 30px 80px #35bcff4d}.browser-header{background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);padding:1rem;transition:background-color .3s}.browser-dots{gap:.5rem;display:flex}.dot{border-radius:50%;width:12px;height:12px;animation:2s ease-in-out infinite dot-pulse}@keyframes dot-pulse{0%,to{opacity:1}50%{opacity:.5}}.dot-red{background:var(--state-error);animation-delay:0s}.dot-yellow{background:var(--tertiary);animation-delay:.2s}.dot-green{background:var(--state-success);animation-delay:.4s}.dashboard-content{background:var(--bg-main);grid-template-columns:50px 1fr;min-height:550px;transition:background-color .3s;display:grid}.dashboard-sidebar{background:var(--bg-overlay);border-right:1px solid var(--border-subtle);flex-direction:column;gap:1rem;padding:1rem .5rem;display:flex}.sidebar-item{background:var(--border-medium);border-radius:4px;width:100%;height:8px;transition:all .3s;animation:1.5s ease-in-out infinite sidebar-load}.sidebar-item:first-child{animation-delay:0s}.sidebar-item:nth-child(2){animation-delay:.1s}.sidebar-item:nth-child(3){animation-delay:.2s}.sidebar-item:nth-child(4){animation-delay:.3s}@keyframes sidebar-load{0%,to{opacity:.3;width:100%}50%{opacity:1;width:85%}}.dashboard-main{flex-direction:column;gap:1.5rem;padding:1.5rem;display:flex;overflow:hidden}.server-container{grid-template-columns:1fr 1fr;gap:1rem;width:100%;display:grid}.server-architecture{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;flex-direction:column;gap:.5rem;min-height:280px;padding:1rem;display:flex;overflow:hidden}.arch-layer{flex-direction:column;gap:.5rem;display:flex}.layer-label{color:var(--text-subtle);text-transform:uppercase;letter-spacing:.5px;text-align:center;font-size:.65rem;font-weight:600}.nodes-row{justify-content:space-between;gap:.5rem;display:flex}.nodes-row.centered{justify-content:center}.server-node{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:8px;flex-direction:column;flex:1;align-items:center;gap:.35rem;min-width:0;padding:.6rem .4rem;transition:all .3s;display:flex;position:relative}.server-node:hover{border-color:var(--secondary);transform:translateY(-2px)}.server-node.active{border-color:var(--secondary);background:var(--bg-overlay)}.node-icon-ionic{color:var(--text-main);flex-shrink:0;font-size:1.3rem;transition:color .3s}.server-node.gateway .node-icon-ionic{color:var(--secondary);animation:2s ease-in-out infinite icon-pulse}@keyframes icon-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.node-name{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:.6rem;font-weight:600;overflow:hidden}.status-dot{background:var(--state-success);border-radius:50%;width:5px;height:5px;animation:2s ease-in-out infinite live-pulse;position:absolute;top:6px;right:6px}.connection-layer{justify-content:center;align-items:center;height:15px;display:flex;position:relative}.connection-layer:before{content:"";background:var(--border-subtle);width:1px;height:100%;position:absolute;left:50%;transform:translate(-50%)}.request-pulse{background:var(--secondary);width:4px;height:4px;box-shadow:0 0 6px var(--secondary);border-radius:50%;animation:3s ease-in-out infinite pulse-move;position:absolute;left:50%;transform:translate(-50%)}.pulse-1{animation-delay:0s}.pulse-2{animation-delay:1s}.pulse-3{animation-delay:2s}.pulse-4{animation-delay:.5s}.pulse-5{animation-delay:1.5s}@keyframes pulse-move{0%{opacity:0;top:0%}10%{opacity:1}90%{opacity:1}to{opacity:0;top:100%}}.stats-grid{flex-direction:column;gap:1rem;display:flex;overflow:hidden}.stat-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;flex-direction:column;transition:all .3s;display:flex;overflow:hidden}.code-card{min-height:200px;max-height:200px;padding:0}.code-header{background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);flex-shrink:0;align-items:center;gap:1rem;padding:.6rem 1rem;display:flex}.code-dots{gap:.4rem;display:flex}.code-dot{border-radius:50%;width:10px;height:10px}.code-dot.red{background:var(--state-error)}.code-dot.yellow{background:var(--tertiary)}.code-dot.green{background:var(--state-success)}.code-title{color:var(--text-muted);font-size:.7rem;font-weight:500}.code-block{color:var(--highlight-accent2);white-space:pre;flex:1;margin:0;padding:.8rem;font-family:Monaco,Courier New,monospace;font-size:.65rem;line-height:1.5;overflow:auto}.cursor{color:var(--secondary);animation:1s step-end infinite blink}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.chart-card{flex-direction:column;min-height:135px;max-height:135px;padding:0;display:flex}.chart-placeholder{flex-direction:column;height:100%;padding:1rem;display:flex;overflow:hidden}.chart-label{flex-shrink:0;justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.label-text{color:var(--text-muted);font-size:.75rem;font-weight:600}.live-indicator{background:var(--state-success);border-radius:50%;width:6px;height:6px;animation:2s ease-in-out infinite live-pulse;box-shadow:0 0 #22c55eb3}@keyframes live-pulse{0%{box-shadow:0 0 #22c55eb3}50%{box-shadow:0 0 0 8px #22c55e00}to{box-shadow:0 0 #22c55e00}}.chart-graph{width:100%;height:100%;max-height:90px}.chart-line-1{stroke-dasharray:1000;stroke-dashoffset:1000px;animation:3s ease-in-out forwards draw-line,3s ease-in-out infinite line-pulse}.chart-line-2{stroke-dasharray:1000;stroke-dashoffset:1000px;animation:3s ease-in-out .5s forwards draw-line,3s ease-in-out .5s infinite line-pulse}@keyframes draw-line{to{stroke-dashoffset:0}}@keyframes line-pulse{0%,to{opacity:1}50%{opacity:.7}}.data-point{animation:2s ease-in-out infinite point-bounce}.point-1{animation-delay:0s}.point-2{animation-delay:.3s}.point-3{animation-delay:.6s}@keyframes point-bounce{0%,to{r:3;opacity:1}50%{r:5;opacity:.7}}.tech-badges{flex-wrap:wrap;gap:.75rem;display:flex}.tech-badge{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:8px;flex:1;justify-content:center;align-items:center;gap:.5rem;min-width:0;padding:.6rem 1rem;transition:all .3s;display:flex}.tech-badge:hover{border-color:var(--secondary);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.tech-icon-ionic{color:var(--text-main);flex-shrink:0;font-size:1.1rem;transition:color .3s}.tech-badge:hover .tech-icon-ionic{color:var(--secondary)}.tech-name{color:var(--text-muted);white-space:nowrap;font-size:.8rem;font-weight:600;transition:color .3s}.tech-badge:hover .tech-name{color:var(--text-main)}@media (width<=1200px){.hero-container{gap:3rem}.dashboard-content{min-height:500px}.server-architecture{min-height:260px}}@media (width<=968px){.hero-container{grid-template-columns:1fr;gap:3rem;padding:4rem 1.5rem}.hero-title{text-align:center;font-size:2.5rem}.hero-description{text-align:center;margin:0 auto}.cta-buttons,.social-icons{justify-content:center}.project-stats{text-align:center;grid-template-columns:1fr;gap:1.5rem}.stat-item{align-items:center}.dashboard-mockup{transform:none}.dashboard-content{min-height:480px}.hero-visual{display:none}}@media (width<=768px){.dashboard-content{grid-template-columns:40px 1fr;min-height:520px}.dashboard-main{padding:1rem}.server-architecture{min-height:220px;padding:.75rem}.connection-layer{height:12px}.node-icon-ionic{font-size:1.1rem}.node-name{font-size:.55rem}.code-block{padding:.6rem;font-size:.6rem}.chart-graph{max-height:75px}}@media (width<=640px){.top-banner{padding:.6rem 1rem}.banner-text{font-size:.7rem}.hero-container{padding:3rem 1rem}.hero-title{font-size:2rem}.hero-description{font-size:1rem}.cta-buttons{flex-direction:column;width:100%}.btn{justify-content:center;width:100%}.project-stats{padding:1.5rem 0}.stat-number{font-size:1.75rem}.stat-label{font-size:.85rem}.dashboard-content{grid-template-columns:35px 1fr;min-height:500px}.dashboard-main{gap:1rem;padding:.75rem}}@media (width<=480px){.hero-title{font-size:1.75rem}.stat-number{font-size:1.5rem}.dashboard-content{grid-template-columns:30px 1fr;min-height:480px}.dashboard-sidebar{padding:.75rem .3rem}.dashboard-main{padding:.6rem}.server-architecture{min-height:180px;padding:.5rem}.layer-label{font-size:.6rem}.server-node{padding:.4rem .25rem}.node-icon-ionic{font-size:.9rem}.node-name{font-size:.45rem}.code-card,.chart-card{min-height:100px;max-height:100px}.code-block{font-size:.5rem}.chart-graph{max-height:55px}.tech-badge{padding:.4rem .6rem}}.clients-section{background-color:#0000;padding:3rem 0;position:relative;overflow:hidden}.clients-section .container{max-width:1400px;margin:0 auto;padding:0 2rem}.clients-title{text-align:center;margin-bottom:2rem}.clients-title span{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;padding:0 1rem;font-size:.875rem;font-weight:600;position:relative}.clients-title span:before,.clients-title span:after{content:"";background:var(--border-subtle);width:40px;height:1px;position:absolute;top:50%}.clients-title span:before{left:-50px}.clients-title span:after{right:-50px}.clients-slider{width:100%;padding:1rem 0;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000);mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000)}.clients-slider-track{will-change:transform;gap:4rem;display:flex}.client-logo-item{flex-shrink:0;justify-content:center;align-items:center;width:140px;height:60px;padding:.5rem;transition:all .3s;display:flex}.client-logo-item:hover{transform:scale(1.1)}.client-logo{object-fit:contain;filter:grayscale()opacity(.4);border-radius:4px;width:auto;max-width:100%;height:auto;max-height:100%;transition:all .3s}.client-logo-item:hover .client-logo{filter:grayscale(0%)opacity()}:root.dark-mode .client-logo{filter:grayscale()opacity(.3)brightness(2)}:root.dark-mode .client-logo-item:hover .client-logo{filter:grayscale(0%)opacity(.9)brightness(1.2)}@media (width<=768px){.clients-section{padding:2rem 0}.clients-title{margin-bottom:1.5rem}.clients-title span{font-size:.8125rem}.clients-title span:before,.clients-title span:after{width:30px;left:-40px}.clients-title span:after{right:-40px}.clients-slider-track{gap:3rem}.client-logo-item{width:120px;height:50px}}@media (width<=480px){.clients-section .container{padding:0 1rem}.clients-section{padding:1.5rem 0}.clients-title span{font-size:.75rem}.clients-title span:before,.clients-title span:after{display:none}.clients-slider-track{gap:2.5rem}.client-logo-item{width:100px;height:45px}}