:root {
  --bg: #0b0f17;
  --text: #e6ebf5;
  --muted: #a7b1c2;
  --border: rgba(255, 255, 255, .12);
  --accent: #6a7cff;
  --accent-2: #23d3ff;
  --container: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: "Inter", "IBM Plex Sans Thai", Kanit, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ฟอนต์หัวข้ออังกฤษ ใช้ Space Grotesk */
h1, h2, h3, .nav a, .btn, strong, em {
  font-family: "Space Grotesk", "IBM Plex Sans Thai", sans-serif;
  letter-spacing: 0.3px;
}

h1, h2, h3 { font-weight: 800; }

/* Container */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 22px;
}

a { color: inherit; text-decoration: none; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.2rem;
  border-radius: 40px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  transition: .25s;
  font-weight: 800;
}
.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #061018;
  border: none;
}
.btn:hover { transform: translateY(-1px); }

/* Header */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,13,22,.7);
  backdrop-filter: blur(10px);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { height: 92px; }
.nav-links {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

/* Language Switch */
.lang-switch {
  display: inline-flex;
  gap: 10px;
  border: none;
  background: transparent;
}
.lang-switch button {
  flex: 0 0 auto;
  padding: 6px 14px;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: #fff;
  transition: background .3s;
}
.lang-switch button.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #061018;
  border-color: transparent;
}
.nav-toggle { display: none; }
.drawer { display: none; }

@media (max-width:900px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .drawer {
    position: fixed;
    right: 16px; left: 16px; top: 104px;
    background: #0e1320;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    display: none;
    flex-direction: column;
    gap: 10px;
  }
  .drawer.open { display: flex; }
}

/* Hero */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 0;
  padding-bottom: 100px;
}
.hero .overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 500px at 80% 10%, rgba(106,124,255,.35), transparent 60%),
    radial-gradient(900px 450px at 10% 80%, rgba(35,211,255,.30), transparent 60%);
  pointer-events: none;
}
.hero, #services {
  position: relative;
  overflow: hidden;
}
#heroCanvas,
#servicesCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 32px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(42px, 6vw, 74px);
  line-height: 1.03;
  margin: 12px 0 16px;
}
.hero .subtitle {
  color: #c8d2e6;
  font-size: clamp(16px, 1.4vw, 20px);
}

/* Sections */
.section {
  position: relative;
  padding: 100px 0;
  margin-top: 0;          /* ✅ เอาเส้นดำออก */
  overflow: hidden;
  background:
    radial-gradient(800px 500px at 10% 90%, rgba(35,211,255,.12), transparent 70%),
    radial-gradient(800px 500px at 90% 10%, rgba(106,124,255,.12), transparent 70%),
    linear-gradient(180deg, #0c1424, #0a1120);
}
.section::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background:
    radial-gradient(500px 400px at 25% 75%, rgba(0,255,180,0.08), transparent 60%),
    radial-gradient(500px 400px at 75% 25%, rgba(120,100,255,0.08), transparent 60%);
  animation: floatBg 40s ease-in-out infinite;
  z-index: 0;
}
.section .content { position: relative; z-index: 1; }

@keyframes floatBg {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3%); }
  100% { transform: translateY(0); }
}

.section h2 {
  font-size: clamp(32px, 3.6vw, 50px);
  margin: 0 0 8px;
}
.lead { color: var(--muted); }

/* Cards & Grid */
.cards {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  align-items: stretch;
}
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }

@media (max-width:1100px) {
  .col-6 { grid-column: span 12; }
  .col-4, .col-3 { grid-column: span 6; }
}
@media (max-width:640px) {
  .col-4, .col-3 { grid-column: span 12; }
}

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  height: 100%;
}
.service { display:flex; flex-direction:column; gap:12px; }
.service img {
  width: 100%; height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}

/* AI Card */
.card.ai-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 360px;
}
.card.ai-card img.icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8);
  z-index: 0;
}
.card.ai-card .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
  color: #fff;
  z-index: 1;
}
.card.ai-card .overlay h3 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--accent-2);
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
}
.card.ai-card .overlay p {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  color: #eaeaea;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.card.ai-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 45px rgba(35, 211, 255, 0.6);
}

/* Footer */
footer {
  padding: 48px 0;
  border-top: 1px solid var(--border);
}

/* Services Section: พื้นหลัง gradient + effect */
#services {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0c1424, #0a1120);
}

#servicesCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#services .content {
  position: relative;
  z-index: 1; /* ให้ข้อความอยู่บนสุด */
}

