*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background: var(--c-bg);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-thai);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
  overflow-x: clip;
  position: relative; /* containing block for the anchored canvas layer */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-break: strict;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul[role='list'] { list-style: none; padding: 0; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--c-ink);
  color: var(--c-on-ink);
  border-radius: var(--radius-pill);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Canvas: fixed behind content, faded by the narrative ---------- */
.stage-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10; /* above content (stages keep it clear of text), below header and sticky CTA */
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease-soft);
}
.scene-ready .stage-canvas { transition: none; }
/* Touch: a small box placed in page coordinates, so it scrolls natively with the content.
   The layer spans the page and clips the box, so it never widens the layout. */
.agent-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}
.stage-canvas.is-anchored {
  position: absolute;
  inset: auto;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  will-change: transform;
}
.site-header, main, .site-footer { position: relative; z-index: 1; }
/* Hero crew (js/scene/helpers.js): each helper is a small canvas placed in page coordinates, so at
   rest it scrolls natively with the hero. Back layer under MAIN, front layer (tag) over it. */
.crew-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 9; }
.crew-layer--front { z-index: 11; }
.crew-flyer { position: absolute; top: 0; left: 0; visibility: hidden; will-change: transform; }
.no-webgl .crew-layer { display: none; }
.mascot.is-away { visibility: hidden; }

/* Stages are empty layout boxes the agent occupies. */
.stage.stage--mini { width: 112px; height: 112px; min-height: 0; flex: none; margin: -12px 0; }
.in-pricing .agent-dock { display: none; }
.agent-dock {
  position: fixed;
  left: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  width: 76px;
  height: 76px;
  min-height: 0;
  z-index: 5;
  pointer-events: none;
}
@media (max-width: 720px) {
  .stage.stage--mini { width: 76px; height: 76px; margin: -6px 0; }
  /* Phones have no side margin, so the corner companion would sit on text: hide it. */
  .agent-dock { display: none; }
}
.stage { position: relative; min-height: 200px; }
.stage-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  opacity: 1;
  transition: opacity 700ms var(--ease-soft);
}
.scene-ready .stage-still { opacity: 0; }
img.stage-still { object-fit: contain; transform: scale(0.93); pointer-events: none; user-select: none; }

/* Helper characters: drawn by js/scene/helpers.js into their own small canvas; the picture is the
   stand-in until then and the fallback without WebGL. Placement follows the approved mockup. */
.mascot {
  position: absolute;
  display: block;
  z-index: 2;
  aspect-ratio: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mascot__still, .mascot__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.mascot__still { transform: translateY(2.8%) scale(0.91); } /* same size and ground line as the drawn character */
.mascot.is-live .mascot__still { visibility: hidden; }
.mascot:not(.is-live) .mascot__canvas { visibility: hidden; }
.mascot.is-swapping .mascot__canvas, .mascot.is-swapping .mascot__still { opacity: 0; transform: scale(0.86); }
@media (prefers-reduced-motion: no-preference) {
  .mascot__canvas, .mascot__still { transition: opacity 200ms linear, transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1); }
}
.stage--roles .mascot { height: 36%; left: 70%; top: 21%; translate: -50% -50%; }
.stage--settle .mascot { height: 30%; left: 50%; top: 17%; translate: -50% -50%; }
.stage--bridge .mascot { width: min(30%, 220px); max-height: 92%; left: 50%; top: 50%; translate: -50% -50%; }
.stage--mini .mascot { inset: 0; width: 100%; height: 100%; }
@media (max-width: 900px) {
  .stage--roles .mascot { height: 28%; left: 72%; top: 14%; }
  .stage--settle .mascot { height: 28%; top: 16%; }
}

.scene-loader {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--c-ink-3);
  font-size: var(--t-micro);
  transition: opacity 400ms var(--ease-soft);
}
.scene-loader__track {
  width: 88px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-line);
  overflow: hidden;
}
.scene-loader__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--c-ink);
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
  transition: transform 300ms var(--ease-out);
}
.no-js .scene-loader,
.scene-ready .scene-loader,
.no-webgl .scene-loader { opacity: 0; visibility: hidden; }

/* Custom cursor only over the agent, fine pointers only (created by JS). */
.agent-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 1px solid rgba(11, 11, 12, 0.55);
  pointer-events: none;
  opacity: 0;
  scale: 0.6;
  transition: opacity var(--dur) var(--ease-out), scale var(--dur) var(--ease-out);
}
.agent-cursor::after {
  content: '';
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  background: var(--c-ink);
}
.agent-cursor.is-visible { opacity: 1; scale: 1; }
.agent-cursor.is-pulse { animation: cursor-pulse 700ms var(--ease-out); }
@keyframes cursor-pulse { 40% { scale: 1.5; opacity: 0.5; } }

