/* ===== VARIABLES / THEME ===== */
:root{--brand:#2660ff;--brand2:#0ea5e9;--bg:#030712;--bg2:#0b1220;--card:#0f172a;--border:rgba(255,255,255,.09);--text:#e6ebf5;--muted:#94a3b8;--glow:rgba(38,96,255,.35)}
body.theme-light{--bg:#f0f4ff;--bg2:#e4ebfb;--card:#fff;--border:rgba(15,23,42,.1);--text:#0f172a;--muted:#475569;--glow:rgba(38,96,255,.2)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Bai Jamjuree',system-ui,sans-serif;line-height:1.6;transition:background .3s,color .3s;overflow-x:hidden}
a{color:var(--brand2);text-decoration:none}
a:hover{color:var(--brand)}
img{max-width:100%}
code{color:var(--brand2);font-family:'Space Mono',monospace;font-size:.85em}

/* ===== PRELOADER ===== */
#preloader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#030712;transition:opacity .38s}
#preloader.pl-fade{opacity:0}
#preloader-canvas{position:absolute;inset:0;width:100%;height:100%}
.pl-center{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}
.pl-logo{position:relative;z-index:2}
.pl-ring{position:absolute;inset:0;border:2px solid transparent;border-top-color:var(--brand);border-radius:50%;animation:spin 1.4s linear infinite}
.pl-ring:nth-child(2){inset:10px;border-top-color:var(--brand2);animation-duration:1.9s;animation-direction:reverse}
.pl-ring:nth-child(3){inset:20px;opacity:.5;animation-duration:2.6s}
.pl-scan{position:absolute;left:10%;right:10%;height:2px;background:var(--brand2);opacity:.6;animation:scan 1.6s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes scan{0%,100%{top:15%}50%{top:85%}}

/* ===== NAVBAR ===== */
#navbar{background:transparent;padding:.7rem 0;transition:background .3s,box-shadow .3s;z-index:1000}
#navbar.scrolled{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--border)}
#navbar .nav-link{color:var(--muted);font-weight:500;padding:.4rem 1rem;position:relative;transition:color .2s}
#navbar .nav-link:hover,#navbar .nav-link.active{color:var(--text)}
#navbar .nav-link.active::after{content:"";position:absolute;left:1rem;right:1rem;bottom:0;height:2px;background:var(--brand);border-radius:2px}
.logo-icon{display:block}
body.theme-light .logo-icon{filter:invert(1)}
.social-icon{width:28px;height:28px;object-fit:contain;opacity:.85;transition:opacity .2s,transform .2s}
.social-icon:hover{opacity:1;transform:translateY(-2px)}
.navbar-toggler{border:0;box-shadow:none!important;display:flex;flex-direction:column;gap:5px;padding:.4rem}
.toggler-line{width:24px;height:2px;background:var(--text);border-radius:2px}
.theme-toggle{position:relative;width:56px;height:28px;padding:0;flex-shrink:0;border-radius:999px;border:1px solid var(--border);background-color:#2b2f35;cursor:pointer;transition:background-color .3s ease,border-color .3s ease}
body.theme-light .theme-toggle{background-color:#f7d58f}
.theme-toggle:hover{border-color:var(--brand)}
.theme-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.theme-toggle::before{content:"";position:absolute;z-index:2;top:2px;left:3px;width:22px;height:22px;border-radius:50%;background:linear-gradient(145deg,#f4f5f7,#aeb4bd);box-shadow:0 1px 3px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.7);transition:transform .3s cubic-bezier(.4,0,.2,1)}
body.theme-light .theme-toggle::before{transform:translateX(26px) rotate(180deg)}
.tt-icon{position:absolute;z-index:1;top:50%;width:14px;height:14px;margin-top:-7px;transition:opacity .3s ease,transform .3s cubic-bezier(.4,0,.2,1)}
.tt-moon{right:6px;color:#cfd6e2;opacity:1;transform:rotate(0)}
.tt-sun{left:6px;color:#b45309;opacity:0;transform:rotate(-90deg)}
body.theme-light .tt-moon{opacity:0;transform:rotate(90deg)}
body.theme-light .tt-sun{opacity:1;transform:rotate(0)}
@media(max-width:991px){#navbar .navbar-collapse{background:var(--card);border:1px solid var(--border);border-radius:12px;margin-top:.6rem;padding:1rem}}

/* ===== BUTTONS ===== */
.btn{border-radius:10px;font-weight:600;padding:.65rem 1.4rem;transition:transform .2s,box-shadow .2s,background .2s}
.btn-brand{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff!important;border:0}
.btn-brand:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--glow)}
.btn-outline-brand{background:transparent;color:var(--text)!important;border:1px solid var(--brand)}
.btn-outline-brand:hover{background:var(--brand);color:#fff!important}

/* ===== HERO ===== */
#home{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:radial-gradient(ellipse at 70% 30%,var(--glow),transparent 60%),var(--bg)}
#home-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .9rem;border:1px solid var(--border);border-radius:999px;background:var(--card);font-family:'Space Mono',monospace;font-size:.78rem;color:var(--muted)}
.hero-badge-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 #22c55e;animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
#title-home{font-size:clamp(2.6rem,7vw,4.8rem);font-weight:700;line-height:1.05;margin:1.2rem 0 .6rem;letter-spacing:-.02em}
.hero-role{font-size:1.5rem;color:var(--muted);margin-bottom:1rem}
#span-title{background:linear-gradient(90deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}
.hero-tagline{color:var(--muted);max-width:560px}
.hero-tagline b{color:var(--text)}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.6rem 0}
.hero-stats{display:flex;gap:2rem;flex-wrap:wrap;margin-top:2rem}
.hero-stat-n{display:block;font-family:'Space Mono',monospace;font-size:1.5rem;font-weight:700;color:var(--brand2)}
.hero-stat-l{font-size:.8rem;color:var(--muted)}
.hero-photo-wrap{position:relative;width:280px;height:280px}
.hero-photo-ring{position:absolute;inset:-14px;border-radius:50%;border:2px dashed var(--brand);opacity:.6;animation:spin 24s linear infinite}
.hero-photo{width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid var(--card);box-shadow:0 0 50px var(--glow)}
@media(max-width:767px){.hero-photo-wrap{width:220px;height:220px}}

/* ===== TECH STRIP ===== */
#tech-strip{overflow:hidden;border-block:1px solid var(--border);background:var(--bg2);padding:.9rem 0}
.tech-track{display:flex;gap:.8rem;width:max-content;animation:marquee 45s linear infinite}
#tech-strip:hover .tech-track{animation-play-state:paused}
.tech-tag{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;padding:.3rem .9rem;border:1px solid var(--border);border-radius:999px;background:var(--card);font-family:'Space Mono',monospace;font-size:.78rem;color:var(--muted)}
.tech-tag-dot{width:6px;height:6px;border-radius:50%;background:var(--brand)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ===== SECTIONS ===== */
.section-padding{padding:96px 0}
.section-title{max-width:760px;margin-bottom:3rem}
.section-title.text-center{margin-inline:auto}
.section-label{display:inline-flex;font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--brand2);margin-bottom:.5rem}
.section-title h2{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:700;margin-bottom:1rem}
.section-title p{color:var(--muted)}

/* ===== BENTO ===== */
.bento-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.bento-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.6rem;transition:transform .25s,border-color .25s,box-shadow .25s}
.bento-card:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:0 12px 32px var(--glow)}
.bento-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(38,96,255,.12);color:var(--brand);margin-bottom:1rem}
.bento-icon svg{width:22px;height:22px}
.bento-card h3{font-size:1.1rem;font-weight:600;margin-bottom:.5rem}
.bento-card p{color:var(--muted);font-size:.93rem;margin:0}
.bento-card b{color:var(--text)}

/* ===== TIMELINE ===== */
.timeline-v2{list-style:none;padding:0;margin:0;position:relative}
.timeline-v2::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:linear-gradient(var(--brand),var(--brand2));opacity:.4;transform:translateX(-1px)}
.timeline-v2-item{position:relative;width:50%;padding:0 44px 2.4rem 0}
.timeline-v2-item.right{margin-left:50%;padding:0 0 2.4rem 44px}
.timeline-v2-dot{position:absolute;top:0;right:-31px;width:62px;height:62px;border-radius:50%;background:var(--card);border:3px solid var(--brand);display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:2}
.timeline-v2-item.right .timeline-v2-dot{right:auto;left:-31px}
.timeline-v2-dot img{width:100%;height:100%;object-fit:cover}
.timeline-v2-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.4rem 1.5rem;position:relative}
.timeline-v2-date{font-family:'Space Mono',monospace;font-size:.78rem;color:var(--brand2);margin-bottom:.3rem}
.timeline-v2-card h3{font-size:1.1rem;font-weight:600;margin-bottom:.2rem}
.timeline-v2-card h4{font-size:.9rem;font-weight:500;color:var(--muted);margin-bottom:.7rem}
.timeline-v2-card p{font-size:.92rem;color:var(--muted);margin:0}
.timeline-v2-card b{color:var(--text)}
.tl-badge{position:absolute;top:1rem;right:1rem;font-size:.72rem;color:#22c55e;font-family:'Space Mono',monospace}
@media(max-width:767px){
 .timeline-v2::before{left:31px}
 .timeline-v2-item,.timeline-v2-item.right{width:100%;margin-left:0;padding:0 0 2rem 84px}
 .timeline-v2-dot,.timeline-v2-item.right .timeline-v2-dot{left:0;right:auto}
}

/* ===== PORTFOLIO ===== */
.portfolio-category-label{font-family:'Space Mono',monospace;font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:2rem 0 1rem;display:flex;align-items:center;gap:.8rem}
.portfolio-category-label::after{content:"";flex:1;height:1px;background:var(--border)}
.portfolio-featured-grid,.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem}
.portfolio-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .25s,border-color .25s,box-shadow .25s}
.portfolio-card:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:0 12px 32px var(--glow)}
.portfolio-card-placeholder{height:150px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(38,96,255,.15),rgba(14,165,233,.08));color:var(--brand)}
.portfolio-card-placeholder svg{width:72px;height:72px;fill:none;stroke:currentColor;stroke-width:1.5}
.portfolio-card-image {
    height: 150px;
    overflow: hidden;
}

