:root {
  --bg: #021E18; --bg2: #03241C; --bg3: #042E23;
  --surface: #003B2D; --surface2: #0A4A38;
  --green: #59C3BA; --amber: #F3B45E;
  --white: #D9DFD9; --white2: #B8C4BD; --muted: #7FA493;
  --border: rgba(27, 122, 90, .32); --border2: rgba(89, 195, 186, .35);
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
  --radius: 16px; --shell: 1180px; --gutter: clamp(1rem, 5vw, 2.5rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--bg); color: var(--white); font-family: "Noto Sans Thai", "Prompt", "Leelawadee UI", system-ui, sans-serif; line-height: 1.7; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ul { margin-top: 0; }
.shell { width: min(var(--shell), calc(100% - (var(--gutter) * 2))); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; left: 12px; top: 12px; transform: translateY(-180%); background: var(--amber); color: #14241f; padding: 10px 16px; border-radius: 10px; font-weight: 800; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
.site-header { position: sticky; z-index: 40; top: 0; height: 68px; border-bottom: 1px solid var(--border); background: rgba(2, 30, 24, .92); backdrop-filter: blur(18px); }
.header-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { min-height: 44px; display: inline-flex; align-items: center; }
.brand img { width: 148px; height: auto; }
nav { display: flex; align-items: center; gap: 8px; }
nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 9px; color: var(--white2); font-size: .88rem; text-decoration: none; }
nav a:hover, nav a[aria-current] { background: rgba(89, 195, 186, .11); color: var(--green); }
.hero { position: relative; min-height: calc(100svh - 68px); display: grid; align-items: center; isolation: isolate; overflow: hidden; }
.hero-image, .hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { z-index: -3; object-fit: cover; object-position: center; }
.hero-overlay { z-index: -2; background: linear-gradient(90deg, rgba(2, 30, 24, .98) 0%, rgba(2, 30, 24, .88) 45%, rgba(2, 30, 24, .38) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 28%); }
.hero-content { padding-block: 76px 92px; }
.eyebrow { margin-bottom: 10px; color: var(--green); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.client-pill, .recommend-badge { display: inline-flex; width: fit-content; min-height: 30px; align-items: center; border: 1px solid rgba(243, 180, 94, .45); border-radius: 999px; background: rgba(243, 180, 94, .1); color: var(--amber); padding: 3px 11px; font-size: .82rem; font-weight: 800; }
h1, h2, h3, strong { text-wrap: balance; }
h1 { max-width: 900px; margin: 16px 0 20px; font-size: clamp(2.55rem, 6vw, 5.4rem); line-height: 1.02; letter-spacing: -.045em; }
.hero-copy { max-width: 720px; color: var(--white2); font-size: clamp(1rem, 1.5vw, 1.2rem); }
.hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 28px; }
.button, .text-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; text-decoration: none; }
.button { border-radius: 11px; background: var(--amber); color: #173128; padding: 0 20px; box-shadow: 0 12px 34px rgba(243, 180, 94, .2); }
.text-link { color: var(--green); border-bottom: 1px solid rgba(89, 195, 186, .45); }
.review-label { margin: 22px 0 0; color: var(--muted); font-size: .88rem; }
.metrics { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: -44px; border: 1px solid var(--border2); border-radius: var(--radius); background: rgba(0, 59, 45, .94); box-shadow: var(--shadow); }
.metrics article { min-width: 0; padding: 24px; border-right: 1px solid var(--border); }
.metrics article:last-child { border: 0; }
.metrics strong { display: block; color: var(--amber); font-size: clamp(1.25rem, 2.2vw, 2rem); line-height: 1.2; }
.metrics span { color: var(--white2); font-size: .88rem; }
.section { padding-block: clamp(70px, 9vw, 120px); }
.surface { border-block: 1px solid var(--border); background: linear-gradient(145deg, var(--bg2), var(--bg3)); }
.section-heading { max-width: 780px; margin-bottom: 42px; }
.section-heading h2 { margin-bottom: 14px; font-size: clamp(2rem, 4.5vw, 3.8rem); line-height: 1.08; letter-spacing: -.035em; }
.section-heading > p:last-child { color: var(--white2); }
.executive-copy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.executive-copy p { margin: 0; padding: 28px; background: var(--bg2); color: var(--white2); }
.strength-grid, .audience-grid, .plan-grid, .forecast-grid, .destination-grid, .roadmap-grid, .next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.strength-grid article, .audience-card, .plan-card, .forecast-card, .destination-grid article, .roadmap-grid article, .next-grid article, .campaign-card, .decision-grid article, .conversion-grid article { border: 1px solid var(--border); border-radius: var(--radius); background: rgba(0, 59, 45, .58); padding: 26px; }
.strength-grid article > strong { display: block; color: var(--amber); font-size: 2.3rem; line-height: 1.1; }
.strength-grid h3, .audience-card h3, .campaign-card h3, .destination-grid h3, .roadmap-grid h3, .next-grid h3 { margin: 14px 0 8px; }
.strength-grid p, .audience-card p, .campaign-card p, .destination-grid li, .roadmap-grid li, .next-grid p { color: var(--white2); }
.media-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px; margin-top: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(2, 30, 24, .62); padding: 20px; }
.media-panel > * { min-width: 0; }
.media-panel > img { width: 100%; height: 100%; min-height: 420px; border-radius: 12px; object-fit: cover; }
.media-panel h3 { font-size: clamp(1.55rem, 3vw, 2.5rem); line-height: 1.15; }
.demand-table { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; }
.demand-row { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: .88rem; }
.demand-row:last-child { border: 0; }
.demand-row span { color: var(--white2); }
.demand-head { background: var(--surface); color: var(--green); font-weight: 800; }
.note { margin: 16px 0 0; color: var(--muted); font-size: .83rem; }
.audience-card > span, .campaign-card > span, .destination-grid article > span, .checklist span, .next-grid article > span { color: var(--green); font: 700 .8rem ui-monospace, monospace; letter-spacing: .12em; }
.audience-card > strong { display: block; margin-top: 18px; color: var(--amber); }
.campaign-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.campaign-card b { color: var(--green); }
.plan-grid { align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; }
.plan-card.is-recommended { transform: translateY(-12px); border-color: var(--amber); background: linear-gradient(155deg, rgba(10, 74, 56, .98), rgba(0, 59, 45, .84)); box-shadow: 0 28px 70px rgba(0, 0, 0, .25); }
.recommend-badge { position: absolute; right: 20px; top: 18px; margin: 0; }
.plan-name { margin-bottom: 4px; color: var(--green); font-size: .82rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.plan-card h3 { margin: 8px 0; color: var(--amber); font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1; }
.plan-card h3 small { display: block; margin-top: 9px; color: var(--muted); font-size: .85rem; }
.plan-label { min-height: 3.4em; color: var(--white); font-weight: 800; }
.plan-card > p:not(.plan-name):not(.recommend-badge):not(.plan-label) { color: var(--white2); }
.allocation-list, .forecast-card ul { list-style: none; margin: auto 0 0; padding: 18px 0 0; }
.allocation-list li, .forecast-card li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border); }
.allocation-list span, .forecast-card span { color: var(--white2); font-size: .86rem; }
.allocation-list strong, .forecast-card strong { white-space: nowrap; color: var(--white); font-size: .88rem; }
.forecast-card.is-recommended { border-color: rgba(243, 180, 94, .55); }
.forecast-card h3 { color: var(--amber); }
.planning-panel, .conversion-grid, .decision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.planning-panel > div { border-left: 3px solid var(--green); background: rgba(2, 30, 24, .55); padding: 22px; }
.planning-panel li, .planning-panel p, .decision-grid li { color: var(--white2); }
.funnel { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 32px; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; }
.funnel span { position: relative; min-height: 100px; display: flex; flex-direction: column; justify-content: center; padding: 16px; border-right: 1px solid var(--border); text-align: center; }
.funnel span:last-child { border: 0; }
.funnel b { color: var(--green); font: 700 .75rem ui-monospace, monospace; }
.destination-grid ul, .roadmap-grid ul, .decision-grid ul, .conversion-grid ul { padding-left: 20px; }
.conversion-grid { margin-top: 18px; }
.period, .path-label { color: var(--amber); font-weight: 900; }
.decision-grid article { background: var(--bg2); }
.hold-note { margin-top: 18px; border-left: 3px solid var(--amber); background: rgba(243, 180, 94, .08); padding: 14px; color: var(--white2); }
.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.checklist article { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; border-bottom: 1px solid var(--border); padding: 17px 0; }
.checklist p { margin: 0; color: var(--white2); }
.next-steps { background: radial-gradient(circle at 80% 20%, rgba(89, 195, 186, .13), transparent 35%), var(--surface); }
.next-grid article > span { color: var(--amber); }
.final-callout { display: grid; grid-template-columns: .35fr 1fr; gap: 24px; margin-top: 28px; border: 1px solid rgba(243, 180, 94, .4); border-radius: var(--radius); background: rgba(243, 180, 94, .08); padding: 26px; }
.final-callout strong { color: var(--amber); font-size: 1.25rem; }
.final-callout p { margin: 0; color: var(--white2); }
.source-note { padding-block: 32px; color: var(--muted); font-size: .82rem; }
footer { border-top: 1px solid var(--border); background: #011611; padding-block: 28px; }
footer .shell { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
footer img { width: 132px; }
footer p { margin: 0; color: var(--muted); font-size: .8rem; text-align: right; }
@media (max-width: 960px) {
  nav a:nth-child(-n + 2) { display: none; }
  .metrics, .funnel { grid-template-columns: repeat(2, 1fr); }
  .metrics article:nth-child(2), .funnel span:nth-child(2), .funnel span:nth-child(4) { border-right: 0; }
  .metrics article:nth-child(-n + 2), .funnel span:nth-child(-n + 4) { border-bottom: 1px solid var(--border); }
  .executive-copy, .strength-grid, .audience-grid, .plan-grid, .forecast-grid, .destination-grid, .roadmap-grid, .next-grid { grid-template-columns: 1fr; }
  .media-panel { grid-template-columns: 1fr; }
  .media-panel > img { min-height: 300px; max-height: 430px; }
  .plan-card.is-recommended { transform: none; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 68px; }
  .brand img { width: 124px; }
  nav { gap: 0; }
  nav a { padding-inline: 8px; font-size: .79rem; }
  nav a:nth-child(-n + 4) { display: none; }
  .hero-overlay { background: linear-gradient(0deg, rgba(2, 30, 24, .98) 0%, rgba(2, 30, 24, .85) 66%, rgba(2, 30, 24, .55) 100%); }
  .hero-content { padding-block: 44px 58px; }
  h1 { font-size: clamp(2.05rem, 10vw, 3.2rem); }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .button, .text-link { width: 100%; }
  .metrics { margin-top: -24px; grid-template-columns: 1fr 1fr; }
  .metrics article { padding: 17px; }
  .metrics strong { font-size: 1.18rem; }
  .section { padding-block: 68px; }
  .section-heading { margin-bottom: 28px; }
  .section-heading h2 { font-size: clamp(1.85rem, 9vw, 2.7rem); }
  .campaign-grid, .planning-panel, .conversion-grid, .decision-grid, .checklist { grid-template-columns: 1fr; }
  .demand-table { overflow-x: auto; }
  .demand-row { min-width: 610px; }
  .funnel { grid-template-columns: 1fr 1fr; }
  .funnel span { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .funnel span:nth-child(2n) { border-right: 0; }
  .funnel span:nth-last-child(-n + 2) { border-bottom: 0; }
  .final-callout { grid-template-columns: 1fr; }
  footer .shell { align-items: flex-start; flex-direction: column; }
  footer p { text-align: left; }
}
@media (max-width: 420px) and (max-height: 900px) {
  .hero { min-height: calc(100svh - 68px); }
  .hero-content { padding-block: 22px 24px; }
  h1 { margin-block: 10px 12px; font-size: clamp(1.82rem, 9vw, 2.25rem); line-height: 1.04; }
  .hero-copy { margin-bottom: 0; font-size: .91rem; line-height: 1.55; }
  .hero-actions { margin-top: 14px; }
  .button, .text-link { min-height: 44px; }
  .review-label { margin-top: 10px; font-size: .74rem; }
  .client-pill { min-height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}