:root { --bs-primary: #6c63ff; --bs-primary-rgb: 108,99,255; --ink: #171827; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { color: var(--ink); font-family: Kanit, sans-serif; font-weight: 300; }
.navbar { min-height: 70px; }
.navbar-brand { letter-spacing: .02em; }
.hero-section { min-height: 680px; padding-top: 70px; background: radial-gradient(circle at 80% 20%, #35316b 0, #171827 42%, #0d0e17 100%); }
.hero-section h1 { letter-spacing: -.03em; }
.hero-mark { width: 230px; height: 230px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; font: 500 3.5rem monospace; transform: rotate(-8deg); box-shadow: 0 0 0 25px rgba(108,99,255,.08), 0 0 0 50px rgba(108,99,255,.04); }
.section-padding { padding: 100px 0; }
.section-label { color: #6c63ff; font-size: .8rem; font-weight: 500; letter-spacing: .14em; margin-bottom: 12px; }
.profile-frame { max-width: 310px; padding: 10px; background: #fff; border: 1px solid #e9e7ff; border-radius: 1.5rem; box-shadow: 18px 18px 0 #eeeefe; }
.profile-frame img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 1rem; }
.info-card { padding: 1rem; border-left: 3px solid #6c63ff; background: #f7f7ff; }
.info-card small { display: block; color: #6c63ff; margin-bottom: .4rem; }
.info-card strong { font-weight: 400; font-size: .95rem; }
.education-card { border-radius: 1rem; transition: transform .2s ease, box-shadow .2s ease; }
.education-card:hover { transform: translateY(-5px); box-shadow: 0 1rem 2rem rgba(23,24,39,.1) !important; }
.skill-panel { padding: 1.5rem; border: 1px solid #e8e8f0; border-radius: 1rem; background: #fff; }
.skill-panel h3 { color: #6c63ff; margin-bottom: 1.25rem; }
.skill-item { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid #eeeef4; }
.skill-item:last-child { border-bottom: 0; }
.skill-item strong { font-weight: 400; }
.skill-item span { color: #77798a; font-size: .85rem; text-align: right; }
.skill-badge { padding: .65rem .8rem; color: #5550c8; background: #f0efff; font-weight: 300; }
@media (max-width: 767.98px) { .hero-section { min-height: 620px; } .section-padding { padding: 70px 0; } .hero-section h1 { font-size: 2.75rem; } .skill-item { display: block; } .skill-item span { display: block; text-align: left; } }