@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');
:root{--bg:#050816;--soft:#090d1d;--panel:#0e1429;--text:#f4f7ff;--muted:#8e9ab5;--cyan:#46f4d4;--blue:#5b7cff;--pink:#d65cff;--line:rgba(255,255,255,.11);--mono:"IBM Plex Mono",monospace;--thai:"Noto Sans Thai",sans-serif}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{min-width:320px;background:var(--bg);color:var(--text);font-family:var(--thai);line-height:1.65;overflow-x:hidden}a{color:inherit;text-decoration:none}.noise{position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.spotlight{position:fixed;width:420px;height:420px;pointer-events:none;z-index:-1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(91,124,255,.13),transparent 68%)}
header{position:fixed;inset:0 0 auto;z-index:100;height:76px;padding:0 clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;background:rgba(5,8,22,.75);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;font:600 .95rem var(--mono)}.brand>b{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(70,244,212,.4);border-radius:9px;color:var(--cyan);background:rgba(70,244,212,.06)}.brand span{color:var(--cyan)}nav{display:flex;gap:32px}nav a{color:var(--muted);font:500 .7rem var(--mono);letter-spacing:1.4px;transition:.2s}nav a:hover{color:var(--cyan)}#menu{display:none;border:1px solid var(--line);color:white;background:transparent;border-radius:8px;width:40px;height:40px}
.hero{position:relative;min-height:100vh;padding:145px clamp(20px,7vw,110px) 80px;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(45px,7vw,105px);align-items:center;overflow:hidden}.grid{position:absolute;inset:0;z-index:-3;background-image:linear-gradient(rgba(91,124,255,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(91,124,255,.065) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(#000,transparent 96%)}.grid:after{content:"";position:absolute;width:470px;height:470px;right:6%;top:8%;border-radius:50%;filter:blur(90px);background:rgba(91,124,255,.25)}.available{width:max-content;padding:7px 12px;border:1px solid rgba(70,244,212,.22);border-radius:999px;color:#bdfff3;background:rgba(70,244,212,.05);font:.65rem var(--mono);letter-spacing:1px}.available i{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:pulse 1.8s infinite}@keyframes pulse{50%{opacity:.4;transform:scale(.7)}}.eyebrow,.section-head p,.contact-inner>p{margin-top:27px;color:var(--cyan);font:.7rem var(--mono);letter-spacing:1.8px}.hero h1{margin:18px 0 26px;font-size:clamp(3rem,6.2vw,6.2rem);line-height:1.03;letter-spacing:-4px}.hero h1 em{font-style:normal;color:transparent;background:linear-gradient(100deg,var(--cyan),#7f9aff 50%,#e879ff);background-clip:text;-webkit-background-clip:text}.intro{max-width:660px;color:var(--muted);font-size:1.08rem}.actions{display:flex;gap:12px;margin-top:35px}.actions a{min-height:52px;padding:0 22px;display:flex;align-items:center;justify-content:center;font:.7rem var(--mono);letter-spacing:1px}.primary{color:#061019;background:var(--cyan);box-shadow:0 14px 40px rgba(70,244,212,.13)}.secondary{border:1px solid var(--line);color:var(--muted)}.actions a:hover{transform:translateY(-3px)}
.terminal{max-width:620px;justify-self:end;border:1px solid rgba(255,255,255,.13);background:rgba(9,14,32,.83);box-shadow:0 45px 95px rgba(0,0,0,.45);backdrop-filter:blur(18px);transform:perspective(1100px) rotateY(-4deg)}.terminal-bar{height:47px;padding:0 15px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);color:#76829a;font:.63rem var(--mono)}.terminal-bar div{display:flex;gap:6px}.terminal-bar i{width:9px;height:9px;border-radius:50%;background:#ff6878}.terminal-bar i:nth-child(2){background:#ffd066}.terminal-bar i:nth-child(3){background:#42d392}.terminal-bar b{justify-self:end;color:var(--cyan);font-weight:500}pre{padding:clamp(24px,4vw,40px);overflow:auto;font:clamp(.7rem,1vw,.84rem)/1.85 var(--mono)}.dim{color:#3e4961}.purple{color:#cc7dff}.yellow{color:#ffd580}.blue{color:#7ea6ff}.green{color:#66e7b7}.orange{color:#ffad66}.cyan{color:var(--cyan)}.comment{color:#53617a;font-style:italic}.caret{color:var(--cyan);animation:blink .8s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.ticker{overflow:hidden;border-block:1px solid var(--line);background:#070b19}.ticker div{width:max-content;padding:17px 0;color:#8e9ab5;font:.7rem var(--mono);letter-spacing:1.7px;animation:ticker 22s linear infinite}@keyframes ticker{to{transform:translateX(-50%)}}
.section{position:relative;padding:135px clamp(20px,7vw,110px)}.dark{background:var(--soft)}.number{position:absolute;right:clamp(20px,7vw,110px);top:105px;color:rgba(255,255,255,.04);font:600 clamp(5rem,10vw,10rem) var(--mono)}.section-head{position:relative;z-index:1}.section-head p{margin:0 0 12px}.section-head h2{font-size:clamp(2.2rem,4.4vw,4.2rem);line-height:1.13;letter-spacing:-2px}.about-grid{margin-top:68px;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(50px,8vw,120px)}.about-text{color:var(--muted)}.about-text .lead{margin-bottom:20px;color:#dce4f5;font-size:1.2rem}.principles{border-top:1px solid var(--line)}.line-card{padding:26px 8px;display:grid;grid-template-columns:60px 1fr 1.2fr;gap:20px;align-items:center;border-bottom:1px solid var(--line)}.line-card>b{color:var(--cyan);font:.65rem var(--mono)}.line-card h3{font:.95rem var(--mono)}.line-card p{color:var(--muted);font-size:.88rem}
.skill-grid{margin-top:68px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.skill{min-height:410px;padding:28px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.01));transition:.25s}.skill:hover{transform:translateY(-7px);border-color:rgba(70,244,212,.3)}.skill>i{width:57px;height:57px;margin-bottom:68px;display:grid;place-items:center;border:1px solid rgba(70,244,212,.28);color:var(--cyan);background:rgba(70,244,212,.05);font:.82rem var(--mono);font-style:normal}.skill small{color:#536079;font:.6rem var(--mono)}.skill h3{margin:6px 0 12px;font-size:1.25rem}.skill p{min-height:60px;color:var(--muted);font-size:.88rem}.skill ul,.project-copy ul{list-style:none;margin-top:22px}.skill li{padding:7px 0;border-top:1px solid rgba(255,255,255,.06);color:#bac4d9;font:.65rem var(--mono)}.skill li:before{content:"+";margin-right:8px;color:var(--cyan)}
.projects{margin-top:70px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.project{overflow:hidden;border:1px solid var(--line);background:#0b1022;transition:.28s}.project:hover{transform:translateY(-6px);border-color:rgba(91,124,255,.38)}.featured{grid-column:span 2;display:grid;grid-template-columns:1.35fr .65fr}.preview{min-height:390px;padding:38px;display:grid;place-items:center;overflow:hidden}.dashboard-preview{background:radial-gradient(circle at 82% 18%,rgba(70,244,212,.16),transparent 25%),linear-gradient(145deg,#142352,#0b1229)}.window{width:100%;max-width:780px;background:#f3f6fb;box-shadow:0 32px 70px rgba(0,0,0,.33)}.window-top{padding:11px 15px;display:flex;justify-content:space-between;background:#0d1730;color:#91a1c0;font:.58rem var(--mono)}.window-top b{color:var(--cyan)}.dash{min-height:270px;display:grid;grid-template-columns:70px 1fr}.dash aside{padding-top:20px;display:flex;flex-direction:column;align-items:center;gap:20px;background:#0c142b}.dash aside strong{width:35px;height:35px;display:grid;place-items:center;border-radius:8px;color:#061019;background:var(--cyan);font:.62rem var(--mono)}.dash aside i{width:22px;height:5px;border-radius:4px;background:#2b3857}.dash-main{padding:24px;color:#11182d}.dash-title span{display:block;color:#7a8498;font:.45rem var(--mono);letter-spacing:1px}.dash-title b{font-size:1.2rem}.stats{margin:18px 0 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.stats div{padding:12px;background:#fff;box-shadow:0 4px 12px rgba(10,20,40,.06)}.stats small{display:block;color:#7d8799;font:.45rem var(--mono)}.stats b{font-size:1.1rem}.chart{height:100px;padding:8px 12px;display:flex;align-items:end;justify-content:space-around;background:repeating-linear-gradient(to bottom,#e8edf4 0 1px,#fff 1px 25px)}.chart i{width:7%;background:linear-gradient(#5b7cff,#46f4d4)}.project-copy{padding:clamp(27px,4vw,43px)}.featured .project-copy{display:flex;flex-direction:column;justify-content:center}.project-copy>small{color:#536079;font:.6rem var(--mono)}.project-copy>p{margin-top:24px;color:var(--cyan);font:.62rem var(--mono);letter-spacing:1.3px}.project-copy h3{margin:6px 0 12px;font-size:clamp(1.7rem,3vw,2.7rem)}.project-copy>div{color:var(--muted);font-size:.92rem}.project-copy ul{display:flex;flex-wrap:wrap;gap:6px}.project-copy li{padding:4px 8px;border:1px solid rgba(91,124,255,.25);color:#b3bfd6;background:rgba(91,124,255,.06);font:.56rem var(--mono)}
.network-preview{background:radial-gradient(circle at 12% 14%,rgba(70,244,212,.13),transparent 28%),#091224}.network{width:100%;max-width:500px;border:1px solid var(--line);background:rgba(5,9,20,.82);box-shadow:0 28px 60px rgba(0,0,0,.38)}.network header{position:static;height:auto;padding:14px 17px;display:flex;border-bottom:1px solid var(--line);background:none;color:#8795b1;font:.62rem var(--mono)}.network header i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.network p{padding:14px 17px;display:grid;grid-template-columns:1fr auto auto;gap:14px;border-bottom:1px solid rgba(255,255,255,.06);font:.62rem var(--mono)}.network p b{font-weight:500}.network p b i{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%}.up{background:#42d392;box-shadow:0 0 9px #42d392}.down{background:#ff6577;box-shadow:0 0 9px #ff6577}.network p span{color:#66738b}.network p em{color:#42d392;font-style:normal}.network p .off{color:#ff6577}.network code{display:block;padding:14px 17px;color:#5d6980;font:.55rem var(--mono)}
.app-preview{background:radial-gradient(circle at 70% 20%,rgba(214,92,255,.17),transparent 27%),linear-gradient(145deg,#25133d,#0c1227)}.phone{position:relative;width:205px;height:365px;padding:34px 15px 15px;border:8px solid #050812;border-radius:29px;background:linear-gradient(160deg,#132148,#091022);box-shadow:0 32px 65px rgba(0,0,0,.45)}.speaker{position:absolute;top:12px;left:50%;width:60px;height:6px;border-radius:8px;background:#151b2b;transform:translateX(-50%)}.phone>small{color:var(--cyan);font:.45rem var(--mono)}.phone h4{font-size:.82rem}.count{margin:17px 0 12px;padding:12px;text-align:center;border:1px solid rgba(70,244,212,.16);background:rgba(70,244,212,.05)}.count span{display:block;color:#9aa8c0;font-size:.52rem}.count b{color:var(--cyan);font-size:1.7rem}.phone>p{margin-bottom:8px;padding:7px;display:grid;grid-template-columns:29px 1fr 29px;align-items:center;gap:5px;border:1px solid rgba(255,255,255,.08)}.phone button{height:28px;border:0;color:#fff;background:#29375e}.phone>p b{text-align:center;font-size:.58rem}.save{margin-top:15px;padding:8px;text-align:center;color:#061019;background:var(--cyan);font-size:.56rem;font-weight:700}
.contact{position:relative;min-height:78vh;padding:100px 20px;display:grid;place-items:center;text-align:center;overflow:hidden;background:radial-gradient(circle,rgba(91,124,255,.2),transparent 52%)}.contact:before{content:"";position:absolute;width:700px;height:700px;border:1px solid rgba(91,124,255,.12);border-radius:50%;box-shadow:0 0 0 120px rgba(91,124,255,.02),0 0 0 240px rgba(91,124,255,.012)}.contact-inner{position:relative;z-index:1}.contact-inner>p{margin:0 0 12px}.contact h2{font-size:clamp(3rem,7.5vw,7.2rem);line-height:1.03;letter-spacing:-4px}.contact h2 span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.58)}.contact-inner>a{width:min(100%,390px);min-height:62px;margin:32px auto 0;padding:0 20px;display:flex;align-items:center;justify-content:space-between;color:#061019;background:var(--cyan);font:.68rem var(--mono);letter-spacing:1px}
footer{padding:31px clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);background:#03050d}footer p,footer>a:last-child{color:#657087;font:.58rem var(--mono);letter-spacing:1px}
.reveal{opacity:0;transform:translateY(28px);transition:.75s ease}.reveal.show{opacity:1;transform:none}
@media(max-width:1100px){.hero{grid-template-columns:1fr}.terminal{justify-self:start;max-width:760px}.skill-grid{grid-template-columns:repeat(2,1fr)}.featured{grid-template-columns:1fr}}
@media(max-width:780px){header{height:68px}#menu{display:block}nav{position:fixed;inset:68px 0 0;padding:55px 28px;flex-direction:column;align-items:flex-start;background:rgba(5,8,22,.98);transform:translateX(100%);transition:.3s}nav.open{transform:none}nav a{font-size:1rem}.hero{min-height:auto;padding-top:115px}.hero h1{letter-spacing:-2.5px}.about-grid{grid-template-columns:1fr}.line-card{grid-template-columns:45px 1fr}.line-card p{grid-column:2}.projects{grid-template-columns:1fr}.featured{grid-column:auto}.preview{min-height:350px}}
@media(max-width:560px){.hero,.section{padding-left:18px;padding-right:18px}.hero h1{font-size:2.85rem}.actions{flex-direction:column}.terminal{transform:none}.skill-grid{grid-template-columns:1fr}.skill{min-height:380px}.number{right:18px}.preview{padding:18px}.dash{grid-template-columns:45px 1fr}.dash-main{padding:14px}.stats{gap:5px}.stats div{padding:7px}.stats b{font-size:.8rem}.chart{height:85px}footer{flex-direction:column;align-items:flex-start}.contact h2{letter-spacing:-2px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}