:root{--primary:#c8a97e;--primary-dark:#a6894e;--primary-light:#c8a97e1a;--accent:#e8d5b5;--accent-light:#e8d5b50f;--text-bright:#faf7f2;--text:#c5beb4;--text-light:#d8d2c8;--text-muted:#cbc3b8;--bg:#080809;--bg-warm:#030304;--bg-gray:#0e0e10;--border:#c8a97e17;--radius:20px;--shadow-sm:0 4px 12px #00000080;--shadow:0 8px 32px #0009;--shadow-lg:0 16px 48px #000000b3;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", Tahoma, Arial, sans-serif;--transition:.5s cubic-bezier(.34, 1.56, .64, 1);--glass:#080809bf;--glass-border:#c8a97e14;--glow-primary:0 0 35px #c8a97e2e;--glow-accent:0 0 35px #e8d5b524;--glow-stellar:0 0 50px #c8a97e47;--card-bg:linear-gradient(145deg, #18181a4d 0%, #060607b3 100%);--card-bg-hover:linear-gradient(145deg, #242428bf 0%, #0c0c0efa 100%);--icon-bg:linear-gradient(135deg, #18181af2, #080809);--icon-bg-hover:linear-gradient(135deg, #c8a97e26, #c8a97e08);--contact-bg:linear-gradient(145deg, #18181a80 0%, #060607bf 100%);--nav-bg:#060606cc;--nav-bg-scrolled:#060606f2;--nav-mobile-bg:#060606fa;--nav-border:#c8a97e0f;--hero-bg:linear-gradient(160deg, #060606 0%, #0a0a0a 40%, #0f0f0f 100%);--portrait-bg:linear-gradient(145deg, #c8a97e24, #0a0a0a94);--caption-bg:linear-gradient(135deg, #0f0f0fd9 0%, #060606fa 100%);--input-bg:#0a0a0ab3;--input-bg-focus:#0f0f0fd9;--toast-bg:linear-gradient(135deg, #0f0f0ff2 0%, #060606fa 100%);--heading-gradient:linear-gradient(135deg, #c8a97e, #e8d5b5);--cert-bg:#00000040;scrollbar-width:thin;scrollbar-color:#c8a97e4d #0a0a0a}:root[data-theme=light]{--primary:#856837;--primary-dark:#664e25;--primary-light:#8568371a;--accent:#785e32;--bg:#fdfbf7;--bg-warm:#f7f3eb;--bg-gray:#efece3;--text-bright:#1c1917;--text:#443e38;--text-light:#4f463d;--text-muted:#51483f;--border:#a6894e1f;--glass:#fdfbf7bf;--glass-border:#a6894e1a;--shadow-sm:0 4px 12px #a6894e0a;--shadow:0 8px 30px #a6894e14;--shadow-lg:0 16px 48px #a6894e1f;--glow-primary:0 0 35px #a6894e1a;--glow-accent:0 0 35px #a6894e0f;scrollbar-color:#a6894e4d #fdfbf7;--card-bg:linear-gradient(145deg, #fffc 0%, #f6f2eae6 100%);--card-bg-hover:linear-gradient(145deg, #fffffffa 0%, #faf6eefc 100%);--icon-bg:linear-gradient(135deg, #faf6eef2, #f2ece0);--icon-bg-hover:linear-gradient(135deg, #a6894e1f, #a6894e0a);--contact-bg:linear-gradient(145deg, #ffffffbf 0%, #f6f2eae6 100%);--nav-bg:#fdfbf7d9;--nav-bg-scrolled:#fdfbf7f5;--nav-mobile-bg:#fdfbf7fa;--nav-border:#a6894e14;--hero-bg:linear-gradient(160deg, #fdfbf7 0%, #f7f3eb 40%, #efece3 100%);--portrait-bg:linear-gradient(145deg, #a6894e2e, #ffffffd9);--caption-bg:linear-gradient(135deg, #ffffffe6 0%, #f6f2eafa 100%);--input-bg:#ffffffd9;--input-bg-focus:#fffffffa;--toast-bg:linear-gradient(135deg, #fffffffa 0%, #f6f2eafc 100%);--heading-gradient:linear-gradient(135deg, #a6894e, #8c6f3a);--cert-bg:#efece380}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0a0a0a}::-webkit-scrollbar-thumb{background:#c8a97e33;border:2px solid #0a0a0a;border-radius:4px;transition:background .3s}::-webkit-scrollbar-thumb:hover{background:#c8a97e66}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;overflow-x:hidden}html{scroll-behavior:smooth;scroll-padding-top:80px}body{font-family:var(--font);background:var(--bg-warm);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.8}html.scroll-lock,body.scroll-lock{overflow:hidden!important}a{color:inherit;text-decoration:none}ul{list-style:none}img{max-width:100%;display:block}.container{max-width:1200px;margin:0 auto;padding:0 24px}.portfolio-intro{z-index:10000;color:#faf7f2;touch-action:manipulation;background:radial-gradient(circle at 50% 38%,#c8a97e14,#0000 34%),linear-gradient(140deg,#030304 0%,#080706 54%,#030304 100%),repeating-linear-gradient(115deg,#c8a97e1c 0 1px,#0000 1px 84px);place-items:center;min-height:100vh;padding:28px;transition:opacity .5s,visibility .5s;display:grid;position:fixed;inset:0;overflow:hidden}.portfolio-intro:before,.portfolio-intro:after{content:"";pointer-events:none;position:absolute}.portfolio-intro:before{background:linear-gradient(90deg,#0000,#c8a97e2e,#0000) 0 0/100% 1px no-repeat,linear-gradient(90deg,#0000,#c8a97e1f,#0000) 0 100%/100% 1px no-repeat,linear-gradient(#0000,#c8a97e24,#0000) 0 0/1px 100% no-repeat,linear-gradient(#0000,#c8a97e24,#0000) 100% 0/1px 100% no-repeat;border:1px solid #c8a97e2e;inset:7%}.portfolio-intro:after{opacity:.82;background:linear-gradient(110deg,#0000 0 28%,#c8a97e24 28.2%,#0000 29% 64%,#e8d5b514 64.2%,#0000 65%),linear-gradient(#00000029 0%,#c8a97e12 50%,#0000002e 100%);animation:2.4s ease-out both introSheen;inset:0;transform:translate(-8%)skew(-12deg)}.intro-frame{opacity:.7;border-top:2px solid #c8a97e80;border-bottom:1px solid #c8a97e33;position:absolute;inset:12%;transform:skew(-8deg)}.intro-panel{z-index:1;text-align:center;width:min(680px,100%);padding:56px 24px;position:relative}.intro-kicker{color:#c8a97e;letter-spacing:4px;text-transform:uppercase;opacity:0;margin-bottom:18px;font-size:.78rem;font-weight:800;animation:.7s .1s forwards introLift}.intro-title{color:#faf7f2;letter-spacing:0;opacity:0;margin-bottom:18px;font-size:clamp(2.25rem,7vw,5rem);font-weight:900;line-height:1.05;animation:.75s .22s forwards introLift}.intro-name-line{display:inline}.intro-subtitle{color:#faf7f2c7;letter-spacing:2px;text-transform:uppercase;opacity:0;margin-bottom:34px;font-size:clamp(.9rem,2.5vw,1.05rem);animation:.75s .34s forwards introLift}.intro-enter{color:#080809;min-height:52px;font-family:var(--font);letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;opacity:0;background:linear-gradient(135deg,#c8a97e,#a6894e);border:1px solid #c8a97e6b;border-radius:8px;justify-content:center;align-items:center;gap:10px;padding:0 28px;font-size:.86rem;font-weight:900;transition:transform .25s,box-shadow .25s,filter .25s;animation:.75s .46s forwards introLift;display:inline-flex;transform:translateY(14px);box-shadow:0 18px 44px #00000073}.intro-unlock{color:#faf7f2c7;letter-spacing:1.6px;text-wrap:balance;opacity:0;max-width:420px;margin:16px auto 0;font-size:clamp(.82rem,2.2vw,.95rem);font-weight:700;line-height:1.7;animation:.75s .58s forwards introLift;transform:translateY(12px)}.intro-enter:hover{filter:brightness(1.05);transform:translateY(-3px);box-shadow:0 22px 52px #c8a97e2e,0 18px 44px #0000007a}.intro-enter:focus-visible{outline-offset:4px;outline:2px solid #e8d5b5}.portfolio-intro.is-leaving{opacity:0;visibility:hidden;pointer-events:none}.portfolio-intro.is-hidden{display:none}@keyframes introLift{to{opacity:1;transform:translateY(0)}}@keyframes introSheen{0%{opacity:0;transform:translate(-24%)skew(-12deg)}to{opacity:.7;transform:translate(-8%)skew(-12deg)}}@media (prefers-reduced-motion:reduce){.portfolio-intro,.portfolio-intro:after,.intro-kicker,.intro-title,.intro-subtitle,.intro-enter,.intro-unlock{opacity:1;transform:none;transition:none!important;animation:none!important}}@media (width<=640px){.portfolio-intro{-webkit-overflow-scrolling:touch;background:radial-gradient(circle at 50% 48%,#c8a97e29,#0000 34%),linear-gradient(150deg,#020203 0%,#080706 54%,#020203 100%),repeating-linear-gradient(115deg,#c8a97e14 0 1px,#0000 1px 86px);place-items:start center;min-height:100svh;padding:34px 16px 22px;overflow-y:auto}.portfolio-intro:before{border-color:#c8a97e42;inset:28px 16px 20px}.portfolio-intro:after{opacity:.66;transform:translate(-22%)skew(-12deg)}.intro-frame{border-top-color:#c8a97e52;inset:56px 16px 30px;transform:none}.intro-panel{flex-direction:column;justify-content:center;width:100%;min-height:calc(100svh - 76px);padding:18px 10px 56px;display:flex}.intro-kicker{letter-spacing:3px;margin-bottom:14px;font-size:.68rem}.intro-title{letter-spacing:0;overflow-wrap:normal;word-break:normal;text-shadow:0 18px 52px #000c;width:min(100%,340px);margin:0 auto 22px;font-size:clamp(2.15rem,10.4vw,2.9rem);line-height:1.04}.intro-name-line{display:block}.intro-subtitle{letter-spacing:2.2px;max-width:310px;margin:0 auto 32px;font-size:.78rem;line-height:1.75}.intro-enter{letter-spacing:2.1px;touch-action:manipulation;border-radius:16px;width:min(100%,312px);min-height:56px;margin:0 auto;font-size:.8rem;box-shadow:0 0 0 5px #c8a97e29,0 18px 42px #00000085}.intro-unlock{letter-spacing:.6px;color:#faf7f2d1;max-width:300px;margin-top:20px;font-size:.84rem}}@media (width<=360px){.intro-title{width:min(100%,304px);font-size:clamp(2rem,9.8vw,2.35rem)}.intro-kicker{letter-spacing:2.3px}.intro-subtitle{letter-spacing:1.7px;max-width:280px}.intro-enter{letter-spacing:1.6px;width:min(100%,286px)}}.skip-nav{background:var(--primary);color:#0a0a0a;letter-spacing:1px;z-index:200;border-radius:0 0 8px 8px;padding:12px 24px;font-size:.85rem;font-weight:600;text-decoration:none;transition:top .3s;position:absolute;top:-100%;left:16px}.skip-nav:focus{top:0}.navbar{z-index:100;background:var(--nav-bg);-webkit-backdrop-filter:blur(20px)saturate(1.2);backdrop-filter:blur(20px)saturate(1.2);border-bottom:1px solid var(--nav-border);transition:var(--transition);padding:14px 0;position:fixed;top:0;left:0;right:0}.navbar.scrolled{background:var(--nav-bg-scrolled);box-shadow:var(--shadow);border-bottom-color:var(--nav-border)}.nav-container{justify-content:space-between;align-items:center;gap:18px;max-width:1000px;margin:0 auto;padding:0 24px;display:flex}.nav-logo{color:var(--text-bright);letter-spacing:1px;text-transform:uppercase;white-space:nowrap;flex:none;font-size:1.35rem;font-weight:800}.nav-logo .dot{color:var(--primary);font-size:1.6rem;animation:3s ease-in-out infinite dotPulse}@keyframes dotPulse{0%,to{opacity:1}50%{opacity:.3}}.nav-links{align-items:center;gap:4px;min-width:0;display:flex}.nav-link{color:var(--text);transition:var(--transition);letter-spacing:.5px;text-transform:uppercase;text-align:center;white-space:nowrap;border-radius:10px;justify-content:center;align-items:center;padding:8px 18px;font-size:.85rem;font-weight:500;line-height:1.3;display:inline-flex;position:relative}.nav-link:hover{color:var(--primary);background:#c8a97e0f}.nav-link.active{color:var(--primary);background:#c8a97e14;font-weight:600}.nav-toggle{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:5px;padding:4px;display:none}.nav-toggle span{background:var(--text);width:22px;height:2px;transition:var(--transition);border-radius:2px}.nav-toggle.active span:first-child{transform:rotate(45deg)translate(5px,5px)}.nav-toggle.active span:nth-child(2){opacity:0}.nav-toggle.active span:nth-child(3){transform:rotate(-45deg)translate(5px,-5px)}@media (width<=1080px) and (width>=769px){.navbar{padding:12px 0}.nav-container{max-width:100%;padding:0 28px}.nav-logo{font-size:clamp(1.15rem,2.8vw,1.35rem)}.nav-links{z-index:120;-webkit-backdrop-filter:blur(16px)saturate(1.25);backdrop-filter:blur(16px)saturate(1.25);will-change:transform;background:#080809f5;border-left:1px solid #c8a97e24;flex-direction:column;align-items:stretch;gap:6px;width:min(360px,78vw);height:100dvh;padding:100px 28px 40px;transition:transform .35s cubic-bezier(.16,1,.3,1);position:fixed;top:0;right:0;overflow-y:auto;transform:translate(100%);box-shadow:-18px 0 48px #0000007a}[data-theme=light] .nav-links{background:#fdfbf7f0;border-left-color:#a6894e29;box-shadow:-18px 0 48px #5c492a1f}.nav-links.active{transform:translate(0,0)}.nav-links li{opacity:0;width:100%;transition:opacity .2s,transform .2s;transform:translate(12px)}.nav-links.active li{opacity:1;transition:opacity .4s,transform .4s;transform:translate(0,0)}.nav-links.active li:first-child{transition-delay:60ms}.nav-links.active li:nth-child(2){transition-delay:.1s}.nav-links.active li:nth-child(3){transition-delay:.14s}.nav-links.active li:nth-child(4){transition-delay:.18s}.nav-links.active li:nth-child(5){transition-delay:.22s}.nav-links.active li:nth-child(6){transition-delay:.26s}.nav-links.active li:nth-child(7){transition-delay:.3s}.nav-link{width:100%;min-height:46px;color:var(--text);letter-spacing:.5px;background:0 0;border:1px solid #0000;border-radius:14px;justify-content:flex-start;margin:4px 0;padding:12px 18px;font-size:.9rem;font-weight:650}.nav-link:hover{color:var(--primary);background:#c8a97e14;border-color:#c8a97e29;transform:translate(4px)}.nav-link.active{transform:translate(4px);box-shadow:0 10px 24px #0000002e;color:var(--text-bright)!important;background:linear-gradient(135deg,#c8a97e29,#c8a97e0a)!important;border-color:#c8a97e47!important}[data-theme=light] .nav-link.active{box-shadow:0 10px 24px #5c492a14;color:var(--text-bright)!important;background:linear-gradient(135deg,#a6894e29,#a6894e0a)!important}.nav-link.active:before{display:none!important}.nav-actions{margin-left:auto}.theme-toggle,.lang-toggle,.nav-toggle{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#c8a97e0a;border:1px solid #c8a97e1f;box-shadow:0 4px 12px #00000040}[data-theme=light] .theme-toggle,[data-theme=light] .lang-toggle,[data-theme=light] .nav-toggle{background:#a6894e0a;border-color:#a6894e1f;box-shadow:0 4px 12px #a6894e0a}.nav-toggle{z-index:130;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;display:flex;position:relative}.nav-toggle span{background:var(--text-bright);width:18px}}.hero{text-align:center;background:var(--hero-bg);justify-content:center;align-items:center;min-height:100vh;padding:110px 0 80px;display:flex;position:relative;overflow:hidden}.hero:before,.hero:after{content:"";pointer-events:none;z-index:0;position:absolute;inset:0}.hero:before{opacity:.62;background:linear-gradient(115deg,#0000 0 18%,#c8a97e17 18.4%,#0000 19.2% 54%,#e8d5b514 54.4%,#0000 55.4%),repeating-linear-gradient(115deg,#c8a97e14 0 1px,#0000 1px 72px);-webkit-mask-image:linear-gradient(90deg,#0000 0%,#000 10% 82%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0%,#000 10% 82%,#0000 100%)}.hero:after{opacity:.72;background:linear-gradient(100deg,#0000 0%,#c8a97e29 22%,#e8d5b514 48%,#0000 76%),linear-gradient(#0000 0%,#c8a97e14 48%,#0000 100%);height:46%;inset:18% -18% auto 38%;transform:skew(-12deg)}[data-theme=light] .hero:before{background:linear-gradient(115deg,#0000 0 18%,#85683721 18.4%,#0000 19.2% 54%,#a6894e1a 54.4%,#0000 55.4%),repeating-linear-gradient(115deg,#8568371a 0 1px,#0000 1px 72px)}[data-theme=light] .hero:after{background:linear-gradient(100deg,#0000 0%,#8568371f 22%,#a6894e14 48%,#0000 76%),linear-gradient(#0000 0%,#85683712 48%,#0000 100%)}.hero-particles{z-index:0;pointer-events:none;position:absolute;inset:0}.cursor-glow{pointer-events:none;z-index:50;opacity:0;background:radial-gradient(circle,#c8a97e0a 0%,#0000 70%);border-radius:50%;width:400px;height:400px;transition:opacity .4s;position:fixed;top:0;left:0;transform:translate(-50%,-50%)}.cursor-glow.active{opacity:1}.cursor-glow,.hero-particles,.hero-bg-shapes,.shape,.ambient-glow,.portrait-glow{display:none!important}.hero-bg-shapes{pointer-events:none;position:absolute;inset:0}.shape{opacity:.12;filter:blur(100px);will-change:transform;backface-visibility:hidden;border-radius:50%;animation-play-state:paused;position:absolute;transform:translate(0,0)}.shape-1{background:#c8a97e;width:500px;height:500px;animation:10s ease-in-out infinite float;top:-150px;right:-100px}.shape-2{background:#e8d5b5;width:350px;height:350px;animation:12s ease-in-out infinite reverse float;bottom:-80px;left:-80px}.shape-3{background:#d4a0a0;width:250px;height:250px;animation:14s ease-in-out 3s infinite float;top:50%;left:60%}@keyframes float{0%,to{transform:translate(0,0)}50%{transform:translateY(-25px)}}.hero-layout{z-index:1;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);align-items:center;gap:56px;display:grid;position:relative}.hero-layout:before{content:none;filter:blur(24px);pointer-events:none;background:radial-gradient(circle at 30% 30%,#c8a97e1f,#0000 55%);width:min(42vw,520px);animation:10s ease-in-out infinite heroFloat;position:absolute;inset:8% 0 8% auto}.hero-layout:after{content:none;filter:blur(10px);pointer-events:none;background:radial-gradient(circle,#e8d5b514,#0000 65%);border-radius:50%;width:280px;height:280px;animation:14s ease-in-out infinite reverse heroFloatSoft;position:absolute;inset:auto auto -18% 4%}.hero-content{text-align:left;z-index:1;max-width:700px;animation:8s ease-in-out infinite heroContentFloat;position:relative}.hero-greeting{color:var(--primary);letter-spacing:4px;text-transform:uppercase;margin-bottom:16px;font-size:.9rem;font-weight:600;animation:.8s ease-out .2s both fadeInUp}.hero-name{color:var(--text-bright);letter-spacing:-1px;margin-bottom:12px;font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;line-height:1.1;animation:.8s ease-out .4s both fadeInUp}.hero-name:focus,#main-content:focus{outline:none}.hero-title{color:var(--text-light);background:linear-gradient(90deg,#c8a97e,#e8d5b5,#d4a0a0,#c8a97e) 0 0/300% 100%;-webkit-text-fill-color:transparent;letter-spacing:2px;text-transform:uppercase;-webkit-background-clip:text;background-clip:text;margin-bottom:24px;font-size:1.15rem;font-weight:500;animation:.8s ease-out .6s both fadeInUp,6s ease-in-out infinite gradientShift}@keyframes gradientShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hero-description{max-width:520px;color:var(--text-light);margin:0 auto 24px;font-size:.95rem;line-height:1.9;animation:.8s ease-out .8s both fadeInUp}.hero-badges{flex-wrap:wrap;justify-content:flex-start;gap:10px;margin-bottom:36px;animation:.8s ease-out .9s both fadeInUp;display:flex}.hero-badge{color:var(--primary);letter-spacing:1px;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);transition:var(--transition);box-shadow:var(--shadow-sm);background:#c8a97e0a;border:1px solid #c8a97e1a;border-radius:12px;padding:8px 16px;font-size:.8rem;font-weight:600}.hero-badge:hover{border-color:var(--primary);color:var(--text-bright);background:#c8a97e1f;transform:translateY(-3px);box-shadow:0 4px 15px #c8a97e2e}.hero-buttons{flex-wrap:wrap;justify-content:center;gap:16px;animation:.8s ease-out 1s both fadeInUp;display:flex}.hero-portrait-panel{flex-direction:column;justify-content:center;align-self:stretch;align-items:flex-end;gap:18px;animation:9s ease-in-out infinite portraitDrift;display:flex;position:relative}.hero-portrait-panel:after{content:none;filter:blur(26px);pointer-events:none;z-index:0;background:radial-gradient(circle,#c8a97e1f,#0000 70%);height:120px;position:absolute;inset:auto 12% 6% 18%}.portrait-floating-card{z-index:1;justify-content:flex-end;width:100%;display:flex;position:relative}.portrait-frame{isolation:isolate;background:var(--portrait-bg);border:1px solid #c8a97e1f;border-radius:28px;width:min(100%,390px);margin-left:auto;padding:14px;transition:transform .45s,box-shadow .45s,border-color .45s;position:relative;overflow:hidden;transform:perspective(1200px)rotateY(-8deg)rotateX(2deg);box-shadow:0 24px 60px #00000073,inset 0 1px #ffffff0f}.portrait-frame:before{content:"";mix-blend-mode:screen;pointer-events:none;background:linear-gradient(135deg,#ffffff1f,#0000 35% 65%,#c8a97e14);position:absolute;inset:0}.portrait-frame:after{content:"";pointer-events:none;background:linear-gradient(120deg,#0000 0%,#ffffff0f 50%,#0000 100%);animation:8s ease-in-out infinite sheen;position:absolute;inset:0;transform:translate(-120%)}.portrait-glow{filter:blur(12px);opacity:.9;pointer-events:none;background:radial-gradient(circle at 70% 20%,#e8d5b52e,#0000 48%),radial-gradient(circle at 30% 80%,#c8a97e33,#0000 55%);border-radius:24px;position:absolute;inset:18px}.hero-portrait{z-index:1;aspect-ratio:4/5;object-fit:cover;object-position:center top;filter:grayscale(10%)contrast(1.05)brightness(.98)saturate(.9);border-radius:20px;width:100%;transition:transform .55s,filter .55s;position:relative;transform:scale(1.01)}.hero-portrait-panel:hover .portrait-frame{border-color:#c8a97e38;transform:perspective(1200px)rotateY(-4deg)rotateX(0)translateY(-4px);box-shadow:0 30px 70px #00000080,0 0 50px #c8a97e14,inset 0 1px #ffffff14}.hero-portrait-panel:hover .hero-portrait{filter:grayscale(0%)contrast(1.08)brightness();transform:scale(1.04)}.portrait-caption{background:var(--caption-bg);border:1px solid #c8a97e1a;border-left:3px solid var(--primary);-webkit-backdrop-filter:blur(16px);width:min(100%,390px);color:var(--text-light);text-align:left;border-radius:18px;margin-left:auto;padding:20px 24px;transition:border-color .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1);box-shadow:0 16px 40px #0006,inset 0 1px #ffffff0d}.portrait-caption-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.signature-icon{color:var(--primary);filter:drop-shadow(0 0 4px #c8a97e66);flex-shrink:0}.portrait-kicker{letter-spacing:2.5px;text-transform:uppercase;color:var(--primary);font-size:.75rem;font-weight:700;display:block}.portrait-caption strong{color:var(--text-bright);letter-spacing:.5px;margin-bottom:6px;font-size:1.15rem;font-weight:800;display:block}.portrait-caption span:last-child{color:var(--text-light);opacity:.85;font-size:.82rem;line-height:1.6;display:block}.hero-portrait-panel:hover .portrait-caption{border-color:#c8a97e29;box-shadow:0 14px 34px #00000047}@keyframes heroFloatSoft{0%,to{opacity:.9;transform:translateY(0)translate(0)}50%{opacity:1;transform:translateY(-14px)translate(8px)}}@keyframes heroFloat{0%,to{transform:translateY(0)translate(0)}50%{transform:translateY(-10px)translate(-8px)}}@keyframes heroContentFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes portraitDrift{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes sheen{0%,65%{transform:translate(-120%)}to{transform:translate(120%)}}.hero-greeting,.hero-name,.hero-title,.hero-description,.hero-badges,.hero-buttons,.hero-content,.hero-portrait-panel,.shape,.hero-layout:before,.hero-layout:after,.portrait-frame:after{animation:none!important}.hero-title{background-position:50%}.shape,.hero-layout:before,.hero-layout:after,.portrait-glow,.hero-portrait-panel:after{filter:none!important}.hero-badge,.portrait-caption,.navbar{-webkit-backdrop-filter:none;backdrop-filter:none}.portrait-frame{transform:none;box-shadow:0 14px 36px #0000005c,inset 0 1px #ffffff0f}.hero-portrait{filter:grayscale(8%)contrast(1.03)brightness(.99);transform:none}.btn{font-family:var(--font);cursor:pointer;transition:var(--transition);letter-spacing:1px;text-transform:uppercase;border:none;border-radius:8px;align-items:center;padding:14px 32px;font-size:.85rem;font-weight:600;display:inline-flex;position:relative;overflow:hidden}.btn-primary{color:#0a0a0a;background:linear-gradient(135deg,#c8a97e,#a6894e);font-weight:700;position:relative;overflow:hidden;box-shadow:0 4px 20px #c8a97e33}.btn-primary:after{content:"";background:#fff3;width:40%;height:200%;transition:all .6s;position:absolute;top:-50%;left:-60%;transform:rotate(25deg)}.btn-primary:hover:after{left:120%}.btn-primary:hover{transform:translateY(-4px)scale(1.035);box-shadow:0 12px 36px #c8a97e73,0 0 15px #e8d5b533}.btn-outline{color:var(--text);background:0 0;border:1px solid #c8a97e33}.btn-outline:hover{border-color:var(--primary);color:var(--text-bright);background:#c8a97e14;transform:translateY(-4px)scale(1.035);box-shadow:0 10px 24px #c8a97e26}.btn-icon{gap:8px}.btn-icon svg{transition:var(--transition);flex-shrink:0}.btn-icon:hover svg{filter:drop-shadow(0 0 6px #c8a97e66);transform:scale(1.1)}.section{padding:100px 0;position:relative;overflow:hidden}@supports (content-visibility:auto){main>.section{content-visibility:auto;contain-intrinsic-size:1200px}}@media (width<=768px){.dragon-widget{display:none}}.section-alt{background:var(--bg-gray);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.section-title{text-align:center;background:var(--heading-gradient);-webkit-text-fill-color:transparent;letter-spacing:6px;text-transform:uppercase;-webkit-background-clip:text;background-clip:text;width:100%;margin-bottom:8px;font-size:2.1rem;font-weight:700;display:inline-block;position:relative}.section-title:after{content:"";background:linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);width:60px;height:2px;margin:16px auto 0;display:block;box-shadow:0 0 10px #c8a97eb3}.section-subtitle{text-align:center;color:var(--text-muted);font-family:var(--font);letter-spacing:1px;opacity:1;margin-bottom:60px;font-size:.88rem;font-weight:400}.about-content{text-align:center;background:var(--card-bg);-webkit-backdrop-filter:blur(20px);will-change:transform;border:1px solid #c8a97e14;border-top-color:#c8a97e2e;border-radius:28px;max-width:720px;margin:0 auto;padding:44px 52px;transition:transform .45s cubic-bezier(.25,.8,.25,1),border-color .45s,box-shadow .45s;position:relative;overflow:hidden;box-shadow:inset 0 1px 15px #c8a97e03,0 16px 40px #00000059}.about-content:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle at 50% 10%,#c8a97e0a 0%,#0000 60%);width:200%;height:200%;position:absolute;top:-50%;left:-50%}.about-content:hover{border-color:#c8a97e59 #c8a97e2e #c8a97e2e;transform:translateY(-5px);box-shadow:inset 0 1px 15px #c8a97e08,0 24px 56px #00000073,0 0 40px #c8a97e0a}[data-theme=light] .about-content{background:var(--card-bg);border-color:#a6894e2e #a6894e14 #a6894e14;box-shadow:inset 0 1px 15px #a6894e03,0 16px 40px #a6894e0a}[data-theme=light] .about-content:hover{border-color:#a6894e59 #a6894e2e #a6894e2e;box-shadow:inset 0 1px 15px #a6894e05,0 24px 56px #a6894e14}.about-headline{letter-spacing:3px;text-transform:uppercase;z-index:1;margin-bottom:32px;font-size:clamp(1.15rem,3vw,1.4rem);font-weight:700;line-height:1.6;position:relative}.gold-gradient{background:var(--heading-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.headline-divider{color:var(--text-muted);opacity:.5;margin:0 6px;font-size:1.1em;font-weight:300}.about-content>p{color:var(--text);font-family:var(--font);text-align:left;z-index:1;margin-bottom:18px;font-size:.92rem;font-weight:400;line-height:2;position:relative}.about-content>p:last-of-type{margin-bottom:0}.drop-cap{font-size:1.05em;font-weight:700;font-family:var(--font);background:var(--heading-gradient);-webkit-text-fill-color:transparent;line-height:inherit;-webkit-background-clip:text;background-clip:text}.text-glow-primary{color:var(--primary);font-weight:600;font-family:var(--font)}[data-theme=light] .text-glow-primary{color:#8c6f3a}.text-light-glow{color:var(--text-bright);font-weight:600}.about-term-badge{font-size:.8rem;font-weight:600;font-family:var(--font);color:var(--primary);vertical-align:middle;letter-spacing:.3px;white-space:nowrap;cursor:pointer;background:#c8a97e0d;border:1px solid #c8a97e26;border-radius:8px;justify-content:center;align-items:center;margin:2px 4px;padding:3px 12px;transition:background .3s cubic-bezier(.25,.8,.25,1),border-color .3s cubic-bezier(.25,.8,.25,1),transform .3s cubic-bezier(.25,.8,.25,1),box-shadow .3s cubic-bezier(.25,.8,.25,1),color .3s cubic-bezier(.25,.8,.25,1);display:inline-flex;position:relative;top:-1px}.about-term-badge.highlight{color:var(--text-bright);background:linear-gradient(135deg,#c8a97e24 0%,#c8a97e08 100%);border-color:#c8a97e47;box-shadow:0 2px 8px #c8a97e14}.about-term-badge:hover{border-color:var(--primary);color:var(--text-bright);background:#c8a97e1a;transform:translateY(-2px)scale(1.04);box-shadow:0 4px 12px #c8a97e26}.about-term-badge.highlight:hover{border-color:var(--accent);background:linear-gradient(135deg,#c8a97e2e 0%,#c8a97e0f 100%);box-shadow:0 4px 12px #c8a97e40}[data-theme=light] .about-term-badge{color:#8c6f3a;background:#a6894e0d;border-color:#a6894e29;box-shadow:0 2px 8px #a6894e05}[data-theme=light] .about-term-badge.highlight{color:#1c1917;background:linear-gradient(135deg,#a6894e26 0%,#a6894e0a 100%);box-shadow:0 2px 8px #a6894e0a;border-color:#a6894e4d!important}[data-theme=light] .about-term-badge:hover{color:#1c1917;background:#a6894e1a;border-color:#8c6f3a;transform:translateY(-2px)scale(1.04);box-shadow:0 4px 12px #a6894e1a}[data-theme=light] .about-term-badge.highlight:hover{background:linear-gradient(135deg,#a6894e2e 0%,#a6894e0f 100%);box-shadow:0 4px 12px #a6894e26;border-color:#a6894e!important}.about-tech-badges{z-index:1;flex-wrap:wrap;justify-content:flex-start;gap:8px 12px;margin:12px 0 20px;display:flex;position:relative}.about-divider{background:linear-gradient(90deg, transparent, var(--primary), transparent);z-index:1;width:80px;height:1px;margin:36px auto 0;position:relative}.about-divider:after{content:"";background:var(--primary);border-radius:50%;width:7px;height:7px;position:absolute;top:-3px;left:50%;transform:translate(-50%);box-shadow:0 0 12px #c8a97e80}.about-stats{grid-template-columns:repeat(3,1fr);gap:20px;margin:36px 0 24px;display:grid}.stat-card{text-align:center;background:var(--card-bg);-webkit-backdrop-filter:blur(20px);border:1px solid #c8a97e14;border-top-color:#c8a97e2e;border-radius:20px;flex-direction:column;align-items:center;gap:12px;padding:28px 20px;transition:background .5s cubic-bezier(.16,1,.3,1),border-color .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px 15px #c8a97e03,0 10px 30px #0000004d}.stat-card:before{content:"";opacity:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 50% 0,#c8a97e2e 0%,#0000 65%);transition:opacity .5s cubic-bezier(.16,1,.3,1);position:absolute;inset:0}.stat-card:hover{background:var(--card-bg-hover);border-color:#c8a97e8c #c8a97e4d #c8a97e4d;transform:translateY(-8px);box-shadow:0 16px 45px #c8a97e2e,inset 0 1px 15px #c8a97e0a}.stat-card:hover:before{opacity:1}.stat-icon{background:var(--icon-bg);width:60px;height:60px;transition:var(--transition);z-index:1;border:1px solid #c8a97e26;border-radius:16px;justify-content:center;align-items:center;margin-bottom:4px;font-size:1.6rem;display:flex;position:relative;box-shadow:inset 0 0 15px #c8a97e0d,0 6px 20px #0009}.stat-card:hover .stat-icon{background:var(--icon-bg-hover);border-color:#c8a97e66;transform:scale(1.1)translateY(-4px);box-shadow:inset 0 0 20px #c8a97e26,0 10px 25px #c8a97e33}.stat-card strong{color:#0000;background:var(--heading-gradient);letter-spacing:2px;text-transform:uppercase;-webkit-background-clip:text;background-clip:text;font-size:.9rem;font-weight:800}.stat-card span:last-child{color:var(--text-light);font-size:.85rem;line-height:1.6}.about-highlights{flex-wrap:wrap;justify-content:center;gap:14px;margin:0 0 36px;display:flex}.about-chip{color:var(--text-light);letter-spacing:.5px;transition:var(--transition);box-shadow:var(--shadow-sm);background:#c8a97e08;border:1px solid #c8a97e14;border-radius:50px;padding:6px 16px;font-size:.8rem;font-weight:500}.about-chip:hover{border-color:var(--primary);color:var(--primary);background:#c8a97e14;transform:translateY(-2px);box-shadow:0 4px 12px #c8a97e1a}.about-info-grid{grid-template-columns:1.25fr .75fr 1fr;gap:24px;margin:0 0 12px;display:grid}.info-card{background:var(--card-bg);-webkit-backdrop-filter:blur(20px);border:1px solid #c8a97e14;border-top-color:#c8a97e2e;border-radius:20px;align-items:flex-start;gap:14px;padding:20px 24px;transition:background .5s cubic-bezier(.16,1,.3,1),border-color .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px 15px #c8a97e03,0 10px 30px #0000004d}.info-card:before{content:"";opacity:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 50% 0,#c8a97e2e 0%,#0000 65%);transition:opacity .5s cubic-bezier(.16,1,.3,1);position:absolute;inset:0}.info-card:hover{background:var(--card-bg-hover);border-color:#c8a97e8c #c8a97e4d #c8a97e4d;transform:translateY(-8px);box-shadow:0 16px 45px #c8a97e2e,inset 0 1px 15px #c8a97e0a}.info-card:hover:before{opacity:1}.info-icon{background:var(--icon-bg);width:42px;min-width:42px;height:42px;transition:var(--transition);z-index:1;border:1px solid #c8a97e1f;border-radius:10px;justify-content:center;align-items:center;font-size:1.25rem;display:flex;position:relative;box-shadow:inset 0 0 12px #c8a97e0d,0 4px 15px #00000080}.info-card:hover .info-icon{background:var(--icon-bg-hover);border-color:#c8a97e4d;transform:scale(1.1)rotate(-5deg);box-shadow:inset 0 0 15px #c8a97e1a,0 8px 20px #c8a97e33}.info-detail{flex-direction:column;gap:4px;width:100%;min-width:0;display:flex;overflow:hidden}.info-detail strong{color:#0000;background:var(--heading-gradient);letter-spacing:1.5px;text-transform:uppercase;-webkit-background-clip:text;background-clip:text;font-size:.85rem;font-weight:800}.info-detail span{color:var(--text-light);word-break:normal;overflow-wrap:break-word;font-size:.8rem;line-height:1.6}.skills-marquee{width:100%;padding:10px 0 20px;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)}.skills-track{will-change:transform;backface-visibility:hidden;gap:20px;width:max-content;animation:30s linear infinite marquee;display:flex;transform:translate(0,0)}.skills-marquee:hover .skills-track{animation-play-state:paused}@keyframes marquee{0%{transform:translate(0,0)}to{transform:translate(-50%)}}.skill-card{min-width:120px;transition:var(--transition);background:#c8a97e08;border:1px solid #c8a97e0f;border-radius:14px;flex-direction:column;flex-shrink:0;align-items:center;gap:10px;padding:22px 30px;display:flex}.skill-card:hover{background:#c8a97e0f;border-color:#c8a97e40;transform:translateY(-6px);box-shadow:0 8px 30px #c8a97e1a}.skill-card:hover[data-tech=html]{border-color:#e34f264d;box-shadow:0 8px 30px #e34f2626}.skill-card:hover[data-tech=css]{border-color:#264de44d;box-shadow:0 8px 30px #264de426}.skill-card:hover[data-tech=js]{border-color:#f7df1e33;box-shadow:0 8px 30px #f7df1e1a}.skill-card:hover[data-tech=ts]{border-color:#3178c64d;box-shadow:0 8px 30px #3178c626}.skill-card:hover[data-tech=python]{border-color:#3773a54d;box-shadow:0 8px 30px #3773a526}.skill-card:hover[data-tech=mysql]{border-color:#00758f4d;box-shadow:0 8px 30px #00758f26}.skill-card:hover[data-tech=php]{border-color:#777bb34d;box-shadow:0 8px 30px #777bb326}.skill-card:hover[data-tech=nodejs]{border-color:#83cd294d;box-shadow:0 8px 30px #83cd2926}.skill-card:hover[data-tech=git]{border-color:#f050324d;box-shadow:0 8px 30px #f0503226}.skill-logo{object-fit:contain;width:40px;height:40px;transition:var(--transition)}.skill-card:hover .skill-logo{transform:scale(1.12)}.skill-card span{color:var(--text-light);white-space:nowrap;letter-spacing:.5px;font-size:.82rem;font-weight:600}.projects-grid{perspective:1200px;grid-template-columns:repeat(3,1fr);gap:28px;display:grid}.project-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);transform-style:preserve-3d;flex-direction:column;transition:transform .4s cubic-bezier(.25,1,.5,1),box-shadow .4s,border-color .4s;display:flex;position:relative;overflow:hidden;box-shadow:0 12px 32px #00000059}.project-card:after{content:"";z-index:3;pointer-events:none;background:linear-gradient(90deg,#0000,#c8a97e0f,#e8d5b51a,#c8a97e0f,#0000);width:60%;height:100%;transition:left .7s;position:absolute;top:0;left:-100%}.project-card:hover:after{left:120%}.project-card.featured-project{grid-column:1/-1;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:stretch;display:grid}.project-card.featured-project .project-thumbnail{height:100%;min-height:320px}.project-card.featured-project .project-info{padding:32px}.project-meta{flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px;display:flex}.project-role,.project-status{letter-spacing:1.2px;text-transform:uppercase;color:var(--primary);white-space:nowrap;background:0 0;border:none;border-radius:0;padding:0;font-size:.72rem;font-weight:600;transition:color .3s}:root[data-theme=light] .project-role{color:#856837}.project-status{color:#7ee0a8}:root[data-theme=light] .project-status{color:#167a48}.project-meta .project-role+.project-status:before,.project-meta .project-status+.project-role:before{content:"•";color:var(--text-muted);margin-right:6px;font-weight:400}.project-card:hover .project-role{color:#e8d5b5}.project-card:hover .project-status{color:#a0f0c4}.project-card:hover{border-color:#c8a97e59;box-shadow:0 25px 50px #0000008c,0 0 30px #c8a97e2e}.project-image{transform-style:preserve-3d;background:0 0;border-bottom:none;padding:0;display:block;position:relative;overflow:hidden}:root[data-theme=light] .project-image{background:0 0}.project-image:before{display:none}.project-thumbnail{aspect-ratio:16/10;object-fit:cover;object-position:center center;border-radius:0;width:100%;height:auto;transition:transform .5s cubic-bezier(.25,1,.5,1);display:block}.project-card:hover .project-thumbnail{transform:scale(1.04)}.project-play-btn{color:#0a0a0a;opacity:0;z-index:2;background:#c8a97ef2;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;font-size:1.2rem;transition:all .4s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.8);box-shadow:0 8px 24px #c8a97e66}.project-card:hover .project-play-btn{opacity:1;transform:translate(-50%,-50%)scale(1)}.project-info{flex-direction:column;flex-grow:1;padding:22px 24px;display:flex}.project-info h3{color:var(--text-bright);letter-spacing:.2px;margin-bottom:8px;font-size:1.05rem;font-weight:700;line-height:1.4;transition:all .3s}.project-card:hover .project-info h3{color:var(--primary);text-shadow:0 0 20px #c8a97e33}.project-info p{color:var(--text-muted);margin-bottom:16px;font-size:.8rem;line-height:1.65}.project-tags{flex-wrap:wrap;gap:12px;margin-top:auto;margin-bottom:16px;display:flex}.tag{color:var(--text-light);letter-spacing:.3px;text-transform:none;white-space:nowrap;background:0 0;border:none;border-radius:0;padding:0;font-size:.75rem;font-weight:500;transition:color .3s}:root[data-theme=light] .tag{color:var(--text)}.tag:hover{color:var(--primary);background:0 0;border-color:#0000}.project-links{flex-wrap:wrap;gap:10px;margin-top:auto;display:flex}.project-link{color:var(--text-light);text-transform:uppercase;letter-spacing:.6px;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #c8a97e40;border-radius:999px;align-items:center;gap:7px;padding:8px 18px;font-size:.72rem;font-weight:600;text-decoration:none;transition:all .3s cubic-bezier(.25,.46,.45,.94);display:inline-flex}:root[data-theme=light] .project-link{color:var(--text);border-color:#85683740}.project-link svg{transition:transform .25s}.project-link:hover{border-color:var(--primary);color:var(--primary);background:#c8a97e1a;transform:translateY(-2px);box-shadow:0 4px 18px #c8a97e26}.project-link:hover svg{color:var(--primary);transform:scale(1.1)}.certificates-grid{grid-template-columns:repeat(4,1fr);gap:24px;display:grid}.certificate-card{background:var(--card-bg);border-radius:var(--radius);transition:var(--transition);border:1px solid #c8a97e14;flex-direction:column;display:flex;position:relative;overflow:hidden}.certificate-card:before{content:"";background:linear-gradient(90deg, var(--primary), var(--accent));transform-origin:0;height:3px;transition:var(--transition);z-index:2;position:absolute;top:0;left:0;right:0;transform:scaleX(0)}.certificate-card:hover{box-shadow:0 24px 48px #0009, var(--glow-stellar);border-color:#c8a97e66;transform:translateY(-10px)scale(1.015)}.certificate-card:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0000,#c8a97e14,#0000);width:50%;height:100%;transition:all .8s;position:absolute;top:0;left:-100%;transform:skew(-25deg)}.certificate-card:hover:after{left:125%}.certificate-card:hover:before{transform:scaleX(1)}.certificate-image{cursor:pointer;background:var(--cert-bg);padding:12px;display:block;position:relative;overflow:hidden}.certificate-thumbnail{aspect-ratio:4/3;object-fit:contain;cursor:pointer;filter:brightness(.95);border-radius:8px;width:100%;height:190px;transition:all .6s cubic-bezier(.16,1,.3,1);box-shadow:0 4px 15px #0000004d}.certificate-card:hover .certificate-thumbnail{filter:brightness(1.02);transform:scale(1.03);box-shadow:0 8px 24px #0006}.certificate-info{flex-direction:column;flex-grow:1;padding:20px 24px;display:flex}.certificate-info h3{color:var(--text-bright);letter-spacing:.3px;margin-bottom:8px;font-size:.95rem;font-weight:700;transition:color .3s}.certificate-card:hover .certificate-info h3{color:var(--primary)}.certificate-info p{color:var(--text-light);margin-top:auto;font-size:.82rem;line-height:1.6}.lightbox-overlay{z-index:1000;opacity:0;visibility:hidden;background:#000000f2;justify-content:center;align-items:center;padding:40px;transition:opacity .4s,visibility .4s;display:flex;position:fixed;inset:0}.lightbox-overlay.active{opacity:1;visibility:visible}.lightbox-img{object-fit:contain;border-radius:12px;max-width:90vw;max-height:90vh;transition:transform .4s;transform:scale(.92);box-shadow:0 8px 60px #000c}.lightbox-overlay.active .lightbox-img{transform:scale(1)}.lightbox-close{color:var(--text-light);cursor:pointer;width:50px;height:50px;transition:var(--transition);z-index:1001;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:2.2rem;display:flex;position:absolute;top:24px;right:32px}.lightbox-close:hover{color:var(--primary);background:#c8a97e14;transform:rotate(90deg)}.contact-header{text-align:center;margin-bottom:50px}.contact-header h3{color:var(--text-bright);letter-spacing:3px;text-transform:uppercase;background:var(--heading-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:14px;font-size:1.4rem;font-weight:300}.contact-header p{color:var(--text-light);max-width:500px;margin:0 auto;font-size:.92rem;line-height:1.8}.contact-cards{grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:44px;display:grid}.contact-card{text-align:center;background:var(--card-bg);border:1px solid var(--border);-webkit-backdrop-filter:blur(12px);border-radius:var(--radius);transition:var(--transition);color:inherit;border-top:1px solid #c8a97e33;flex-direction:column;align-items:center;gap:16px;padding:32px 24px;text-decoration:none;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px 15px #c8a97e05,0 8px 30px #0006}.contact-card:before{content:"";opacity:0;transition:var(--transition);pointer-events:none;background:radial-gradient(circle at 50% 0,#c8a97e26 0%,#0000 60%);position:absolute;inset:0}.contact-card:hover{background:var(--card-bg-hover);box-shadow:0 24px 48px #000000a6, var(--glow-stellar);border-color:#e8d5b599 #c8a97e59 #c8a97e59;transform:translateY(-10px)scale(1.02)}.contact-card:hover:before{opacity:1}.contact-icon{background:var(--icon-bg);width:64px;height:64px;transition:var(--transition);z-index:1;border:1px solid #c8a97e26;border-radius:18px;flex-shrink:0;justify-content:center;align-items:center;font-size:1.6rem;display:flex;position:relative;box-shadow:inset 0 0 15px #c8a97e0d,0 6px 20px #0009}.contact-card:hover .contact-icon{background:var(--icon-bg-hover);border-color:#c8a97e66;transform:scale(1.1)translateY(-4px);box-shadow:inset 0 0 20px #c8a97e26,0 10px 25px #c8a97e40}.contact-card strong{color:#0000;background:var(--heading-gradient);z-index:1;letter-spacing:1px;text-transform:uppercase;-webkit-background-clip:text;background-clip:text;font-size:.95rem;font-weight:800;display:block;position:relative}.contact-card .contact-text{color:var(--text-light);z-index:1;word-break:break-all;font-size:.85rem;display:block;position:relative}.social-links{justify-content:center;gap:14px;display:flex}.social-link{width:48px;height:48px;color:var(--text-light);transition:var(--transition);background:#c8a97e0a;border:1px solid #c8a97e0f;border-radius:12px;justify-content:center;align-items:center;display:flex}.social-link:hover{color:#0a0a0a;background:linear-gradient(135deg,#c8a97e,#a6894e);border-color:#0000;transform:translateY(-4px);box-shadow:0 6px 24px #c8a97e40}.footer{text-align:center;background:#040404;border-top:1px solid #c8a97e0f;padding:30px 0}.footer p{color:#a69d93;letter-spacing:1px;font-size:.82rem}.back-to-top{background:var(--glass);border:1px solid var(--border);width:48px;height:48px;color:var(--primary);cursor:pointer;box-shadow:var(--shadow);z-index:99;opacity:0;visibility:hidden;transition:var(--transition);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:50%;justify-content:center;align-items:center;font-size:1.1rem;font-weight:700;display:flex;position:fixed;bottom:30px;right:30px;transform:translateY(20px)}.back-to-top.active{opacity:1;visibility:visible;transform:translateY(0)}.back-to-top:hover{color:var(--text-bright);border-color:var(--primary);box-shadow:0 8px 30px #c8a97e40, var(--glow-primary);transform:translateY(-5px)}.back-to-top .progress-ring{pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-90deg)}.back-to-top .progress-ring__circle{transform-origin:50%;stroke-linecap:round;stroke-dasharray:125.66 125.66;stroke-dashoffset:125.66px;transition:stroke-dashoffset .1s}.back-to-top .arrow{transition:transform .3s}.back-to-top:hover .arrow{transform:translateY(-2px)}.reveal{opacity:0;transition:opacity .8s cubic-bezier(.25,.46,.45,.94),transform .8s cubic-bezier(.25,.46,.45,.94);transform:translateY(40px)}.reveal.revealed{opacity:1;transform:translateY(0)}::selection{color:#faf7f2;background:#c8a97e33}@media (width<=1024px){.projects-grid,.certificates-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.hero:before{opacity:.34;background:linear-gradient(115deg,#0000 0 28%,#c8a97e12 28.4%,#0000 29.2% 68%,#e8d5b50f 68.4%,#0000 69.4%),repeating-linear-gradient(115deg,#c8a97e0e 0 1px,#0000 1px 96px)}.hero:after{opacity:.36;height:38%;inset:12% -36% auto 18%}.shape{filter:blur(60px)!important;animation:none!important}.shape-1,.shape-2,.shape-3{animation:none!important}.navbar,.nav-links,.about-content,.info-card,.stat-card,.contact-card,.contact-form-container,.toast,.dragon-speech-bubble{-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important}.nav-links{transition:transform .4s cubic-bezier(.16,1,.3,1);will-change:transform;backface-visibility:hidden;background:#080809fa;border-left:1px solid #c8a97e1f;flex-direction:column;gap:6px;width:min(320px,85vw);height:100vh;padding:100px 28px 40px;-webkit-transition:-webkit-transform .4s cubic-bezier(.16,1,.3,1);position:fixed;top:0;right:0;overflow-y:auto;transform:translate(100%);box-shadow:-10px 0 40px #0009}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.nav-links{-webkit-backdrop-filter:blur(16px)saturate(1.4);backdrop-filter:blur(16px)saturate(1.4);background:#080809d6}}[data-theme=light] .nav-links{background:#fdfbf7fc;border-left-color:#a6894e26;box-shadow:-10px 0 40px #a6894e14}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){[data-theme=light] .nav-links{background:#fdfbf7db}}.nav-links:before{content:"";pointer-events:none;z-index:-1;background:radial-gradient(circle,#c8a97e0f 0%,#0000 70%);border-radius:50%;width:300px;height:300px;animation:12s ease-in-out infinite alternate pulseMobileGlow;position:absolute;top:25%;left:50%;transform:translate(-50%,-50%)}[data-theme=light] .nav-links:before{background:radial-gradient(circle,#a6894e0d 0%,#0000 70%)}@keyframes pulseMobileGlow{0%{opacity:.7;transform:translate(-50%,-50%)scale(1)}50%{opacity:1;transform:translate(-50%,-46%)scale(1.1)}to{opacity:.6;transform:translate(-50%,-54%)scale(.95)}}.nav-links:after{content:"PRATCHAYAWUT T. | PORTFOLIO";color:var(--primary);opacity:.55;letter-spacing:2.5px;text-align:center;pointer-events:none;border-top:1px solid #c8a97e14;margin-top:auto;padding-top:32px;font-size:.75rem;font-weight:700;display:block}[data-theme=light] .nav-links:after{color:#8c6f3a;opacity:.65;border-top-color:#a6894e1a}.nav-links.active{transform:translate(0,0)}.nav-links li{opacity:0;will-change:transform, opacity;width:100%;transition:opacity .2s,transform .2s;transform:translate(12px)}.nav-links.active li{opacity:1;transition:opacity .45s cubic-bezier(.25,.46,.45,.94),transform .45s cubic-bezier(.25,.46,.45,.94);transform:translate(0,0)}.nav-links.active li:first-child{transition-delay:80ms}.nav-links.active li:nth-child(2){transition-delay:.13s}.nav-links.active li:nth-child(3){transition-delay:.18s}.nav-links.active li:nth-child(4){transition-delay:.23s}.nav-links.active li:nth-child(5){transition-delay:.28s}.nav-links.active li:nth-child(6){transition-delay:.33s}.nav-links.active li:nth-child(7){transition-delay:.38s}.nav-link{letter-spacing:1.5px;width:100%;color:var(--text);transition:var(--transition);-webkit-tap-highlight-color:transparent;background:0 0;border:1px solid #0000;border-radius:14px;align-items:center;margin:4px 0;padding:12px 20px;font-size:.9rem;font-weight:600;display:flex}.nav-link:hover{color:var(--primary);background:#c8a97e14;border-color:#c8a97e26;transform:translate(6px)}[data-theme=light] .nav-link:hover{background:#a6894e14;border-color:#a6894e26}.nav-link.active{font-weight:700;transform:translate(6px);box-shadow:0 4px 15px #0000002e,inset 0 1px #ffffff0d;color:var(--text-bright)!important;background:linear-gradient(135deg,#c8a97e29,#c8a97e0a)!important;border:1px solid #c8a97e47!important}[data-theme=light] .nav-link.active{box-shadow:0 4px 15px #a6894e0d;color:var(--text-bright)!important;background:linear-gradient(135deg,#a6894e29,#a6894e0a)!important;border-color:#a6894e47!important}.nav-link.active:before{display:none!important}@keyframes activePulse{0%{opacity:.65;transform:scale(.85)}to{opacity:1;transform:scale(1.25)}}.nav-actions{gap:16px}.theme-toggle,.lang-toggle,.nav-toggle{-webkit-backdrop-filter:blur(8px);height:48px;transition:var(--transition);background:#c8a97e0a;border:1px solid #c8a97e1f;justify-content:center;align-items:center;display:flex;box-shadow:0 4px 12px #00000040}.theme-toggle,.nav-toggle{border-radius:50%;width:48px}.lang-toggle{border-radius:20px;padding:0 12px}[data-theme=light] .theme-toggle,[data-theme=light] .lang-toggle,[data-theme=light] .nav-toggle{background:#a6894e0a;border-color:#a6894e1f;box-shadow:0 4px 12px #a6894e0a}.theme-toggle:hover,.lang-toggle:hover,.nav-toggle:hover{border-color:var(--primary);background:#c8a97e1f;box-shadow:0 0 15px #c8a97e33}[data-theme=light] .theme-toggle:hover,[data-theme=light] .lang-toggle:hover,[data-theme=light] .nav-toggle:hover{border-color:var(--primary);background:#a6894e1f;box-shadow:0 0 15px #a6894e26}.nav-toggle{flex-direction:column;gap:5px;display:flex}.nav-toggle.active{border-color:var(--primary);background:#c8a97e26;box-shadow:0 0 15px #c8a97e40}.nav-toggle span{background:var(--text-bright);width:18px;height:2px;transition:var(--transition)}.hero{padding:96px 0 72px}.hero-layout{text-align:center;grid-template-columns:1fr;gap:28px}.hero-layout:before,.hero-layout:after{display:none}.hero-content{text-align:center;order:1;max-width:100%;animation:none}.hero-title{letter-spacing:1.5px;font-size:1rem}.hero-description{margin-left:auto;margin-right:auto}.hero-description:before{left:50%;transform:translate(-50%)}.hero-badges,.hero-buttons{justify-content:center}.hero-portrait-panel{order:-1;align-items:center;width:100%;margin-bottom:32px;animation:none}.portrait-floating-card{justify-content:center}.portrait-frame,.portrait-caption{width:min(100%,360px);margin-left:auto;margin-right:auto}.portrait-caption{text-align:center;padding-right:0}.projects-grid,.project-card.featured-project{grid-template-columns:1fr}.project-card.featured-project .project-thumbnail{min-height:260px}.about-content{border-radius:24px;padding:32px 24px}.about-stats{grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0 20px}.about-highlights{justify-content:center;gap:10px}.about-info-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}.certificates-grid{grid-template-columns:repeat(2,1fr)}.contact-cards{grid-template-columns:1fr;max-width:400px;margin:0 auto 40px}.contact-header h3{font-size:1.2rem}.section{padding:72px 0}.project-card:hover,.certificate-card:hover,.info-card:hover,.stat-card:hover,.skill-card:hover{transform:none!important;box-shadow:0 4px 20px #0006!important}.portrait-frame{transform:none!important}@media (hover:none){.cursor-glow{display:none!important}}}@media (width<=500px){.certificates-grid{grid-template-columns:1fr}.hero{min-height:auto;padding:88px 0 64px}.hero-badges{justify-content:center;gap:8px}.hero-buttons{flex-direction:column}.hero-buttons .btn{text-align:center;justify-content:center;width:100%}.portrait-frame,.portrait-caption{width:100%}.portrait-frame{transform:none}.hero-portrait{aspect-ratio:4/5}.hero-portrait-panel:after{inset:auto 10% 0}.about-stats{grid-template-columns:1fr;max-width:340px;margin:24px auto 16px}.about-info-grid,.about-highlights,.projects-grid,.certificates-grid,.contact-cards{gap:14px}.portrait-caption{padding:14px 16px}.lightbox-overlay{padding:16px}.lightbox-close{color:#fff;background:#0009;border:1px solid #ffffff26;border-radius:50%;width:48px;height:48px;font-size:1.8rem;top:16px;right:16px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.skills-track{animation:none!important}.hero-particles{display:none}.shape{animation:none!important}.cursor-glow{display:none}.reveal{opacity:1;transform:none}}.scroll-progress-container{z-index:9999;pointer-events:none;background:0 0;width:100%;height:3px;position:fixed;top:0;left:0}.scroll-progress-bar{background:linear-gradient(90deg,#e8d5b5,#c8a97e,#a6894e);width:0%;height:100%;transition:width .1s ease-out;box-shadow:0 0 8px #c8a97e99}.contact-form-container{background:var(--contact-bg);-webkit-backdrop-filter:blur(16px);border:1px solid #c8a97e14;border-top-color:#c8a97e29;border-radius:24px;width:100%;max-width:650px;margin:48px auto 36px;padding:40px;position:relative;overflow:hidden;box-shadow:inset 0 1px 15px #c8a97e03,0 16px 48px #0006}.contact-form-container:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle at 50% 30%,#c8a97e05 0%,#0000 60%);width:200%;height:200%;position:absolute;top:-50%;left:-50%}.contact-form{z-index:1;flex-direction:column;gap:20px;display:flex;position:relative}.form-grid{grid-template-columns:repeat(2,1fr);gap:20px;display:grid}@media (width<=500px){.form-grid{grid-template-columns:1fr}}.form-group{text-align:left;flex-direction:column;gap:8px;display:flex}.form-group label{color:var(--text-light);letter-spacing:1px;text-transform:uppercase;font-size:.78rem;font-weight:700}.input-wrapper{width:100%}.input-wrapper input,.input-wrapper textarea{background:var(--input-bg);border:1px solid var(--border);width:100%;color:var(--text-bright);font-family:var(--font);transition:var(--transition);border-radius:12px;padding:14px 18px;font-size:.9rem;line-height:1.6;box-shadow:inset 0 2px 6px #00000080}.input-wrapper input::placeholder,.input-wrapper textarea::placeholder{color:var(--text-muted);opacity:.6}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:var(--primary);background:var(--input-bg-focus);outline:none;transform:translateY(-3px);box-shadow:0 0 24px #c8a97e40,inset 0 2px 6px #0009}.input-wrapper input:valid:not(:placeholder-shown),.input-wrapper textarea:valid:not(:placeholder-shown){border-color:#7ee0a859;box-shadow:0 0 16px #7ee0a814}.btn-submit{justify-content:center;align-self:center;min-width:180px;margin-top:10px;padding:15px 44px}.btn-loader{border:2.5px solid #0a0a0a33;border-top-color:#0a0a0a;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toast{z-index:10000;background:var(--toast-bg);-webkit-backdrop-filter:blur(16px);pointer-events:none;border:1px solid #c8a97e26;border-left:4px solid #7ee0a8;border-radius:16px;width:calc(100% - 48px);max-width:380px;padding:20px 24px;transition:right .5s cubic-bezier(.16,1,.3,1);position:fixed;bottom:30px;right:-420px;box-shadow:0 20px 50px #0009}.toast.show{pointer-events:auto;right:24px}.toast-content{align-items:center;gap:16px;display:flex}.toast-icon{color:#7ee0a8;filter:drop-shadow(0 0 6px #7ee0a866);flex-shrink:0}.toast-message{text-align:left;flex-direction:column;gap:4px;display:flex}.toast-message strong{color:var(--text-bright);letter-spacing:.5px;font-size:.9rem;font-weight:800}.toast-message span{color:var(--text-light);font-size:.8rem;line-height:1.5}.certificate-card{will-change:transform;transform-style:preserve-3d}.card-reflection{z-index:10;pointer-events:none;opacity:0;will-change:transform;background:radial-gradient(circle,#ffffff1f 0%,#0000 50%);width:200%;height:200%;transition:opacity .3s;position:absolute;top:-50%;left:-50%;transform:translate(0,0)}.certificate-card:hover .card-reflection{opacity:1}.nav-actions{align-items:center;gap:12px;display:flex}.theme-toggle{cursor:pointer;color:var(--text-light);width:40px;height:40px;transition:var(--transition);background:0 0;border:1px solid #c8a97e1a;border-radius:50%;justify-content:center;align-items:center;display:flex}.theme-toggle:hover{color:var(--primary);box-shadow:var(--shadow-sm);background:#c8a97e14;transform:rotate(30deg)}.theme-icon{transition:transform .5s cubic-bezier(.25,.46,.45,.94)}.lang-toggle{cursor:pointer;color:var(--text-light);height:40px;transition:var(--transition);letter-spacing:.5px;background:0 0;border:1px solid #c8a97e1a;border-radius:20px;justify-content:center;align-items:center;gap:4px;padding:0 12px;font-size:.75rem;font-weight:700;display:flex}.lang-toggle:hover{color:var(--primary);box-shadow:var(--shadow-sm);background:#c8a97e14}.lang-text{opacity:.5;transition:var(--transition)}.lang-text.active{opacity:1;color:var(--primary);text-shadow:var(--glow-primary)}[data-theme=light] .lang-text.active{color:#8c6f3a}.lang-divider{opacity:.3}body{transition:background-color .25s,color .25s}nav,.navbar{transition:background-color .25s,border-color .25s}.ambient-glow{filter:blur(100px);pointer-events:none;z-index:0;mix-blend-mode:screen;will-change:transform;backface-visibility:hidden;background:radial-gradient(circle,#c8a97e0d 0%,#0000 70%);border-radius:50%;width:min(600px,80vw);height:min(600px,80vw);position:absolute;transform:translate(0,0)}[data-theme=light] .ambient-glow{background:radial-gradient(circle,#a6894e0f 0%,#0000 70%)}.ambient-glow-1{animation:12s ease-in-out infinite alternate pulseGlow;top:15%;left:-10%}.ambient-glow-2{animation:15s ease-in-out infinite alternate-reverse pulseGlow;bottom:20%;right:-10%}@keyframes pulseGlow{0%{opacity:.7;transform:scale(1)translate(0,0)}50%{opacity:1;transform:scale(1.18)translate(30px,-40px)}to{opacity:.6;transform:scale(.9)translate(-15px,30px)}}.gold-shimmer-text,.section-title,.about-headline .gold-gradient{animation:6s linear infinite goldShimmer;background:linear-gradient(90deg, var(--primary) 0%, var(--accent) 25%, var(--text-bright) 50%, var(--accent) 75%, var(--primary) 100%)!important;-webkit-text-fill-color:transparent!important;background-size:200%!important;-webkit-background-clip:text!important;background-clip:text!important}[data-theme=light] .gold-shimmer-text,[data-theme=light] .section-title,[data-theme=light] .about-headline .gold-gradient{animation:6s linear infinite goldShimmer;background:linear-gradient(90deg,#a6894e 0%,#c8a97e 25%,#faf7f2 50%,#c8a97e 75%,#a6894e 100%) 0 0/200%!important;-webkit-text-fill-color:transparent!important;-webkit-background-clip:text!important;background-clip:text!important}@keyframes goldShimmer{0%{background-position:-200%}to{background-position:200%}}.dragon-widget{z-index:99;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;flex-direction:column;align-items:flex-start;display:flex;position:fixed;bottom:30px;left:30px}.blog-article-body .dragon-widget{bottom:92px}button.dragon-avatar{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;margin:0;padding:0}.dragon-avatar{background:linear-gradient(145deg, #c8a97e29, #080809eb), var(--glass);width:58px;height:58px;transition:var(--transition);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1.5px solid #c8a97e80;border-radius:50%;justify-content:center;align-items:center;animation:4s ease-in-out infinite bobMascot;display:flex;overflow:visible;box-shadow:0 16px 34px #0000006b,inset 0 0 0 1px #faf7f20a,0 0 28px #c8a97e1f}.dragon-avatar:before,.dragon-avatar:after{content:"";border-radius:inherit;pointer-events:none;position:absolute}.dragon-avatar:before{background:conic-gradient(from 140deg, transparent 0 18%, #e8d5b5db, #c8a97e38, transparent 72% 100%);z-index:-1;opacity:.8;filter:blur(.2px);animation:8s linear infinite mascotRingSpin;inset:-5px}.dragon-avatar:after{z-index:-2;opacity:.46;filter:blur(10px);background:radial-gradient(circle,#c8a97e38,#0000 64%);inset:-16px}.dragon-img{object-fit:cover;pointer-events:none;filter:drop-shadow(0 8px 14px #0000006b)saturate(1.08)contrast(1.04);border-radius:50%;width:82%;height:82%;transition:transform .3s;transform:translateY(-2px)}.dragon-avatar svg.dragon-img{object-fit:none;width:55%;height:55%;color:var(--primary);filter:drop-shadow(0 0 8px #c8a97e73);border-radius:0}.dragon-widget:hover .dragon-avatar{border-color:var(--primary);transform:scale(1.08);box-shadow:0 18px 38px #00000075,inset 0 0 0 1px #e8d5b529,0 0 34px #c8a97e42}.dragon-widget:hover .dragon-img{filter:drop-shadow(0 10px 18px #c8a97e38)saturate(1.18)contrast(1.08);animation:.6s ease-in-out wiggleMascot}.dragon-widget.wiggle-active .dragon-img{animation:.6s ease-in-out wiggleMascot!important}.dragon-speech-bubble{background:linear-gradient(145deg, #121214f0, #040405fa), var(--glass);color:#faf7f2;opacity:0;visibility:hidden;z-index:100;white-space:normal;word-wrap:break-word;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid #c8a97e2e;border-radius:18px 18px 18px 6px;width:min(320px,100vw - 48px);max-width:320px;padding:16px 44px 16px 20px;font-size:.86rem;font-weight:700;line-height:1.65;transition:all .4s cubic-bezier(.16,1,.3,1);position:absolute;bottom:72px;left:0;transform:translateY(10px)scale(.95);box-shadow:0 22px 50px #0000007a,inset 0 0 0 1px #faf7f209,0 0 34px #c8a97e14}[data-theme=light] .dragon-speech-bubble{background:linear-gradient(145deg, #fffdf8f5, #f4eee2fa), var(--glass);color:#1c1811;border-color:#977c5438;box-shadow:0 18px 42px #5c492a2e,inset 0 0 0 1px #ffffffb8,0 0 28px #c8a97e1a}.dragon-bubble-close{z-index:2;color:#faf7f2d1;width:26px;height:26px;font-family:var(--font);cursor:pointer;background:#080809ad;border:1px solid #c8a97e38;border-radius:999px;justify-content:center;align-items:center;font-size:1.05rem;line-height:1;transition:transform .2s,color .2s,border-color .2s,background .2s,box-shadow .2s;display:inline-flex;position:absolute;top:10px;right:10px}[data-theme=light] .dragon-bubble-close{color:#1c1811;background:#fffdf8db;border-color:#977c5447}.dragon-bubble-close:hover,.dragon-bubble-close:focus-visible{color:var(--text-bright);border-color:var(--primary);background:#c8a97e24;outline:none;transform:scale(1.06);box-shadow:0 0 18px #c8a97e29}.dragon-speech-bubble:before{content:"";background:linear-gradient(135deg,#040405fa,#121214f0);border-bottom:1px solid #c8a97e29;border-right:1px solid #c8a97e29;width:16px;height:16px;position:absolute;bottom:-8px;left:22px;transform:rotate(45deg)}[data-theme=light] .dragon-speech-bubble:before{background:linear-gradient(135deg,#f4eee2fa,#fffdf8f5);border-bottom-color:#977c542e;border-right-color:#977c542e}.dragon-speech-bubble:after{content:"";border-radius:inherit;opacity:0;pointer-events:none;background:linear-gradient(110deg,#0000 0%,#e8d5b514 42%,#0000 68%);transition:opacity .35s;position:absolute;inset:0}.dragon-speech-bubble.active{opacity:1;visibility:visible;transform:translateY(0)scale(1)}.dragon-speech-bubble.active:after{opacity:1}@keyframes bobMascot{0%,to{transform:translate(0,0)}50%{transform:translateY(-6px)}}@keyframes mascotRingSpin{to{transform:rotate(360deg)}}@keyframes wiggleMascot{0%,to{transform:translateY(-2px)rotate(0)}25%{transform:translateY(-2px)rotate(-10deg)scale(1.05)}75%{transform:translateY(-2px)rotate(10deg)scale(1.05)}}@media (width<=768px){.footer{padding-bottom:118px}.dragon-widget{bottom:calc(82px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 32px);left:16px}.blog-article-body .dragon-widget{bottom:calc(108px + env(safe-area-inset-bottom,0px))}.dragon-speech-bubble{border-radius:16px 16px 16px 6px;width:min(300px,100vw - 32px);max-width:min(300px,100vw - 32px);padding:14px 42px 14px 16px;font-size:.82rem;line-height:1.55;bottom:68px}}@media (width<=500px){.dragon-widget{bottom:calc(90px + env(safe-area-inset-bottom,0px));left:14px}.blog-article-body .dragon-widget{bottom:calc(114px + env(safe-area-inset-bottom,0px))}.dragon-avatar{width:52px;height:52px}.dragon-speech-bubble{width:min(280px,100vw - 28px);max-width:min(280px,100vw - 28px);padding:13px 40px 13px 14px;font-size:.8rem;bottom:66px}.dragon-speech-bubble:before{left:20px}}.nav-link:focus-visible,.btn:focus-visible,.project-link:focus-visible,.social-link:focus-visible,.contact-card:focus-visible,.back-to-top:focus-visible,.theme-toggle:focus-visible,.lang-toggle:focus-visible,.lightbox-close:focus-visible,.dragon-avatar:focus-visible,.certificate-image:focus-visible,.nav-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}.blog-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;margin-top:40px;display:grid}.blog-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;height:100%;transition:all .5s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;overflow:hidden}.blog-card:after{content:"";z-index:3;pointer-events:none;background:linear-gradient(90deg,#0000,#c8a97e0f,#e8d5b51a,#c8a97e0f,#0000);width:60%;height:100%;transition:left .7s;position:absolute;top:0;left:-100%}.blog-card:hover:after{left:120%}.blog-card:hover{border-color:var(--primary);box-shadow:var(--shadow-lg), var(--glow-primary);transform:translateY(-8px)}.blog-card-image{aspect-ratio:16/9;width:100%;display:block;position:relative;overflow:hidden}.blog-card-image img{object-fit:cover;width:100%;height:100%;transition:transform .6s cubic-bezier(.25,.46,.45,.94)}.blog-card:hover .blog-card-image img{transform:scale(1.05)}.blog-card-content{flex-direction:column;flex-grow:1;padding:20px;display:flex}.blog-card-click-read{color:var(--text-muted);letter-spacing:1.5px;text-transform:uppercase;font-size:.68rem;font-weight:700;font-family:var(--font);justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.blog-card-click-read .arrow-icon{color:var(--text-muted);font-size:.95rem;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}.blog-card:hover .blog-card-click-read .arrow-icon{color:var(--primary);transform:translate(3px,-3px)}.blog-card-en-title{color:var(--text-bright);letter-spacing:.5px;font-size:.98rem;font-weight:800;line-height:1.3;font-family:var(--font);text-transform:uppercase;margin-bottom:4px}.blog-card-category{color:#e0a96d;letter-spacing:1px;text-transform:uppercase;font-size:.68rem;font-weight:700;font-family:var(--font);margin-bottom:8px}.blog-card-title{font-size:1.08rem;font-weight:700;line-height:1.4;font-family:var(--font);margin-bottom:6px}.blog-card-title a{color:var(--text-bright);transition:color .3s}.blog-card-title a:hover{color:var(--primary)}.blog-card-tags{color:var(--text-muted);letter-spacing:.5px;font-size:.65rem;font-weight:600;font-family:var(--font);text-transform:uppercase;margin-bottom:8px}.blog-card-excerpt{color:var(--text-muted);flex-grow:1;margin-bottom:14px;font-size:.8rem;line-height:1.45}.blog-card-footer{justify-content:center;margin-top:auto;padding-top:4px;display:flex}.blog-card-btn{border:1.5px solid var(--border);color:var(--text-muted);text-align:center;letter-spacing:1px;font-size:.7rem;font-weight:700;font-family:var(--font);background:0 0;border-radius:30px;padding:6px 18px;text-decoration:none;transition:all .3s;display:inline-block}.blog-card:hover .blog-card-btn{border-color:var(--primary);color:var(--text-bright)}.blog-card-btn:hover{box-shadow:var(--glow-primary);background:var(--primary)!important;color:#0a0a0a!important}.blog-article-body{background:var(--bg-warm);color:var(--text);font-family:var(--font);padding-top:100px}.blog-article-body .lora-font{font-family:Georgia, "Times New Roman", var(--font)}.nav-back-home{min-height:44px;color:var(--text-bright);letter-spacing:.1px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:linear-gradient(145deg,#c8a97e1a,#08080994),#0808099e;border:1px solid #c8a97e75;border-radius:999px;justify-content:center;align-items:center;padding:0 20px;font-size:.9rem;font-weight:800;transition:transform .25s,border-color .25s,box-shadow .25s,color .25s;display:inline-flex;position:relative;overflow:hidden;box-shadow:0 12px 28px #00000052,inset 0 0 0 1px #faf7f20a}.nav-back-home:before{content:"";border-radius:inherit;opacity:0;pointer-events:none;background:linear-gradient(110deg,#0000 0%,#e8d5b529 44%,#0000 72%);transition:opacity .25s,transform .45s;position:absolute;inset:1px;transform:translate(-38%)}.nav-back-home span{z-index:1;position:relative}.nav-back-home:hover{color:var(--text-bright);border-color:var(--primary);background:linear-gradient(145deg,#c8a97e2e,#080809b8),#080809b8;transform:translateY(-2px);box-shadow:0 16px 34px #00000061,0 0 24px #c8a97e29,inset 0 0 0 1px #faf7f212}.nav-back-home:hover:before{opacity:1;transform:translate(36%)}.nav-back-home:active{transform:translateY(0)}.article-layout{max-width:800px;margin:40px auto 100px;padding:0 24px}.article-header{text-align:center;flex-direction:column;align-items:center;margin-bottom:40px;display:flex}.article-title{font-family:var(--font);color:var(--text-bright);letter-spacing:-.02em;text-wrap:balance;word-break:normal;overflow-wrap:break-word;max-width:760px;margin-bottom:20px;font-size:clamp(1.7rem,5vw,3.2rem);font-weight:800;line-height:1.35}.article-title .lang-th{letter-spacing:normal;word-spacing:.02em}.title-chunk{white-space:nowrap;display:inline-block}.article-subtitle{font-family:var(--font);color:var(--text-light);letter-spacing:.1px;opacity:.85;max-width:680px;margin-bottom:32px;font-size:clamp(1.05rem,2vw,1.25rem);font-weight:400;line-height:1.55}.author-meta-row{background:var(--card-bg);border:1px solid var(--border);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(8px);transition:var(--transition);border-radius:50px;align-items:center;gap:14px;margin-top:12px;margin-bottom:28px;padding:10px 22px;display:inline-flex}.author-meta-row:hover{border-color:var(--primary);box-shadow:var(--shadow);transform:translateY(-2px)}.author-avatar{object-fit:cover;border:2px solid var(--primary);border-radius:50%;width:40px;height:40px;box-shadow:0 0 12px #c8a97e40}.author-info{flex-direction:column;align-items:flex-start;gap:2px;display:flex}.author-name-follow{align-items:center;gap:8px;display:flex}.author-name{color:var(--text-bright);font-size:.92rem;font-weight:600}.follow-btn{color:var(--primary);font-size:.78rem;font-weight:600;text-decoration:none;transition:opacity .2s}.follow-btn:hover{opacity:.8}.article-duration-date{color:var(--text-light);align-items:center;gap:6px;font-size:.8rem;display:flex}.dot-divider{font-weight:700}.article-cover-figure{width:100%;margin-top:0;margin-bottom:48px}.article-cover-img{object-fit:cover;width:100%;height:auto;max-height:480px;box-shadow:var(--shadow);border:1px solid var(--border);border-radius:16px;display:block;overflow:hidden}.article-cover-caption{text-align:center;max-width:680px;color:var(--text-light);margin:12px auto 0;padding:0 24px;font-size:.8rem}.article-content{max-width:680px;color:var(--text);margin:0 auto;font-size:1.15rem;line-height:1.9}.article-content p{margin-bottom:28px}.article-content .article-lead{color:var(--text-bright);font-size:1.25rem;line-height:1.8}.article-content h2{color:var(--text-bright);letter-spacing:-.3px;margin:48px 0 20px;font-size:1.8rem;font-weight:700;line-height:1.3}.article-content h3{color:var(--text-bright);margin:36px 0 16px;font-size:1.4rem;font-weight:700;line-height:1.3}.article-content ul,.article-content ol{margin-bottom:28px;padding-left:24px}.article-content li{margin-bottom:12px}.article-content blockquote{border-left:3px solid var(--primary);color:var(--text-bright);margin:36px 0;padding-left:20px;font-size:1.15rem;font-style:italic}.article-content hr.content-divider{border:none;border-bottom:1px solid var(--border);margin:48px 0}.code-block-container{border:1px solid var(--border);border-radius:12px;margin:32px 0;position:relative;overflow:hidden}.code-block-container pre{background:#080809;margin:0;padding:20px;overflow-x:auto}.code-block-container code{color:#faf7f2;font-family:Consolas,Monaco,Courier New,monospace;font-size:.9rem;line-height:1.6}.copy-code-btn{color:#faf7f2;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:6px;padding:4px 10px;font-size:.75rem;font-weight:600;transition:all .2s;position:absolute;top:12px;right:12px}.copy-code-btn:hover{background:#ffffff2e;border-color:#ffffff4d}.copy-code-btn.success{background:var(--primary);color:#0a0a0a;border-color:var(--primary)}.article-footer-utility{border-top:1px solid var(--border);max-width:680px;margin:48px auto 0;padding-top:24px}.article-tags{flex-wrap:wrap;gap:8px;margin-bottom:24px;display:flex}.blog-tag{color:var(--text-light);background:#c8a97e0d;border:1px solid #c8a97e1a;border-radius:20px;padding:6px 14px;font-size:.8rem;font-weight:500}.comments-section{max-width:680px;margin:48px auto 0}.comments-title{color:var(--text-bright);margin-bottom:24px;font-size:1.25rem;font-weight:700}.comment-form{margin-bottom:36px}.comment-input-wrapper{background:var(--input-bg);border:1px solid var(--border);border-radius:12px;margin-bottom:12px;padding:12px;transition:border-color .3s}.comment-input-wrapper:focus-within{border-color:var(--primary);background:var(--input-bg-focus)}.comment-input-wrapper textarea{width:100%;color:var(--text-bright);resize:none;background:0 0;border:none;outline:none;font-family:inherit;font-size:.95rem}.btn-submit-comment{border-radius:20px;padding:8px 20px;font-size:.8rem}.comment-card-medium{border-bottom:1px solid var(--border);padding:24px 0}.comment-card-medium:last-child{border-bottom:none}.comment-author-row{align-items:center;gap:12px;margin-bottom:12px;display:flex}.comment-author-avatar{width:32px;height:32px;color:var(--primary);background:#c8a97e26;border-radius:50%;justify-content:center;align-items:center;font-size:.85rem;font-weight:700;display:flex}.comment-author-info{flex-direction:column;display:flex}.comment-author-name{color:var(--text-bright);font-size:.88rem;font-weight:600}.comment-time{color:var(--text-light);font-size:.78rem}.comment-body{color:var(--text-muted);font-size:.95rem;line-height:1.6}html[lang=th] .lang-en,html[lang=en] .lang-th{display:none!important}.article-pills-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:8px;margin-bottom:32px;display:flex}.article-pill{background:var(--bg-warm);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;transition:var(--transition);font-size:.78rem;font-weight:600;font-family:var(--font);letter-spacing:.5px;text-align:center;box-shadow:var(--shadow-sm);border-radius:30px;justify-content:center;align-items:center;padding:8px 18px;line-height:1.35;display:inline-flex}.article-pill.active,.article-pill:hover{box-shadow:var(--glow-primary);transform:translateY(-1px);background:var(--primary-light)!important;border-color:var(--primary)!important;color:var(--primary)!important}@media (width<=768px){.blog-article-body{padding-top:78px}.blog-article-body .navbar{background:var(--nav-bg-scrolled);padding:12px 0}.blog-article-body .nav-container{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:0 16px;display:grid}.blog-article-body .nav-logo{letter-spacing:0;min-width:0;font-size:clamp(1.15rem,7vw,1.75rem);line-height:1}.blog-article-body .nav-actions{justify-content:flex-end;gap:8px;min-width:0}.blog-article-body .nav-back-home{letter-spacing:0;min-height:42px;color:var(--text-bright);background:linear-gradient(145deg,#c8a97e26,#080809b8),#080809b8;padding:0 14px;font-size:.82rem;box-shadow:0 10px 24px #0000003d,inset 0 0 0 1px #faf7f20a}[data-theme=light] .blog-article-body .nav-back-home{color:#1c1811;background:linear-gradient(145deg,#fffdf8f5,#f1eadceb),#fffdf8e6;border-color:#977c5447;box-shadow:0 10px 24px #5c492a1f,inset 0 0 0 1px #ffffffb8}.blog-article-body .theme-toggle{flex:0 0 44px;width:44px;height:44px}.blog-article-body .lang-toggle{border-radius:999px;height:44px;padding:0 12px;font-size:.78rem}.article-layout{margin:28px auto 86px;padding:0 18px}.article-header{margin-bottom:32px}.article-title{letter-spacing:0;margin-bottom:22px;font-size:clamp(2rem,9vw,2.65rem);line-height:1.18}.article-subtitle{margin-bottom:24px;font-size:1.05rem;line-height:1.62}.author-meta-row{border-radius:28px;justify-content:flex-start;gap:12px;width:min(100%,340px);padding:10px 16px}.author-name-follow{flex-wrap:wrap;gap:4px 8px}.article-pills-row{background:color-mix(in srgb, var(--card-bg) 82%, transparent);border:1px solid #977c5429;border-radius:26px;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,680px);margin:12px auto 34px;padding:4px;display:grid;box-shadow:0 14px 34px #19130a12}.article-pill{letter-spacing:0;white-space:normal;overflow-wrap:anywhere;min-height:42px;box-shadow:none;background:0 0;border-color:#0000;border-radius:22px;padding:8px 10px;font-size:.78rem;font-weight:800}.article-pill.active,.article-pill:hover{transform:none;box-shadow:0 10px 22px #977c541f;color:var(--primary)!important;background:#c8a97e1f!important;border-color:#977c545c!important}.blog-article-body .dragon-widget{left:auto;right:16px;bottom:calc(22px + env(safe-area-inset-bottom,0px))}.blog-article-body .dragon-avatar{width:46px;height:46px}.blog-article-body .dragon-speech-bubble{border-radius:16px 16px 6px;width:min(260px,100vw - 32px);max-width:min(260px,100vw - 32px);padding:12px 40px 12px 14px;font-size:.78rem;line-height:1.5;bottom:60px;left:auto;right:0}.blog-article-body .dragon-speech-bubble:before{left:auto;right:20px}}@media (width<=430px){.blog-article-body{padding-top:132px}.blog-article-body .nav-container{grid-template-columns:1fr;gap:10px;padding:0 14px}.blog-article-body .nav-actions{justify-content:space-between;width:100%}.blog-article-body .nav-back-home{min-width:86px;padding:0 13px}.blog-article-body .lang-toggle{flex:auto;max-width:104px}.article-layout{margin-top:18px;padding:0 16px}.author-meta-row{width:100%}.article-pills-row{border-radius:22px;gap:6px;margin:8px auto 30px;padding:3px}.article-pill{border-radius:19px;min-height:40px;padding:7px 6px;font-size:.72rem;line-height:1.3}}.blog-article-body table{border-collapse:collapse;width:100%;font-family:var(--font);border:1px solid var(--border);background:#ffffff05;border-radius:8px;margin:28px 0;font-size:.9rem;overflow:hidden}.blog-article-body th{color:var(--text-bright);text-align:left;border-bottom:1.5px solid var(--border);background:#c8a97e14;padding:14px 18px;font-weight:600}.blog-article-body td{border-bottom:1px solid var(--border);color:var(--text-muted);padding:14px 18px}.blog-article-body tr:last-child td{border-bottom:none}.blog-article-body tr:hover td{color:var(--text-bright);background:#ffffff03}.blog-callout{border-left:4px solid var(--primary);border-top:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:#ffffff05;border-radius:0 8px 8px 0;margin:28px 0;padding:20px}.blog-callout-title{color:var(--text-bright);align-items:center;gap:8px;margin-bottom:8px;font-size:.95rem;font-weight:700;display:flex}.code-block-header{border:1px solid var(--border);color:var(--text-muted);font-size:.75rem;font-weight:600;font-family:var(--font);background:#0b0b0c;border-bottom:none;border-top-left-radius:12px;border-top-right-radius:12px;align-items:center;margin-top:24px;padding:12px 16px;display:flex;position:relative}.window-controls{gap:6px;margin-right:12px;display:flex}.control-dot{border-radius:50%;width:10px;height:10px;display:inline-block}.control-dot.close{background:#ff5f56}.control-dot.minimize{background:#ffbd2e}.control-dot.expand{background:#27c93f}.code-block-header-title{text-align:center;color:var(--text-light);letter-spacing:.5px;flex-grow:1;margin-right:48px}.code-block-header-icon{color:#e0a96d;font-size:.9rem}.code-block-header+.code-block-container{border-top-left-radius:0!important;border-top-right-radius:0!important;margin-top:0!important}.blog-article-body td:first-child strong{border-radius:6px;padding:4px 10px;font-family:Consolas,Monaco,monospace;font-size:.8rem;font-weight:700;display:inline-block}.blog-article-body tr:first-child td:first-child strong{color:#2ecc71;background:#2ecc7126;border:1px solid #2ecc7140}.blog-article-body tr:nth-child(2) td:first-child strong{color:#3498db;background:#3498db26;border:1px solid #3498db40}.blog-article-body tr:nth-child(3) td:first-child strong{color:#e74c3c;background:#e74c3c26;border:1px solid #e74c3c40}.blog-article-body tr:nth-child(4) td:first-child strong{color:#e67e22;background:#e67e2226;border:1px solid #e67e2240}.blog-article-body tr:nth-child(5) td:first-child strong{color:#9b59b6;background:#9b59b626;border:1px solid #9b59b640}