/* หน้าเริ่มต้นของเว็บใหม่ (deploy-system new-project) ตาม CI ของ Krabi Digital https://brandci.krabitech.com/
   สี ฟอนต์ และ motion มาจาก krabi-tokens.css v1.4 เว็บจริงแทนทั้งโฟลเดอร์ site/ ได้เลย */

@font-face { font-family: "Red Hat Display"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(fonts/red-hat-display-latin-400-900.woff2) format("woff2"); }
@font-face { font-family: "LINE Seed Sans TH"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/line-seed-sans-th-700.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin-400-700.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-sans-thai-thai-400.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-sans-thai-thai-600.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }

:root {
  --kd-navy: #041A53; --kd-blue: #0059FF; --kd-blue-hover: #0047CC; --kd-cyan: #09FFFF; --kd-sky: #7FAEFF;
  --kd-mist: #EEF3FC; --kd-line: #DCE3F0; --kd-slate: #56627F; --kd-ink: #0B1633; --kd-deep: #020E30;
  --kd-font-head: "Red Hat Display", "LINE Seed Sans TH", system-ui, sans-serif;
  --kd-font-body: "Plus Jakarta Sans", "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kd-ease-out: cubic-bezier(.2, .8, .2, 1);
  --kd-dur-fast: 160ms; --kd-dur-slow: 400ms; --kd-stagger: 60ms; --kd-shift: 8px;
  --kd-radius-md: 10px;
  --kd-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--kd-blue);

  /* พื้นเข้มเป็นค่าเริ่มต้น */
  color-scheme: dark;
  --bg: var(--kd-deep);
  --text: #FFFFFF;
  --text-2: rgb(232 238 252 / .84);
  --muted: rgb(201 214 242 / .72);
  --tld: rgb(201 214 242 / .5);
  --beat: var(--kd-cyan);
  --k-stem: #FFFFFF;
  --k-spark: var(--kd-cyan);
  --chip-text: var(--kd-cyan);
  --chip-bg: rgb(9 255 255 / .08);
  --chip-line: rgb(9 255 255 / .32);
  --mesh:
    radial-gradient(60% 70% at 94% 100%, rgb(0 89 255 / .9), transparent 70%),
    radial-gradient(24% 30% at 100% 104%, rgb(9 255 255 / .45), transparent 72%),
    radial-gradient(45% 55% at 68% 74%, rgb(127 174 255 / .16), transparent 70%),
    linear-gradient(135deg, #020E30, #041A53 55%, #062A86);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #FFFFFF;
    --text: var(--kd-navy);
    --text-2: var(--kd-ink);
    --muted: var(--kd-slate);
    --tld: var(--kd-blue);
    --beat: var(--kd-blue);
    --k-stem: var(--kd-navy);
    --k-spark: var(--kd-sky);
    --chip-text: var(--kd-blue-hover);
    --chip-bg: var(--kd-mist);
    --chip-line: rgb(0 89 255 / .25);
    --mesh:
      radial-gradient(60% 70% at 94% 100%, rgb(60 130 255 / .6), transparent 70%),
      radial-gradient(24% 30% at 100% 104%, rgb(0 89 255 / .5), transparent 72%),
      radial-gradient(45% 55% at 68% 74%, rgb(127 174 255 / .25), transparent 70%),
      linear-gradient(135deg, #FFFFFF, #EEF3FC 60%, #E2EAFB);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--text);
  background: var(--bg) fixed;
  background-image: var(--mesh);
  font: 400 1rem/1.7 var(--kd-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* พื้นหลัง Soft Mesh + pixel วาดด้วย starter.js ไม่มี JS ก็ยังเห็น gradient ของ body */
.sky { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* minmax(0, 1fr): ชื่อโดเมนยาวไม่ดันคอลัมน์ให้กว้างกว่าจอ starter.js ย่อขนาดให้พอดีเอง */
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding: max(24px, env(safe-area-inset-top)) clamp(20px, 6vw, 96px) max(24px, env(safe-area-inset-bottom));
}

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.status {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
}
/* อักษรละตินของป้ายใช้ตัวพิมพ์ใหญ่ห่าง +16% ตามแบรนด์ ส่วนภาษาไทยไม่ห่างอักษร */
.status [lang="en"], .chip [lang="en"] { letter-spacing: .16em; text-transform: uppercase; font-size: .6875rem; }
.status .sep { opacity: .5; }
.status > span { white-space: nowrap; }

/* pixel สามช่องไล่ลงขวาล่างตามหาง K กะพริบทีละช่องแบบ loader ของแบรนด์ (1.2 s steps) */
.beat { display: inline-flex; align-items: flex-start; gap: 3px; height: 14px; flex: none; }
.beat i { display: block; width: 7px; height: 7px; border-radius: 1.5px; background: var(--beat); opacity: .18;
  animation: kd-load 1.2s steps(1, end) infinite; }
.beat i:nth-child(2) { width: 6px; height: 6px; margin-top: 4px; animation-delay: .2s; }
.beat i:nth-child(3) { width: 4px; height: 4px; margin-top: 9px; animation-delay: .4s; }
@keyframes kd-load { 0% { opacity: .18; } 25%, 60% { opacity: 1; } 85%, 100% { opacity: .18; } }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--chip-text);
  background: var(--chip-bg);
  box-shadow: inset 0 0 0 1px var(--chip-line);
}
.chip[hidden] { display: none; }

.hero { align-self: center; width: min(100%, 42rem); padding-block: clamp(16px, 5vh, 64px); }

.domain {
  margin: 0;
  font: 800 clamp(2.5rem, 8.5vw, 6.75rem)/1.02 var(--kd-font-head);
  letter-spacing: -.03em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.js .domain { white-space: nowrap; overflow-wrap: normal; }
.domain .tld { color: var(--tld); }

.lead { margin: .7em 0 0; font: 700 clamp(1.375rem, 2.3vw, 2rem)/1.32 var(--kd-font-head); color: var(--text); text-wrap: balance; }
.copy { margin: 1rem 0 0; max-width: 33rem; font-size: clamp(1rem, 1.15vw, 1.125rem); color: var(--text-2); text-wrap: pretty; }
.copy-en { margin: .5rem 0 0; max-width: 33rem; font-size: .9375rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
/* ภาษาไทยไม่มีช่องว่างระหว่างคำ ตัดบรรทัดได้เฉพาะระหว่างวลี คำจึงไม่ขาดกลาง */
.nw { white-space: nowrap; }

.foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

.credit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 6px 4px;
  margin-left: -4px;
  border-radius: var(--kd-radius-md);
  color: inherit;
  text-decoration: none;
  transition: transform var(--kd-dur-fast) var(--kd-ease-out);
}
.credit:hover { transform: translateY(-2px); }
.credit:focus-visible { outline: none; box-shadow: var(--kd-focus); }
.credit svg { width: 32px; height: 32px; flex: none; }
.credit .k-stem { fill: var(--k-stem); }
.credit .k-blue { fill: var(--kd-blue); }
.credit .k-spark { fill: var(--k-spark); }
.credit small { display: block; font-size: .75rem; line-height: 1.4; color: var(--muted); }
.credit b { display: block; font: 700 .9375rem/1.3 var(--kd-font-head); letter-spacing: -.01em; color: var(--text); }
/* Stem นิ่ง pixel เคลื่อน: ชี้แล้ว pixel ของ K กะพริบแบบ loader */
.credit:hover .k-px, .credit:focus-visible .k-px { animation: kd-load 1.2s steps(1, end) infinite; }
.credit .k-px2 { animation-delay: .2s !important; }
.credit .k-px3 { animation-delay: .4s !important; }

/* ปุ่มหลักของหน้า 404 (Primary Blue หน้าละปุ่มเดียว) */
.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 12px 20px;
  border-radius: var(--kd-radius-md);
  background: var(--kd-blue);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--kd-dur-fast) var(--kd-ease-out), background-color 100ms linear;
}
.button:hover { background: var(--kd-blue-hover); transform: translateY(-2px); }
.button:focus-visible { outline: none; box-shadow: var(--kd-focus); }

/* เข้าแบบนุ่มทีละชิ้น เลื่อนขึ้นไม่เกิน 8 px (บทที่ 12) */
.rise { animation: kd-rise var(--kd-dur-slow) var(--kd-ease-out) both; }
.d1 { animation-delay: 80ms; }
.d2 { animation-delay: calc(80ms + var(--kd-stagger)); }
.d3 { animation-delay: calc(80ms + 2 * var(--kd-stagger)); }
.d4 { animation-delay: calc(80ms + 3 * var(--kd-stagger)); }
.d5 { animation-delay: calc(80ms + 4 * var(--kd-stagger)); }
@keyframes kd-rise { from { opacity: 0; transform: translateY(var(--kd-shift)); } }

@media (max-width: 420px) {
  .status .sep, .status [lang="en"] { display: none; }
}

@media (max-width: 640px) {
  .page { gap: 24px; }
  .hero { padding-block: 8px 24px; }
  .lead { font-size: 1.375rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .beat i { opacity: 1; }
  .beat i:nth-child(2) { opacity: .6; }
  .beat i:nth-child(3) { opacity: .35; }
  .credit:hover { transform: none; }
}