*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}button{border:none;background:none;cursor:pointer;font-family:inherit}a{text-decoration:none;color:inherit}ul,ol{list-style:none;padding:0;margin:0}img{max-width:100%;height:auto}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-primary);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden}.landing-page{min-height:100vh;position:relative}.landing-page:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:var(--bg-particles);background-repeat:repeat;background-size:100px 100px;animation:sparkle 20s linear infinite;pointer-events:none;z-index:-1}@keyframes sparkle{0%{transform:translateY(0)}to{transform:translateY(-100px)}}.nav{position:fixed;top:0;width:100%;background:var(--nav-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--border-accent);z-index:1000;box-shadow:var(--shadow-nav)}.nav-container{max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:.75rem;font-weight:700;font-size:1.25rem;font-family:var(--font-brand)}.logo-icon{width:36px;height:36px;background:var(--accent-gradient);border-radius:var(--radius-lg);position:relative;box-shadow:var(--glow-primary);animation:logoGlow 3s ease-in-out infinite alternate}@keyframes logoGlow{0%{box-shadow:var(--glow-primary)}to{box-shadow:var(--glow-primary-intense)}}.logo-icon:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;height:18px;background:var(--bg-primary);border-radius:var(--radius-md)}.nav-links{display:flex;align-items:center;gap:2rem}#theme-picker-container{display:flex;align-items:center}.nav-links a{color:var(--text-secondary);text-decoration:none;font-weight:500;transition:all .3s ease;position:relative;font-family:var(--font-ui)}.nav-links a:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent-gradient);transition:width .3s ease}.nav-links a:hover{color:var(--text-primary);text-shadow:var(--glow-text)}.nav-links a:hover:after{width:100%}.cta-button{background:var(--accent-gradient);color:var(--button-text);border:none;padding:.75rem 1.5rem;border-radius:var(--radius-lg);font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-button);position:relative;overflow:hidden;font-family:var(--font-ui)}.cta-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--shine-gradient);transition:left .5s ease}.cta-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-button-hover)}.cta-button:hover:before{left:100%}.hero{padding:8rem 2rem 4rem;background:var(--hero-bg);position:relative}.hero:before{content:"";position:absolute;inset:0;background:var(--hero-overlay);animation:heroShimmer 8s ease-in-out infinite;pointer-events:none}@keyframes heroShimmer{0%,to{opacity:.3}50%{opacity:.7}}.hero-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}.hero-title{font-size:3.5rem;font-weight:700;line-height:1.1;margin-bottom:1.5rem;text-shadow:var(--text-shadow);font-family:var(--font-heading)}.gradient-text{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 3s ease-in-out infinite}@keyframes gradientShift{0%,to{filter:hue-rotate(0deg)}50%{filter:hue-rotate(var(--hue-shift))}}.hero-subtitle{font-size:1.25rem;color:var(--text-secondary);margin-bottom:2rem;line-height:1.6;text-shadow:var(--text-shadow-subtle);font-family:var(--font-body)}.hero-buttons{display:flex;gap:1rem}.primary-button{background:var(--accent-gradient);color:var(--button-text);border:none;padding:1rem 2rem;border-radius:var(--radius-xl);font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-primary);position:relative;overflow:hidden;font-family:var(--font-ui)}.primary-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--shine-gradient);transition:left .6s ease}.primary-button:hover{transform:translateY(-3px);box-shadow:var(--shadow-primary-hover)}.primary-button:hover:before{left:100%}.secondary-button{background:var(--surface-glass);color:var(--text-primary);border:2px solid var(--border-accent);padding:1rem 2rem;border-radius:var(--radius-xl);font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-glass);font-family:var(--font-ui)}.secondary-button:hover{border-color:var(--accent-primary);background:var(--surface-glass-hover);transform:translateY(-2px);box-shadow:var(--shadow-secondary-hover)}.hero-visual{display:flex;justify-content:center;align-items:center}.floating-card{background:var(--surface-glass);border:1px solid var(--border-accent);border-radius:var(--radius-xxl);padding:2rem;-webkit-backdrop-filter:var(--glass-blur-strong);backdrop-filter:var(--glass-blur-strong);animation:float 6s ease-in-out infinite;box-shadow:var(--shadow-floating);position:relative;overflow:hidden}.floating-card:before{content:"";position:absolute;inset:0;background:var(--glass-overlay);opacity:.5;pointer-events:none}@keyframes float{0%,to{transform:translateY(0) rotateX(0)}50%{transform:translateY(-20px) rotateX(5deg)}}.card-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;position:relative;z-index:1}.status-indicator{width:12px;height:12px;border-radius:50%;background:var(--status-active);animation:pulse 2s infinite;box-shadow:var(--glow-status)}@keyframes pulse{0%,to{opacity:1;transform:scale(1);box-shadow:var(--glow-status)}50%{opacity:.7;transform:scale(1.1);box-shadow:var(--glow-status-intense)}}.metrics{display:flex;gap:2rem;position:relative;z-index:1}.metric{text-align:center}.metric-value{display:block;font-size:1.5rem;font-weight:700;background:var(--metric-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:var(--glow-metric);font-family:var(--font-mono)}.metric-label{font-size:.875rem;color:var(--text-secondary);font-family:var(--font-ui)}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.section-title{font-size:2.5rem;font-weight:700;text-align:center;margin-bottom:3rem;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:var(--text-shadow);font-family:var(--font-heading)}.features{padding:6rem 0;background:var(--section-bg-alt);position:relative}.features:before{content:"";position:absolute;inset:0;background:var(--section-overlay);pointer-events:none}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;position:relative;z-index:1}.feature-card{background:var(--surface-glass);border:1px solid var(--border-accent);border-radius:var(--radius-xxl);padding:2rem;text-align:center;transition:all .4s ease;-webkit-backdrop-filter:var(--glass-blur-strong);backdrop-filter:var(--glass-blur-strong);box-shadow:var(--shadow-glass);position:relative;overflow:hidden}.feature-card:before{content:"";position:absolute;inset:0;background:var(--glass-overlay);opacity:0;transition:opacity .3s ease;pointer-events:none}.feature-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:var(--shadow-card-hover);border-color:var(--accent-primary)}.feature-card:hover:before{opacity:.7}.feature-icon{font-size:3rem;margin-bottom:1rem;filter:var(--icon-glow);animation:iconFloat 4s ease-in-out infinite}@keyframes iconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.feature-card h3{font-size:1.25rem;font-weight:600;margin-bottom:1rem;position:relative;z-index:1;font-family:var(--font-heading)}.feature-card p{color:var(--text-secondary);line-height:1.6;position:relative;z-index:1;font-family:var(--font-body)}.problem-solution{padding:6rem 0;position:relative}.problem-solution:before{content:"";position:absolute;inset:0;background:var(--section-overlay-alt);pointer-events:none}.split-content{display:grid;grid-template-columns:1fr 1fr;gap:4rem;position:relative;z-index:1}.content-block{background:var(--surface-glass);border:1px solid var(--border-accent);border-radius:var(--radius-xxl);padding:2.5rem;-webkit-backdrop-filter:var(--glass-blur-strong);backdrop-filter:var(--glass-blur-strong);box-shadow:var(--shadow-glass);transition:all .3s ease}.content-block:hover{transform:translateY(-5px);box-shadow:var(--shadow-block-hover)}.content-block h2{font-size:2rem;font-weight:700;margin-bottom:1.5rem;background:var(--secondary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:var(--font-heading)}.content-block p{color:var(--text-secondary);margin-bottom:2rem;font-size:1.1rem;font-family:var(--font-body)}.challenge-list,.solution-list{list-style:none}.challenge-list li,.solution-list li{padding:.75rem 0 .75rem 2rem;position:relative;color:var(--text-secondary);transition:all .3s ease;font-family:var(--font-body)}.challenge-list li:hover,.solution-list li:hover{color:var(--text-primary);transform:translate(5px)}.challenge-list li:before{content:var(--icon-warning);position:absolute;left:0;filter:var(--warning-glow)}.solution-list li:before{content:var(--icon-success);position:absolute;left:0;filter:var(--success-glow)}.tech-stack{padding:6rem 0;background:var(--section-bg-alt);position:relative}.tech-stack:before{content:"";position:absolute;inset:0;background:var(--tech-overlay);pointer-events:none}.tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;position:relative;z-index:1}.tech-item{text-align:center;padding:2rem;background:var(--surface-glass);border:1px solid var(--border-accent);border-radius:var(--radius-xl);-webkit-backdrop-filter:var(--glass-blur-strong);backdrop-filter:var(--glass-blur-strong);box-shadow:var(--shadow-glass);transition:all .3s ease}.tech-item:hover{transform:translateY(-5px) scale(1.02);box-shadow:var(--shadow-tech-hover)}.tech-item h4{font-size:1.25rem;font-weight:600;margin-bottom:1rem;background:var(--secondary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:var(--font-heading)}.tech-item p{color:var(--text-secondary);font-family:var(--font-body)}.cta-section{padding:6rem 0;background:var(--cta-bg);text-align:center;position:relative;overflow:hidden}.cta-section:before{content:"";position:absolute;inset:0;background:var(--cta-overlay);animation:ctaShimmer 6s ease-in-out infinite;pointer-events:none}@keyframes ctaShimmer{0%,to{opacity:.5}50%{opacity:1}}.cta-content{position:relative;z-index:1}.cta-content h2{font-size:2.5rem;font-weight:700;margin-bottom:1rem;text-shadow:var(--cta-text-shadow);font-family:var(--font-heading)}.cta-content p{font-size:1.25rem;margin-bottom:2rem;opacity:.9;text-shadow:var(--cta-text-shadow-subtle);font-family:var(--font-body)}.cta-buttons{display:flex;justify-content:center;gap:1rem}.large{padding:1.25rem 2.5rem;font-size:1.1rem}.cta-section .secondary-button{background:var(--cta-secondary-bg);border-color:var(--cta-secondary-border);color:var(--cta-secondary-text);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}.cta-section .secondary-button:hover{background:var(--cta-secondary-bg-hover);border-color:var(--cta-secondary-border-hover);box-shadow:var(--cta-secondary-shadow-hover)}.footer{background:var(--footer-bg);padding:4rem 0 2rem;position:relative}.footer:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--accent-gradient);opacity:.5}.footer-content{display:grid;grid-template-columns:1fr 2fr;gap:4rem;margin-bottom:2rem}.footer-brand p{color:var(--text-secondary);margin-top:1rem;font-family:var(--font-body)}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.link-group h4{font-weight:600;margin-bottom:1rem;background:var(--secondary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:var(--font-heading)}.link-group a{display:block;color:var(--text-secondary);text-decoration:none;margin-bottom:.5rem;transition:all .3s ease;font-family:var(--font-ui)}.link-group a:hover{color:var(--text-primary);transform:translate(5px);text-shadow:var(--glow-text)}.footer-bottom{border-top:1px solid var(--border-color);padding-top:2rem;text-align:center;color:var(--text-muted);font-family:var(--font-ui)}@media (max-width: 768px){.nav-links{display:flex;gap:1rem}.nav-links a,.cta-button{display:none}.hero-container{grid-template-columns:1fr;text-align:center}.hero-title{font-size:2.5rem}.split-content,.footer-content{grid-template-columns:1fr;gap:2rem}.footer-links{grid-template-columns:1fr}.cta-buttons,.hero-buttons{flex-direction:column;align-items:center}}@media (max-width: 480px){.hero{padding:6rem 1rem 2rem}.container{padding:0 1rem}.hero-title,.section-title{font-size:2rem}}.theme-picker{display:flex;align-items:center}.theme-toggle-button{background:var(--surface-glass);border:1px solid var(--border-accent);border-radius:var(--radius-lg);padding:.5rem;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-glass);position:relative;overflow:hidden}.theme-toggle-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--shine-gradient);transition:left .5s ease}.theme-toggle-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-button-hover);border-color:var(--accent-primary)}.theme-toggle-button:hover:before{left:100%}.theme-toggle-content{display:flex;align-items:center;gap:.25rem;position:relative;z-index:1}.theme-icon{font-size:1.2rem;opacity:.4;transition:all .3s ease;filter:grayscale(100%)}.theme-icon.active{opacity:1;filter:grayscale(0%) drop-shadow(0 0 8px currentColor);transform:scale(1.1)}.theme-icon:first-child.active{color:#ec4899}.theme-icon:last-child.active{color:#0f8}@media (max-width: 768px){.theme-picker{order:-1;margin-right:1rem}.theme-toggle-button{padding:.4rem}.theme-icon{font-size:1rem}}
