:root {
  --bg: #FFFFFF;
  --text: #1A1F2C;
  --muted: #6B7280;
  --card: #FFFFFF;
  --soft: rgba(17,24,39,.08);
  --accent: #7C7CF6;
  --accent2: #F6F7FF;
}
:root.dark {
  --bg: #0B0E1A; --text: #E8EAF6; --muted: #9AA0B4; --card: #111428; --soft: rgba(255,255,255,.08);
  --accent: #8E8EFA; --accent2: rgba(124,124,246,.15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans Thai', sans-serif;
  line-height: 1.7;
}

body::after {
  /* subtle noise */
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .06;
  background-image: url(data:image/png;base64,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);
  mix-blend-mode: multiply; z-index: 0;
}

.progress {
  position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--accent), #8ce0ff);
  width: 0%; z-index: 50;
}

.navbar {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: saturate(140%) blur(8px);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom: 1px solid var(--soft);
}
.navbar .nav-link { color: var(--text) !important; opacity: .7; text-decoration: none; }
.navbar .nav-link.active, .navbar .nav-link:hover { opacity: 1; color: var(--accent) !important; }

.theme-toggle {
  border: 1px solid var(--soft); background: var(--card); color: var(--text);
  border-radius: 999px; padding: 6px 12px;
}

.wrapper { position: relative; z-index: 1; }
.hero { padding: 120px 0 80px; position: relative; overflow: hidden; }
.hero .grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--accent) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .12;
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}
.hero .blob {
  position: absolute; right: -140px; top: -120px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent) 0%, transparent 60%);
  filter: blur(60px); opacity: .18;
}

.hero h1 { font-weight: 800; letter-spacing: .2px; }
.hero p.sub { color: var(--muted); }
.kbd { border: 1px solid var(--soft); padding: 2px 8px; border-radius: 6px; font-size: .9rem; }

.card-soft {
  background: var(--card); border: 1px solid var(--soft); border-radius: 16px; transition: transform .25s ease, box-shadow .25s ease;
}
.card-soft:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.08); }

.btn-brand {
  border: 1px solid var(--soft);
  background: linear-gradient(180deg, var(--card), color-mix(in oklab, var(--accent2) 40%, var(--card)));
  color: var(--text) !important;
  border-radius: 12px; position: relative; will-change: transform;
}
.btn-brand.magnet { transition: transform .15s ease; }
.btn-outline { border: 1px solid var(--soft); color: var(--text); border-radius: 12px; background: var(--card); }

.section { padding: 72px 0; position: relative; }
.section-title { font-weight: 800; margin-bottom: 8px; }
.section-sub { color: var(--muted); margin-bottom: 24px; }

.waves { position: relative; height: 36px; margin-top: 24px; }
.waves svg { position: absolute; left: 0; bottom: -1px; width: 100%; height: 36px; }
.waves path { fill: color-mix(in oklab, var(--accent) 10%, transparent); }

.filters .btn-chip {
  display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--soft); background: var(--card);
  margin: 0 8px 8px 0; cursor: pointer; transition: transform .2s ease;
}
.filters .btn-chip.active { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, var(--card)); }
.filters .btn-chip:hover { transform: translateY(-1px); }

.portfolio-item .thumb { aspect-ratio: 4/3; overflow: hidden; border-radius: 14px; border: 1px solid var(--soft); transform: translateZ(0); }
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.portfolio-item:hover img { transform: scale(1.06) rotate(.4deg); }

.gallery .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .gallery .grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 992px) { .gallery .grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.gallery .grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; border: 1px solid var(--soft); }

a.underline { color: var(--text); text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s ease; }
a.underline:hover { background-size: 100% 2px; }

footer { border-top: 1px solid var(--soft); color: var(--muted); padding: 28px 0; }

.spotlight {
  position: fixed; pointer-events: none; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 60%, transparent) 0%, transparent 70%);
  mix-blend-mode: overlay; opacity: .18; z-index: 30; transform: translate(-60px,-60px);
}


/* --- Adjustments for About me & Education --- */
.avatar {
  width: 112px;
  height: 112px;
  border-radius: 14px;
  border: 1px solid var(--soft);
  object-fit: cover;
}
@media (max-width: 576px) {
  .avatar { width: 88px; height: 88px; }
}
.about-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Prevent weird overlaps inside cards on small screens */
.card-soft img { max-width: 100%; height: auto; display: block; }

/* Minimal patterned background for the About section */
#about.section { position: relative; overflow: hidden; }
#about.section::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(var(--accent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--accent2) 60%, transparent), transparent);
  background-size: 20px 20px, 100% 100%;
  background-position: 0 0, 0 0;
  opacity: .06;
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  z-index: 0;
}
#about .container, #about .card-soft { position: relative; z-index: 1; }