/* ═══ PhuketNext Homepage Styles ═══ */

/* ─── Hero ─── */
.hero-split {
  height: 82vh;
  min-height: 520px;
  max-height: 900px;
  overflow: hidden;
  position: relative;
  background: #0a0f1a;
}
.hero-split picture,
.hero-split .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-img {
  object-fit: cover;
  filter: brightness(.4) saturate(1.05);
}
.hero-overlay {
  background: linear-gradient(105deg, rgba(10,15,26,.92) 0%, rgba(10,15,26,.75) 45%, rgba(10,15,26,.55) 100%);
  z-index: 1;
}
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 2;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(14,165,233,.2);
  border: 1px solid rgba(56,189,248,.4);
  color: #7dd3fc;
  padding: .45rem 1rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.hero-title {
  font-size: clamp(1.85rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.hero-title .text-accent {
  color: #38bdf8;
  display: block;
  margin-top: .25rem;
}
.hero-lead {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: #e2e8f0;
  margin: 1.25rem 0 0;
  max-width: 560px;
  line-height: 1.7;
}
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}
/* ปุ่มบน hero – ชัดเจนบนพื้นมืด */
.hero-split .pn-btn-ghost {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35);
  color: #ffffff !important;
}
.hero-split .pn-btn-ghost:hover {
  background: rgba(255,255,255,.22);
  color: #fff !important;
}
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.15);
}
.hero-stat strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
}
.hero-stat span {
  font-size: .85rem;
  color: #cbd5e1;
}

/* ─── Highlights ─── */
#highlights {
  background: #f8fafc;
  padding: 5rem 0;
}
.hi-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  height: 100%;
  transition: all .3s;
}
.hi-card:hover {
  box-shadow: 0 20px 50px rgba(15,23,42,.1);
  transform: translateY(-4px);
  border-color: rgba(14,165,233,.3);
}
.hi-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  color: #fff;
  margin: 0 auto 1.25rem;
}
.bg-grad-primary { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.bg-grad-success { background: linear-gradient(135deg, #10b981, #059669); }
.bg-grad-warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
.hi-card h3 { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin-bottom: .5rem; }
.hi-card p { font-size: .9rem; color: #64748b; margin: 0; line-height: 1.6; }

/* ─── Sections bg ─── */
#services { background: #fff; }
#info { background: #f8fafc; }
#packages { background: #fff; }
#portfolio { background: #f8fafc; }
#contact { background: #fff; }

/* ─── Core Web Vitals (แก้ contrast – ไม่ใช้ Bootstrap .lead/.card) ─── */
#core-web-vitals {
  background: linear-gradient(160deg, #0c1929 0%, #1e3a5f 100%);
  color: #f1f5f9;
  padding: 5rem 0;
}
#core-web-vitals .cwv-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: .75rem;
}
#core-web-vitals .cwv-title span {
  color: #38bdf8;
}
#core-web-vitals .cwv-lead {
  color: #cbd5e1;
  font-size: 1.1rem;
  max-width: 640px;
  margin: 0 auto 3rem;
}
#core-web-vitals .cwv-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  transition: all .25s;
  color: #f1f5f9;
}
#core-web-vitals .cwv-card:hover {
  background: rgba(255,255,255,.14);
  transform: translateY(-4px);
}
#core-web-vitals .cwv-card h5 {
  color: #ffffff;
  font-weight: 700;
}
#core-web-vitals .cwv-card p {
  color: #cbd5e1;
}
#core-web-vitals .cwv-card .text-primary { color: #38bdf8 !important; }
#core-web-vitals .cwv-card .text-warning { color: #fbbf24 !important; }
#core-web-vitals .cwv-card .text-success { color: #34d399 !important; }
#core-web-vitals .cwv-card .text-danger  { color: #f87171 !important; }
#core-web-vitals .cwv-steps li {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  font-size: .95rem;
  color: #e2e8f0;
}
#core-web-vitals .cwv-steps li strong { color: #fff; }
#core-web-vitals .cwv-steps li span {
  flex: 0 0 36px; height: 36px; border-radius: 50%;
  background: #0ea5e9;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; margin-right: 12px; font-size: .85rem;
}
#core-web-vitals .cwv-cta-box {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  padding: 2rem;
  margin-top: 3rem;
  text-align: center;
  color: #f1f5f9;
}
#core-web-vitals .cwv-cta-box h3 {
  color: #ffffff;
  font-weight: 700;
}
#core-web-vitals .cwv-cta-box p {
  color: #cbd5e1;
}
#core-web-vitals .cwv-cta-box .price {
  color: #34d399;
  font-weight: 800;
}