/* ---------- Buttons ---------- */
/* LINE buttons keep the current site's rainbow border and glow. */
:root {
  --rainbow-1: 0 100% 63%;
  --rainbow-2: 270 100% 63%;
  --rainbow-3: 210 100% 63%;
  --rainbow-4: 195 100% 63%;
  --rainbow-5: 90 100% 63%;
  --rainbow: linear-gradient(90deg, hsl(var(--rainbow-1)), hsl(var(--rainbow-5)), hsl(var(--rainbow-3)), hsl(var(--rainbow-4)), hsl(var(--rainbow-2)));
}
@keyframes rainbow { from { background-position: 0%; } to { background-position: 200%; } }
.line-cta,
.sticky-cta {
  isolation: isolate;
  border: 1.28px solid transparent;
  background-image: linear-gradient(#121213, #121213), linear-gradient(#121213 50%, rgba(18, 18, 19, 0.6) 80%, rgba(18, 18, 19, 0)), var(--rainbow);
  background-clip: padding-box, border-box, border-box;
  background-origin: border-box;
  background-size: 200%;
  animation: rainbow 2s infinite linear;
}
.line-cta::before,
.sticky-cta::before {
  content: '';
  position: absolute;
  bottom: -20%;
  left: 50%;
  z-index: -1;
  width: 60%;
  height: 20%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--rainbow);
  background-size: 200%;
  filter: blur(0.8rem);
  opacity: 0.7;
  animation: rainbow 2s infinite linear;
  pointer-events: none;
}
.line-cta:hover,
.sticky-cta:hover {
  background-image: linear-gradient(#1b1b1d, #1b1b1d), linear-gradient(#121213 50%, rgba(18, 18, 19, 0.6) 80%, rgba(18, 18, 19, 0)), var(--rainbow);
}
@media (prefers-reduced-motion: reduce) {
  .line-cta, .line-cta::before, .sticky-cta, .sticky-cta::before { animation: none; }
}

.line-cta {
  --pad: 8px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: var(--pad) 20px var(--pad) var(--pad);
  border-radius: var(--radius-pill);
  position: relative;
  color: var(--c-on-ink);
  text-decoration: none;
  box-shadow: var(--shadow-float);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur-fast);
}
.line-cta__logo { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.line-cta__text { display: grid; line-height: 1.35; text-align: left; }
.line-cta__title { font-size: 1.0625rem; font-weight: 600; }
.line-cta__sub { font-size: var(--t-micro); color: var(--c-on-ink-2); text-wrap: balance; }
.line-cta__arrow {
  width: 20px;
  height: 20px;
  margin-left: 6px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur) var(--ease-out);
}
.line-cta:hover { transform: translateY(-2px); }
.line-cta:hover .line-cta__arrow { transform: translateX(3px); }
.line-cta:active { transform: translateY(0) scale(0.985); }
.line-cta:focus-visible { outline-offset: 4px; }

.button-ghost,
.button-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur) var(--ease-out);
}
.button-ghost { border: 1px solid var(--c-line-strong); background: rgba(255, 255, 255, 0.7); }
.button-ghost:hover { border-color: var(--c-ink); }
.button-solid { border: 1px solid var(--c-ink); background: var(--c-ink); color: var(--c-on-ink); }
.button-solid:hover { background: #1b1b1e; transform: translateY(-1px); }
.button-ghost:active, .button-solid:active { transform: scale(0.98); }

/* ---------- Reveal (only once JS has taken over) ---------- */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.reveal-ready .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal { transform: none; transition: opacity 240ms linear; }
  .line-cta, .button-solid, .button-ghost, .line-cta__arrow { transition: none; }
  .line-cta:hover, .button-solid:hover { transform: none; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur);
}
.site-header.is-scrolled { border-color: var(--c-line); }
.site-header__inner {
  max-width: var(--max);
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand__mark { width: 33px; height: 24px; margin-right: 10px; flex: none; }
.brand { display: inline-flex; align-items: center; font-weight: 700; font-size: 1.0625rem; text-decoration: none; letter-spacing: 0.01em; white-space: nowrap; }
.brand span { font-weight: 400; color: var(--c-ink-2); margin-left: 0.3em; }
.site-nav { display: flex; gap: 28px; margin-left: auto; font-size: var(--t-small); }
.site-nav a { text-decoration: none; color: var(--c-ink-2); transition: color var(--dur-fast); }
.site-nav a:hover { color: var(--c-ink); }
.header-cta {
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line-strong);
  white-space: nowrap;
}
.header-cta:hover { border-color: var(--c-ink); }

@media (max-width: 900px) {
  .site-nav { display: none; }
  .header-cta { margin-left: auto; }
}

/* ---------- Footer ---------- */
.site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 48px var(--gutter) calc(48px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-line);
  color: var(--c-ink-3);
  font-size: var(--t-micro);
  display: grid;
  gap: 8px;
}
.site-footer__brand { color: var(--c-ink); font-weight: 600; margin-top: 12px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; }
.site-footer__links a { color: var(--c-ink-2); text-underline-offset: 3px; }
.site-footer__links a:hover { color: var(--c-ink); }
/* ---------- Sticky actions: LINE + go to the package calculator ---------- */
.sticky-actions {
  position: fixed;
  z-index: 30;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.sticky-actions.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s;
}
.sticky-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 6px 6px;
  border-radius: var(--radius-pill);
  color: var(--c-on-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-small);
  white-space: nowrap;
  box-shadow: var(--shadow-float);
}
.sticky-cta img { width: 32px; height: 32px; border-radius: 50%; }
.sticky-calc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line-strong);
  background: var(--c-bg);
  color: var(--c-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-small);
  white-space: nowrap;
  box-shadow: 0 10px 24px -14px rgba(11, 11, 12, 0.35);
  transition: border-color var(--dur-fast);
}
.sticky-calc:hover { border-color: var(--c-ink); }
.sticky-calc .icon { width: 18px; height: 18px; }

@media (max-width: 720px) {
  .sticky-actions {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    justify-content: center;
  }
  .sticky-cta { padding-right: 14px; }
  .sticky-calc { padding: 0 12px; }
  /* Room at the end of the page so the floating buttons never hide the last content. */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* The floating buttons are visible everywhere outside the hero now, so keep anchor jumps
     and focus scrolling (estimator radios, plan CTA buttons) from landing underneath them. */
  html { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) { .sticky-calc span { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sticky-actions, .sticky-actions.is-visible { transform: none; transition: opacity 160ms linear, visibility 0s; }
}