@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap";:root{--cyan:#00f0ff;--cyan-dim:#00f0ff99;--magenta:#f0f;--magenta-dim:#f0f9;--neon-green:#0f8;--hot-pink:#f36;--purple:#7b2fff;--dark-bg:#06000f;--dark-bg-2:#0d0020;--card-bg:#0a001e99;--glass:#00f0ff0a;--glass-border:#00f0ff1f;--glass-border-hover:#00f0ff59;--text-primary:#e4ecff;--text-secondary:#c8d2f08c;--font-display:"Orbitron", sans-serif;--font-body:"Rajdhani", "Noto Sans Thai", "Noto Sans SC", sans-serif;--glow-cyan:0 0 15px #00f0ff40, 0 0 60px #00f0ff14;--glow-magenta:0 0 15px #ff00ff40, 0 0 60px #ff00ff14;--radius:16px;--radius-sm:8px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--dark-bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6;overflow-x:hidden}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--cyan-dim);border-radius:10px}.navbar{z-index:1000;-webkit-backdrop-filter:blur(24px)saturate(1.2);background:#06000f99;border-bottom:1px solid #0000;justify-content:space-between;align-items:center;padding:1.2rem 3rem;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;left:0;right:0}.navbar.scrolled{border-bottom-color:var(--glass-border);background:#06000feb;padding:.7rem 3rem;box-shadow:0 4px 30px #0006}.navbar-logo{font-family:var(--font-display);background:linear-gradient(135deg, var(--cyan), #fff, var(--magenta));-webkit-text-fill-color:transparent;letter-spacing:3px;background-size:200%;-webkit-background-clip:text;align-items:center;gap:.5rem;font-size:1.4rem;font-weight:800;text-decoration:none;animation:4s linear infinite shimmer;display:flex}.logo-icon{color:var(--cyan);-webkit-text-fill-color:var(--cyan);font-size:1.2rem}.logo-accent{-webkit-text-fill-color:transparent}.navbar-links{align-items:center;gap:2rem;list-style:none;display:flex}.navbar-links a{color:var(--text-secondary);letter-spacing:1.5px;text-transform:uppercase;padding:.3rem 0;font-size:.9rem;font-weight:500;text-decoration:none;transition:all .3s;position:relative}.navbar-links a:hover,.navbar-links a.active{color:var(--cyan)}.navbar-links a:after{content:"";background:var(--cyan);width:0;height:2px;box-shadow:0 0 8px var(--cyan);transition:all .3s;position:absolute;bottom:-2px;left:50%;transform:translate(-50%)}.navbar-links a:hover:after,.navbar-links a.active:after{width:100%}.lang-switcher{gap:.4rem;margin-left:.5rem;display:flex}.lang-btn{background:var(--glass);border:1px solid var(--glass-border);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-size:.85rem;font-family:var(--font-body);padding:.35rem .6rem;line-height:1;transition:all .3s}.lang-btn:hover,.lang-btn.active{border-color:var(--cyan);box-shadow:var(--glow-cyan);background:#00f0ff14}.mobile-toggle{border:1px solid var(--glass-border);border-radius:var(--radius-sm);cursor:pointer;color:var(--cyan);background:0 0;padding:.4rem;transition:all .3s;display:none}.mobile-toggle:hover{border-color:var(--cyan);box-shadow:var(--glow-cyan)}.hero{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:7rem 3rem 3rem;display:flex;position:relative}.hero-content{z-index:2;grid-template-columns:1.1fr .9fr;align-items:center;gap:5rem;width:100%;max-width:1280px;display:grid;position:relative}.hero-text{animation:1s fadeInUp}.hero-tagline{color:var(--neon-green);letter-spacing:3px;text-shadow:0 0 20px #0f86;border-radius:var(--radius-sm);background:#00ff880d;border:1px solid #00ff8826;align-items:center;gap:.5rem;width:fit-content;margin-bottom:1.5rem;padding:.5rem 1rem;font-family:Courier New,monospace;font-size:.85rem;display:flex}.tagline-icon{animation:2s ease-in-out infinite pulse}.hero-title{font-family:var(--font-display);background:linear-gradient(135deg, var(--cyan) 0%, #fff 30%, var(--magenta) 60%, var(--cyan) 100%);-webkit-text-fill-color:transparent;text-shadow:none;background-size:300%;-webkit-background-clip:text;margin-bottom:1.5rem;font-size:clamp(2.2rem,5vw,4rem);font-weight:900;line-height:1.15;animation:4s linear infinite shimmer}.hero-subtitle{color:var(--text-secondary);max-width:520px;margin-bottom:2.5rem;font-size:1.15rem;font-weight:400;line-height:1.9}.hero-cta{flex-wrap:wrap;gap:1rem;margin-bottom:2rem;display:flex}.btn-primary,.btn-secondary{border-radius:var(--radius-sm);cursor:pointer;letter-spacing:1px;text-transform:uppercase;font-size:.95rem;font-weight:700;font-family:var(--font-body);align-items:center;gap:.5rem;padding:.85rem 2rem;text-decoration:none;transition:all .4s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--cyan), var(--magenta));color:#000;border:none;box-shadow:0 0 30px #00f0ff33,0 0 60px #ff00ff1a}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-3px)scale(1.02);box-shadow:0 0 50px #00f0ff66,0 0 100px #f0f3}.btn-secondary{border:1px solid var(--glass-border-hover);color:var(--cyan);background:0 0}.btn-secondary:hover{border-color:var(--cyan);box-shadow:var(--glow-cyan);background:#00f0ff14;transform:translateY(-3px)}.btn-full{justify-content:center;width:100%}.hero-tech-stack{flex-wrap:wrap;gap:.6rem;display:flex}.tech-badge{border:1px solid var(--glass-border);color:var(--text-secondary);letter-spacing:.5px;background:#00f0ff0f;border-radius:20px;align-items:center;gap:.4rem;padding:.35rem .8rem;font-size:.75rem;font-weight:500;transition:all .3s;display:inline-flex}.tech-badge:hover{border-color:var(--cyan);color:var(--cyan)}.hero-image{justify-content:center;align-items:center;animation:1s .3s backwards fadeInRight;display:flex}.hero-image-frame{position:relative}.hero-image-frame img{border-radius:var(--radius);border:1px solid var(--glass-border);z-index:1;max-width:100%;height:auto;animation:6s ease-in-out infinite float;position:relative}.hero-image-glow{border-radius:var(--radius);filter:blur(30px);z-index:0;background:radial-gradient(#00f0ff26,#ff00ff14,#0000 70%);animation:4s ease-in-out infinite pulseGlow;position:absolute;inset:-20px}.hero-scroll-indicator{cursor:pointer;z-index:2;position:absolute;bottom:2rem;left:50%;transform:translate(-50%)}.scroll-line{background:linear-gradient(to bottom, var(--cyan), transparent);border-radius:2px;width:2px;height:40px;animation:2s ease-in-out infinite scrollPulse}.section{z-index:2;padding:7rem 3rem;position:relative}.section-header{text-align:center;margin-bottom:4rem}.section-badge{border:1px solid var(--glass-border);color:var(--cyan);letter-spacing:2px;text-transform:uppercase;font-size:.7rem;font-weight:600;font-family:var(--font-display);background:#00f0ff0f;border-radius:20px;align-items:center;gap:.4rem;margin-bottom:1rem;padding:.4rem 1rem;display:inline-flex}.section-title{font-family:var(--font-display);background:linear-gradient(135deg, var(--cyan), #fff, var(--magenta));-webkit-text-fill-color:transparent;background-size:200%;-webkit-background-clip:text;margin-bottom:1rem;font-size:clamp(1.8rem,4vw,3rem);font-weight:800;animation:4s linear infinite shimmer}.section-subtitle{color:var(--text-secondary);max-width:600px;margin:0 auto;font-size:1.1rem}.services-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1200px;margin:0 auto;display:grid}.service-card{background:var(--card-bg);border:1px solid var(--glass-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:2.5rem 2rem;transition:all .5s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.service-card:before{content:"";background:linear-gradient(90deg, transparent, var(--cyan), var(--magenta), transparent);opacity:0;height:2px;transition:opacity .5s;position:absolute;top:0;left:0;right:0}.service-card:hover{border-color:var(--glass-border-hover);box-shadow:0 25px 80px #00f0ff14, 0 0 1px var(--cyan);background:#0a001ecc;transform:translateY(-10px)}.service-card:hover:before{opacity:1}.service-icon-wrap{border:1px solid var(--glass-border);width:64px;height:64px;color:var(--cyan);background:linear-gradient(135deg,#00f0ff1f,#ff00ff0f);border-radius:14px;justify-content:center;align-items:center;margin-bottom:1.5rem;transition:all .4s;display:flex;position:relative}.service-card:hover .service-icon-wrap{border-color:var(--cyan);background:linear-gradient(135deg,#00f0ff33,#ff00ff1a);box-shadow:0 0 25px #00f0ff33}.service-icon-glow{border-radius:inherit;filter:blur(10px);opacity:0;background:radial-gradient(circle,#00f0ff26,#0000 70%);transition:opacity .4s;position:absolute;inset:-10px}.service-card:hover .service-icon-glow{opacity:1}.service-title{font-family:var(--font-display);color:var(--text-primary);letter-spacing:1px;margin-bottom:.8rem;font-size:1rem;font-weight:700}.service-desc{color:var(--text-secondary);font-size:.92rem;line-height:1.8}.service-line{background:linear-gradient(90deg, var(--cyan), transparent);border-radius:2px;width:40px;height:2px;margin-top:1.5rem;transition:width .4s}.service-card:hover .service-line{width:80px}.about-content{grid-template-columns:1fr 1fr;align-items:center;gap:4rem;max-width:1200px;margin:0 auto;display:grid}.about-text{color:var(--text-secondary);background:var(--card-bg);border:1px solid var(--glass-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:2rem;font-size:1.1rem;line-height:2.2;position:relative}.about-text:before{content:"";background:linear-gradient(to bottom, var(--cyan), var(--magenta));border-radius:3px;width:3px;position:absolute;top:0;bottom:0;left:0}.about-stats{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}.stat-card{background:var(--card-bg);border:1px solid var(--glass-border);border-radius:var(--radius);text-align:center;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:2rem;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.stat-card:hover{border-color:var(--magenta-dim);box-shadow:var(--glow-magenta);transform:translateY(-6px)}.stat-glow{filter:blur(20px);opacity:0;background:radial-gradient(#ff00ff26,#0000);width:100px;height:60px;transition:opacity .4s;position:absolute;bottom:-30px;left:50%;transform:translate(-50%)}.stat-card:hover .stat-glow{opacity:1}.stat-value{font-family:var(--font-display);background:linear-gradient(135deg, var(--cyan), var(--neon-green));-webkit-text-fill-color:transparent;z-index:1;-webkit-background-clip:text;font-size:2.5rem;font-weight:900;position:relative}.stat-label{color:var(--text-secondary);letter-spacing:.5px;z-index:1;margin-top:.4rem;font-size:.88rem;position:relative}.portfolio-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;max-width:1200px;margin:0 auto;display:grid}.portfolio-card{background:var(--card-bg);border:1px solid var(--glass-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:all .5s cubic-bezier(.4,0,.2,1);overflow:hidden}.portfolio-card:hover{border-color:var(--magenta-dim);transform:translateY(-10px);box-shadow:0 25px 80px #ff00ff1a}.portfolio-visual{background:linear-gradient(135deg,#00f0ff0f,#ff00ff0f);justify-content:center;align-items:center;height:180px;display:flex;position:relative;overflow:hidden}.portfolio-visual:after{content:"";pointer-events:none;background:repeating-linear-gradient(0deg,#0000,#0000 3px,#00f0ff05 3px 4px);position:absolute;inset:0}.portfolio-icon{color:var(--cyan);opacity:.3;transition:all .4s}.portfolio-card:hover .portfolio-icon{opacity:.6;transform:scale(1.15)}.portfolio-badge{color:var(--cyan);letter-spacing:1px;z-index:1;font-size:.7rem;font-weight:600;font-family:var(--font-display);background:#00f0ff1a;border:1px solid #00f0ff4d;border-radius:20px;padding:.3rem .8rem;position:absolute;top:1rem;right:1rem}.portfolio-info{padding:1.5rem}.portfolio-title{font-family:var(--font-display);color:var(--text-primary);letter-spacing:.5px;margin-bottom:.5rem;font-size:.95rem;font-weight:700}.portfolio-desc{color:var(--text-secondary);font-size:.88rem;line-height:1.7}.contact-content{grid-template-columns:1.2fr .8fr;gap:3rem;max-width:1000px;margin:0 auto;display:grid}.contact-form{flex-direction:column;gap:1.2rem;display:flex}.form-group{flex-direction:column;gap:.4rem;display:flex}.form-group label{color:var(--cyan);letter-spacing:2px;text-transform:uppercase;font-size:.75rem;font-weight:600;font-family:var(--font-display)}.form-group input,.form-group textarea{background:var(--card-bg);border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);outline:none;padding:.9rem 1rem;font-size:1rem;transition:all .3s}.form-group input:focus,.form-group textarea:focus{border-color:var(--cyan);background:#0a001ecc;box-shadow:0 0 20px #00f0ff1a}.form-group textarea{resize:vertical;min-height:130px}.contact-info{flex-direction:column;justify-content:center;gap:1.2rem;display:flex}.contact-info-item{background:var(--card-bg);border:1px solid var(--glass-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);align-items:center;gap:1rem;padding:1.2rem 1.5rem;transition:all .4s;display:flex}.contact-info-item:hover{border-color:var(--cyan);transform:translate(6px);box-shadow:-4px 0 20px #00f0ff1a}.contact-icon{border:1px solid var(--glass-border);width:48px;min-width:48px;height:48px;color:var(--cyan);background:linear-gradient(135deg,#00f0ff1a,#ff00ff0d);border-radius:12px;justify-content:center;align-items:center;transition:all .3s;display:flex}.contact-info-item:hover .contact-icon{border-color:var(--cyan);box-shadow:0 0 15px #00f0ff33}.contact-detail{color:var(--text-secondary);font-size:.95rem;font-weight:500}.footer{text-align:center;border-top:1px solid var(--glass-border);z-index:2;background:#06000f80;padding:3rem;position:relative}.footer-inner{max-width:1200px;margin:0 auto}.footer-logo{margin-bottom:1rem;font-size:1.2rem;display:inline-flex}.footer-copyright{color:var(--text-secondary);font-size:.85rem}.footer-tagline{color:var(--text-secondary);opacity:.5;margin-top:.3rem;font-size:.75rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(60px)}to{opacity:1;transform:translate(0)}}@keyframes shimmer{0%{background-position:0%}to{background-position:200%}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-18px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes pulseGlow{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}@keyframes scrollPulse{0%{opacity:1;transform:scaleY(1)}50%{opacity:.3;transform:scaleY(.6)}to{opacity:1;transform:scaleY(1)}}.fade-in{opacity:0;transition:all .8s cubic-bezier(.4,0,.2,1);transform:translateY(30px)}.fade-in.visible{opacity:1;transform:translateY(0)}@media (width<=1024px){.services-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.navbar{padding:1rem 1.5rem}.navbar.scrolled{padding:.6rem 1.5rem}.navbar-links{display:none}.mobile-toggle{display:flex}.navbar-links.open{border-bottom:1px solid var(--glass-border);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:#06000ffa;flex-direction:column;gap:1.5rem;padding:2rem;display:flex;position:absolute;top:100%;left:0;right:0}.lang-switcher{justify-content:center;margin-left:0}.hero{padding:6rem 1.5rem 3rem}.hero-content{text-align:center;grid-template-columns:1fr;gap:2rem}.hero-tagline{justify-content:center}.hero-subtitle{margin-left:auto;margin-right:auto}.hero-cta,.hero-tech-stack{justify-content:center}.hero-image{order:-1}.hero-image-frame img{max-width:280px}.section{padding:4rem 1.5rem}.about-content,.contact-content,.services-grid,.portfolio-grid{grid-template-columns:1fr}}