/* ─── llms.txt section (class แยกจาก Bootstrap) ─── */
.llms-pro {
  padding: 5rem 1rem;
  background: #0a0f1a;
  color: #e2e8f0;
}
.llms-pro .wrap { max-width: 1100px; margin: 0 auto; }
.llms-pro .head { text-align: center; margin-bottom: 2.5rem; }
.llms-pro .eyebrow {
  display: inline-block;
  background: #22d3ee;
  color: #0a0f1a;
  font-weight: 700;
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .8rem;
  margin-bottom: .75rem;
}
.llms-pro h2 {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 800;
  margin: 0;
  color: #ffffff;
}
.llms-pro h2 .llms-highlight { color: #38bdf8; }
.llms-pro .llms-lead {
  color: #cbd5e1;
  max-width: 700px;
  margin: .75rem auto 1rem;
  font-size: 1.05rem;
  line-height: 1.7;
}
.llms-badges {
  display: flex; gap: .5rem; flex-wrap: wrap;
  justify-content: center; margin-bottom: 1.25rem;
}
.llms-badge {
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .8rem;
  color: #94a3b8;
  background: rgba(255,255,255,.04);
}
.llms-ctas {
  display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap;
}
.llms-btn {
  display: inline-flex; align-items: center;
  padding: .7rem 1.35rem; border-radius: 10px;
  text-decoration: none; font-weight: 700; font-size: .9rem;
}
.llms-btn-primary { background: #0ea5e9; color: #fff !important; }
.llms-btn-primary:hover { background: #0284c7; color: #fff !important; }
.llms-btn-ghost {
  border: 1px solid rgba(255,255,255,.25);
  color: #e2e8f0 !important;
  background: transparent;
}
.llms-btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff !important; }
.llms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}
.llms-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 1.5rem;
  color: #e2e8f0;
}
.llms-card-wide { grid-column: 1 / -1; }
.llms-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 .75rem;
  color: #ffffff;
}
.llms-card a { color: #38bdf8; }
.llms-check { list-style: none; padding: 0; margin: 0; }
.llms-check li {
  padding-left: 1.5rem; position: relative;
  margin: .5rem 0; color: #cbd5e1; font-size: .9rem;
}
.llms-check li::before {
  content: "✓"; position: absolute; left: 0;
  color: #34d399; font-weight: 700;
}
.llms-steps { margin: 0 0 0 1.25rem; color: #cbd5e1; }
.llms-steps a { color: #38bdf8; }
.llms-code {
  background: rgba(0,0,0,.35);
  border-radius: 10px;
  padding: 1rem;
  overflow: auto;
  font-size: .8rem;
  color: #94a3b8;
  border: 1px solid rgba(255,255,255,.08);
}
.llms-ads { margin-top: 2rem; }
.llms-ads-inner {
  background: rgba(255,255,255,.05);
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 1.5rem 2rem;
  text-align: center;
}
.llms-ads-inner h3 { color: #fff; margin: 0 0 .5rem; }
.llms-ads-inner p { color: #94a3b8; margin: 0; }

/* Service cards */
#services .card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  transition: all .25s;
}
#services .card:hover {
  box-shadow: 0 16px 40px rgba(15,23,42,.08);
  transform: translateY(-4px);
}

.step-number {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.step-cir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  color: #fff; font-weight: 700;
}
.seo-intro { background: #f8fafc; }
.section-title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 2rem;
  color: #0f172a;
}
.why-card {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  transition: all .25s;
}
.why-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-3px); }

@media (max-width: 980px) {
  .llms-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 1.25rem; }
  .hero-split { min-height: 480px; }
}