.portfolio-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.portfolio-card-body{padding:1.2rem 1.3rem 1.4rem}
.portfolio-card-badge{display:inline-block;font-size:.72rem;font-family:'Space Mono',monospace;padding:.15rem .6rem;border-radius:999px;background:rgba(38,96,255,.15);color:var(--brand2);margin-bottom:.6rem}
.portfolio-card-tag{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--muted);margin-bottom:.3rem}
.portfolio-card-title{font-size:1.15rem;font-weight:600;margin-bottom:.4rem}
.portfolio-card-sub{font-size:.9rem;color:var(--muted)}

/* ===== MODALS ===== */
.portfolio-modal .modal-content.pm-content{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:18px;overflow:hidden}
.pm-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.4rem;border-bottom:1px solid var(--border)}
.pm-tag{font-family:'Space Mono',monospace;font-size:.78rem;color:var(--brand2)}
.btn-close{filter:invert(.6)}
body:not(.theme-light) .btn-close{filter:invert(1) grayscale(1)}
.pm-placeholder{height:170px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(38,96,255,.15),rgba(14,165,233,.08));color:var(--brand);flex-direction:column;gap:.4rem}
.pm-placeholder svg{width:80px;height:80px;fill:none;stroke:currentColor;stroke-width:1.5}
.pm-img{width:100%;max-height:340px;object-fit:cover}
.pm-video-wrap{position:relative;aspect-ratio:16/9}
.pm-video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pm-body{padding:1.6rem}
.pm-title{font-size:1.5rem;font-weight:700;margin-bottom:.8rem}
.pm-desc{color:var(--muted);font-size:.95rem}
.pm-project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.4rem 0;
}

