/* The home pages' dark silk theme (body.v2-page on / and /en/), chosen by the user on 2026-10-16
   (.ui-craft/brief.md): the liquid-silk shader of home-v2.js on a fixed canvas behind the whole page, the two
   headers (site/src/components/home/Portal.astro + ClipWall.astro), then the library, steps, trust, FAQ,
   closing band and footer redrawn as frosted glass on it. Dark cobalt ground, white type, orange main
   actions with navy text; everything moves only without reduced motion. Loaded after ui-land.css. */
body.v2-page, .v2 {
  --v2-ground: #050b1f;
  --v2-ink: #eaf1ff;
  --v2-ink-2: #c9d6ee;
  --v2-sky: #ffc28f;
  --v2-pearl: #dfe7f4;
  --v2-hl: linear-gradient(100deg, #fff4e8 0%, #ffc28f 45%, #ff8a3d 100%);
  --v2-warm: #ffb37a;
  --v2-action: #f97316;
  --v2-action-hover: #fb8a3c;
  --v2-on-action: #14233b;
  --v2-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
}
/* The ground sits on <html>: a background on <body> would paint over the fixed canvas (z-index -1).
   It is what shows before the shader starts, or instead of it. */
html:has(> body.v2-page) { background: radial-gradient(90% 60% at 50% 0%, #1d50be, #050b1f 70%) fixed, #050b1f; }
body.v2-page { background: transparent; color: var(--v2-ink); }
@supports not selector(:has(a)) { body.v2-page { background: #050b1f; } .v2-silk { display: none; } }
.v2 { position: relative; overflow: hidden; margin-top: calc(-1 * var(--home-nav-height, 76px)); color: var(--v2-ink); }
.v2-silk { position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; display: block; pointer-events: none; }
.v2-silk.is-off { display: none; }
.v2 .shell { position: relative; }
.v2 :focus-visible { outline: 3px solid var(--v2-sky); outline-offset: 4px; }

.v2-eyebrow { margin: 0; font-family: var(--v2-mono); font-size: 13px; letter-spacing: .08em; color: var(--v2-warm); }

/* ---------- buttons ---------- */
.v2-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px; border: 0; border-radius: 999px; font: inherit; font-size: 17px; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s;
}
.v2-btn:active { transform: scale(.97); }
.v2-btn-action { background: var(--v2-action); color: var(--v2-on-action); box-shadow: 0 12px 34px rgba(249, 115, 22, .35); }
.v2-btn-action:hover { background: var(--v2-action-hover); color: var(--v2-on-action); }
.v2-btn-glass {
  background: rgba(255, 255, 255, .08); color: #fff; font-weight: 500; font-size: 16px;
  box-shadow: inset 0 0 0 1px rgba(191, 214, 255, .32); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.v2-btn-glass:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.v2-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); animation: v2-shine 3.5s ease-in-out infinite; pointer-events: none; }
@keyframes v2-shine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(260%); } }

/* ================= part 1: the portal ================= */
.v2-portal {
  position: relative; min-height: max(860px, 100svh);
  padding-top: calc(var(--home-nav-height, 76px) + 40px); text-align: center;
}
.v2-portal h1 {
  margin: 10px 0 0; font-family: "Kanit", "IBM Plex Sans Thai", sans-serif; font-weight: 700;
  font-size: clamp(40px, 5.6vw, 78px); line-height: 1.06; letter-spacing: -.01em; color: #fff; text-shadow: 0 6px 40px rgba(5, 11, 31, .6);
}
.v2-accent, .v2-words > span:not(.v2-words-sr), .v2-page .g-head h2 em { background: var(--v2-hl); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v2-w { display: inline-block; opacity: 0; animation: v2-rise .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.1s + var(--d, 0) * .15s); }
@keyframes v2-rise { from { opacity: 0; transform: translateY(60%); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }

.v2-portal .v2-eyebrow { font-size: 18px; letter-spacing: .22em; color: #ff8100; }

/* channel logos in the headline (Portal.astro): white tiles that bob between the words, and a roller that turns
   through the channels after "ทำคลิปขายของ ลง" (ends on a copy of the first, so the loop has no jump) */
.v2-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: .82em; height: .82em;
  border-radius: .22em; background: #fff; box-shadow: 0 .12em .32em rgba(2, 8, 28, .45), inset 0 0 0 1px rgba(191, 214, 255, .5);
  vertical-align: middle;
}
.v2-ic svg { width: 58%; height: 58%; }
.v2-fan { display: inline-flex; align-items: center; margin: 0 .12em; vertical-align: middle; }
.v2-fan .v2-ic { margin-left: -.16em; animation: v2-bob 3.2s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: calc(var(--k) * -.64s); }
.v2-fan .v2-ic:first-child { margin-left: 0; }
.v2-fan .v2-ic:nth-child(odd) { --r: -7deg; }
.v2-fan .v2-ic:nth-child(even) { --r: 6deg; }
@keyframes v2-bob { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-.16em) rotate(calc(var(--r) * -1)); } }
.v2-on { white-space: nowrap; }
.v2-roll { display: inline-block; height: 1.2em; overflow: hidden; vertical-align: bottom; text-align: left; }
.v2-roll-in { display: flex; flex-direction: column; animation: v2-roll 10s cubic-bezier(.7, 0, .2, 1) infinite; }
.v2-roll-in > span { display: flex; align-items: center; gap: .22em; height: 1.2em; }
.v2-roll .v2-ic { width: .78em; height: .78em; }
@keyframes v2-roll {
  0%, 16% { transform: translateY(0); } 20%, 36% { transform: translateY(-1.2em); } 40%, 56% { transform: translateY(-2.4em); }
  60%, 76% { transform: translateY(-3.6em); } 80%, 96% { transform: translateY(-4.8em); } 100% { transform: translateY(-6em); }
}

@keyframes v2-turn { to { transform: rotate(360deg); } }

/* ---------- the sea behind the headline (public/ocean.js) ----------
   .oc-still is what shows before the sea starts, or instead of it (no WebGL, reduced motion, Save-Data):
   sand in the top-left corner, turquoise shallows, then deep water. The dock appears only with the sea. */