/* ===== Contact Section ===== */
#contact {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 12% 120%, rgba(35,211,255,.08), transparent 70%),
    radial-gradient(700px 480px at 110% -10%, rgba(106,124,255,.10), transparent 60%),
    linear-gradient(180deg, #0c1424, #0a1120);
}

/* soft animated blobs */
#contact .fx{
  position:absolute; inset:-45% -15%;
  background:
    conic-gradient(from 0deg at 25% 30%, rgba(35,211,255,.12), transparent 60%) no-repeat,
    conic-gradient(from 90deg at 75% 70%, rgba(106,124,255,.12), transparent 55%) no-repeat;
  filter: blur(40px);
  animation: contactDrift 38s ease-in-out infinite;
  pointer-events:none; z-index:0; opacity:.7;
}
@keyframes contactDrift{
  0%{ transform: translateY(0) }
  50%{ transform: translateY(-3%) }
  100%{ transform: translateY(0) }
}

/* grid layout */
#contact .contact-grid{
  position: relative; z-index:1;
  display: grid; gap: 22px;
  grid-template-columns: 1.2fr .8fr;   /* CTA กว้างกว่าเล็กน้อย */
}
@media (max-width: 980px){
  #contact .contact-grid{ grid-template-columns: 1fr; }
}

/* cards */
#contact .card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 24px;
}
#contact .card h3{ margin: 0 0 8px; font-size: 1.25rem; }

/* CTA detail */
#contact .cta .sub{ color: var(--muted); margin: 2px 0 10px; }

#contact .chips{ display:flex; flex-wrap:wrap; gap:8px; margin: 10px 0 12px; }
#contact .chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  font-size: .92rem;
}
#contact .chip i{ color: var(--accent-2); }

#contact .tick-list{ margin: 8px 0 14px; display:grid; gap: 6px; }
#contact .tick-list li{ list-style:none; display:flex; align-items:center; gap:10px; }
#contact .tick-list i{ color:#28e0a9; }

#contact .meta{ display:flex; gap:14px; flex-wrap:wrap; color: var(--muted); font-size:.92rem; }
#contact .meta i{ color: var(--accent-2); margin-right:6px; }

/* buttons */
#contact .cta-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }
#contact .btn i{ margin-right:8px; }

/* contact list */
#contact .contact-card .info-row{
  display:flex; align-items:flex-start; gap:12px;
  padding: 12px 6px; border-bottom: 1px dashed rgba(255,255,255,.08);
}
#contact .contact-card .info-row:last-child{ border-bottom: 0; }
#contact .contact-card i{ color: var(--accent-2); width: 18px; line-height: 1.2; }
#contact .contact-card a:hover{ text-decoration: underline; }

/* ===== ABOUT ===== */
/* ========= THEME FALLBACK (ถ้า project ไม่มีตัวแปร) ========= */
:root{
  --text:#e6ebf5;
  --muted:#a7b1c2;
  --border:rgba(255,255,255,.12);
  --accent:#6a7cff;
  --accent-2:#23d3ff;
}

/* ========= ABOUT SECTION ========= */
.about-pro{position:relative;overflow:hidden;padding:84px 0}
.about-pro .brand{color:var(--accent-2)}
.about-pro .lede{color:#c8d2e6;margin:.4rem 0 1rem;max-width:60ch}

/* layout: ซ้ายข้อความ + ขวากริด 4 รูป */
.about-pro__grid{
  display:grid;gap:28px;align-items:start;
  grid-template-columns:minmax(0,1.15fr) minmax(480px,.85fr);
}
@media (max-width:1180px){.about-pro__grid{grid-template-columns:1fr 1fr}}
@media (max-width:980px){ .about-pro__grid{grid-template-columns:1fr} }

/* stats */
.about-pro .stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;margin:12px 0 8px;
}
.about-pro .stat{
  border:1px solid var(--border);border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  padding:14px 16px
}
.about-pro .stat .k{font-weight:800;font-size:clamp(24px,3.2vw,30px);line-height:1}
.about-pro .stat .t{color:#9fb0c8;font-size:14px;margin-top:6px}
@media (max-width:720px){ .about-pro .stats{grid-template-columns:1fr} }

/* chips + bullets */
.about-pro .chips{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 12px}
.about-pro .chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--border);background:rgba(255,255,255,.05);
  font-size:14px
}
.about-pro .bullets{list-style:none;margin:8px 0 0;padding:0;color:#cbd5e2}
.about-pro .bullets li{display:flex;gap:10px;margin:6px 0}
.about-pro .bullets i{color:var(--accent-2);margin-top:3px}

/* media 4-up */
.about-pro__media{
  display:grid;gap:14px;align-content:start;
  grid-template-columns:1fr 1fr;
}
@media (max-width:980px){ .about-pro__media{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .about-pro__media{grid-template-columns:1fr} }

.about-pro__media .cap{
  position:relative;display:block;overflow:hidden;border-radius:16px;
  border:1px solid var(--border);background:#000;aspect-ratio:16/10;
  transition:transform .25s ease, box-shadow .25s ease;
}
.about-pro__media .cap:hover{transform:translateY(-2px)}
.about-pro__media .cap img{
  width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.9);
  background:transparent; /* กันเส้นขาว */
}
.about-pro__media .overlay{
  position:absolute;inset:auto 0 0 0;padding:14px;
  background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,0));
  color:var(--text)
}
.about-pro__media .overlay h3{margin:0 0 4px;font-size:1.05rem}
.about-pro__media .overlay p{margin:0;color:#cbd5e2}

/* ========= TIMELINE ========= */
/* ================= TIMELINE ================= */
.timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40px 0 14px;
}

