/* nForme Studio website. Paper and night sections, Geist for Latin, IBM Plex
   Sans Thai for Thai, Geist Mono for labels. Media is shown at or below its
   native size and never cropped: renders are transparent squares, motion is
   rendered on the colour of the section it sits in. */

@font-face { font-family: "Geist"; src: url(assets/fonts/geist-latin-300-700.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(assets/fonts/geist-mono-latin-400-500.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url(assets/fonts/ibm-plex-sans-thai-thai-300.woff2) format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url(assets/fonts/ibm-plex-sans-thai-thai-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url(assets/fonts/ibm-plex-sans-thai-thai-500.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url(assets/fonts/ibm-plex-sans-thai-thai-600.woff2) format("woff2"); font-weight: 600 700; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }

:root {
  --paper: #141619;
  --paper-2: #1b1e22;
  --ink: #eceef1;
  --ink-2: #c6cbd2;
  --muted: #979ea8;
  --line: rgba(255, 255, 255, 0.085);
  --night: #0e1013;
  --night-2: #1a1d21;
  --night-ink: #eceef1;
  --night-muted: #979ea8;
  --night-line: rgba(255, 255, 255, 0.08);
  --blue: #5fd3fd;
  --cyan: #5fd3fd;
  --sans: "Geist", "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gutter: clamp(20px, 4vw, 56px);
  --max: 1360px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--paper); border-radius: 4px; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.paper { background: var(--paper); color: var(--ink); }
.night { background: var(--night); color: var(--night-ink); --line: var(--night-line); --muted: var(--night-muted); }

/* Type */
.label { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.label::before { content: ""; width: 7px; height: 7px; background: currentColor; flex: none; }
.label::before { background: var(--cyan); }
h1 { font-size: clamp(30px, 3.05vw, 48px); line-height: 1.16; letter-spacing: -0.022em; font-weight: 600; text-wrap: balance; }
h1 em { font-style: normal; color: var(--cyan); text-shadow: 0 0 40px rgba(95, 211, 253, 0.35); }
.headline::after { content: ""; display: block; width: 88px; height: 4px; margin-top: 28px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), rgba(95, 211, 253, 0)); }
.display { font-size: clamp(40px, 5.4vw, 80px); line-height: 1; letter-spacing: -0.04em; font-weight: 500; text-wrap: balance; }
.display em { font-style: normal; color: var(--muted); }
.giant { font-size: clamp(44px, 5.8vw, 92px); line-height: 1; letter-spacing: -0.045em; font-weight: 600; }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--night-ink); opacity: 0.86; max-width: 34em; }
.aside { font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 30em; }
.body { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 34em; }
.night .body { color: var(--night-muted); }
.index { font: 500 12px/1 var(--mono); color: var(--muted); letter-spacing: 0.06em; }
.mono { font-family: var(--mono); }
.caption, figcaption { font: 400 12.5px/1.5 var(--mono); color: var(--muted); letter-spacing: 0.01em; }
html[lang="th"] h1, html[lang="th"] .display, html[lang="th"] .giant { letter-spacing: -0.01em; line-height: 1.2; }
html[lang="th"] h1 { line-height: 1.32; font-size: clamp(28px, 2.8vw, 44px); }
html[lang="th"] .giant { font-size: clamp(40px, 5vw, 80px); }
html[lang="th"] .label { letter-spacing: 0.02em; }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 50px; padding: 0 22px; border: 0; border-radius: 4px; background: var(--ink); color: var(--paper); font-weight: 500; font-size: 15px; letter-spacing: 0; cursor: pointer; transition: background 0.2s, transform 0.2s var(--ease); white-space: nowrap; }
.button:hover { background: #fff; box-shadow: 0 0 30px -6px rgba(95, 211, 253, 0.6); }
.night .button { background: var(--night-ink); color: var(--night); }

.button .arrow { font-size: 14px; transition: transform 0.25s var(--ease); }
.button:hover .arrow { transform: translate(2px, -2px); }
.button[disabled] { cursor: default; opacity: 1; background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.button-small { height: 38px; padding: 0 16px; font-size: 14px; }
.button.wide { width: 100%; }
.link { display: inline-flex; gap: 10px; align-items: center; font-weight: 500; font-size: 15px; padding: 12px 2px; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.link:hover { border-color: currentColor; }

/* Navigation */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--night-ink); transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.nav-inner { display: flex; align-items: center; gap: 32px; height: 68px; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.nav.solid { background: rgba(14, 16, 19, 0.74); color: var(--ink); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07); }
.brand { display: block; flex: none; }
.wordmark { width: 118px; height: auto; }
.nav-links { display: flex; gap: 30px; margin: 0 auto; font-size: 14.5px; }
.nav-links a { opacity: 0.78; transition: opacity 0.2s; }
.nav-links a:hover { opacity: 1; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav .button { background: var(--night-ink); color: var(--night); }
.nav.solid .button { background: var(--ink); color: var(--night); }
.lang { display: inline-flex; gap: 5px; background: none; border: 0; padding: 8px 4px; cursor: pointer; font: 500 12.5px/1 var(--mono); letter-spacing: 0.06em; }
.lang span { opacity: 0.45; transition: opacity 0.2s; }
.lang .lang-sep { opacity: 0.3; }
html[lang="en"] .lang .lang-a, html[lang="th"] .lang .lang-b { opacity: 1; }
.menu { display: none; width: 40px; height: 40px; background: none; border: 0; padding: 0; position: relative; cursor: pointer; }
.menu i { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform 0.25s var(--ease), top 0.25s var(--ease); }
.menu i:first-of-type { top: 16px; }
.menu i:last-of-type { top: 23px; }
.menu[aria-expanded="true"] i:first-of-type { top: 19.5px; transform: rotate(45deg); }
.menu[aria-expanded="true"] i:last-of-type { top: 19.5px; transform: rotate(-45deg); }
.nav-sheet { display: grid; padding: 8px var(--gutter) 24px; background: var(--paper); color: var(--ink); border-top: 1px solid rgba(190, 228, 255, 0.1); }
.nav-sheet[hidden] { display: none; }
.nav-sheet a { padding: 14px 0; font-size: 22px; letter-spacing: -0.02em; border-bottom: 1px solid rgba(190, 228, 255, 0.1); }

/* Hero */
.hero { position: relative; overflow: hidden; min-height: min(100svh, 1040px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 110px; isolation: isolate;
  background:
    radial-gradient(34% 46% at 84% 14%, rgba(206, 238, 255, 0.55), rgba(206, 238, 255, 0) 70%),
    radial-gradient(52% 62% at 70% 56%, rgba(64, 156, 230, 0.55), rgba(64, 156, 230, 0) 72%),
    radial-gradient(36% 50% at 8% 92%, rgba(3, 8, 16, 0.7), rgba(3, 8, 16, 0) 70%),
    linear-gradient(100deg, #050e1a 0%, #0a1d36 32%, #164675 60%, #3784c3 83%, #84c3ea 100%); }
.hero-mesh { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
.hero-stage { position: absolute; z-index: 0; top: 50%; right: max(var(--gutter), calc((100vw - var(--max)) / 2)); width: min(56vw, 980px); transform: translateY(-50%); perspective: 2200px; }
.demo { position: relative; display: grid; grid-template-rows: auto 1fr; aspect-ratio: 16 / 10.4; border-radius: 16px; overflow: hidden; transform: rotateY(-7deg) rotateX(2deg); transform-origin: 100% 50%;
  background: linear-gradient(160deg, rgba(18, 38, 64, 0.82), rgba(8, 18, 32, 0.88)); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 0 0 1px rgba(190, 230, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 60px 120px -40px rgba(0, 6, 20, 0.9), 0 0 90px -30px rgba(110, 200, 255, 0.55); }
.demo-bar { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 14px; border-bottom: 1px solid rgba(190, 230, 255, 0.12); font-size: 12.5px; color: var(--night-muted); }
.demo-logo { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(160deg, #22384a, #0f1a22); color: var(--cyan); font: 700 11px/1 var(--sans); }
.demo-doc { color: var(--night-ink); font-weight: 500; }
.demo-steps { display: flex; gap: 4px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.demo-steps li { padding: 5px 10px; border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; transition: background 0.4s, color 0.4s, box-shadow 0.4s; }
.demo-steps li.done { color: var(--night-ink); }
.demo-steps li.done::before { content: "✓ "; color: var(--cyan); }
.demo-steps li.active { color: #04121f; background: var(--cyan); box-shadow: 0 0 20px -2px rgba(95, 211, 253, 0.7); }
.demo-body { display: grid; grid-template-columns: 35% 1fr; min-height: 0; }
.demo-chat { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; border-right: 1px solid rgba(190, 230, 255, 0.12); background: rgba(4, 12, 24, 0.35); }
.demo-chat-head { display: flex; align-items: center; gap: 7px; padding: 12px 14px 8px; font-size: 13px; font-weight: 600; color: var(--night-ink); }
.demo-log { display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; min-height: 0; overflow: hidden; padding: 4px 12px 10px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%); mask-image: linear-gradient(to bottom, transparent, #000 18%); }
.demo-msg { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--night-ink); animation: demo-in 0.45s var(--ease) both; }
.demo-msg.user { align-self: flex-end; max-width: 92%; padding: 8px 11px; border-radius: 12px 12px 4px 12px; background: rgba(95, 211, 253, 0.16); box-shadow: inset 0 0 0 1px rgba(95, 211, 253, 0.28); }
.demo-msg.agent { color: #cfe0ee; }
.demo-card { display: grid; grid-template-columns: 18px 1fr; gap: 2px 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(190, 230, 255, 0.12); animation: demo-in 0.45s var(--ease) both; transition: box-shadow 0.4s, background 0.4s; }
.demo-card.running { background: rgba(95, 211, 253, 0.08); box-shadow: inset 0 0 0 1px rgba(95, 211, 253, 0.5), 0 0 24px -8px rgba(95, 211, 253, 0.6); }
.demo-card b { font-size: 12.5px; font-weight: 500; color: var(--night-ink); }
.demo-card small { grid-column: 2; font: 400 11px/1.4 var(--mono); color: var(--night-muted); }
.demo-card .state { width: 14px; height: 14px; border-radius: 50%; border: 1.6px solid rgba(95, 211, 253, 0.3); border-top-color: var(--cyan); animation: demo-spin 0.8s linear infinite; }
.demo-card.done .state { animation: none; border: 0; background: var(--cyan); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.demo-caret { display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--cyan); animation: demo-blink 1s steps(1) infinite; }
.demo-input { margin: 0 12px 12px; padding: 9px 12px; border-radius: 10px; font-size: 12px; color: var(--night-muted); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(190, 230, 255, 0.14); }
.demo-view { position: relative; min-height: 0; background: radial-gradient(70% 70% at 55% 45%, rgba(70, 150, 220, 0.22), rgba(70, 150, 220, 0) 70%); }
.demo-view > [data-layer] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.7s var(--ease); }
.demo-view > [data-layer].on { opacity: 1; }
.demo-sheet { display: grid; place-items: center; padding: 6% 7%; }
.demo-sheet > svg { width: 100%; height: auto; max-height: 100%; border-radius: 4px; color: #1b2733; background: #fff; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(190, 228, 255, 0.25); }
.demo-hud { position: absolute; left: 14px; top: 12px; margin: 0; font: 500 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-muted); }
.demo-legend { position: absolute; right: 14px; top: 12px; display: grid; grid-template-columns: auto auto; gap: 4px 8px; width: 150px; font: 400 10px/1 var(--mono); color: var(--night-muted); opacity: 0; transition: opacity 0.6s; }
.demo-legend.on { opacity: 1; }
.demo-legend span:first-child { grid-column: 1 / -1; }
.demo-legend i { grid-column: 1 / -1; height: 7px; border-radius: 2px; background: linear-gradient(90deg, #30123b, #4662d7, #36aaf9, #1ae4b6, #72fe5e, #c8ef34, #faba39, #f66b19, #ca2a04, #7a0403); }
.demo-legend .hi { justify-self: end; }
.demo-note { position: absolute; left: 0; right: 0; top: calc(100% + 14px); text-align: center; font: 400 11.5px/1.4 var(--mono); color: rgba(220, 236, 250, 0.7); transform: rotateY(-7deg); }
@keyframes demo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes demo-spin { to { transform: rotate(360deg); } }
@keyframes demo-blink { 50% { opacity: 0; } }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 18%; z-index: -1; background: linear-gradient(to top, rgba(14, 16, 19, 0.9), rgba(14, 16, 19, 0)); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; padding-bottom: 44px; }
.hero-copy { grid-column: 1 / span 5; }
.hero-copy .label { margin-bottom: 30px; color: var(--night-muted); }
.tagline { flex-wrap: wrap; row-gap: 8px; }
.tag-ai { display: inline-flex; align-items: center; gap: 6px; color: var(--night-ink); }
.tag-ai::before { content: "·"; margin-right: 4px; color: var(--night-muted); }
.spark { width: 14px; height: 14px; }
svg .fill { fill: var(--cyan); stroke: none; }
.hero-side { display: grid; gap: 28px; margin-top: 32px; max-width: 34em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px 0 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--night-ink);
  background: linear-gradient(180deg, rgba(160, 210, 255, 0.14), rgba(160, 210, 255, 0.05)); box-shadow: inset 0 0 0 1px rgba(190, 230, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.chip svg { width: 16px; height: 16px; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chip small { font: 500 10px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--night-muted); padding: 4px 5px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--night-line); }
.chip-ai { box-shadow: inset 0 0 0 1px rgba(95, 211, 253, 0.35), 0 0 24px -6px rgba(95, 211, 253, 0.45); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.hero-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--night-line); }
.hero-foot .caption { display: flex; align-items: center; gap: 10px; color: var(--night-muted); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(95, 211, 253, 0.15); }
.platforms .sep { display: inline-block; width: 22px; height: 1px; margin: 0 10px; vertical-align: middle; background: var(--night-line); }
.flow { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; font: 500 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--night-muted); }
.flow li { display: flex; align-items: center; }
.flow li + li::before { content: ""; width: 22px; height: 1px; margin: 0 10px; background: var(--night-line); }
.flow li:last-child { color: var(--night-ink); }

/* Sections */
.statement, .workspace, .chapter, .local, .roadmap, .download, .faq, .showcase, .resources { padding: clamp(80px, 9vw, 136px) 0; }
.workspace { padding-top: 0; }
.statement-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; margin-top: 28px; }
.statement-grid .display { grid-column: 1 / span 8; }
.statement-grid .aside { grid-column: 9 / span 4; padding-bottom: 8px; }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.trio article { padding: 0 28px 8px; border-left: 1px solid var(--line); display: grid; align-content: start; gap: 12px; }
.trio article:first-child { padding-left: 0; border-left: 0; }
.trio article:last-child { padding-right: 0; }
.trio h3 { font-size: 24px; letter-spacing: -0.02em; }
.trio p:not(.index) { color: var(--muted); font-size: 16px; max-width: 26em; }
.tile { position: relative; aspect-ratio: 1; margin-bottom: 12px; }
.tile img { width: 100%; max-width: 600px; margin: 0 auto; transition: transform 0.8s var(--ease); }
article:hover .tile img, .gallery figure:hover img { transform: translateY(-6px); }

/* Workbench screens */
.workspace .giant { padding-top: clamp(24px, 4vw, 48px); border-top: 1px solid var(--line); }
.workspace-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin: 36px 0 40px; }
.bench-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; }
.bench-tab { background: none; border: 0; padding: 10px 14px; border-radius: 999px; cursor: pointer; font: 500 12.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); transition: background 0.2s, color 0.2s; }
.bench-tab:hover { color: var(--ink); }
.bench-tab[aria-selected="true"] { background: var(--cyan); color: #04121f; box-shadow: 0 0 22px -4px rgba(95, 211, 253, 0.7); }
.bench-stage { position: relative; }
.bench-panel[hidden] { display: none; }
.screen { position: relative; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(13, 20, 27, 0.1), 0 30px 80px -30px rgba(13, 20, 27, 0.35), 0 12px 24px -12px rgba(13, 20, 27, 0.18); max-width: 1600px; margin: 0 auto; }
.screen img, .screen video { width: 100%; }
.bench-panel figcaption { display: flex; justify-content: space-between; gap: 24px; margin-top: 16px; }
.bench-panel figcaption strong { font: 500 15px/1.4 var(--sans); color: var(--ink); letter-spacing: -0.01em; }

/* Chapters */
.chapter-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
.chapter-copy { grid-column: 1 / span 5; display: grid; gap: 28px; align-content: start; }
.chapter-media { grid-column: 6 / span 7; }
.chapter-media video { width: 100%; max-width: 800px; margin-left: auto; }
.chapter-media figcaption { text-align: right; margin-top: 8px; }

.caps { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.caps li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.caps strong { font-weight: 500; font-size: 17px; letter-spacing: -0.01em; }
.caps p { grid-column: 1; color: var(--muted); font-size: 15px; line-height: 1.5; }
.status { grid-column: 2; grid-row: 1; align-self: start; font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.status.preview { color: var(--cyan); border-color: rgba(95, 211, 253, 0.32); }
.night .status.preview { color: var(--cyan); border-color: rgba(95, 211, 253, 0.3); }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(72px, 9vw, 128px); border-top: 1px solid var(--line); }
.gallery figure { padding: 24px 24px 36px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.gallery figure:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
.gallery figure:nth-child(3n) { padding-right: 0; }
.gallery img { width: 100%; max-width: 520px; margin: 0 auto 8px; transition: transform 0.8s var(--ease); }
.gallery figcaption { display: grid; gap: 4px; }
.gallery figcaption strong { font: 500 17px/1.3 var(--sans); color: var(--ink); letter-spacing: -0.01em; }

/* Simulation results */
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(64px, 8vw, 104px); border-top: 1px solid var(--night-line); }
.result { padding: 28px 28px 32px; border-left: 1px solid var(--night-line); display: grid; gap: 14px; align-content: start; }
.result:first-child { border-left: 0; padding-left: 0; }
.result:last-child { padding-right: 0; }
.result .media { aspect-ratio: 1; display: grid; place-items: center; }
.result .media img, .result .media video { width: 100%; max-width: 560px; }
.result h3 { font-size: 24px; letter-spacing: -0.02em; }
.result .facts-line { font: 400 12.5px/1.6 var(--mono); color: var(--night-muted); }
.sim-list { margin-top: clamp(64px, 8vw, 104px); }
.sim-list .caps li { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; align-items: baseline; padding: 26px 0; }
.sim-list .caps strong { font-size: clamp(26px, 3vw, 44px); letter-spacing: -0.035em; line-height: 1.05; }
.sim-list .caps p { grid-column: 2; grid-row: 1; font-size: 16px; }
.sim-list .status { grid-column: 3; }

/* Machine */
.machine { padding-bottom: clamp(80px, 9vw, 136px); }
.wide-media { max-width: 1600px; margin: clamp(32px, 5vw, 64px) auto; padding: 0 var(--gutter); }
.wide-media video { width: 100%; -webkit-mask-image: radial-gradient(closest-side, #000 76%, transparent 100%); mask-image: radial-gradient(closest-side, #000 76%, transparent 100%); }
.machine .caps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--night-line); }
.machine .caps li { display: grid; grid-template-columns: 1fr; align-content: start; gap: 10px; padding: 24px 28px 8px; border-bottom: 0; border-left: 1px solid var(--night-line); }
.machine .caps li:first-child { border-left: 0; padding-left: 0; }
.machine .caps .status { grid-column: 1; grid-row: auto; justify-self: start; order: -1; }
.machine .caps strong { font-size: 22px; letter-spacing: -0.02em; }

/* Desktop and cloud */
.platforms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(56px, 7vw, 96px); }
.platform-card { position: relative; overflow: hidden; display: grid; gap: 14px; align-content: start; min-height: 260px; padding: 28px; border-radius: 14px; color: var(--night-ink);
  background: radial-gradient(80% 90% at 100% 0%, rgba(46, 132, 204, 0.35), rgba(46, 132, 204, 0) 70%), var(--night); }
.platform-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(238, 243, 247, 0.08);
  background-image: linear-gradient(rgba(238, 243, 247, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(238, 243, 247, 0.05) 1px, transparent 1px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 80% at 100% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 100% 0%, #000, transparent 75%); }
.platform-card .index { color: var(--cyan); }
.platform-card h3 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.03em; font-weight: 500; margin-top: auto; padding-top: 48px; }
.platform-card p:not(.index) { color: var(--night-muted); font-size: 15.5px; max-width: 30em; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.facts > div { padding: 24px 24px 0; border-left: 1px solid var(--line); display: grid; gap: 12px; align-content: start; }
.facts > div:first-child { border-left: 0; padding-left: 0; }
.facts h3 { font-size: 20px; letter-spacing: -0.02em; }
.facts p:not(.index) { color: var(--muted); font-size: 15.5px; }

/* Roadmap */
.roadmap { padding-top: 0; }
.roadmap-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.roadmap-grid > div:first-child { grid-column: 1 / span 6; display: grid; gap: 28px; align-content: start; }
.roadmap-grid > div:last-child { grid-column: 8 / span 5; }

/* Download */
.download-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.download-grid > div:first-child { grid-column: 1 / span 6; display: grid; gap: 28px; }
.download-card { grid-column: 8 / span 5; display: grid; padding: 28px; border: 1px solid var(--night-line); border-radius: 12px; background: var(--night-2); }
.download-row { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--night-line); font-size: 15px; }
.download-row .k { font: 500 12px/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--night-muted); }
.download-row.hash .v { font-size: 12px; word-break: break-all; color: var(--night-muted); }
.download-card .button { margin-top: 24px; }
.release-notes { margin: 18px 0 0; padding-left: 18px; color: var(--night-muted); font-size: 14.5px; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.faq-grid > div:first-child { grid-column: 1 / span 5; display: grid; gap: 28px; align-content: start; }
.faq-list { grid-column: 6 / span 7; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font-size: 20px; letter-spacing: -0.015em; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 14px; height: 14px; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 6.5px; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq details p { padding: 0 0 26px; color: var(--muted); max-width: 40em; }
.faq details a { color: var(--blue); }

/* Footer */
.footer { padding: clamp(96px, 12vw, 160px) 0 32px; }
.footer-cta { display: flex; justify-content: space-between; align-items: end; gap: 32px; padding-bottom: clamp(64px, 8vw, 112px); }
.footer-cta .display { font-size: clamp(44px, 6.4vw, 104px); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.4fr 1.2fr; gap: 24px; padding: 40px 0; border-top: 1px solid var(--night-line); }
.footer-grid > div { display: grid; gap: 12px; align-content: start; font-size: 15px; }
.footer-grid > div a { color: var(--night-muted); transition: color 0.2s; }
.footer-grid > div a:hover { color: var(--night-ink); }
.footer-grid .label { margin-bottom: 6px; }
.footer .wordmark { width: 150px; }
.footer-base { display: flex; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid var(--night-line); font: 400 12.5px/1.5 var(--mono); color: var(--night-muted); }

/* Reveal on scroll (JS adds .reveal; reduced motion never does) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
  .menu { display: block; }
  .hero-copy { grid-column: 1 / -1; }
  .hero-stage { position: relative; top: auto; right: auto; width: 100%; transform: none; margin: 8px 0 72px; order: 2; }
  .hero { display: flex; flex-direction: column; }
  .demo { transform: none; }
  .demo-note { transform: none; }
  .statement-grid .display, .statement-grid .aside { grid-column: 1 / -1; }
  .chapter-copy, .chapter-media { grid-column: 1 / -1; }
  .chapter-media video { margin: 0 auto; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery figure:nth-child(n) { border-left: 1px solid var(--line); padding: 24px 20px 32px; }
  .gallery figure:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .gallery figure:nth-child(2n) { padding-right: 0; }
  .results { grid-template-columns: 1fr; }
  .result, .result:first-child { border-left: 0; padding: 28px 0; border-top: 1px solid var(--night-line); }
  .result:first-child { border-top: 0; }
  .result .media { max-width: 520px; }
  .sim-list .caps li { grid-template-columns: 1fr auto; }
  .sim-list .caps p { grid-column: 1 / -1; grid-row: 2; }
  .sim-list .status { grid-column: 2; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .platforms-grid { grid-template-columns: 1fr; }
  .platform-card { min-height: 0; }
  .hero-copy { grid-column: 1 / -1; }
  .facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts > div { padding-bottom: 32px; }
  .roadmap-grid > div, .download-grid > div, .download-card, .faq-grid > div, .faq-list { grid-column: 1 / -1 !important; }
  .download-card { margin-top: 40px; }
  .faq-list { margin-top: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid .brand { grid-column: 1 / -1; margin-bottom: 16px; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .button-small { display: none; }
  .hero { min-height: 0; padding-top: 92px; }
  .hero-grid { order: 1; }
  .hero-stage { order: 2; }
  .hero-foot { order: 3; }
  .hero-wordmark { width: min(70%, 260px); }
  .demo { aspect-ratio: auto; }
  .demo-body { grid-template-columns: 1fr; grid-template-rows: 62vw auto; }
  .demo-view { grid-row: 1; }
  .demo-chat { grid-row: 2; height: 230px; border-right: 0; border-top: 1px solid rgba(190, 230, 255, 0.12); }
  .demo-steps li { padding: 5px 6px; font-size: 9.5px; }
  .demo-doc { display: none; }

  .hero-grid { padding-bottom: 36px; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .flow { flex-wrap: wrap; row-gap: 10px; }
  .flow li + li::before { width: 12px; margin: 0 6px; }
  .workspace-head { flex-direction: column; align-items: start; }
  .trio { grid-template-columns: 1fr; }
  .trio article, .trio article:first-child { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .tile { max-width: 420px; }
  .gallery { grid-template-columns: 1fr; }
  .gallery figure:nth-child(n) { border-left: 0; padding: 24px 0 28px; }
  .gallery img { max-width: 380px; }
  .machine .caps { grid-template-columns: 1fr; }
  .machine .caps li, .machine .caps li:first-child { border-left: 0; padding: 22px 0; border-bottom: 1px solid var(--night-line); }
  .facts { grid-template-columns: 1fr; }
  .facts > div, .facts > div:nth-child(n) { border-left: 0; padding: 24px 0; border-bottom: 1px solid var(--line); }
  .bench-panel figcaption { flex-direction: column; gap: 6px; }
  .footer-cta { flex-direction: column; align-items: start; }
  .footer-base { flex-direction: column; }
  .download-row { grid-template-columns: 90px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* Night sections carry a faint engineering grid and a glow, never flat. */
#simulate, .download, .footer { position: relative; isolation: isolate; }
#simulate::before, .download::before, .footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 80%); mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 80%); }
#simulate { background: var(--night); }
.download { background: radial-gradient(40% 60% at 80% 50%, rgba(95, 211, 253, 0.06), rgba(95, 211, 253, 0) 70%), var(--night); }
.footer { background: var(--night); }
html[lang="th"] .chip small, html[lang="th"] .label, html[lang="th"] .caption, html[lang="th"] figcaption, html[lang="th"] .status, html[lang="th"] .bench-tab { font-family: var(--sans); }

/* Charcoal sections: a faint top light and a fine grid, no colour wash. */
.statement { background: radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 70%), var(--night); }
.workspace { background: var(--night); }
#design { background: linear-gradient(180deg, var(--night), var(--paper)); }
.local { background: var(--paper); }
.roadmap { background: var(--paper); }
.faq { background: var(--paper); }
.machine { background: radial-gradient(50% 55% at 50% 52%, rgba(95, 211, 253, 0.07), rgba(95, 211, 253, 0) 72%), var(--night); }
.statement, .local, #design { position: relative; isolation: isolate; }
.statement::before, .local::before, #design::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(60% 50% at 50% 25%, #000, transparent 80%); mask-image: radial-gradient(60% 50% at 50% 25%, #000, transparent 80%); }
.display em, .giant em { color: var(--cyan); }
.tile, .gallery figure > img, .result .media { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 75%); }
.trio article, .gallery figure { transition: background 0.4s; }
.trio article:hover, .gallery figure:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)); }
.platform-card { background: linear-gradient(170deg, #1f2227, #16181b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.platform-card::after { -webkit-mask-image: radial-gradient(70% 80% at 100% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 100% 0%, #000, transparent 75%); }
.download-card { background: linear-gradient(170deg, #1f2227, #16181b); border-color: rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 80px -30px rgba(0, 0, 0, 0.8); }
.screen { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 100px -30px rgba(0, 0, 0, 0.9); }
.faq details a { color: var(--cyan); }
.soon { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 5px 7px; border-radius: 5px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--night-muted); box-shadow: inset 0 0 0 1px var(--night-line); }
html[lang="th"] .soon { font-family: var(--sans); }

/* Assembly, drawing, reverse: three cards under the geometry gallery. */
.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(64px, 8vw, 104px); }
.feature-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 16px;
  background: radial-gradient(80% 60% at 50% 0%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 70%), linear-gradient(170deg, #1f2227, #16181b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 70px -40px rgba(0, 0, 0, 0.8); }
.feature-media { aspect-ratio: 16 / 10; display: grid; place-items: center; }
.feature-media video, .feature-media img { width: 100%; height: 100%; object-fit: contain; }
.feature-media.sheet { padding: 5% 12%; }
.feature-media.sheet { min-height: 0; overflow: hidden; }
.feature-media.sheet img { width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; border-radius: 4px; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.7); }
.feature-card figcaption { display: grid; gap: 10px; align-content: start; padding: 20px 24px 26px; }
.feature-card h3 { font: 500 22px/1.2 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.feature-card figcaption > p:not(.label) { font: 400 15px/1.55 var(--sans); color: var(--muted); }
.feature-card .credit { font: 400 11.5px/1.4 var(--mono) !important; }
@media (max-width: 1100px) { .feature-cards { grid-template-columns: 1fr; } .feature-card { max-width: 640px; } }
html[lang="th"] .demo-card small, html[lang="th"] .demo-hud, html[lang="th"] .demo-note, html[lang="th"] .feature-card .credit { font-family: var(--sans) !important; }

.hero-wordmark { display: block; width: min(100%, 340px); height: auto; color: #fff; margin-bottom: 14px; filter: drop-shadow(0 8px 30px rgba(0, 10, 30, 0.35)); }
.hero-copy .tagline { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 34px; font: 400 clamp(17px, 1.35vw, 21px)/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: #e6f1fb; }
.hero-copy .tagline::before { content: none; }
.hero-copy .tagline .tag-ai { color: #fff; }
.hero-copy .tagline .tag-ai::before { content: "·"; margin-right: 6px; color: rgba(230, 241, 251, 0.7); }
.hero-copy .spark { width: 18px; height: 18px; }
.headline::after { width: 92px; height: 4px; margin-top: 22px; }

/* ---- 2026-11-09 pass 2: light and dark in turn, a real hero grid ---- */

/* Light sections: near-white, ink text, a darker blue for emphasis. */
.light { --paper: #f4f5f7; --paper-2: #ffffff; --ink: #0f1216; --ink-2: #2d343c; --muted: #5f6873; --line: rgba(15, 18, 22, 0.1);
  background: #f4f5f7 !important; color: var(--ink); }
.light .display em, .light .giant em { color: #0a7fc0; }
.light .label::before { background: #0a7fc0; }
.light .status { color: var(--muted); border-color: var(--line); }
.light .button { background: var(--ink); color: #fff; }
.light .button:hover { background: #262c33; box-shadow: none; }
.light::before { display: none; }
.light .tile, .light .result .media { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 75%); }
.roadmap.light, .faq.light { padding-top: 0; }
/* Dark cards keep dark-card colours inside light sections. */
.feature-card, .platform-card { --ink: var(--night-ink); --muted: var(--night-muted); --line: var(--night-line); color: var(--night-ink); }
.machine .caps { border-top-color: var(--line); }
.machine .caps li { border-left-color: var(--line); }

/* Hero: copy and the Agent window side by side, never on top of each other. */
.hero-grid { grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: clamp(32px, 4vw, 72px); align-items: center; padding-bottom: 48px; }
.hero-copy { grid-column: auto; }
.hero-stage { position: relative; top: auto; right: auto; width: auto; transform: none; perspective: none; z-index: 0; }
.demo { transform: none; background: #1b1e23; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 100px -30px rgba(0, 0, 0, 0.75); }
.demo-bar { background: #16181c; border-bottom-color: rgba(255, 255, 255, 0.07); }
.demo-chat { background: #15171b; border-right-color: rgba(255, 255, 255, 0.07); }
.demo-view { background: radial-gradient(70% 70% at 55% 48%, #2a2e35, #1f2227 70%); }
.demo-msg.user { background: #2a2f37; box-shadow: none; }
.demo-card { background: #1d2025; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.demo-card.running { background: #1d2025; box-shadow: inset 0 0 0 1px rgba(95, 211, 253, 0.45); }
.demo-card small { font: 400 11.5px/1.4 var(--sans); }
.demo-steps li.active { box-shadow: none; }
.demo-note { position: static; margin-top: 14px; transform: none; text-align: left; color: rgba(230, 241, 251, 0.62); }
@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 640px; }
}

/* Capabilities: a full-width grid of short cards, not a long column. */
.caps-grid .caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--line); }
.caps-grid .caps li { display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 8px 12px; padding: 24px 24px 26px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.caps-grid .caps li:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
.caps-grid .caps li strong { font-size: 19px; }
.chapter-grid { align-items: start; }
.chapter-media { align-self: center; }
.feature-cards { margin-top: clamp(40px, 5vw, 64px); }

/* Showcase: one large tile and four small ones. */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(48px, 6vw, 72px); }
.bento figure { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
  background: radial-gradient(80% 60% at 50% 35%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 70%), linear-gradient(170deg, #1f2227, #16181b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.08); transition: transform 0.6s var(--ease); }
.bento figure:hover { transform: translateY(-4px); }
.bento .media { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 4%; }
.bento .media img { width: 100%; height: 100%; object-fit: contain; }
.bento .big { grid-column: span 2; }
.bento .big .media { aspect-ratio: auto; flex: 1; min-height: 0; }
.bento figcaption { display: grid; gap: 4px; padding: 0 22px 20px; font: 400 13px/1.5 var(--sans); color: var(--night-muted); }
.bento figcaption strong { font: 500 18px/1.3 var(--sans); color: var(--night-ink); letter-spacing: -0.01em; }

/* Resources and contact. */
.resources-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.resources-grid > div { display: grid; gap: 28px; }
.resource-list { display: grid; border-top: 1px solid var(--line); }
.resource-list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); transition: padding 0.3s var(--ease); }
.resource-list a:hover { padding-left: 8px; }
.resource-list strong { font-weight: 500; font-size: 17px; }
.resource-list span { grid-column: 1; color: var(--muted); font-size: 14.5px; }
.resource-list i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; color: #0a7fc0; }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; padding: clamp(24px, 3vw, 40px); border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 18, 22, 0.08), 0 30px 60px -40px rgba(15, 18, 22, 0.35); }
.contact .field { grid-column: 1 / -1; display: grid; gap: 6px; padding: 10px 0; }
.contact .field.half { grid-column: span 1; }
.contact label { font: 500 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
html[lang="th"] .contact label { font-family: var(--sans); letter-spacing: 0; }
.contact input, .contact select, .contact textarea { width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(15, 18, 22, 0.18); border-radius: 0; background: transparent;
  font: 400 16px/1.4 var(--sans); color: var(--ink); outline: none; transition: border-color 0.2s; resize: vertical; }
.contact input:focus, .contact select:focus, .contact textarea:focus { border-bottom-color: #0a7fc0; box-shadow: 0 1px 0 #0a7fc0; }
.contact-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.contact-foot p { color: var(--muted); font-size: 13px; }

@media (max-width: 1100px) {
  .caps-grid .caps { grid-template-columns: 1fr 1fr; }
  .caps-grid .caps li:nth-child(n) { border-left: 1px solid var(--line); padding-left: 20px; }
  .caps-grid .caps li:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .bento { grid-template-columns: 1fr 1fr; }
  .resources-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .caps-grid .caps, .bento { grid-template-columns: 1fr; }
  .caps-grid .caps li:nth-child(n) { border-left: 0; padding-left: 0; }
  .bento .big { grid-column: auto; }
  .bento .big .media { aspect-ratio: 16 / 10; }
  .contact { grid-template-columns: 1fr; }
  .contact .field.half { grid-column: 1 / -1; }
  .contact-foot { flex-direction: column; align-items: flex-start; }
}

/* ---- 2026-11-09 pass 3: one continuous dark page, live 3D, bigger type ---- */
body { font-size: 18.5px; }
.display { font-size: clamp(42px, 5.6vw, 88px); }
.aside, .body { font-size: 18.5px; }
.lead { font-size: clamp(18px, 1.5vw, 22px); }
.caps strong { font-size: 19px; }
.caps p, .facts p:not(.index), .platform-card p:not(.index), .feature-card figcaption > p:not(.label) { font-size: 16.5px; }

/* Hero: the plate live on the right, the Agent in glass beside it. */
.hero-stage { position: relative; aspect-ratio: 4 / 3.2; }
.hero-3d { position: absolute; inset: -6% -8% -4% -4%; width: 112%; height: 110%; display: block; }
.glass-chat { position: absolute; left: -2%; bottom: 2%; width: min(330px, 46%); padding: 16px 18px 18px; border-radius: 16px;
  background: rgba(14, 24, 38, 0.46); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(190, 228, 255, 0.16), 0 24px 60px -24px rgba(0, 0, 0, 0.6); transition: opacity 0.6s var(--ease); }
.glass-chat:has(.chat-log:empty) { opacity: 0; }
.chat-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: #fff; }
.chat-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.chat-log li { animation: demo-in 0.45s var(--ease) both; }
.chat-log .you { color: #fff; }
.chat-log .agent { color: #cfe0ee; }
.chat-log .task { display: flex; gap: 10px; align-items: baseline; color: var(--night-muted); }
.chat-log .task::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgba(230, 241, 251, 0.35); transform: translateY(-1px); }
.chat-log .task.done { color: #e6f1fb; }
.chat-log .task.done::before { background: var(--cyan); }
.chat-log .task.now::before { background: var(--cyan); animation: demo-blink 1s steps(1) infinite; }
.caret { display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--cyan); animation: demo-blink 1s steps(1) infinite; }

/* Platform: the scrolling 3D workflow. */
.platform { position: relative; padding-top: clamp(96px, 11vw, 160px); background: var(--night); }
.platform-head { display: grid; gap: 24px; padding-bottom: 32px; }
.workflow { position: relative; }
.flow-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #1b2027; }
.flow-stage canvas { display: block; width: 100%; height: 100%; }
.sheet-host { position: absolute; left: 60%; top: 52%; width: min(62vw, 110svh); transform: translate(-50%, -50%); opacity: 0; pointer-events: none; will-change: opacity, transform; }
.sheet-host svg { display: block; width: 100%; height: auto; color: #1b2027; box-shadow: 0 30px 80px -30px rgba(12, 17, 23, 0.35); }
.flow-steps { position: relative; margin-top: -100svh; }
.step { height: 125svh; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 0 var(--gutter) clamp(64px, 12vh, 140px); max-width: calc(560px + 2 * var(--gutter)); }
.step-no { font: 500 14px/1 var(--mono); color: var(--cyan); letter-spacing: 0.1em; }
.step h3 { font-size: clamp(48px, 6vw, 96px); line-height: 1; letter-spacing: -0.045em; color: #fff; transition: color 0.5s; }
.step p:last-child { font-size: clamp(18px, 1.4vw, 22px); color: #cdd5df; max-width: 26em; transition: color 0.5s; }
.workflow.paper .step h3 { color: #0c1117; }
.workflow.paper .step p:last-child { color: #3a434e; }
.workflow.paper .step-no { color: #1f6fa8; }
.workflow.no-stage .flow-stage { display: none; }
.workflow.no-stage .flow-steps { margin-top: 0; }
.workflow.no-stage .step { height: auto; padding-top: 80px; }
@media (max-width: 900px) { .sheet-host { left: 50%; width: 92vw; } }

/* Sections carry a soft light of the brand blue, so the dark page moves. */
#workspace { background: radial-gradient(60% 40% at 50% 70%, rgba(64, 156, 230, 0.16), rgba(64, 156, 230, 0) 70%), var(--night); }
#design { background: radial-gradient(45% 45% at 85% 20%, rgba(64, 156, 230, 0.14), rgba(64, 156, 230, 0) 70%), var(--paper); }
#simulate { background: radial-gradient(50% 40% at 15% 60%, rgba(95, 211, 253, 0.09), rgba(95, 211, 253, 0) 70%), var(--night); }
.machine { background: radial-gradient(55% 60% at 50% 50%, rgba(64, 156, 230, 0.14), rgba(64, 156, 230, 0) 72%), var(--paper) !important; }
.showcase { background: radial-gradient(50% 45% at 30% 60%, rgba(64, 156, 230, 0.14), rgba(64, 156, 230, 0) 72%), var(--night); }
.local, .roadmap, .resources, .faq { background: var(--paper); }
@media (max-width: 1180px) { .hero-stage { max-width: 760px; } .glass-chat { left: 0; } }
@media (max-width: 640px) { .glass-chat { position: relative; width: 100%; left: 0; bottom: 0; margin-top: -12%; } }

/* ---- Hero in light, as the owner asked (nTop-like): paper, ink, one blue ---- */
.hero.night { --night-ink: #0d1117; --night-muted: #4a535e; --night-line: rgba(13, 17, 23, 0.1); background: #f3f2ee; color: #0d1117; }
.hero::after, .hero-mesh { display: none; }
.hero .hero-wordmark { color: #0d1117; filter: none; }
.hero .tagline { color: #3a424c; }
.hero .tagline .tag-ai, .hero .tag-ai::before { color: #0d1117; }
.hero h1 { color: #0d1117; }
.hero h1 em { color: #1f5fbf; text-shadow: none; }
.hero .headline::after { background: #1f5fbf; }
.hero .lead { color: #3a424c; opacity: 1; }
.hero .chip { color: #0d1117; background: #fff; box-shadow: inset 0 0 0 1px rgba(13, 17, 23, 0.12); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero .chip svg { stroke: #1f5fbf; }
.hero svg .fill { fill: #1f5fbf; }
.hero .chip small { color: #6a737e; box-shadow: inset 0 0 0 1px rgba(13, 17, 23, 0.14); }
.hero .chip-ai { box-shadow: inset 0 0 0 1px rgba(31, 95, 191, 0.45); }
.hero .button { background: #0d1117; color: #fff; }
.hero .button:hover { background: #262c33; box-shadow: none; }
.hero .link { color: #0d1117; }
.hero .hero-foot { border-top-color: rgba(13, 17, 23, 0.1); }
.hero .hero-foot .caption { color: #5a636e; }
.hero .dot { background: #1f5fbf; box-shadow: 0 0 0 4px rgba(31, 95, 191, 0.14); }
.hero .glass-chat { background: rgba(255, 255, 255, 0.62); box-shadow: inset 0 0 0 1px rgba(13, 17, 23, 0.08), 0 24px 60px -28px rgba(13, 17, 23, 0.35); }
.hero .chat-head, .hero .chat-log .you, .hero .chat-log .task.done { color: #0d1117; }
.hero .chat-log .agent { color: #3a424c; }
.hero .chat-log .task { color: #6a737e; }
.hero .chat-log .task::before { background: rgba(13, 17, 23, 0.25); }
.hero .chat-log .task.done::before, .hero .chat-log .task.now::before, .hero .caret { background: #1f5fbf; }
/* The nav reads dark over the light hero, light once it turns solid. */
.nav:not(.solid) { color: #0d1117; }
.nav:not(.solid) .button { background: #0d1117; color: #fff; }
.hero-sheet { left: 54%; top: 44%; width: 86%; z-index: 1; }
.hero-sheet svg { box-shadow: 0 24px 60px -24px rgba(13, 17, 23, 0.3); }

/* Hero stage, as the owner placed it: the part up top, the Agent below it,
   as wide as the stage. */
.hero-stage { aspect-ratio: auto; display: flex; flex-direction: column; gap: 6px; align-self: start; margin-top: -24px; }
.hero-view { position: relative; aspect-ratio: 16 / 10.5; }
.hero-3d { position: absolute; inset: -8% -6% -2% -6%; width: 112%; height: 110%; }
.hero-sheet { left: 50%; top: 48%; width: 92%; }
.hero .glass-chat { position: relative; left: auto; bottom: auto; width: 100%; height: 216px; padding: 18px 22px; overflow: hidden; }
.hero .chat-log { position: absolute; left: 22px; right: 22px; top: 46px; bottom: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%); mask-image: linear-gradient(to bottom, transparent, #000 22%); }
.hero .glass-chat:has(.chat-log:empty) { opacity: 1; }
@media (max-width: 640px) { .hero .glass-chat { margin-top: 0; } }

/* Case: a real screen recording, wide, on the dark page. */
.case { padding: clamp(96px, 11vw, 160px) 0 0; background: radial-gradient(50% 40% at 50% 70%, rgba(64, 156, 230, 0.14), rgba(64, 156, 230, 0) 72%), var(--night); }
.case-media { width: min(94vw, 1760px); margin: clamp(48px, 6vw, 80px) auto 0; }
.case-media video { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 50px 120px -40px rgba(0, 0, 0, 0.85); }
.case-media figcaption { margin-top: 14px; text-align: center; font: 400 13px/1.5 var(--mono); color: var(--night-muted); }
html[lang="th"] .case-media figcaption { font-family: var(--sans); }