.pm-project-card {
    padding: 1.1rem;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.pm-project-card .pm-section-label {
    margin-bottom: .75rem;
}

.pm-project-card ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--muted);
    font-size: .9rem;
}

.pm-project-card li + li {
    margin-top: .45rem;
}

.pm-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .8rem;
    margin: 1.4rem 0;
}

.pm-gallery img {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 12px;
}

@media (max-width: 767px) {
    .pm-project-grid {
        grid-template-columns: 1fr;
    }
}
.pm-tech-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.pm-tech-item{font-family:'Space Mono',monospace;font-size:.75rem;padding:.25rem .7rem;border:1px solid var(--border);border-radius:999px;background:var(--bg2);color:var(--text)}
.pm-actions{display:flex;gap:.7rem;flex-wrap:wrap}
.pm-section-label{font-family:'Space Mono',monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--brand2);margin-bottom:.5rem}
.pm-list{list-style:none;padding:0;margin:0}
.pm-list li{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--border);font-size:.9rem;color:var(--muted)}
.pm-version-badge{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--brand2)}

/* ===== CONTACT ===== */
.contact-section{padding:96px 0;background:var(--bg2)}

.title-block{--line:color-mix(in srgb,var(--text) 45%,transparent);max-width:780px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:1px;background:var(--line);border:2px solid var(--line);position:relative}
.title-block::before{content:"";position:absolute;inset:-12px;border:1px solid var(--line);pointer-events:none}
.tb-cell{background:var(--card);padding:.6rem .95rem;min-width:0}
.tb-label{display:block;font-family:'Space Mono',monospace;font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:.15rem}
.tb-value{display:block;font-size:.98rem;font-weight:600;word-break:break-word}
.tb-value a{color:var(--brand2)}
.tb-big{font-size:1.3rem;color:var(--brand2)}
.tb-s2{grid-column:span 2}.tb-s3{grid-column:span 3}.tb-s4{grid-column:span 4}.tb-s6{grid-column:span 6}.tb-s9{grid-column:span 9}
@media(max-width:767px){
 .title-block{margin-inline:12px}
 .tb-s2,.tb-s3,.tb-s4,.tb-s6,.tb-s9{grid-column:span 12}
 .tb-half{grid-column:span 6}
}

