html { scroll-behavior: smooth; }
body {
  font-family: 'IBM Plex Sans Thai','Inter',ui-sans-serif,system-ui;
  color: #4D4D4D;
}

/* Brand gradients */
.grad-brand   { background-image: linear-gradient(135deg,#00AEEF 0%,#004B87 45%,#76C143 100%); }
.grad-cool    { background-image: linear-gradient(135deg,#00AEEF 0%,#004B87 100%); }
.grad-earth   { background-image: linear-gradient(135deg,#004B87 0%,#00AEEF 100%); }
.grad-growth  { background-image: linear-gradient(135deg,#76C143 0%,#004B87 100%); }
.grad-warm    { background-image: linear-gradient(135deg,#76C143 0%,#00AEEF 100%); }
.grad-text    { background-image: linear-gradient(90deg,#00AEEF,#76C143); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-border  { background: linear-gradient(135deg,#00AEEF,#76C143); }

/* Decorative mesh background */
.mesh { position: relative; }
.mesh::before {
  content: ""; position: absolute; inset: -20%; z-index: 0;
  background:
    radial-gradient(40% 30% at 15% 20%, rgba(0,174,239,.35), transparent 60%),
    radial-gradient(35% 30% at 85% 10%, rgba(118,193,67,.28), transparent 60%),
    radial-gradient(45% 35% at 70% 80%, rgba(0,75,135,.45), transparent 60%);
  filter: blur(30px);
}

/* Map/grid decoration */
.map-grid {
  background-image:
    linear-gradient(rgba(0,174,239,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,174,239,.12) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Cards */
.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(0,75,135,.35); }

/* Language toggle */
[data-en] { display: none; }
html[data-lang="en"] [data-th] { display: none; }
html[data-lang="en"] [data-en] { display: inline; }
html[data-lang="en"] [data-en-block] { display: block; }

/* PRO badge */
.badge-pro {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  padding: 2px 7px; border-radius: 9999px;
  background: linear-gradient(135deg,#00AEEF,#76C143); color: #fff;
  text-transform: uppercase;
}
.badge-lock {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 9999px;
  background: #F1F5F9; color: #475569;
}

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px); z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-backdrop.open { display: flex; }

/* Sidebar workflow step */
.wf-step {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .75rem; border-radius: .75rem;
  font-size: .875rem; color: #4D4D4D; cursor: pointer;
  transition: background .15s ease;
}
.wf-step:hover { background: #F1F5F9; }
.wf-step.active {
  background: linear-gradient(135deg,rgba(0,174,239,.12),rgba(0,75,135,.1));
  color: #004B87; font-weight: 600;
}
.wf-step .wf-num {
  width: 1.5rem; height: 1.5rem; border-radius: 9999px;
  background: #E2E8F0; color: #64748B;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.wf-step.active .wf-num { background: #00AEEF; color: #fff; }
.wf-step.done .wf-num { background: #76C143; color: #fff; }

/* Research card */
.res-anchor { scroll-margin-top: 5rem; }

/* iframe loading skeleton */
.iframe-wrap {
  position: relative; border-radius: 1rem; overflow: hidden;
  background: #F8FAFC; border: 1px solid #E2E8F0;
}
.iframe-wrap iframe { display: block; width: 100%; border: 0; }