@font-face {
  font-family: Kanit;
  src: url("assets/kanit-thai-400.woff2");
}
@font-face {
  font-family: Kanit;
  src: url("assets/kanit-thai-700.woff2");
  font-weight: 700;
}
@font-face {
  font-family: Noto;
  src: url("assets/noto-sans-thai-thai-400.woff2");
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #f6f4ef;
  color: #1f1c19;
  font-family: Noto, system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.aurora {
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.45;
  z-index: -1;
}
.aurora.one {
  width: 520px;
  height: 520px;
  background: #ff9f75;
  left: -180px;
  top: -150px;
}
.aurora.two {
  width: 520px;
  height: 520px;
  background: #74d8c6;
  right: -180px;
  top: 40px;
}
.pl-header {
  width: min(1240px, calc(100% - 32px));
  margin: 18px auto;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 55px rgba(47, 39, 30, 0.08);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  position: sticky;
  top: 10px;
  z-index: 20;
}
.pl-brand img {
  display: block;
  width: 132px;
  height: auto;
}
.pl-header nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
}
.pl-header a {
  text-decoration: none;
  color: #49433e;
  font-size: 14px;
}
.pl-header nav a.active {
  color: #cc6746;
  font-weight: 700;
}
.login {
  border: 1px solid #d9d2c9;
  padding: 10px 16px;
  border-radius: 14px;
}
.pl-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid #d9d2c9;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
  color: #312b27;
  font: 700 13px Noto, system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.pl-theme-toggle span { font-size: 17px; line-height: 1; }