.contact-cta{text-align:center;margin-top:2rem}

/* ===== FOOTER ===== */
#footer{text-align:center;padding:2.2rem 0;border-top:1px solid var(--border);color:var(--muted);font-size:.88rem}
#footer p{margin:.3rem 0}
#footer .list-inline{margin-bottom:.8rem}
body.theme-light #footer .social-icon{filter:invert(1)}body.theme-light #footer .social-icon[src*="linkedin"]{filter:none}

/* ===== ACCESSIBILITY ===== */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* ===== MINI-GALLERY IMAGE ZOOM ===== */
.pm-gallery-item {
    min-width: 0;
    margin: 0;
}

.pm-gallery img {
    cursor: zoom-in;
}

.pm-gallery img:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
}

.pm-gallery-caption {
    margin: .4rem 0 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.35;
    text-align: center;
}

.pm-lightbox-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: .75rem;
    background: var(--bg2);
}

.pm-lightbox-image {
    display: block;
    width: 100%;
    max-height: 78vh;
    object-fit: contain;
}

.pm-lightbox-caption {
    margin: 0;
    padding: .8rem 1.2rem 1.1rem;
    color: var(--muted);
    text-align: center;
}

.pm-lightbox-copy {
    padding: 0 1.2rem 1.2rem;
}

.pm-lightbox-title {
    margin: 0 0 .5rem;
    font-size: 1.2rem;
}

.pm-lightbox-description {
    margin: 0;
    color: var(--muted);
}