/* ============================================================
   motion.css — Pidjob cinematic hero + scroll animation
   Progressive enhancement (active with <html>.has-motion + .cine-live).
   Without JS / WebGL / with reduced motion / on small screens, .cine
   renders as a clean static hero and the rest of the site is untouched.
   ============================================================ */

/* ---------- cine stage: shared ----------
   NOTE: .cine must NOT have overflow:hidden — it would break the
   position:sticky pinning of .cine-stage. The canvas is clipped by
   .cine-stage's own overflow:hidden instead. */
.cine{ position:relative; background:var(--cream,#f7f6f0); }
.cine-sky{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 78% 12%, #ffffff 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #fbfbf4 0%, #f3f5ec 52%, #e7ede4 100%); }
/* real construction-timelapse video, scroll-scrubbed */
.cine-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  opacity:0; transition:opacity 1.1s ease; }
.cine-video.in{ opacity:1; }
/* subtle brand tint to blend the footage with the cream site */
.cine.cine-live .cine-stage::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,59,50,.12), rgba(18,59,50,0) 32%, rgba(18,59,50,.14) 100%); }
.cine-overlay{ position:relative; z-index:2; }
.cine-screen .container{ width:100%; }
.cine-screen h2,.cine-screen h1{ color:var(--green,#123b32); }

/* hero copy */
.cine-hero{ padding-top:96px; padding-bottom:70px; max-width:680px; }
.cine-hero h1{ font-size:clamp(44px,5.4vw,74px); font-weight:600; line-height:1.28; letter-spacing:-2px; margin:6px 0 0; }
.cine-hero p{ font-size:clamp(15px,1.4vw,18px); color:#5c6b60; max-width:40ch; margin:26px 0 0; line-height:1.9; }
.cine-hero .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
.cine-cue{ display:flex; align-items:center; gap:12px; margin-top:46px; font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; color:#8a968b; font-family:'Manrope','Noto Sans Thai',sans-serif; font-weight:600; }
.cine-cue i{ width:34px; height:1px; background:linear-gradient(90deg,var(--gold,#b8954c),transparent); position:relative; }

/* ---------- 4 bespoke story points (text boxes) + scroll progress ---------- */
.cine-pt .pt-box{ max-width:min(540px,80%); position:relative; z-index:1; }
.pt-box .pt-k{ display:inline-block; font-family:'Manrope','Noto Sans Thai',sans-serif; font-size:11px; font-weight:800;
  letter-spacing:2px; text-transform:uppercase; color:#e6cf95; margin-bottom:15px; }
.pt-box h2{ color:#fff; font-size:clamp(32px,5vw,64px); font-weight:600; line-height:1.12; letter-spacing:-1.6px; margin:0;
  text-shadow:0 2px 28px rgba(8,20,16,.6); }
.pt-box p{ color:#eef1ea; font-size:clamp(15px,1.5vw,19px); line-height:1.7; margin:18px 0 0; max-width:40ch; font-weight:500;
  text-shadow:0 1px 18px rgba(8,20,16,.7); }
.pt-box.center{ max-width:min(640px,90%); margin:0 auto; text-align:center; }
.pt-box.center p{ margin-left:auto; margin-right:auto; }
.pt-box .button{ margin-top:26px; }
.cine-prog{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.18); z-index:5; pointer-events:none; }
.cine-prog>i{ display:block; height:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg, var(--gold,#b8954c), #e4cd94); }

/* ---------- static fallback (no .cine-live) ---------- */
.cine:not(.cine-live) .cine-stage{ position:relative; }
.cine:not(.cine-live) .cine-pt.pt2,
.cine:not(.cine-live) .cine-pt.pt3,
.cine:not(.cine-live) .cine-pt.pt4,
.cine:not(.cine-live) .cine-prog,
.cine:not(.cine-live) .cine-cue{ display:none; }
.cine:not(.cine-live) .cine-pt.pt1{ position:relative; opacity:1; }
.cine:not(.cine-live) .cine-hero{ opacity:1!important; }

/* ===================== Hero v2 — lightweight pure-CSS image crossfade (replaces canvas timelapse) ===================== */
.hero-v2{ position:relative; min-height:94svh; display:flex; align-items:center; overflow:hidden; background:#102a20; }
.hero-v2 .hv-bg{ position:absolute; inset:0; z-index:0; }
.hero-v2 .hv-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; will-change:opacity,transform; animation:hvFade 28s ease-in-out infinite; }
.hero-v2 .hv-1{ background-image:url(/media/hero-1.jpg); animation-delay:0s; }
.hero-v2 .hv-2{ background-image:url(/media/hero-2.jpg); animation-delay:7s; }
.hero-v2 .hv-3{ background-image:url(/media/hero-3.jpg); animation-delay:14s; }
.hero-v2 .hv-4{ background-image:url(/media/hero-4.jpg); animation-delay:21s; }
@keyframes hvFade{ 0%{ opacity:0; transform:scale(1); } 3%{ opacity:1; } 22%{ opacity:1; } 28%{ opacity:0; transform:scale(1.07); } 100%{ opacity:0; transform:scale(1.07); } }
.hero-v2 .hv-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(96deg, rgba(9,26,20,.90) 0%, rgba(9,26,20,.66) 32%, rgba(9,26,20,.26) 60%, rgba(9,26,20,.08) 100%), linear-gradient(0deg, rgba(9,26,20,.55) 0%, rgba(9,26,20,0) 42%); }
.hero-v2 .hv-inner{ position:relative; z-index:2; width:100%; padding-block:48px; }
.hero-v2 .cine-hero{ max-width:660px; animation:hvRise .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes hvRise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
.hero-v2 .cine-hero .eyebrow{ color:rgba(255,255,255,.92); }
.hero-v2 .cine-hero .eyebrow .status-dot{ background:#b8954c; box-shadow:0 0 0 4px rgba(184,149,76,.22); }
.hero-v2 .cine-hero h1{ margin:14px 0 0; font-size:clamp(2.2rem,5.2vw,4rem); line-height:1.08; font-weight:800; color:#fff; text-shadow:0 2px 26px rgba(0,0,0,.30); }
.hero-v2 .cine-hero h1 .gold-word{ color:#d8b26a; }
.hero-v2 .cine-hero h1 .gold-word svg path{ stroke:#d8b26a; }
.hero-v2 .cine-hero p{ margin:18px 0 0; font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.6; color:rgba(255,255,255,.9); text-shadow:0 1px 14px rgba(0,0,0,.28); }
.hero-v2 .hero-actions{ margin-top:28px; }
.hero-v2 .hv-cue{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; color:rgba(255,255,255,.72); font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.hero-v2 .hv-cue i{ width:1.5px; height:30px; border-radius:2px; background:linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,0)); transform-origin:top; animation:hvCue 1.9s ease-in-out infinite; }
@keyframes hvCue{ 0%,100%{ opacity:.25; transform:scaleY(.5); } 50%{ opacity:1; transform:scaleY(1); } }
@media (max-width:700px){ .hero-v2{ min-height:86svh; } .hero-v2 .hv-scrim{ background:linear-gradient(0deg, rgba(9,26,20,.92) 2%, rgba(9,26,20,.5) 46%, rgba(9,26,20,.28) 100%); } .hero-v2 .cine-hero{ max-width:100%; } .hero-v2 .cine-hero .hero-actions{ display:grid; grid-template-columns:1fr; gap:10px; } }
/* Under reduced-motion the site's global rule (site.css) disables ALL css animation with
   !important, so the crossfade cannot run there — fall back to the finished-house image shown
   statically (still beautiful, and the smoothest possible). Normal visitors get the crossfade. */
@media (prefers-reduced-motion:reduce){ .hero-v2 .hv-4{ opacity:1; } .hero-v2 .cine-hero{ animation:none; } .hero-v2 .hv-cue i{ animation:none; } }

/* ---------- legacy canvas timelapse styles below are now UNUSED (hero is .hero-v2) ---------- */
.cine.cine-live{ height:850vh; }
.cine.cine-live .cine-stage{ position:sticky; top:0; height:100svh; min-height:560px; overflow:hidden;
  display:flex; align-items:center; }
.cine.cine-live .cine-overlay{ position:absolute; inset:0; }
/* each story point fills the stage; JS cross-fades their opacity along the scroll */
.cine.cine-live .cine-pt{ position:absolute; inset:0; opacity:0; will-change:opacity; }
.cine.cine-live .cine-pt>.container{ position:absolute; left:50%; width:100%; z-index:1; }
.cine.cine-live .cine-pt.pt1>.container{ top:50%; transform:translate(-50%,-50%); }
.cine.cine-live .cine-pt.pt2>.container{ bottom:52px; transform:translateX(-50%); }
.cine.cine-live .cine-pt.pt3>.container{ top:50%; transform:translate(-50%,-50%); }
.cine.cine-live .cine-pt.pt4>.container{ top:50%; transform:translate(-50%,-50%); }
/* per-point legibility scrims (tailored to each frame's composition) */
.cine.cine-live .cine-pt.pt1::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(247,246,240,.95) 0%, rgba(247,246,240,.72) 30%, rgba(247,246,240,.14) 56%, transparent 72%); }
.cine.cine-live .cine-pt.pt2::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(10,24,20,.74), rgba(10,24,20,.2) 42%, transparent 66%); }
.cine.cine-live .cine-pt.pt3::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,24,20,.82) 0%, rgba(10,24,20,.36) 36%, transparent 62%); }
.cine.cine-live .cine-pt.pt4::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(115% 78% at 50% 46%, rgba(8,20,30,.66) 0%, rgba(8,20,30,.34) 46%, transparent 78%); }
.cine.cine-live .cine-hero{ padding-top:0; padding-bottom:0; }

/* ---------- the product preview hero that follows ---------- */
.product-hero .eyebrow{ color:#6e806f; }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .cine.cine-live .cine-overlay::before{ background:linear-gradient(170deg, rgba(247,246,240,.9) 0%, rgba(247,246,240,.55) 45%, transparent 80%); }
}
@media (max-width:700px){
  .cine-hero{ padding-top:70px; padding-bottom:54px; }
  .cine-hero .hero-actions{ display:grid; grid-template-columns:1fr 1fr; }
  /* mobile: keep the timelapse but make the scroll much shorter — quick & easy to swipe */
  .cine.cine-live{ height:500vh; }
  .pt-box{ max-width:min(520px,90%); }
  .cine.cine-live .cine-pt.pt2{ padding-bottom:40px; }
}
/* hero secondary button — frosted so it reads clearly over the timelapse (not see-through) */
.cine-hero .button.secondary{ background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.7);
  color:var(--green,#123b32); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  box-shadow:0 8px 24px rgba(10,24,20,.2); }
.cine-hero .button.secondary .play-icon{ color:var(--gold,#b8954c); }

/* ============================================================
   App showcase — pinned, screens change on scroll
   ============================================================ */
.app-reel{ position:relative; background:#eef2e9; border-block:1px solid #e0e6d8; }
.app-reel .ar-sticky{ position:relative; padding-block:70px; }
.app-reel.live{ height:420vh; }
.app-reel.live .ar-sticky{ position:sticky; top:0; height:100svh; min-height:600px; display:flex; align-items:center; padding-block:0; }
.app-reel .ar-sticky>.container{ width:100%; min-width:0; }
.ar-head-block{ text-align:center; margin-bottom:26px; }
.ar-head-block .eyebrow{ display:inline-flex; justify-content:center; }
h2.ar-head{ font-size:clamp(26px,3.2vw,42px); font-weight:600; line-height:1.25; letter-spacing:-1.1px; margin:12px 0 0; color:var(--green,#123b32); }

/* device frame */
.ar-device{ border:1px solid #d3ddd0; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 46px 100px #183b3226, 0 2px 6px #183b320a; }
.ar-bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; background:#f3f6ef; border-bottom:1px solid #e7ebe2; font-size:11px; color:#7f8b78; }
.ar-bar>span{ width:11px; height:11px; border-radius:50%; background:#d7dccb; }
.ar-bar b{ margin-left:14px; font-weight:500; background:#fff; border:1px solid #e4e9dd; border-radius:7px; padding:5px 13px; color:#8a968b; }
.ar-body{ display:flex; }
.ar-side{ width:212px; flex:none; background:var(--green,#123b32); padding:16px 14px; display:flex; flex-direction:column; }
.ar-brand{ display:flex; align-items:center; gap:7px; color:#fff; font-family:'Manrope',sans-serif; font-weight:800; font-size:18px; letter-spacing:-.5px; padding:4px 4px 14px; }
.ar-brand .ar-logo{ width:26px; height:26px; border-radius:7px; background:#bded81; color:#123b32; display:grid; place-items:center; font-size:15px; font-weight:800; }
.ar-brand i{ color:var(--gold,#d9cc99); font-style:normal; }
.ar-company{ display:flex; align-items:center; gap:9px; background:#ffffff14; border:1px solid #ffffff1f; border-radius:10px; padding:9px 10px; margin-bottom:13px; }
.ar-coava{ width:30px; height:30px; flex:none; border-radius:8px; background:#2f5146; color:#cfe6d8; display:grid; place-items:center; font-size:11px; font-weight:700; }
.ar-coinfo b{ display:block; font-size:12.5px; font-weight:600; color:#fff; line-height:1.2; }
.ar-coinfo small{ display:block; font-size:10px; color:#9fbcae; margin-top:2px; }
.ar-nav{ display:flex; flex-direction:column; gap:2px; }
.ar-nav-i{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; font-size:12.5px; color:#b9cfc4; white-space:nowrap; transition:background .3s, color .3s; }
.ar-nav-i i{ font-style:normal; font-size:14px; width:18px; text-align:center; color:#8db09e; }
.ar-nav-i.on{ background:#ffffff1c; color:#fff; font-weight:600; }
.ar-nav-i.on i{ color:#d9cc99; }
.ar-nav-i.dim{ opacity:.5; }
.ar-side-foot{ margin-top:auto; padding:12px 6px 2px; }
.ar-online{ display:flex; align-items:center; gap:7px; font-size:10.5px; color:#9fbcae; }
.ar-online::before{ content:''; width:6px; height:6px; border-radius:50%; background:#6fd08a; flex:none; }

/* filmstrip: screens slide horizontally like switching windows */
.ar-main{ position:relative; flex:1; min-width:0; height:472px; overflow:hidden; }
.ar-track{ display:flex; height:100%; will-change:transform; }
.ar-screen{ flex:0 0 100%; min-width:0; padding:30px 34px; display:flex; flex-direction:column; gap:14px; overflow:hidden; }

/* real-app screen components (mirrors the actual Pidjob app UI) */
.ar-ph{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.ar-crumb{ font-size:10px; color:#9aa89c; margin-bottom:5px; }
.ar-crumb i{ font-style:normal; color:#c2cdbf; margin:0 4px; }
.ar-ph-ttl small{ display:block; font-size:10px; color:#9b855c; letter-spacing:.8px; }
.ar-ph-ttl h4{ font-size:21px; font-weight:600; color:var(--green,#123b32); margin-top:2px; }
.ar-date{ display:block; font-size:11px; color:#8a988b; margin-top:5px; }
.ar-newbtn{ background:var(--green,#123b32); color:#fff; font-size:12px; font-weight:600; border-radius:8px; padding:9px 15px; white-space:nowrap; }
.ar-m4{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.ar-m4.three{ grid-template-columns:repeat(3,1fr); }
.ar-mc{ background:#f7faf4; border:1px solid #e6ede2; border-radius:10px; padding:12px; min-width:0; }
.ar-mc small{ display:block; font-size:10px; color:#7f8e78; line-height:1.35; }
.ar-mc b{ display:block; font-family:'Manrope','Noto Sans Thai',sans-serif; font-weight:600; font-size:23px; color:var(--green,#123b32); margin:6px 0 4px; line-height:1; }
.ar-mc b.g{ font-size:18px; }
.ar-mc b.am2{ color:#b06a2e; }
.ar-mc em{ font-style:normal; font-size:10px; color:#8b977d; line-height:1.3; display:block; }
.ar-mc em.am{ color:#b08a3e; }
.ar-lh{ font-size:14px; font-weight:600; color:var(--green,#123b32); display:flex; align-items:center; gap:10px; }
.ar-chip{ font-size:11px; font-weight:500; padding:4px 9px; border-radius:6px; background:#eaf0e4; color:#54744f; white-space:nowrap; }
.ar-chip.am{ background:#f8eedc; color:#a3874e; }
.ar-chip.rd{ background:#fbe9e3; color:#b5563f; }
.ar-chip.ok{ background:#e4efe0; color:#4e7a46; }
.ar-trow{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid #e6ede2; border-radius:11px; background:#fff; }
.ar-trow>div{ flex:1; min-width:0; }
.ar-trow b{ display:block; font-size:14px; font-weight:600; color:var(--green,#123b32); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-trow small{ display:block; font-size:11px; color:#8b9785; margin-top:3px; }
.ar-time{ font-size:12px; color:#78876e; white-space:nowrap; font-family:'Manrope',sans-serif; }
/* kanban board */
.ar-board{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.ar-col{ background:#f3f6ef; border:1px solid #e6ede2; border-radius:11px; padding:11px 10px; min-width:0; }
.ar-col-h{ font-size:11px; font-weight:600; color:#6b7d68; display:flex; justify-content:space-between; margin-bottom:9px; }
.ar-col-h b{ color:#9aab91; }
.ar-c{ background:#fff; border:1px solid #e6ede2; border-radius:9px; padding:10px 11px; margin-bottom:8px; }
.ar-c:last-child{ margin-bottom:0; }
.ar-c.done{ opacity:.78; }
.ar-c p{ font-size:12px; font-weight:600; color:var(--green,#123b32); margin:7px 0 6px; line-height:1.35; }
.ar-c small{ font-size:10px; color:#8b9785; }
/* review */
.ar-note2{ background:#eef5ea; border:1px solid #dce8d7; border-radius:9px; padding:11px 14px; font-size:12px; color:#56704e; }
.ar-rev{ display:flex; justify-content:space-between; align-items:center; gap:14px; border:1px solid #e6ede2; border-radius:11px; padding:14px 16px; background:#fff; }
.ar-rev b{ display:block; font-size:14px; font-weight:600; color:var(--green,#123b32); }
.ar-rev small{ display:block; font-size:11px; color:#8b9785; margin-top:4px; line-height:1.5; }
/* finance table */
.ar-ft{ width:100%; border-collapse:collapse; }
.ar-ft th{ text-align:right; font-size:10px; font-weight:600; color:#90a08f; padding:0 8px 9px; border-bottom:1px solid #e6ede2; }
.ar-ft th:first-child{ text-align:left; }
.ar-ft td{ text-align:right; font-size:13px; color:#55685a; padding:12px 8px; border-bottom:1px solid #eef2ea; font-family:'Manrope','Noto Sans Thai',sans-serif; }
.ar-ft td:first-child{ text-align:left; }
.ar-ft td b{ display:block; font-size:13px; color:var(--green,#123b32); }
.ar-ft td small{ display:block; font-size:10px; color:#9aab91; margin-top:2px; }

/* static fallback / mobile: show only the first screen */
.app-reel:not(.live) .ar-track{ transform:none!important; }
/* tablet / iPad: keep the full device, trim the sidebar */
@media (max-width:1000px){
  .app-reel.live{ height:440vh; }
  .ar-side{ width:178px; padding:14px 11px; }
  .ar-nav-i{ font-size:11.5px; padding:8px 9px; gap:8px; }
  .ar-company{ padding:8px; }
  .ar-m4{ gap:8px; } .ar-mc{ padding:10px; } .ar-mc b{ font-size:20px; } .ar-mc b.g{ font-size:15px; }
  .ar-trow{ padding:10px 12px; }
}
/* phones: same filmstrip as desktop (scroll switches screens one at a time), sidebar hidden */
@media (max-width:700px){
  .app-reel.live{ height:400vh; }
  .app-reel.live .ar-sticky{ min-height:0; padding-block:0; }
  .ar-head-block{ margin-bottom:12px; }
  h2.ar-head{ font-size:22px; }
  .ar-side{ display:none; }
  /* fill the screen so the whole app page shows (not cut at the bottom) */
  .ar-main{ height:min(600px, calc(100svh - 134px)); min-height:380px; }
  .ar-screen{ padding:16px 15px; gap:11px; }
  .ar-ph-ttl h4{ font-size:19px; }
  .ar-m4, .ar-m4.three{ grid-template-columns:repeat(2,1fr); }
  .ar-board{ grid-template-columns:repeat(2,1fr); }
  .ar-date{ display:none; }
}

/* ============================================================
   Footer social + floating LINE (always on; LINE is the primary channel)
   ============================================================ */
.foot-social{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:22px 0 6px; }
.foot-social-l{ font-size:12px; color:#8a988b; margin-right:2px; }
.soc{ font-size:12.5px; font-weight:600; color:#4a5a4f; background:#eef2e9; border:1px solid #e0e6d8; border-radius:100px; padding:7px 15px; text-decoration:none; transition:background .2s; }
.soc:hover{ background:#e3ebdc; }
.soc.soc-line{ background:#06c755; border-color:#06c755; color:#fff; }
.soc.soc-line:hover{ background:#05b24c; }
.float-line{ position:fixed; right:20px; bottom:24px; z-index:60; display:inline-flex; align-items:center; gap:10px;
  background:#06c755; color:#fff; border-radius:100px; padding:12px 20px 12px 17px; text-decoration:none;
  box-shadow:0 12px 30px rgba(6,199,85,.42), 0 2px 8px #0003; }
.float-line .fl-ic{ font-size:19px; line-height:1; }
.float-line .fl-tx{ font-size:11px; line-height:1.1; display:flex; flex-direction:column; font-weight:600; }
.float-line .fl-tx b{ font-size:15px; font-weight:800; letter-spacing:.3px; }
@media (max-width:700px){
  .float-line{ right:14px; bottom:74px; padding:13px; gap:0; }
  .float-line .fl-tx{ display:none; }
  .float-line .fl-ic{ font-size:23px; }
}

/* ---------- general responsive polish ---------- */
@media (max-width:760px){
  .team-band h2{ font-size:clamp(28px,7.5vw,40px); }
  .feat-head h2{ font-size:clamp(26px,7vw,38px); }
}

/* ============================================================
   How-to carousel — compact auto-advancing slide of real guide steps
   (native horizontal scroll-snap; JS enhances with auto-play + dots)
   ============================================================ */
.guide-carousel{ margin-top:30px; }
.gc-viewport{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; border-radius:16px; border:1px solid #e4e9dd; box-shadow:0 18px 44px #183b3214; background:#0f2a24; }
.gc-viewport::-webkit-scrollbar{ display:none; }
.gc-track{ display:flex; }
.gc-slide{ flex:0 0 100%; min-width:0; scroll-snap-align:center; position:relative; margin:0; }
.gc-slide img{ display:block; width:100%; height:auto; }
/* slides already carry their own on-brand heading; keep our caption for screen-readers only */
.gc-slide figcaption{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.gc-ui{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:15px; }
.gc-arrow{ width:38px; height:38px; border-radius:50%; border:1px solid #d3ddd0; background:#fff; color:var(--green,#123b32);
  font-size:20px; line-height:1; display:grid; place-items:center; cursor:pointer; flex:none; transition:background .25s, border-color .25s, color .25s; }
.gc-arrow:hover{ background:var(--green,#123b32); border-color:var(--green,#123b32); color:#fff; }
.gc-dots{ display:flex; gap:8px; align-items:center; }
.gc-dot{ width:8px; height:8px; border-radius:50%; border:0; padding:0; background:#cdd7cc; cursor:pointer; transition:background .3s, transform .3s; }
.gc-dot.on{ background:var(--gold,#b8954c); transform:scale(1.35); }

/* ---------- collapsible "watch full video" — hidden until tapped, modest button ---------- */
.guide-chaps{ margin-top:22px; }
/* force-hide the video/chapters when collapsed (overrides site.css #id display:block) */
.guide-chaps:not([open]) > *:not(summary){ display:none !important; }
.guide-chaps summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:600; color:var(--green,#123b32); background:#fff; border:1px solid #dce4d6;
  border-radius:100px; padding:11px 20px; transition:background .2s, border-color .2s; }
.guide-chaps summary::-webkit-details-marker{ display:none; }
.guide-chaps summary::marker{ content:''; }
.guide-chaps summary:hover{ background:#f1f5ee; border-color:#c9d5c2; }
.guide-chaps .gw-ic{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--gold,#b8954c); color:#14130f; font-size:9px; flex:none; }
.guide-chaps .gw-sub{ color:#8a988b; font-weight:500; }
.guide-chaps[open] summary{ margin-bottom:16px; }
.guide-chaps[open] summary .gw-ic{ background:var(--green,#123b32); color:#fff; }

/* ============================================================
   Team trust band — real site team, full-bleed parallax
   ============================================================ */
.team-band{ position:relative; overflow:hidden; min-height:620px; display:flex; align-items:center; background:#0e2a24; isolation:isolate; }
.team-band .tb-media{ position:absolute; inset:-9% 0; z-index:0; will-change:transform; }
.team-band .tb-media img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
/* legibility scrim: dark on the left where text sits, fading right */
.team-band::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,30,25,.93) 0%, rgba(10,30,25,.8) 34%, rgba(12,34,28,.34) 62%, rgba(12,34,28,.1) 100%); }
.team-band::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,28,24,.5), transparent 20%, transparent 74%, rgba(10,28,24,.62)); }
.team-band .tb-inner{ position:relative; z-index:2; width:100%; padding-block:92px; }
.team-band .tb-copy{ max-width:620px; }
.team-band .eyebrow{ color:#d9c38e; letter-spacing:1.6px; }
.team-band h2{ color:#fff; font-size:clamp(32px,4.4vw,60px); font-weight:600; line-height:1.18; letter-spacing:-1.4px; margin:14px 0 0; }
.team-band .tb-gold{ color:#e4cd94; }
.team-band .tb-copy>p{ color:#d7e3db; font-size:clamp(15px,1.4vw,18px); line-height:1.9; max-width:46ch; margin:22px 0 0; }
.team-band .tb-points{ display:flex; flex-wrap:wrap; gap:14px 32px; margin:30px 0 34px; }
.team-band .tb-pt{ position:relative; padding-left:16px; }
.team-band .tb-pt::before{ content:''; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:50%; background:var(--gold,#b8954c); }
.team-band .tb-pt b{ display:block; font-size:16px; font-weight:600; color:#fff; }
.team-band .tb-pt span{ font-size:13px; color:#aec4b8; }
@media (max-width:760px){
  .team-band{ min-height:0; }
  .team-band .tb-inner{ padding-block:58px; }
  .team-band::before{ background:linear-gradient(180deg, rgba(10,28,24,.5) 0%, rgba(10,28,24,.82) 55%, rgba(10,28,24,.9) 100%); }
  .team-band .tb-media img{ object-position:center 30%; }
}

/* ============================================================
   Features — editorial numbered capability rows (replaces the AI-ish card grid)
   ============================================================ */
.features-section .feat-head{ max-width:760px; }
.features-section .feat-head .eyebrow{ color:#9b855c; }
.features-section .feat-head h2{ font-size:clamp(30px,4vw,52px); font-weight:600; line-height:1.2; letter-spacing:-1.3px; color:var(--green,#123b32); margin:12px 0 0; }
.features-section .feat-head .text-gold{ color:var(--gold,#b8954c); }
.features-section .feat-head p{ color:#64756a; font-size:clamp(15px,1.4vw,17px); line-height:1.85; margin:18px 0 0; max-width:54ch; }
.feat-rows{ margin-top:34px; border-top:1px solid #d8e1d3; }
.feat-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:30px; padding:30px 2px; border-bottom:1px solid #d8e1d3; }
.feat-no{ font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(28px,3.4vw,46px); line-height:1; color:#cfdac9; letter-spacing:-1px; }
.feat-main h3{ font-size:clamp(18px,1.9vw,23px); font-weight:600; color:var(--green,#123b32); line-height:1.35; margin:0; }
.feat-main p{ font-size:14px; color:#6b7c70; line-height:1.75; margin:9px 0 0; max-width:62ch; }
.feat-stat{ text-align:right; min-width:148px; }
.feat-stat b{ display:block; font-family:'Manrope','Noto Sans Thai',sans-serif; font-weight:700; font-size:clamp(18px,1.9vw,22px); color:var(--green,#123b32); line-height:1.1; letter-spacing:-.3px; }
.feat-stat b span{ font-size:.62em; font-weight:700; color:var(--gold,#b8954c); margin-left:1px; }
.feat-stat>span{ display:block; font-size:12px; color:#8a9a84; margin-top:7px; letter-spacing:.2px; }
@media (max-width:760px){
  .feat-row{ grid-template-columns:auto 1fr; column-gap:18px; row-gap:6px; padding:24px 2px; }
  .feat-no{ font-size:30px; }
  .feat-stat{ grid-column:2; text-align:left; min-width:0; margin-top:6px; }
}

/* ============================================================
   Page flow (lean): reorder sections, hide the extras.
   Applies only when motion is on (JS present). If JS/CDN fails the
   original full page (all sections, original order) shows untouched.
   To bring a section back, delete its line from the hide list.
   New order: hero → ได้อะไรบ้าง(สบาย) → คุณภาพ → โชว์แอป(ขั้นตอน)
              → วิธีใช้ → แพ็กเกจ → FAQ → ติดต่อ → footer
   ============================================================ */
.has-motion #main{ display:flex; flex-direction:column; }
.has-motion .cine{ order:1; }
.has-motion #benefits{ order:2; }
.has-motion .features-section{ order:3; }
.has-motion .app-reel{ order:4; }
.has-motion #guide{ order:5; }
.has-motion #team{ order:6; }
.has-motion #pricing{ order:7; }
.has-motion #faq{ order:8; }
.has-motion #contact{ order:9; }
.has-motion .hero.product-hero,
.has-motion .value-strip,
.has-motion #workflow,
.has-motion .line-section,
.has-motion .start-section{ display:none; }