.oc-hero { overflow: hidden; isolation: isolate; background: #0a3a6a; }
.oc-still, .oc-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.oc-still {
  background:
    radial-gradient(ellipse 22% 24% at 0 0, #f0dcae 0 66%, rgba(240, 220, 174, 0) 70%),
    radial-gradient(ellipse 42% 44% at 0 0, rgba(140, 230, 220, .95), rgba(140, 230, 220, 0) 72%),
    radial-gradient(ellipse 85% 80% at 0 0, #1f9bb5, rgba(31, 155, 181, 0) 78%),
    linear-gradient(160deg, #0f5e93, #072b62 72%);
}
.oc-canvas { display: block; opacity: 0; transition: opacity .8s ease; touch-action: none; cursor: crosshair; }
.oc-live .oc-canvas { opacity: 1; }
.v2-portal-copy { position: relative; z-index: 2; pointer-events: none; }
/* a soft pool of shade under the headline, so white type stays readable over the bright shallows */
.oc-hero .v2-portal-copy::before {
  content: ""; position: absolute; left: 50%; top: -40px; z-index: -1; width: min(1000px, 112%); height: calc(100% + 90px);
  transform: translateX(-50%); background: radial-gradient(closest-side, rgba(4, 18, 48, .64), rgba(4, 18, 48, .3) 60%, rgba(4, 18, 48, 0)); pointer-events: none;
}
.v2-portal-copy a, .v2-portal-copy button { pointer-events: auto; }
.v2-actions { display: grid; justify-items: center; gap: 12px; margin-top: 26px; }
.v2-actions-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.v2-actions p { margin: 0; font-size: 14px; color: var(--v2-pearl); text-shadow: 0 2px 12px rgba(2, 20, 50, .7); }

/* the dock: photos to drop in the sea, and the sea's controls as small icons */
.oc-dock {
  position: absolute; left: 50%; bottom: 22px; z-index: 3; display: none; width: min(840px, calc(100% - 24px)); box-sizing: border-box;
  transform: translateX(-50%); padding: 12px 14px 14px; border-radius: 24px; text-align: left;
  border: 1px solid rgba(255, 255, 255, .3); background: linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
  box-shadow: 0 20px 50px rgba(2, 16, 40, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
}
.oc-live .oc-dock { display: block; }
.oc-dock-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 2px 8px 4px; }
.oc-dock-head strong { font-family: "Kanit", "IBM Plex Sans Thai", sans-serif; font-size: 16px; font-weight: 600; color: #fff; }
.oc-dock-hint { font-size: 12.5px; color: #dbe8f8; }
.oc-tools { display: flex; gap: 4px; margin-left: auto; }
.oc-mini {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px;
  background: rgba(255, 255, 255, .1); color: #eaf1ff; cursor: pointer; transition: background-color .18s;
}
.oc-mini:hover { background: rgba(255, 255, 255, .2); }
.oc-mini[aria-pressed="true"] { background: rgba(255, 194, 143, .28); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 194, 143, .6); }
.oc-mini svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.oc-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.oc-card {
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 6px 6px 7px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 16px; background: rgba(255, 255, 255, .08); color: #fff; font: inherit;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: background-color .18s, transform .2s cubic-bezier(.16, 1, .3, 1);
}
.oc-card:hover { background: rgba(255, 255, 255, .17); transform: translateY(-3px); }
.oc-card:active { cursor: grabbing; }
.oc-card[aria-pressed="true"] { border-color: rgba(255, 194, 143, .7); background: rgba(255, 194, 143, .16); }
.oc-card img {
  width: 58px; height: 74px; max-width: none; object-fit: cover; object-position: 50% 30%; border-radius: 9px;
  box-shadow: 0 6px 16px rgba(2, 16, 40, .35); pointer-events: none; -webkit-user-drag: none;
}
.oc-card span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.oc-card:focus-visible, .oc-mini:focus-visible, .oc-show:focus-visible { outline: 3px solid #ffc28f; outline-offset: 2px; }
.oc-toast {
  position: absolute; left: 50%; bottom: 200px; z-index: 4; margin: 0; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(255, 194, 143, .5); background: rgba(6, 26, 64, .85); color: #ffe4cc; font-size: 14px; white-space: nowrap;
}
.oc-show {
  position: absolute; right: 16px; bottom: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid rgba(191, 214, 255, .3); border-radius: 12px; background: rgba(6, 30, 66, .6); color: #eaf1ff; font: inherit; font-size: 14px;
  cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.oc-show kbd { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); font-size: 11px; font-weight: 600; line-height: 18px; color: #cfe0f5; }
.oc-toast[hidden], .oc-show[hidden] { display: none; }
/* the sign-up offer after a demo clip comes up (Portal.astro, ocean.js): inside the dock, sitting just above its
   right edge, in the navy glass of the toast with the main-action orange */
.oc-offer {
  position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 4; display: flex; align-items: center; gap: 10px 14px;
  width: max-content; max-width: min(520px, 100%); box-sizing: border-box; padding: 10px 10px 10px 18px; border-radius: 18px;
  border: 1px solid rgba(255, 194, 143, .5); background: rgba(6, 26, 64, .88); color: #eaf1ff;
  box-shadow: 0 16px 40px rgba(2, 16, 40, .35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: oc-offer-in .45s cubic-bezier(.2, .8, .2, 1);
}
.oc-offer[hidden], body.acct-signed-in .oc-offer { display: none; }
.oc-offer p { margin: 0; font-size: 14px; line-height: 1.45; }
.oc-offer strong { display: block; font-family: "Kanit", "IBM Plex Sans Thai", sans-serif; font-size: 15.5px; font-weight: 600; color: #fff; }
.oc-offer span { color: #ffe4cc; }
.oc-offer-go {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 12px;
  background: #f97316; color: #14233b; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.oc-offer-go:hover { background: #fb8a3c; }
.oc-offer-go:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@keyframes oc-offer-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .oc-offer { animation: none; } }
.oc-ui-off .v2-portal-copy, .oc-ui-off .oc-dock { visibility: hidden; }

/* the eyebrow: Naka's face, the name นากะ and the line, on a small glass pill that keeps them readable over the
   clear water (2026-10-19, replacing the spaced orange "NAKA STUDIO") */
.v2-portal .v2-eyebrow.oc-eyebrow {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; max-width: 100%; box-sizing: border-box;
  padding: 6px 18px; border-radius: 999px; font-family: "Kanit", "IBM Plex Sans Thai", sans-serif; font-size: 17px; font-weight: 500;
  line-height: 1.35; letter-spacing: .01em; color: #fff;
  background: linear-gradient(140deg, rgba(12, 38, 104, .66), rgba(6, 20, 58, .52));
  box-shadow: inset 0 0 0 1px rgba(191, 214, 255, .32), 0 10px 30px rgba(2, 12, 36, .3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.oc-eyebrow-mark { width: 28px; height: 28px; margin-left: -10px; border-radius: 9px; box-shadow: 0 4px 12px rgba(2, 12, 36, .45); animation: naka-nod 4.2s ease-in-out 1.7s infinite; }
.oc-eyebrow .naka-name { font-size: 1.28em; font-weight: 600; }
.oc-eyebrow-sep { color: rgba(191, 214, 255, .6); }
.oc-eyebrow-tail { color: #ffc28f; }
@keyframes naka-nod { 0%, 14%, 100% { transform: none; } 4% { transform: rotate(-12deg) translateY(-2px); } 8% { transform: rotate(9deg); } 11% { transform: rotate(-3deg); } }

/* นากะ (NakaName.astro): every 4.2 s the letters swim through in a wave, left to right, catching light as they rise,
   while a light runs along the tail underneath; the tail draws itself in once when the page opens */
.naka-name { --naka-glow: #a9d6ff; position: relative; display: inline-flex; align-items: baseline; padding: 0 .04em .16em; white-space: nowrap; }
.naka-name i { display: inline-block; font-style: normal; animation: naka-swim 4.2s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: calc(2s + var(--i) * .12s); }
@keyframes naka-swim {
  0%, 34%, 100% { transform: none; color: inherit; text-shadow: none; }
  10% { transform: translateY(-.16em) rotate(-6deg); color: var(--naka-glow); text-shadow: 0 0 .5em rgba(127, 190, 255, .85); }
  21% { transform: translateY(.04em) rotate(3deg); }
}
.naka-name-tail { position: absolute; left: -6%; bottom: -.08em; width: 112%; height: .32em; overflow: visible; pointer-events: none; }
.naka-name-tail path { fill: none; stroke-width: 2.5px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.naka-tail-base { stroke: #6fa6ff; stroke-dasharray: 100; stroke-dashoffset: 100; animation: naka-tail-draw 1.1s cubic-bezier(.65, 0, .35, 1) .9s forwards; }
.naka-tail-glint { stroke: #fff; stroke-dasharray: 16 140; stroke-dashoffset: 16; opacity: 0; filter: drop-shadow(0 0 3px #bfe3ff); animation: naka-tail-run 4.2s ease-in-out 2s infinite; }
@keyframes naka-tail-draw { to { stroke-dashoffset: 0; } }
@keyframes naka-tail-run { 0% { stroke-dashoffset: 16; opacity: 0; } 6% { opacity: 1; } 34% { stroke-dashoffset: -100; opacity: 1; } 40%, 100% { stroke-dashoffset: -100; opacity: 0; } }

/* a signed-in member's "เข้าสตูดิโอ" (account-menu.js shows [data-studio-link] once it has the studio address): it takes
   the orange, เสกคลิป turns to glass beside it, the 15-second sample and the sign-up line step aside */
.v2-btn[hidden] { display: none; }
.v2-btn-arrow { display: inline-block; margin-left: 10px; transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.v2-btn-studio:hover .v2-btn-arrow { transform: translateX(4px); }
.v2-actions-row:has(.v2-btn-studio:not([hidden])) [data-conjure] {
  background: rgba(255, 255, 255, .08); color: #fff; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(191, 214, 255, .32);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.v2-actions-row:has(.v2-btn-studio:not([hidden])) [data-conjure]:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.v2-actions-row:has(.v2-btn-studio:not([hidden])) [data-conjure] .v2-shine,
.v2-actions-row:has(.v2-btn-studio:not([hidden])) [data-reel-open] { display: none; }
body.acct-signed-in .v2-note-guest { display: none; }

/* ================= part 2: the clip wall ================= */
.v2-wall { position: relative; min-height: 900px; overflow: hidden; }
.v2-wall-stage { position: absolute; left: 40%; top: -560px; width: 1300px; height: 2100px; perspective: 1600px; pointer-events: none; }
.v2-wall-grid {
  width: 1100px; height: 2100px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px;
  transform: rotateX(48deg) rotateZ(-24deg); transform-origin: 50% 40%;
}
.v2-col { overflow: hidden; }
.v2-up, .v2-down { display: flex; flex-direction: column; gap: 22px; animation: v2-up var(--dur, 28s) linear infinite; }
.v2-down { animation-name: v2-down; }
@keyframes v2-up { to { transform: translateY(-50%); } }
@keyframes v2-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.v2-col img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 1px rgba(191, 214, 255, .25), 0 18px 40px rgba(0, 0, 0, .45); }
.v2-wall-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 11, 31, .92) 0%, rgba(5, 11, 31, .85) 34%, rgba(5, 11, 31, .45) 50%, rgba(5, 11, 31, 0) 68%),
    linear-gradient(180deg, rgba(5, 11, 31, .6) 0%, rgba(5, 11, 31, 0) 18%, rgba(5, 11, 31, 0) 80%, rgba(5, 11, 31, .55) 100%);
}
.v2-wall-copy { padding: 150px 0 140px; }
.v2-wall-copy > * { max-width: 560px; }
.v2-wall h2 { margin: 16px 0 0; font-family: "Kanit", "IBM Plex Sans Thai", sans-serif; font-weight: 600; font-size: clamp(38px, 4.6vw, 64px); line-height: 1.1; color: #fff; }
.v2-words { position: relative; display: block; height: 1.2em; }
.v2-words > span:not(.v2-words-sr) { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; animation: v2-word 12s ease-in-out infinite; animation-delay: calc(var(--k) * 3s); }
@keyframes v2-word {
  0% { opacity: 0; filter: blur(12px); transform: translateY(40%); }
  5%, 22% { opacity: 1; filter: blur(0); transform: none; }
  27%, 100% { opacity: 0; filter: blur(12px); transform: translateY(-40%); }
}
.v2-words-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v2-lead { margin: 18px 0 0; font-size: 18px; line-height: 1.7; color: var(--v2-ink-2); }
.v2-note { margin: 16px 0 0; font-size: 14px; color: var(--v2-pearl); }
.v2-menus { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.v2-menus a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(191, 214, 255, .24); color: #eaf1ff; font-size: 14px; text-decoration: none;
  transition: background-color .18s;
}
.v2-menus a:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.v2-menus img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #fff; }

.v2-frame { position: relative; margin-top: 28px; border-radius: 20px; overflow: hidden; padding: 2px; box-shadow: 0 16px 50px rgba(29, 80, 190, .4); }
.v2-frame::before {
  content: ""; position: absolute; left: -50%; top: -400%; width: 200%; height: 900%;
  background: conic-gradient(from 0deg, #1d50be, #7fb0ff, #f97316, #1d50be); animation: v2-turn 4s linear infinite;
}
.v2-frame-in { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 18px; background: #0b1636; color: var(--v2-sky); }
.v2-frame-in > span { flex: 1 1 180px; font-size: 16px; color: var(--v2-pearl); }
.v2-frame-in .v2-btn { min-height: 50px; border-radius: 14px; }

.v2-platforms { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid rgba(191, 214, 255, .18); background: rgba(5, 11, 31, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* the channels run past in a loop (two identical sets, the second hidden from screen readers) */
.v2-pf-row { display: flex; align-items: center; gap: 24px; padding: 14px 0; }
.v2-pf-label { flex: none; font-family: var(--v2-mono); font-size: 12.5px; color: var(--v2-sky); }
.v2-pf-track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.v2-pf-run { display: flex; width: max-content; animation: v2-pf-run 26s linear infinite; }
.v2-pf-track:hover .v2-pf-run { animation-play-state: paused; }
.v2-pf-set { display: flex; gap: 40px; padding-right: 40px; }
@keyframes v2-pf-run { to { transform: translateX(-50%); } }
.v2-platforms b { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #eaf1ff; white-space: nowrap; }
.v2-platforms .pf-logo { width: 20px; height: 20px; }
/* TikTok, X and Lazada are drawn in navy: white on the dark bars */
.v2-page .pf-logo:has(use[href$="#tiktok"], use[href$="#x"], use[href$="#lazada"]) { filter: brightness(0) invert(1); }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .v2-portal { min-height: 780px; }
  .v2-portal .v2-eyebrow { font-size: 13px; letter-spacing: .1em; }
  .v2-portal .v2-eyebrow.oc-eyebrow { font-size: 14px; letter-spacing: 0; padding: 5px 14px; }
  .oc-eyebrow-mark { width: 24px; height: 24px; margin-left: -8px; }
  .oc-dock { bottom: 10px; padding: 10px; border-radius: 20px; }
  .oc-dock-hint { display: none; }
  .oc-cards { grid-template-columns: repeat(5, 88px); overflow-x: auto; scrollbar-width: none; }
  .oc-toast { bottom: 190px; max-width: calc(100% - 32px); white-space: normal; text-align: center; }
  .oc-offer { left: 0; right: 0; bottom: calc(100% + 8px); width: auto; max-width: none; padding: 8px 8px 8px 14px; }
  .oc-offer p { font-size: 13px; }
  .oc-offer strong { font-size: 14.5px; }
  .v2-wall { min-height: 0; }
  .v2-wall-stage { left: -30%; top: -480px; opacity: .75; }
  .v2-wall-veil { background: linear-gradient(180deg, rgba(5, 11, 31, .55), rgba(5, 11, 31, .72) 50%, rgba(5, 11, 31, .8)); }
  .v2-wall-copy { padding: 90px 0 150px; }
  .v2-words { height: 2.4em; }
  .v2-words > span:not(.v2-words-sr) { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-shine, .v2-up, .v2-down, .v2-frame::before, .v2-pf-run, .v2-fan .v2-ic, .v2-roll-in { animation: none; }
  .v2-pf-set[aria-hidden] { display: none; }
  .v2-pf-set { flex-wrap: wrap; }
  .v2-pf-set b:nth-child(n+7) { display: none; }
  .v2-w { animation: none; opacity: 1; }
  .v2-words > span:not(.v2-words-sr) { animation: none; }
  .v2-words > span:first-child { opacity: 1; }
  .oc-card, .oc-canvas { transition: none; }
  .oc-card:hover { transform: none; }
  .naka-name i, .naka-tail-glint, .oc-eyebrow-mark { animation: none; }
  .naka-tail-base { animation: none; stroke-dashoffset: 0; }
  .v2-btn-arrow { transition: none; }
}

/* ================= the rest of the page on the silk ================= */
/* ui-land.css draws these sections in light colours from its tokens; on .v2-page the tokens turn to the night
   palette, the grounds turn clear, and panels become frosted glass. Text contrast on the darkest silk under a
   panel (computed): #f3f7fd 15:1, #c9d6ee 10.8:1, #ffc28f 11:1; orange buttons keep navy text (5.6:1). */
body.v2-page main > section:not(.v2-portal):not(.v2-wall), body.v2-page .u-footer {
  --ink: #f3f7fd;
  --ink-2: #c9d6ee;
  --ink-3: #a2b4cd;
  --line: rgba(191, 214, 255, .18);
  --bg: transparent;
  --brand: #ffc28f;
  --brand-ink: #ffc28f;
  --u-sky: rgba(141, 180, 255, .16);
  --u-gray: rgba(255, 255, 255, .06);
  --u-glass: rgba(255, 255, 255, .08);
  --u-glass-line: rgba(191, 214, 255, .3);
  color: var(--ink);
}
.v2-page :focus-visible { outline-color: #ffc28f; }
.v2-page .btn-primary, .v2-page .btn-primary:hover { color: #14233b; }
.v2-page .btn-glass { color: #fff; }
.v2-page .btn-glass:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.v2-page .v2-glass, .v2-page .s-step, .v2-page .f-list details, .v2-page .t-platforms li {
  border: 1px solid rgba(191, 214, 255, .18);
  background: linear-gradient(140deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}

/* the clip library: no longer the one dark band, a frosted panel like the rest */
.v2-page .g-gallery {
  border-color: rgba(191, 214, 255, .2);
  background: radial-gradient(60% 420px at 50% 0%, rgba(29, 80, 190, .45), rgba(29, 80, 190, 0) 70%), rgba(5, 11, 31, .55);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}

/* steps, trust, FAQ */
.v2-page .s-steps, .v2-page .t-trust, .v2-page .f-faq { background: transparent; }
.v2-page .u-kicker { background: rgba(141, 180, 255, .16); color: #cfe0ff; }
.v2-page .u-head h2, .v2-page .s-step h3, .v2-page .t-list h3, .v2-page .c-end h2 { color: #fff; }
.v2-page .s-media { background: rgba(255, 255, 255, .06); }
.v2-page .s-no { color: #ffb37a; }
.v2-page .t-stats dd { color: #fff; font-variant-numeric: tabular-nums; }
.v2-page .t-platforms li { color: #eaf1ff; }
.v2-page .t-list .why-icon { background: rgba(141, 180, 255, .16); }
.v2-page .why-icon svg { stroke: #ffc28f; }
.v2-page .f-list summary { color: #fff; }
.v2-page .f-list summary::marker { color: #ffb37a; }

/* closing band: the silk instead of the sky */
.v2-page .c-end { background: transparent; }
.v2-page .c-end .sky { display: none; }
.v2-page .c-end::before {
  content: ""; position: absolute; left: 50%; top: 40px; width: 520px; height: 520px; margin-left: -260px; border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, rgba(29, 80, 190, .55), rgba(5, 11, 31, 0)); pointer-events: none;
}
.v2-page .closing-mascot { filter: drop-shadow(0 0 30px rgba(127, 176, 255, .6)); }
.v2-page .mascot-extras summary { color: #ffc28f; }
.v2-page .c-mascots li { color: #c9d6ee; }
.v2-page .c-m { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .08); }

/* footer */
.v2-page .u-footer { border-top-color: rgba(191, 214, 255, .16); background: rgba(5, 11, 31, .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.v2-page .u-footer .brand { color: #fff; }
.v2-page .u-footer .brand b { color: #ffc28f; }
.v2-page .u-foot-col p { color: #fff; }
.v2-page .u-foot-col a:hover, .v2-page .u-foot-bottom a:hover { color: #fff; }
.v2-page .u-wordmark { color: rgba(141, 180, 255, .08); }

/* the library's own pale-blue labels, in the same warm family */
.v2-page .g-kicker, .v2-page .g-menu, .v2-page .g-gallery .g-sub a { color: #ffd9b8; }
.v2-page .g-count b { color: #ffc28f; }
.v2-page .g-gallery :focus-visible { outline-color: #ffc28f; }

/* ================= top bar: one full-width bar like a TV portal's (the user's ch7.com reference, 2026-10-17) =================
   brand, the seven menus as plain links, then sign-in and labelled tiles (SiteHeader.astro) */
.v2-page .landing-nav.nav-wide { padding-top: 0; }
.v2-page .nav-wide .nav-row {
  position: relative; width: 100%; max-width: none; height: 74px; margin: 0; gap: 18px; padding: 0 max(24px, calc((100vw - 1320px) / 2));
  border: 0; border-radius: 0; border-bottom: 1px solid rgba(191, 214, 255, .16);
  background: linear-gradient(180deg, rgba(8, 22, 62, .72), rgba(8, 22, 62, .5));
  box-shadow: none; -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
}
/* a thin line of the brand colours along the bottom edge */
.v2-page .nav-wide .nav-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(29, 80, 190, 0), #4f86ff 25%, #ffc28f 60%, #f97316 75%, rgba(249, 115, 22, 0));
  opacity: .7;
}
.v2-page .nav-wide.is-dense .nav-row { background: rgba(7, 18, 52, .94); box-shadow: 0 10px 34px rgba(2, 8, 28, .45); }
.v2-page .landing-nav .brand { flex: none; color: #fff; }
.v2-page .landing-nav .brand b { color: #ffc28f; }
.v2-page .landing-nav .brand-mark { filter: drop-shadow(0 0 10px rgba(127, 176, 255, .55)); }
.v2-page .nav-wide .nav-links { display: flex; align-items: center; gap: 0; margin: 0 auto 0 6px; padding: 0; background: none; box-shadow: none; }
.v2-page .nav-wide .nav-plain {
  position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 11px; border-radius: 10px;
  color: rgba(234, 241, 255, .9); font-size: 14.5px; font-weight: 600; white-space: nowrap; text-shadow: none; transition: color .2s, background-color .2s;
}
.v2-page .nav-wide .nav-plain::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #ffc28f, #ff8a3d); box-shadow: 0 0 10px rgba(255, 138, 61, .7);
  transform: scaleX(0); transform-origin: 50% 50%; transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.v2-page .nav-wide .nav-plain:hover { background: rgba(255, 255, 255, .08); color: #fff; }
/* AI ไลฟ์ stands out the way a portal marks its own channel: a red on-air dot and warm type */
.v2-page .nav-wide .nav-live { color: #ffc28f; }
.v2-page .nav-live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #ff3b47; box-shadow: 0 0 8px rgba(255, 59, 71, .8); }
.v2-page .nav-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #ff3b47; animation: v2-onair 1.6s ease-out infinite; }
@keyframes v2-onair { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }

.v2-page .nav-tools { display: flex; flex: none; align-items: center; gap: 10px; }
/* sign-in: a light tint of orange glass, warmer than the links but quieter than the สมัครฟรี tile
   (account-menu.js draws the button) */
.v2-page .landing-nav.nav-wide .acct-login {
  position: relative; isolation: isolate; overflow: hidden; min-height: 42px; padding: 0 20px; border: 1px solid rgba(255, 194, 143, .45); border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 170, 102, .26), rgba(249, 115, 22, .14) 55%, rgba(194, 65, 12, .1));
  color: #ffe4cc; font-size: 14.5px; font-weight: 600; text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  transform: none; transition: background-color .2s, border-color .2s, color .2s;
}
.v2-page .landing-nav.nav-wide .acct-login::before { display: none; }
.v2-page .landing-nav.nav-wide .acct-login::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; display: block; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .14) 45%, rgba(255, 255, 255, 0) 60%) -200% 0 / 250% 100% no-repeat;
  animation: v2-login-glint 6s ease-in-out infinite;
}
@keyframes v2-login-glint { 0%, 70% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.v2-page .landing-nav.nav-wide .acct-login:hover {
  border-color: rgba(255, 194, 143, .7); background: linear-gradient(135deg, rgba(255, 170, 102, .38), rgba(249, 115, 22, .24) 55%, rgba(194, 65, 12, .18));
  color: #fff; transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
@media (prefers-reduced-motion: reduce) { .v2-page .landing-nav.nav-wide .acct-login::after { animation: none; } }
.v2-page .nav-sep { width: 1px; height: 34px; margin: 0 2px; background: rgba(191, 214, 255, .25); }
.v2-page .nav-tile { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 48px; color: #eaf1ff; text-decoration: none; }
.v2-page .nav-tile-box {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  border: 1.5px solid rgba(234, 241, 255, .7); transition: transform .2s cubic-bezier(.16, 1, .3, 1), background-color .2s;
}
.v2-page .nav-tile:hover .nav-tile-box { transform: translateY(-2px); background: rgba(255, 255, 255, .12); }
.v2-page .nav-tile svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.v2-page .nav-tile-signup .nav-tile-box { border-color: transparent; background: #f97316; box-shadow: 0 6px 18px rgba(249, 115, 22, .45); }
.v2-page .nav-tile-signup:hover .nav-tile-box { background: #fb8a3c; }
.v2-page .nav-tile-signup svg { fill: #14233b; stroke: #14233b; }
.v2-page .nav-tile small { font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .04em; white-space: nowrap; }
.v2-page .free-tools-entry{display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(1180px,calc(100% - 40px));margin:24px auto 56px;padding:19px 22px;border:1px solid rgba(191,214,255,.29);border-radius:20px;background:rgba(15,39,87,.67);backdrop-filter:blur(18px);box-shadow:0 15px 35px rgba(2,10,35,.15)}
.v2-page .free-tools-entry>div{display:flex;align-items:center;gap:16px}.v2-page .free-tools-entry-mark{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:rgba(255,194,143,.18);color:#ffc28f;font-size:23px}.v2-page .free-tools-entry strong{font:600 20px Kanit,"IBM Plex Sans Thai",sans-serif;color:#fff}.v2-page .free-tools-entry p{margin:2px 0 0;color:#c9d6ee;font-size:14px}.v2-page .free-tools-entry a{flex:none;padding:11px 16px;border-radius:12px;background:#f97316;color:#14233b;font-weight:700;text-decoration:none}.v2-page .free-tools-entry a:active{transform:scale(.97)}
@media(max-width:680px){.v2-page .free-tools-entry{align-items:stretch;flex-direction:column}.v2-page .free-tools-entry a{text-align:center}}
body.acct-signed-in .nav-tile-signup { display: none; }
/* "เข้าสตูดิโอ" (SiteHeader.astro): a signed-in member's way into Naka Studio, in the main-action orange with navy
   text and a slow glint; hidden until account-menu.js has the member's studio address. A play mark alone on phones. */
.v2-page .landing-nav .nav-studio {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 10px 0 8px;
  border-radius: 10px; background: #f97316; color: #14233b; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(249, 115, 22, .38), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: background-color .2s, transform .2s cubic-bezier(.16, 1, .3, 1);
}
.v2-page .landing-nav .nav-studio::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .45) 45%, rgba(255, 255, 255, 0) 60%) -200% 0 / 250% 100% no-repeat;
  animation: v2-login-glint 5s ease-in-out infinite;
}
.v2-page .landing-nav .nav-studio:hover { background: #fb8a3c; color: #14233b; transform: translateY(-1px); }
.v2-page .landing-nav .nav-studio[hidden] { display: none; }
.v2-page .nav-studio svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.v2-page .nav-studio svg path { fill: rgba(20, 35, 59, .12); }
.v2-page .nav-studio-arrow { transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.v2-page .nav-studio:hover .nav-studio-arrow { transform: translateX(3px); }
@media (max-width: 560px) {
  .v2-page .landing-nav .nav-studio { width: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .v2-page .nav-studio-arrow { display: none; }
  .v2-page .nav-studio svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .v2-page .landing-nav .nav-studio::after { animation: none; } .v2-page .landing-nav .nav-studio { transition: none; } }
.v2-page .nav-wide .menu-button { display: none; flex: none; margin-left: 0; color: #fff; }
/* The seven menus and the square tiles fit together from 1220px up, which covers a 1280px laptop
   once the contact tile is gone. Below that the menus fold into the phone menu. */
@media (max-width: 1220px) {
  .v2-page .nav-wide .nav-links { display: none; }
  .v2-page .nav-wide .nav-tools { margin-left: auto; }
  .v2-page .nav-wide .menu-button { display: block; }
  .v2-page .landing-nav.glass-nav .mobile-nav:not([hidden]) { display: grid; }
}
/* Signed in, เข้าสตูดิโอ and the profile are compact, and คลังฟรี sits between them.
   The pricing tile still steps aside on a 1280px laptop so the row does not overflow. */
body.acct-signed-in.v2-page .nav-studio { order: 1; }
body.acct-signed-in.v2-page .nav-tile.nav-tile-free { order: 2; }
body.acct-signed-in.v2-page .nav-account { order: 3; }
body.acct-signed-in.v2-page .nav-sep { order: 4; }
body.acct-signed-in.v2-page .nav-tile { order: 5; }
.v2-page .landing-nav .acct-trigger { gap: 6px; min-height: 34px; padding: 2px 8px 2px 2px; font-size: 12.5px; }
.v2-page .landing-nav .acct-avatar { width: 28px; height: 28px; font-size: 13px; }
.v2-page .landing-nav .acct-name { max-width: 8em; }
@media (max-width: 1400px) {
  body.acct-signed-in.v2-page .nav-sep,
  body.acct-signed-in.v2-page .nav-tile:not(.nav-tile-free) { display: none; }
}
@media (max-width: 760px) {
  .v2-page .nav-wide .nav-row { height: 64px; padding: 0 12px 0 16px; gap: 10px; }
  .v2-page .nav-sep, .v2-page .nav-tile { display: none; }
  .v2-page .landing-nav.nav-wide .acct-login { min-height: 40px; padding: 0 16px; font-size: 14px; }
}
/* the phone menu: each menu as a card with its line icon */
.v2-page .landing-nav .mobile-nav .m-card {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px; border: 0; border-radius: 14px; background: transparent; color: #fff;
  text-decoration: none; transition: background-color .18s;
}
.v2-page .landing-nav .mobile-nav .m-card:first-child { margin-top: 8px; }
.v2-page .landing-nav .mobile-nav .m-card:hover { background: rgba(255, 255, 255, .08); }
.v2-page .m-card i {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(150deg, rgba(127, 176, 255, .32), rgba(29, 80, 190, .4)); box-shadow: inset 0 0 0 1px rgba(191, 214, 255, .3);
}
.v2-page .m-card svg { width: 21px; height: 21px; fill: none; stroke: #eaf1ff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.v2-page .m-card span { display: grid; gap: 2px; min-width: 0; }
.v2-page .m-card b { font-size: 15px; font-weight: 600; color: #fff; }
.v2-page .m-card small { font-size: 12.5px; line-height: 1.45; color: #c9d6ee; }
@media (prefers-reduced-motion: reduce) { .v2-page .nav-live-dot::after { animation: none; } .v2-page .nav-tile-box { transition: none; } }
.v2-page .landing-nav .nav-plain:hover::after, .v2-page .landing-nav .nav-plain:focus-visible::after { transform: scaleX(1); }
/* "เข้าสู่ระบบ" (account-menu.js) and "สมัครสมาชิกฟรี": both glass with a ring of running light and a glint;
   signed out the bar shows these two, signed in the account menu and "เข้า Naka Studio" */
.v2-page .landing-nav .acct-login, .v2-page .landing-nav .nav-signup {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: #fff; font-size: 14.5px; font-weight: 600;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}
.v2-page .landing-nav .acct-login:hover, .v2-page .landing-nav .nav-signup:hover { background: transparent; color: #fff; transform: translateY(-1px); }
.v2-page .landing-nav .acct-login::before, .v2-page .landing-nav .nav-signup::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 320%; aspect-ratio: 1; z-index: -2;
  transform: translate(-50%, -50%); animation: v2-cta-ring 4s linear infinite;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, .2) 0deg, #fff 50deg, rgba(255, 255, 255, .2) 110deg, rgba(255, 255, 255, .2) 360deg);
}
.v2-page .landing-nav .acct-login::after, .v2-page .landing-nav .nav-signup::after {
  content: ""; position: absolute; inset: 1.5px; z-index: -1; border-radius: inherit; animation: v2-cta-glint 3.8s ease-in-out infinite;
  /* the fill is solid enough that the ring shows only at the edge (white text 7:1) */
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .28) 45%, rgba(255, 255, 255, 0) 60%) -200% 0 / 250% 100% no-repeat,
    linear-gradient(140deg, rgba(48, 92, 200, .95), rgba(22, 50, 132, .95));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.v2-page .landing-nav .nav-signup { box-shadow: 0 8px 26px rgba(249, 115, 22, .4); }
.v2-page .landing-nav .nav-signup::before { background: conic-gradient(from 0deg, #ff8a3d, #ffe0c2, #ff8a3d, #ffc28f, #ff8a3d); animation-duration: 3.2s; }
/* white on this orange glass is 4.6:1 */
.v2-page .landing-nav .nav-signup::after {
  animation-duration: 3.2s;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, 0) 60%) -200% 0 / 250% 100% no-repeat,
    linear-gradient(140deg, #c2570f, #a3480c);
}
.landing-nav .nav-signup { display: inline-flex; }
body.acct-signed-in .landing-nav .nav-signup, body.acct-signed-in .landing-nav .mobile-signup { display: none; }
.v2-page .landing-nav .nav-cta { display: none; }
body.acct-signed-in.v2-page .landing-nav .nav-cta { display: inline-flex; }
.v2-page .landing-nav .mobile-signup { color: #ffc28f; font-weight: 700; }
@media (max-width: 560px) { .v2-page .landing-nav .nav-signup { display: none; } }
.v2-page .landing-nav .acct-trigger { color: #fff; }
.v2-page .landing-nav .acct-trigger:hover, .v2-page .landing-nav .acct-trigger[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }
.v2-page .landing-nav .menu-button { color: #fff; }
.v2-page .landing-nav.glass-nav .mobile-nav:not([hidden]) { background: rgba(8, 16, 40, .94); }
.v2-page .landing-nav .mobile-nav a, .v2-page .landing-nav .mobile-nav b { color: #eaf1ff; }

/* "เข้า Naka Studio": glass like the other second buttons, with a ring of running light and a glint */
.v2-page .landing-nav .nav-cta {
  position: relative; isolation: isolate; overflow: hidden; border: 0; color: #fff;
  background: transparent; box-shadow: 0 8px 26px rgba(249, 115, 22, .25);
}
.v2-page .landing-nav .nav-cta::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 300%; aspect-ratio: 1; z-index: -2;
  background: conic-gradient(from 0deg, #ff8a3d, #ffc28f, #7fb0ff, #1d50be, #ff8a3d);
  transform: translate(-50%, -50%); animation: v2-cta-ring 3.2s linear infinite;
}
.v2-page .landing-nav .nav-cta::after {
  content: ""; position: absolute; inset: 1.5px; z-index: -1; border-radius: inherit;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .28) 45%, rgba(255, 255, 255, 0) 60%) -200% 0 / 250% 100% no-repeat,
    linear-gradient(140deg, rgba(40, 60, 120, .92), rgba(10, 18, 44, .92));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: v2-cta-glint 3.5s ease-in-out infinite;
}
.v2-page .landing-nav .nav-cta:hover { color: #fff; background: transparent; transform: translateY(-1px); }
.v2-page .landing-nav .nav-cta:hover::after { background-color: transparent; filter: brightness(1.25); }
@keyframes v2-cta-ring { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes v2-cta-glint { 0%, 55% { background-position: -200% 0, 0 0; } 100% { background-position: 200% 0, 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .v2-page .landing-nav .nav-cta::before, .v2-page .landing-nav .nav-cta::after { animation: none; }
  .v2-page .landing-nav .nav-plain::after { transition: none; }
  .v2-page .landing-nav .acct-login::before, .v2-page .landing-nav .acct-login::after, .v2-page .landing-nav .nav-signup::before, .v2-page .landing-nav .nav-signup::after { animation: none; }
}

/* ================= cards inside the library ================= */
/* The library's white pieces read the page tokens, which are the night palette here; each gets its own
   colours so nothing is white on white (user review 2026-10-16). */
/* the "ทำแบบนี้…" pill and the photo caption on a clip stay white with navy text */
.v2-page .g-use, .v2-page .g-from figcaption { color: #14233b; }
.v2-page .g-card:hover .g-use { background: #ffe4cc; }
.v2-page .g-card .reel-sound[aria-pressed="true"] { color: #14233b; }
.v2-page .g-use:focus-visible::after { box-shadow: inset 0 0 0 3px #ffc28f; }

/* chat demos: dark glass, white customer bubbles, cobalt shop bubbles */
.v2-page .g-gallery .g-card.g-chat {
  border-color: rgba(191, 214, 255, .22); color: #eaf1ff;
  background: linear-gradient(160deg, rgba(29, 52, 110, .7), rgba(8, 16, 40, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 16px 40px rgba(2, 8, 28, .4);
}
.v2-page .g-chat .chat-head { color: #c9d6ee; }
.v2-page .g-chat .chat-log .in { background: #fff; color: #14233b; }
.v2-page .g-chat .chat-log .out { background: #1d50be; color: #fff; }
.v2-page .g-chat .chat-log .note { background: rgba(255, 255, 255, .1); color: #dfe7f4; }
.v2-page .g-chat-foot { color: #a2b4cd; }

/* "เมนูอื่นใน Naka Studio": dark glass cards */
.v2-page .st-card {
  border-color: rgba(191, 214, 255, .2); color: #eaf1ff;
  background: linear-gradient(140deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.v2-page .st-card:hover { border-color: rgba(255, 194, 143, .55); box-shadow: 0 18px 44px rgba(2, 8, 28, .45); }
.v2-page .st-card h3 { color: #fff; }
.v2-page .st-card .st-text { color: #c9d6ee; }
.v2-page .st-card .st-go { color: #ffc28f; }
.v2-page .st-clip.is-illus { background: rgba(255, 255, 255, .92); }
.v2-page .st-clip.is-illus em { color: #14233b; }
.v2-page .st-note p { color: #c9d6ee; }
.v2-page .st-note a { border-color: rgba(191, 214, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; }
.v2-page .st-note a:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 194, 143, .55); }
/* the "ฟรี 7 วัน" badge sits on the brand token, which is peach here: orange with navy text like the buttons */
.v2-page .st-badge { background: #f97316; color: #14233b; }

/* ================= pricing (shown again 2026-10-16) ================= */
.v2-page .pricing { position: relative; padding: 100px 0 90px; background: transparent; }
.v2-page .pricing .kicker { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: rgba(141, 180, 255, .16); color: #cfe0ff; }
.v2-page .pricing-head h2 { font-family: "Kanit", "IBM Plex Sans Thai", sans-serif; font-weight: 600; color: #fff; letter-spacing: 0; }
.v2-page .pricing-head .row-sub { color: #c9d6ee; }
.v2-page .billing-toggle { border: 1px solid rgba(191, 214, 255, .24); background: rgba(255, 255, 255, .07); box-shadow: none; }
.v2-page .billing-toggle button { min-height: 44px; color: #c9d6ee; }
.v2-page .billing-toggle button[aria-pressed="true"] { background: linear-gradient(140deg, #f97316, #fb8a3c); color: #14233b; }
.v2-page .billing-toggle button span { background: rgba(59, 224, 166, .18); color: #b6f0d6; }
.v2-page .plan {
  border: 1px solid rgba(191, 214, 255, .2); color: #eaf1ff;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  box-shadow: 0 20px 50px rgba(2, 8, 28, .35); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), border-color .25s;
}
.v2-page .plan:hover { transform: translateY(-4px); border-color: rgba(255, 194, 143, .5); }
.v2-page .plan h3 { color: #fff; }
.v2-page .plan-for { color: #c9d6ee; }
.v2-page .plan-price .amount { font-family: "Kanit", "IBM Plex Sans Thai", sans-serif; color: #fff; }
.v2-page .plan-price .unit, .v2-page .plan-bill { color: #a2b4cd; }
.v2-page .plan-was { color: #a2b4cd; text-decoration-color: #ff8a3d; }
.v2-page .plan.on-sale .plan-price .amount { color: #ffc28f; }
.v2-page .plan-off { background: rgba(255, 138, 61, .18); color: #ffc28f; }
.v2-page .plan ul { border-top-color: rgba(191, 214, 255, .18); color: #c9d6ee; }
.v2-page .plan li::before { color: #ffc28f; }
.v2-page .plan li b { color: #fff; }
.v2-page .plan-perk-tag { background: #f97316; color: #14233b; }
.v2-page .plan-perk-tag.soon { background: transparent; color: #9fb3d6; }
.v2-page .plan-cta.btn-ghost { border: 1px solid rgba(191, 214, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; }
.v2-page .plan-cta.btn-ghost:hover { background: rgba(255, 255, 255, .16); }
/* the popular plan: a ring of running light, like the sign-up card */
@property --v2-plan-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.v2-page .plan-featured {
  border: 1.5px solid transparent;
  background: linear-gradient(160deg, rgba(36, 60, 128, .96), rgba(10, 20, 50, .96)) padding-box,
    conic-gradient(from var(--v2-plan-a), #ff8a3d, rgba(255, 194, 143, .3), #7fb0ff, rgba(29, 80, 190, .3), #ff8a3d) border-box;
  box-shadow: 0 24px 60px rgba(249, 115, 22, .22); animation: v2-plan-ring 6s linear infinite;
}
@keyframes v2-plan-ring { to { --v2-plan-a: 360deg; } }
.v2-page .plan-badge { background: linear-gradient(140deg, #f97316, #fb8a3c); color: #14233b; }
.v2-page .pricing-note { color: #a2b4cd; }
.v2-page .pricing-note a { color: #ffc28f; }
@media (prefers-reduced-motion: reduce) { .v2-page .plan-featured { animation: none; } .v2-page .plan:hover { transform: none; } }