.timeline-head h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
}

.tl-ctrl {
  display: flex;
  gap: 8px;
}

.tl-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  cursor: pointer;
  transition: background .3s;
}
.tl-btn:hover { background: rgba(255, 255, 255, .08); }

.tl-wrap {
  margin-top: 12px;
  position: relative;
}

/* --- Scroll Row --- */
.tl-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges;
}
.tl-track::-webkit-scrollbar { height: 0; }
.tl-track { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Timeline Card --- */
.tl-card {
  min-width: 320px;
  max-width: 420px;
  scroll-snap-align: start;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(35,211,255,.2);
}
.tl-card.current { outline: 1.6px solid rgba(35,211,255,.55); }

.tl-media {
  aspect-ratio: 16/9;
  background: #0b0f17;
}
.tl-media.square { aspect-ratio: 1/1; }
.tl-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tl-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
}
.tl-body .year {
  font-weight: 800;
  font-size: .95rem;
  color: #9fb0c8;
  margin-bottom: 4px;
}
.tl-body h4 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
}
.tl-body p {
  margin: 0;
  color: #cbd5e2;
  font-size: .95rem;
  line-height: 1.5;
}

@media (max-width: 680px) {
  .tl-card { min-width: 82vw; }
}

/* ================= ABOUT TIMELINE ================= */
.about-pro__timeline {
  margin-top: 60px;
  position: relative;
}

/* Head */
.ap-tl__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.ap-tl__title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
}

/* Controls */
.ap-tl__controls {
  display: flex;
  gap: 8px;
}
.ap-tl__btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  cursor: pointer;
  transition: background .3s;
}
.ap-tl__btn:hover {
  background: rgba(255, 255, 255, .08);
}

/* Wrapper */
.ap-tl__wrap {
  margin-top: 12px;
  position: relative;
}

/* Track (แนวนอนเลื่อน) */
.ap-tl__track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges;
}
.ap-tl__track::-webkit-scrollbar { height: 0; }
.ap-tl__track { -ms-overflow-style: none; scrollbar-width: none; }

/* Card */
.ap-tl__card {
  min-width: 320px;
  max-width: 420px;
  scroll-snap-align: start;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ap-tl__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(35,211,255,.2);
}
.ap-tl__card.is-current {
  outline: 1.6px solid rgba(35,211,255,.55);
}

/* Body */
.ap-tl__body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
}
.ap-tl__year {
  font-weight: 800;
  font-size: .95rem;
  color: #9fb0c8;
  margin-bottom: 4px;
}
.ap-tl__body h4 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
}
.ap-tl__body p {
  margin: 0;
  color: #cbd5e2;
  font-size: .95rem;
  line-height: 1.5;
}

/* Progress Bar */
.ap-tl__progress {
  height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  margin-top: 12px;
  position: relative;
}
.ap-tl__bar {
  display: block;
  width: 30%;
  height: 100%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: inherit;
  transition: width .3s ease;
}

@media (max-width: 680px) {
  .ap-tl__card { min-width: 82vw; }
}

/* ตัว container ของรูป */
/* Media */
.ap-tl__media {
  width: 100%;
  aspect-ratio: 16/9;   /* ✅ บังคับทุกการ์ดเป็นสัดส่วน 16:9 */
  background: #0b0f17;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

/* รูปภาพ */
.ap-tl__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* ✅ ครอบเต็ม แต่ไม่บิดสัดส่วน */
  display: block;
}