main {
  width: min(1180px, calc(100% - 32px));
  margin: auto;
}
.hero {
  display: grid;
  grid-template-columns: 1.6fr 0.7fr;
  gap: 28px;
  align-items: center;
  padding: 82px 0 42px;
}
.eyebrow,
.builder-head span,
.result-head span,
.locked > span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #c76545;
}
.hero h1 {
  font: 700 clamp(42px, 6vw, 76px) / 1.06 Kanit;
  margin: 14px 0;
}
.hero h1 em {
  font-style: normal;
  color: #c86545;
}
.hero p {
  font-size: 19px;
  line-height: 1.75;
  color: #625b55;
  max-width: 780px;
}
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-badges span {
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #fff;
  font-size: 13px;
}
.quota-card,
.builder,
.result,
.locked,
.trust {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #fff;
  box-shadow: 0 24px 80px rgba(56, 44, 32, 0.09);
  backdrop-filter: blur(20px);
  border-radius: 30px;
}
.quota-card {
  padding: 30px;
}
.quota-card small {
  color: #746c64;
}
.quota-card strong {
  display: block;
  font: 700 52px Kanit;
  margin: 8px 0;
}
.quota-dots {
  display: flex;
  gap: 8px;
}
.quota-dots i {
  width: 44px;
  height: 8px;
  border-radius: 99px;
  background: #d26d4c;
}
.quota-dots i.used {
  background: #ddd5cc;
}
.quota-card p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 0;
}
.builder {
  padding: 34px;
  margin-bottom: 30px;
}
.builder-head,
.result-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 26px;
}
.builder h2,
.result h2,
.locked h2,
.trust h2 {
  font: 700 32px/1.25 Kanit;
  margin: 5px 0;
}
form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field.wide {
  grid-column: 1/-1;
}
.field label {
  font-weight: 700;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid #dcd5cd;
  background: #fffdfa;
  border-radius: 16px;
  padding: 15px 16px;
  font: inherit;
  color: #28231f;
  outline: none;
}
.field textarea {
  min-height: 105px;
  resize: vertical;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: #d06c4b;
  box-shadow: 0 0 0 4px rgba(208, 108, 75, 0.12);
}
.field small {
  align-self: flex-end;
  color: #837a71;
}
.submit-row {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}
.submit-row p {
  font-size: 13px;
  color: #736c65;
}
.primary,
.ghost,
.result-tabs button {
  border: 0;
  border-radius: 16px;
  padding: 14px 20px;
  font: 700 16px Kanit;
  cursor: pointer;
}
.primary {
  background: linear-gradient(135deg, #1d1a18, #3c332d);
  color: #fff;
  box-shadow: 0 12px 30px rgba(31, 28, 25, 0.2);
}
.primary:hover {
  transform: translateY(-1px);
}
.ghost {
  background: #f0ebe5;
  color: #514943;
}
.result {
  padding: 34px;
  margin: 28px 0;
}
.hidden {
  display: none !important;
}
.score {
  padding: 12px 18px;
  border-radius: 18px;
  background: #f2ece5;
  text-align: right;
}
.score small {
  display: block;
}
.score strong {
  font: 700 23px Kanit;
}
.result-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.result-tabs button {
  background: #ede7e0;
  color: #5c544d;
  padding: 10px 15px;
  font-size: 14px;
}
.result-tabs button.active {
  background: #d16c4b;
  color: #fff;
}
.prompt-box {
  border-radius: 22px;
  background: #171513;
  color: #f7f1eb;
  overflow: hidden;
}
.prompt-box pre {
  white-space: pre-wrap;
  word-break: break-word;
  padding: 26px;
  margin: 0;
  font: 15px/1.85 Noto;
  min-height: 260px;
}
.prompt-actions {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid #342f2a;
}
.prompt-actions .ghost {
  background: #302b27;
  color: #fff;
}
.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 14px;
  font-size: 13px;
  color: #70675f;
}
.locked {
  text-align: center;
  padding: 50px 26px;
  margin: 30px 0;
}
.locked p {
  color: #6d655e;
}
.locked > div {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.link-btn,
.line-btn {
  display: inline-block;
  text-decoration: none;
  padding: 14px 22px;
  border-radius: 16px;
}
.line-btn {
  background: #18b85a;
  color: #fff;
}
.how {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 44px 0;
}
.how > div {
  padding: 24px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid #fff;
  border-radius: 22px;
}
.how span {
  display: block;
  color: #cb6847;
  font-weight: 700;
}
.how b {
  display: block;
  font: 700 21px Kanit;
  margin: 8px 0;
}
.how p {
  color: #716961;
  margin: 0;
}
.trust {
  text-align: center;
  padding: 38px;
  margin: 30px 0 70px;
}
.trust p {
  max-width: 720px;
  margin: 8px auto;
  color: #6c645d;
  line-height: 1.7;
}
footer {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px;
  color: #6f675f;
  border-top: 1px solid #ddd5cc;
}
footer a {
  color: #473f39;
  text-decoration: none;
}
@media (max-width: 850px) {
  .pl-header nav {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
    padding-top: 48px;
  }
  .quota-card {
    max-width: 440px;
  }
  .builder {
    padding: 22px;
  }
  form {
    grid-template-columns: 1fr;
  }
  .field.wide,
  .submit-row {
    grid-column: auto;
  }
  .submit-row {
    align-items: stretch;
    flex-direction: column;
  }
  .how {
    grid-template-columns: 1fr;
  }
  .builder-head,
  .result-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .hero h1 {
    font-size: 44px;
  }
  .pl-header {
    gap: 10px;
  }
  .login {
    margin-left: 0;
  }
  .result {
    padding: 22px;
  }
  .prompt-box pre {
    padding: 20px;
    font-size: 14px;
  }
}

@media (max-width: 520px) {
  .pl-header { width: calc(100% - 20px); padding: 10px 12px; border-radius: 20px; }
  .pl-brand img { width: 112px; }
  .pl-theme-toggle { margin-left: auto; min-width: 42px; padding: 9px 10px; }
  .pl-theme-toggle b { display: none; }
  .login { padding: 9px 11px; font-size: 13px !important; }
}

/* Shared SEO8U dark mode — follows the choice made on every page. */
html.dark-theme body { background: #050816; color: #f5f7ff; }
html.dark-theme .aurora.one { background: #7c3aed; opacity: .28; }
html.dark-theme .aurora.two { background: #06b6d4; opacity: .22; }
html.dark-theme .pl-header {
  background: rgba(4, 8, 24, .82);
  border-color: rgba(103, 232, 249, .18);
  box-shadow: 0 16px 55px rgba(0, 0, 18, .35);
}
html.dark-theme .pl-header a { color: #dbe5ff; }
html.dark-theme .pl-header nav a.active { color: #67e8f9; }
html.dark-theme .login,
html.dark-theme .pl-theme-toggle {
  color: #f5f7ff;
  border-color: rgba(103, 232, 249, .25);
  background: rgba(255, 255, 255, .055);
}
html.dark-theme .eyebrow,
html.dark-theme .builder-head span,
html.dark-theme .result-head span,
html.dark-theme .locked > span { color: #67e8f9; }
html.dark-theme .hero h1 em { color: #c084fc; }
html.dark-theme .hero p,
html.dark-theme .quota-card p,
html.dark-theme .submit-row p,
html.dark-theme .locked p,
html.dark-theme .how p,
html.dark-theme .trust p { color: #aebbd3; }
html.dark-theme .hero-badges span,
html.dark-theme .quota-card,
html.dark-theme .builder,
html.dark-theme .result,
html.dark-theme .locked,
html.dark-theme .trust,
html.dark-theme .how > div {
  background: rgba(10, 18, 43, .82);
  border-color: rgba(103, 232, 249, .16);
  color: #f5f7ff;
  box-shadow: 0 20px 70px rgba(0, 0, 18, .28);
}
html.dark-theme .field input,
html.dark-theme .field textarea,
html.dark-theme .field select,
html.dark-theme .prompt-box,
html.dark-theme .prompt-box pre {
  background: #091127;
  border-color: rgba(103, 232, 249, .18);
  color: #edf5ff;
}
html.dark-theme .field input::placeholder,
html.dark-theme .field textarea::placeholder { color: #71809d; }
html.dark-theme .field small,
html.dark-theme .result-meta,
html.dark-theme footer { color: #94a3bd; }
html.dark-theme footer { border-color: rgba(103, 232, 249, .13); }
html.dark-theme footer a { color: #dce8ff; }
html.dark-theme .ghost,
html.dark-theme .result-tabs button { color: #dce8ff; border-color: rgba(103, 232, 249, .2); }
html.dark-theme .result-tabs button.active { color: #07111d; background: #67e8f9; }

.hero-service-link {
  display: inline-block;
  margin-top: 22px;
  color: #a84f35;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 79, 53, 0.35);
  padding-bottom: 3px;
}
.hero-service-link:hover {
  color: #6d2c1c;
}
.team-service {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
  gap: 24px;
  margin: 44px 0;
  padding: 38px;
  border-radius: 30px;
  background: linear-gradient(135deg, #1d1a18, #44342b);
  color: #fff;
  box-shadow: 0 28px 75px rgba(48, 34, 25, 0.2);
}
.team-service-copy > span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: #ffad8d;
}
.team-service h2 {
  font: 700 34px/1.25 Kanit;
  margin: 10px 0;
}
.team-service p {
  color: #e3d8d0;
  line-height: 1.75;
}
.team-service .line-btn {
  margin-top: 10px;
}
.team-deliverables {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
}
.team-deliverables b {
  font: 700 19px Kanit;
  margin-bottom: 3px;
}
.team-deliverables span {
  color: #f6ede7;
  font-size: 14px;
}
.team-deliverables small {
  color: #c8bab0;
  line-height: 1.6;
  margin-top: 5px;
}
@media (max-width: 850px) {
  .team-service {
    grid-template-columns: 1fr;
    padding: 26px 22px;
  }
  .team-service h2 {
    font-size: 29px;
  }
}