.nx-skip-link {position: absolute;top: -40px;left: 6px;background: var(--nx-neon);color: var(--nx-text);padding: 8px;text-decoration: none;border-radius: 4px;z-index: 1001;transition: top 0.3s} .nx-skip-link:focus {top: 6px} @keyframes nx-fadeInUp {from {opacity: 0;transform: translateY(30px)} to {opacity: 1;transform: translateY(0)} } @keyframes nx-fadeInLeft {from {opacity: 0;transform: translateX(-30px)} to {opacity: 1;transform: translateX(0)} } @keyframes nx-fadeInRight {from {opacity: 0;transform: translateX(30px)} to {opacity: 1;transform: translateX(0)} } @keyframes nx-pulse {0%,100% {transform: scale(1)} 50% {transform: scale(1.05)} } @keyframes nx-float {0%,100% {transform: translateY(0px)} 50% {transform: translateY(-10px)} } @keyframes nx-glow {0%,100% {box-shadow: 0 0 20px rgba(233,69,96,0.3)} 50% {box-shadow: 0 0 40px rgba(233,69,96,0.6)} } .nx-animate-on-scroll {opacity: 0;transform: translateY(30px);transition: all 0.6s ease} .nx-animate-on-scroll.nx-visible {opacity: 1;transform: translateY(0)} .nx-hero {position: relative;min-height: 100vh;display: flex;align-items: center;background: linear-gradient(135deg,var(--nx-primary) 0%,var(--nx-secondary) 25%,var(--nx-accent) 50%,var(--nx-highlight) 75%,var(--nx-primary) 100%);overflow: hidden} .nx-hero-background {position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1} #particles-canvas {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1} .nx-hero-grid {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-image: linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);background-size: 50px 50px;animation: nx-grid-move 20s linear infinite;z-index: 2} @keyframes nx-grid-move {0% {transform: translate(0,0)} 100% {transform: translate(50px,50px)} } .nx-hero-shapes {position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 2} .nx-shape {position: absolute;border-radius: 50%;opacity: 0.1} .nx-shape-1 {width: 300px;height: 300px;background: radial-gradient(circle,var(--nx-neon),transparent);top: 10%;left: 10%;animation: nx-shape-float 15s ease-in-out infinite} .nx-shape-2 {width: 200px;height: 200px;background: radial-gradient(circle,var(--nx-highlight),transparent);top: 60%;right: 15%;animation: nx-shape-float 20s ease-in-out infinite reverse} .nx-shape-3 {width: 150px;height: 150px;background: linear-gradient(45deg,var(--nx-neon),var(--nx-highlight));top: 30%;right: 30%;animation: nx-shape-pulse 8s ease-in-out infinite} .nx-shape-4 {width: 100px;height: 100px;background: var(--nx-accent);bottom: 20%;left: 20%;animation: nx-shape-rotate 12s linear infinite} .nx-shape-5 {width: 80px;height: 80px;background: linear-gradient(135deg,var(--nx-neon),var(--nx-accent));top: 70%;left: 60%;animation: nx-shape-scale 6s ease-in-out infinite} @keyframes nx-shape-float {0%,100% {transform: translate(0,0) rotate(0deg)} 33% {transform: translate(30px,-30px) rotate(120deg)} 66% {transform: translate(-20px,20px) rotate(240deg)} } @keyframes nx-shape-pulse {0%,100% {transform: scale(1);opacity: 0.1} 50% {transform: scale(1.2);opacity: 0.2} } @keyframes nx-shape-rotate {0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} } @keyframes nx-shape-scale {0%,100% {transform: scale(1)} 50% {transform: scale(1.3)} } .nx-hero::after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle at 20% 80%,rgba(233,69,96,0.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(15,52,96,0.1) 0%,transparent 50%),radial-gradient(circle at 50% 50%,rgba(233,69,96,0.05) 0%,transparent 70%);pointer-events: none;z-index: 3} .nx-hero-content {position: relative;z-index: 10;max-width: 800px;margin: 0 auto;text-align: center} .nx-hero-title-wrapper {margin-bottom: var(--nx-space-lg)} .nx-hero-title {font-size: clamp(3rem,10vw,7rem);font-weight: 900;line-height: 1.1;margin: 0;display: flex;flex-direction: column;align-items: center} .nx-title-line {display: block;margin-bottom: 0.2em;position: relative} .nx-title-line-1 {background: linear-gradient(135deg,var(--nx-text) 0%,#ffffff 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-shadow: 0 0 30px rgba(255,255,255,0.3)} .nx-title-line-2 {background: linear-gradient(135deg,var(--nx-neon) 0%,var(--nx-highlight) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-shadow: 0 0 30px rgba(233,69,96,0.3)} .nx-title-line-3 {position: relative;display: inline-block} .nx-title-highlight {background: linear-gradient(135deg,var(--nx-neon) 0%,#ff6b9d 50%,var(--nx-highlight) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;position: relative;text-shadow: 0 0 40px rgba(233,69,96,0.5)} .nx-title-highlight::after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg,var(--nx-neon) 0%,#ff6b9d 50%,var(--nx-highlight) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;filter: blur(10px);opacity: 0.3;z-index: -1} .nx-title-cursor {display: inline-block;margin-left: 0.1em;color: var(--nx-neon);font-weight: 300;animation: nx-cursor-blink 1s infinite} @keyframes nx-cursor-blink {0%,50% {opacity: 1} 51%,100% {opacity: 0} } .nx-hero-subtitle-wrapper {margin-bottom: var(--nx-space-xl)} .nx-hero-subtitle {font-size: clamp(1.1rem,2.5vw,1.4rem);line-height: 1.7;color: var(--nx-text-muted);max-width: 600px;margin: 0 auto;font-weight: 400} .nx-text-accent {color: var(--nx-neon);font-weight: 600;position: relative} .nx-text-accent::after {content: '';position: absolute;bottom: -2px;left: 0;right: 0;height: 2px;background: linear-gradient(90deg,var(--nx-neon),transparent);opacity: 0.6} .nx-hero-cta-wrapper {margin-bottom: var(--nx-space-lg)} .nx-hero-btn {display: inline-flex;align-items: center;gap: var(--nx-space-sm);padding: var(--nx-space-md) var(--nx-space-xl);background: linear-gradient(135deg,var(--nx-neon),var(--nx-highlight));color: var(--nx-text);text-decoration: none;border-radius: 50px;font-weight: 700;font-size: 1.1rem;position: relative;overflow: hidden;transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);border: none;cursor: pointer;box-shadow: 0 10px 30px rgba(233,69,96,0.3)} .nx-hero-btn:hover {transform: translateY(-3px) scale(1.05);box-shadow: 0 20px 40px rgba(233,69,96,0.4)} .nx-btn-glow {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle,rgba(255,255,255,0.3) 0%,transparent 70%);opacity: 0;transition: opacity 0.3s ease;border-radius: 50px;pointer-events: none} .nx-btn-icon {transition: transform 0.3s ease} .nx-hero-btn:hover .nx-btn-icon {transform: translateX(5px)} .nx-hero-info {margin-top: var(--nx-space-xl)} .nx-hero-stats {display: flex;justify-content: center;gap: var(--nx-space-xl);flex-wrap: wrap} .nx-stat {text-align: center;padding: var(--nx-space-sm);background: rgba(255,255,255,0.05);border-radius: var(--nx-radius-md);backdrop-filter: blur(10px);border: 1px solid rgba(255,255,255,0.1);min-width: 100px;transition: all 0.3s ease} .nx-stat:hover {transform: translateY(-5px);background: rgba(233,69,96,0.1);border-color: var(--nx-neon)} .nx-stat-number {display: block;font-size: clamp(1.5rem,3vw,2rem);font-weight: 800;color: var(--nx-neon);line-height: 1} .nx-stat-label {display: block;font-size: 0.9rem;color: var(--nx-text-muted);margin-top: var(--nx-space-xs);font-weight: 500} .nx-hero-tech-elements {position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 5;pointer-events: none} .nx-tech-badge {position: absolute;padding: var(--nx-space-xs) var(--nx-space-sm);background: rgba(233,69,96,0.1);border: 1px solid rgba(233,69,96,0.3);border-radius: 20px;backdrop-filter: blur(10px);font-size: 0.8rem;font-weight: 600;color: var(--nx-neon);pointer-events: auto;cursor: pointer;transition: all 0.3s ease} .nx-tech-badge:hover {background: rgba(233,69,96,0.2);border-color: var(--nx-neon);transform: scale(1.1)} .nx-tech-badge-1 {top: 20%;left: 10%;animation: nx-tech-float 8s ease-in-out infinite} .nx-tech-badge-2 {top: 40%;right: 15%;animation: nx-tech-float 10s ease-in-out infinite reverse} .nx-tech-badge-3 {bottom: 30%;left: 20%;animation: nx-tech-float 12s ease-in-out infinite} .nx-tech-badge-4 {bottom: 50%;right: 25%;animation: nx-tech-float 9s ease-in-out infinite reverse} @keyframes nx-tech-float {0%,100% {transform: translateY(0px) rotate(0deg)} 50% {transform: translateY(-20px) rotate(5deg)} } .nx-scroll-indicator {position: absolute;bottom: var(--nx-space-lg);left: 50%;transform: translateX(-50%);display: flex;flex-direction: column;align-items: center;gap: var(--nx-space-sm);z-index: 10;color: var(--nx-text-muted);font-size: 0.8rem;font-weight: 500} .nx-scroll-line {width: 2px;height: 40px;background: linear-gradient(180deg,var(--nx-neon),transparent);transform: scaleY(0);transform-origin: top} .nx-scroll-text {opacity: 0;transform: translateY(10px);animation: nx-scroll-text-float 2s ease-in-out infinite} @keyframes nx-scroll-text-float {0%,100% {transform: translateY(10px)} 50% {transform: translateY(0px)} } .nx-service-card {position: relative;overflow: hidden} .nx-service-card::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg,transparent,rgba(233,69,96,0.1),transparent);transition: left 0.5s} .nx-service-card:hover::before {left: 100%} .nx-service-icon {animation: nx-float 3s ease-in-out infinite} .nx-portfolio-item {position: relative;overflow: hidden} .nx-portfolio-item::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(45deg,var(--nx-accent),var(--nx-highlight));opacity: 0.8;transition: opacity 0.3s ease} .nx-portfolio-item:hover::before {opacity: 0.6} .nx-process-step {animation: nx-fadeInLeft 0.6s ease-out} .nx-process-step:nth-child(even) {animation: nx-fadeInRight 0.6s ease-out} .nx-process-number {animation: nx-pulse 2s ease-in-out infinite} .nx-testimonial {position: relative} .nx-testimonial::before {content: '"';position: absolute;top: -10px;left: 20px;font-size: 4rem;color: var(--nx-neon);opacity: 0.3;font-family: serif} .nx-metric-number {animation: nx-glow 2s ease-in-out infinite} .nx-pricing-card.featured {animation: nx-pulse 3s ease-in-out infinite} .nx-pricing-card.featured::before {content: 'POPULAR';position: absolute;top: -10px;left: 50%;transform: translateX(-50%);background: var(--nx-neon);color: var(--nx-text);padding: 5px 15px;border-radius: 15px;font-size: 0.8rem;font-weight: 600} .nx-form-input {transition: all 0.3s ease} .nx-form-input:focus {transform: translateY(-2px);box-shadow: 0 5px 15px rgba(233,69,96,0.2)} .nx-btn {position: relative;overflow: hidden} .nx-btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition: left 0.5s} .nx-btn:hover::before {left: 100%} .nx-header {transition: all 0.3s ease} .nx-header.scrolled {background: rgba(10,10,10,0.95);backdrop-filter: blur(30px)} .nx-footer-section a {position: relative} .nx-footer-section a::after {content: '';position: absolute;bottom: -2px;left: 0;width: 0;height: 1px;background: var(--nx-neon);transition: width 0.3s ease} .nx-footer-section a:hover::after {width: 100%} @media (max-width: 1024px) {.nx-hero h1 {font-size: clamp(2rem,6vw,3.5rem)} .nx-grid-3 {grid-template-columns: repeat(auto-fit,minmax(200px,1fr))} .nx-grid-4 {grid-template-columns: repeat(auto-fit,minmax(150px,1fr))} } @media (max-width: 768px) {.nx-hero {text-align: center;padding: var(--nx-space-xl) 0;min-height: 100vh} .nx-hero-title {font-size: clamp(2.5rem,12vw,4rem);margin-bottom: var(--nx-space-md)} .nx-title-line {margin-bottom: 0.1em} .nx-hero-subtitle {font-size: clamp(1rem,4vw,1.2rem);margin-bottom: var(--nx-space-lg)} .nx-hero-btn {padding: var(--nx-space-sm) var(--nx-space-lg);font-size: 1rem} .nx-hero-stats {gap: var(--nx-space-md);flex-direction: column;align-items: center} .nx-stat {min-width: 80px;padding: var(--nx-space-xs)} .nx-tech-badge {font-size: 0.7rem;padding: 4px 8px} .nx-tech-badge-1 {top: 15%;left: 5%} .nx-tech-badge-2 {top: 35%;right: 10%} .nx-tech-badge-3 {bottom: 25%;left: 15%} .nx-tech-badge-4 {bottom: 45%;right: 20%} .nx-shape-1 {width: 200px;height: 200px} .nx-shape-2 {width: 150px;height: 150px} .nx-shape-3 {width: 100px;height: 100px} .nx-shape-4 {width: 80px;height: 80px} .nx-shape-5 {width: 60px;height: 60px} .nx-scroll-indicator {bottom: var(--nx-space-md)} .nx-scroll-text {font-size: 0.7rem} .nx-nav {display: none} .nx-grid-2,.nx-grid-3,.nx-grid-4 {grid-template-columns: 1fr} .nx-process-step {padding-left: var(--nx-space-md)} .nx-process-number {left: -10px;width: 20px;height: 20px;font-size: 0.8rem} .nx-pricing-card.featured {transform: none} } @media (max-width: 480px) {.nx-container {padding: 0 var(--nx-space-xs)} .nx-section {padding: var(--nx-space-lg) 0} .nx-hero {padding: var(--nx-space-lg) 0} .nx-hero-title {font-size: clamp(2rem,15vw,3rem);margin-bottom: var(--nx-space-sm)} .nx-hero-subtitle {font-size: clamp(0.9rem,5vw,1rem);margin-bottom: var(--nx-space-md)} .nx-hero-btn {padding: var(--nx-space-xs) var(--nx-space-md);font-size: 0.9rem} .nx-hero-stats {gap: var(--nx-space-sm);flex-direction: row;flex-wrap: wrap;justify-content: center} .nx-stat {min-width: 70px;padding: 6px 8px} .nx-stat-number {font-size: clamp(1.2rem,4vw,1.5rem)} .nx-stat-label {font-size: 0.8rem} .nx-tech-badge {font-size: 0.6rem;padding: 3px 6px} .nx-shape-1 {width: 150px;height: 150px} .nx-shape-2 {width: 120px;height: 120px} .nx-shape-3 {width: 80px;height: 80px} .nx-shape-4 {width: 60px;height: 60px} .nx-shape-5 {width: 50px;height: 50px} .nx-scroll-indicator {bottom: var(--nx-space-sm)} .nx-scroll-text {font-size: 0.6rem} .nx-service-card,.nx-pricing-card {padding: var(--nx-space-sm)} } @media (prefers-color-scheme: dark) {:root {--nx-primary: #0a0a0a;--nx-secondary: #1a1a2e;--nx-accent: #16213e;--nx-highlight: #0f3460;--nx-neon: #e94560;--nx-text: #f5f5f5;--nx-text-muted: #b8b8b8} } @media (prefers-contrast: high) {:root {--nx-border: rgba(255,255,255,0.5);--nx-glass: rgba(255,255,255,0.2)} .nx-card {border: 2px solid var(--nx-border)} .nx-btn {border: 2px solid var(--nx-neon)} } @media print {.nx-header,.nx-footer,.nx-btn {display: none} .nx-hero {min-height: auto;padding: var(--nx-space-md) 0} .nx-section {padding: var(--nx-space-sm) 0} * {background: transparent !important;color: black !important;box-shadow: none !important} } .nx-loading {opacity: 0;animation: nx-fadeInUp 0.6s ease-out forwards} .nx-loading:nth-child(1) {animation-delay: 0.1s} .nx-loading:nth-child(2) {animation-delay: 0.2s} .nx-loading:nth-child(3) {animation-delay: 0.3s} .nx-loading:nth-child(4) {animation-delay: 0.4s} .nx-loading:nth-child(5) {animation-delay: 0.5s} .nx-loading:nth-child(6) {animation-delay: 0.6s} html {scroll-behavior: smooth} *:focus {outline: 2px solid var(--nx-neon);outline-offset: 2px} ::selection {background: var(--nx-neon);color: var(--nx-text)} ::-moz-selection {background: var(--nx-neon);color: var(--nx-text)}