/* ══════════════════════════════════════════════════════════════════
   BOVE DIGITAL — bove.css
   โทน: ม่วงนีออนบนพื้นดำม่วง | ฟอนต์ไทยไม่มีหัวทั้งชุด
   ══════════════════════════════════════════════════════════════════ */

/* ┌──────────────────────────────────────────────────────────────┐
   │  ★ ช่องใส่ภาพ — แก้ลิงก์ในบล็อกนี้บล็อกเดียวจบ                │
   │    (ถ้าใช้ WordPress ให้ไปตั้งที่ รูปลักษณ์ › ปรับแต่ง แทน)    │
   │                                                              │
   │    --logo-img      โลโก้ สูง 40px  (PNG พื้นใส สีอ่อน)        │
   │    --hero-1 … 4    แบนเนอร์บนสุด เลื่อนเอง  1600 × 900        │
   │    --slide-1/2/3   สไลด์โปรโมชั่นกลางหน้า   1600 × 900        │
   │    --promo-img     แบนเนอร์งานพิมพ์         1600 × 900        │
   │    --shot-1 … 4    แกลเลอรี                  800 × 800        │
   │    --mascot        มาสคอต PNG พื้นใส         620 × 515        │
   │    --mascot-mini   หัวมาสคอตแบบวงกลม         178 × 148        │
   └──────────────────────────────────────────────────────────────┘ */
:root{
  --logo-img:    url("https://www.bovedigital.com/wp-content/uploads/2024/07/logobo.png");

  --hero-1:      url("https://www.bovedigital.com/wp-content/uploads/2024/08/456944055_483751667700778_4966424529628147533_n-scaled.jpg");
  --hero-2:      url("https://www.bovedigital.com/wp-content/uploads/2024/08/451547167_487164817292303_2957014335108328323_n-1024x683.jpg");
  --hero-3:      url("https://www.bovedigital.com/wp-content/uploads/2024/07/website_mockup.png");
  --hero-4:      url("https://www.bovedigital.com/wp-content/uploads/2024/08/S__30916617-727x1024.jpg");

  --slide-1:     url("https://www.bovedigital.com/wp-content/uploads/2024/08/1040X1040_Banner-ReDesign_Detail_1-1.png");
  --slide-2:     url("https://www.bovedigital.com/wp-content/uploads/2024/08/451547167_487164817292303_2957014335108328323_n-1024x683.jpg");
  --slide-3:     url("https://www.bovedigital.com/wp-content/uploads/2024/07/website_mockup.png");

  --promo-img:   url("https://www.bovedigital.com/wp-content/uploads/2024/08/451547167_487164817292303_2957014335108328323_n-1024x683.jpg");

  --shot-1:      url("https://www.bovedigital.com/wp-content/uploads/2024/08/1040X1040_Banner-ReDesign_Detail_1-1.png");
  --shot-2:      url("https://www.bovedigital.com/wp-content/uploads/2024/08/451547167_487164817292303_2957014335108328323_n-1024x683.jpg");
  --shot-3:      url("https://www.bovedigital.com/wp-content/uploads/2024/08/S__30916617-727x1024.jpg");
  --shot-4:      url("https://www.bovedigital.com/wp-content/uploads/2024/07/website_mockup.png");

  /* มาสคอต — เวอร์ชัน WordPress จะชี้ไปที่ bove/assets/ ให้อัตโนมัติ */
  --mascot:      url("mascot.png");
  --mascot-mini: url("mascot-small.png");
}

/* ── สี ─────────────────────────────────────────────────────── */
:root{
  --bg:       #09050F;
  --surface:  #110A1F;
  --surface2: #180F2B;
  --raise:    #1F1438;

  --violet:   #9D6BFF;
  --violet-d: #6D28D9;
  --fuchsia:  #F45FD0;
  --mint:     #4FE3C1;

  --text:     #F6F2FF;
  --muted:    #A79BC6;
  --dim:      #6E6392;

  --stroke:   rgba(255,255,255,.07);
  --stroke-2: rgba(157,107,255,.30);

  --grad:     linear-gradient(115deg, #9D6BFF 0%, #C15BE8 48%, #F45FD0 100%);
  --grad-soft:linear-gradient(115deg, rgba(157,107,255,.16), rgba(244,95,208,.10));

  --brand-fb: #1877F2;
  --brand-wa: #25D366;
  --brand-ln: #06C755;

  --fallback: linear-gradient(135deg,#2A1550,#150C26 55%,#3A1B57);

  /* ฟอนต์ไทยไม่มีหัวทั้งชุด */
  --display: "IBM Plex Sans Thai", system-ui, sans-serif;
  --body:    "Anuphan", system-ui, sans-serif;
  --util:    "Bai Jamjuree", system-ui, sans-serif;

  --pad:  clamp(18px, 4.6vw, 60px);
  --gap:  clamp(24px, 3.4vw, 44px);
  --sec:  clamp(66px, 9vw, 122px);
  --maxw: 1200px;
  --r:    22px;   /* มุมโค้งมาตรฐาน */
  --r-lg: 30px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-weight:300;
  font-size:clamp(15px,1.02vw,16.5px); line-height:1.78;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--violet); color:#0B0616; }
:focus-visible{ outline:2px solid var(--fuchsia); outline-offset:3px; border-radius:6px; }

/* พื้นผิวเกรนบาง ๆ ให้ไม่แบนเกินไป */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── โครงหน้า ───────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2; }
.sec{ padding-block:var(--sec); position:relative; z-index:2; overflow:hidden; }
.sec--tint{ background:var(--surface); }

.kicker{
  font-family:var(--util); font-size:.7rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 14px; border-radius:999px; margin:0 0 18px;
  background:var(--grad-soft); border:1px solid var(--stroke-2); color:#D9C4FF;
}
.kicker::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--fuchsia); }

h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.24; margin:0; letter-spacing:-.022em; }
h1{ font-weight:700; }
h2{ font-size:clamp(1.72rem,3.7vw,3rem); }
h3{ font-size:clamp(1.1rem,1.6vw,1.35rem); }
p{ margin:0; }
.lead{ color:var(--muted); font-size:1.04rem; max-width:62ch; }
.center{ text-align:center; }
.center .lead{ margin-inline:auto; }
.gt{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }

/* ── ปุ่ม ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--util); font-weight:600; font-size:.9rem;
  padding:13px 24px; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn svg{ width:17px; height:17px; flex:none; }
.btn--grad{ background:var(--grad); color:#0D0618; box-shadow:0 12px 34px -12px rgba(157,107,255,.9); }
.btn--grad:hover{ box-shadow:0 18px 44px -12px rgba(244,95,208,.9); }
.btn--fb{ background:var(--brand-fb); color:#fff; }
.btn--wa{ background:var(--brand-wa); color:#04301A; }
.btn--ln{ background:var(--brand-ln); color:#06301A; }
.btn--glass{ background:rgba(255,255,255,.06); border-color:var(--stroke); color:var(--text); backdrop-filter:blur(10px); }
.btn--glass:hover{ background:rgba(255,255,255,.12); border-color:var(--stroke-2); }
.btn--wide{ width:100%; }
.btn--sm{ padding:10px 18px; font-size:.83rem; }

/* ── แถบประกาศบนสุด ─────────────────────────────────────────── */
.announce{
  position:relative; z-index:60; background:var(--grad); color:#0D0618;
  font-family:var(--util); font-size:.82rem; font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:9px var(--pad); text-align:center;
}
.announce a{ text-decoration:underline; text-underline-offset:3px; font-weight:600; }
.announce__x{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(13,6,24,.16); color:#0D0618; display:grid; place-items:center; font-size:1rem; line-height:1;
}
.announce__x:hover{ background:rgba(13,6,24,.3); }
.announce.is-off{ display:none; }

/* ── NAV แบบเกาะลอย ─────────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:70; padding:14px var(--pad); transition:padding .3s ease; }
.nav.is-stuck{ padding-top:10px; }
.nav__in{
  max-width:var(--maxw); margin-inline:auto;
  display:flex; align-items:center; gap:18px;
  padding:9px 9px 9px 20px; border-radius:999px;
  background:rgba(17,10,31,.72); border:1px solid var(--stroke);
  backdrop-filter:blur(18px) saturate(1.4);
  transition:background .3s ease, box-shadow .3s ease, border-color .3s;
}
.nav.is-stuck .nav__in{ background:rgba(17,10,31,.92); box-shadow:0 18px 40px -22px rgba(0,0,0,.95); border-color:var(--stroke-2); }

/* โลโก้ — ใช้ภาพจาก --logo-img ถ้าไม่มีจะขึ้นเป็นตัวอักษรแทน */
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.logo__img{ height:34px; width:auto; object-fit:contain; }
/* ▸ ถ้าโลโก้เป็นตัวหนังสือสีเข้มจนมองไม่เห็นบนพื้นหลังดำ
      ให้ลบเครื่องหมายคอมเมนต์ที่หัวและท้ายบรรทัดถัดไปออก เพื่อบังคับให้โลโก้เป็นสีขาว */
/* .logo__img{ filter: brightness(0) invert(1); } */
.logo__css{
  height:34px; width:120px;
  background-image:var(--logo-img); background-size:contain;
  background-position:left center; background-repeat:no-repeat;
}
.logo__word{ font-family:var(--display); font-weight:700; font-size:1.1rem; letter-spacing:-.02em; }
.logo__word span{ font-family:var(--util); font-size:.54rem; letter-spacing:.34em; display:block; color:var(--violet); font-weight:500; }

.nav__links{ display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.nav__links a{ text-decoration:none; font-size:.88rem; color:var(--muted); padding:6px 0; position:relative; transition:color .2s; }
.nav__links a::after{ content:""; position:absolute; left:0; right:100%; bottom:2px; height:1.5px; border-radius:2px; background:var(--grad); transition:right .25s ease; }
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ right:0; }
.nav__cta{ display:flex; gap:8px; }

.burger{ display:none; width:42px; height:42px; border:1px solid var(--stroke); border-radius:999px; background:transparent; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.burger span{ width:16px; height:1.6px; background:var(--text); border-radius:2px; transition:.25s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:69; background:rgba(9,5,15,.97); backdrop-filter:blur(12px);
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:96px var(--pad) var(--pad);
  transform:translateY(-101%); transition:transform .4s cubic-bezier(.5,0,.2,1);
}
.drawer.is-open{ transform:translateY(0); }
.drawer a{ font-family:var(--display); font-size:1.55rem; font-weight:600; text-decoration:none; padding:12px 0; border-bottom:1px solid var(--stroke); letter-spacing:-.02em; }
.drawer__cta{ display:flex; gap:10px; margin-top:24px; }

/* ── HERO ───────────────────────────────────────────────────── */
.hero{ position:relative; padding-top:clamp(40px,6vw,72px); padding-bottom:clamp(28px,4vw,44px); overflow:hidden; }
.mesh{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; }
.mesh--a{ width:min(620px,90vw); height:520px; left:50%; top:-16%; transform:translateX(-50%); background:rgba(157,107,255,.34); }
.mesh--b{ width:min(430px,70vw); height:400px; right:-6%; top:26%; background:rgba(244,95,208,.20); }
.mesh--c{ width:min(400px,70vw); height:380px; left:-8%; top:44%; background:rgba(109,40,217,.26); }

.hero__in{ position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero h1{ font-size:clamp(2.1rem,6vw,4.4rem); line-height:1.1; letter-spacing:-.035em; margin-bottom:20px; max-width:16ch; }
.hero__sub{ color:var(--muted); font-size:clamp(1rem,1.3vw,1.12rem); max-width:56ch; margin-bottom:30px; }
.hero__btns{ display:flex; flex-wrap:wrap; gap:11px; justify-content:center; }

.stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:34px; }
.stat{
  display:flex; align-items:center; gap:9px; padding:9px 18px; border-radius:999px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.035);
  font-family:var(--util); font-size:.82rem; color:var(--muted);
}
.stat b{ font-size:1rem; color:var(--text); font-weight:600; }

/* ── แบนเนอร์บนสุด แบบเลื่อนอัตโนมัติหลายภาพ ────────────────── */
.banner{ position:relative; z-index:2; margin-top:clamp(30px,4.6vw,52px); }
.hcar{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--stroke); aspect-ratio:16/7;
  box-shadow:0 50px 110px -40px rgba(157,107,255,.55), inset 0 1px 0 rgba(255,255,255,.09);
  background:var(--fallback);
}
.hcar__s{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .9s ease, visibility .9s; }
.hcar__s.is-on{ opacity:1; visibility:visible; }
.hcar__bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  background-image:var(--fallback); transform:scale(1); transition:transform 8s linear;
}
.hcar__s.is-on .hcar__bg{ transform:scale(1.08); }
.hcar__s:nth-child(1) .hcar__bg{ background-image:var(--hero-1), var(--fallback); }
.hcar__s:nth-child(2) .hcar__bg{ background-image:var(--hero-2), var(--fallback); }
.hcar__s:nth-child(3) .hcar__bg{ background-image:var(--hero-3), var(--fallback); }
.hcar__s:nth-child(4) .hcar__bg{ background-image:var(--hero-4), var(--fallback); }
.hcar__sc{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,5,15,.34) 0%, rgba(9,5,15,.10) 38%, rgba(9,5,15,.90) 100%); }
.hcar__cap{
  position:absolute; left:clamp(18px,2.6vw,32px); bottom:clamp(46px,4.6vw,54px); z-index:3;
  max-width:min(520px,72%);
}
.hcar__cap b{ font-family:var(--display); font-weight:600; font-size:clamp(1.05rem,2vw,1.5rem); letter-spacing:-.02em; display:block; }
.hcar__cap span{ font-size:.88rem; color:var(--muted); }

.hcar__chip{
  position:absolute; left:clamp(16px,2.4vw,28px); top:clamp(16px,2.4vw,28px); z-index:4;
  display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:999px;
  background:rgba(9,5,15,.62); border:1px solid var(--stroke); backdrop-filter:blur(10px);
  font-family:var(--util); font-size:.74rem; color:#DCCDFF;
}
.hcar__chip i{ width:6px; height:6px; border-radius:50%; background:var(--mint); animation:blip 2s infinite; }
@keyframes blip{ 0%,100%{opacity:1} 50%{opacity:.25} }

.hcar__nav{ position:absolute; right:clamp(16px,2.4vw,28px); top:clamp(16px,2.4vw,28px); z-index:5; display:flex; gap:8px; }
.hcar__bar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.10); z-index:5; }
.hcar__fill{ height:100%; width:0; background:var(--grad); transition:width .1s linear; }
.hcar__dots{ position:absolute; left:clamp(18px,2.6vw,32px); bottom:clamp(18px,2.2vw,24px); z-index:5; display:flex; gap:6px; }

.ping{
  position:absolute; right:clamp(14px,2.4vw,26px); bottom:clamp(22px,3vw,34px); z-index:6;
  display:flex; gap:11px; align-items:flex-start; max-width:290px;
  background:rgba(17,10,31,.94); border:1px solid rgba(6,199,85,.4);
  border-radius:16px; padding:12px 15px; backdrop-filter:blur(12px);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.95);
  animation:pingIn 6s ease-in-out infinite;
}
@keyframes pingIn{ 0%,6%{opacity:0;transform:translateY(12px) scale(.94)} 14%,80%{opacity:1;transform:none} 92%,100%{opacity:0;transform:translateY(-8px) scale(.97)} }
.ping__ic{ width:30px; height:30px; border-radius:9px; background:var(--brand-ln); display:grid; place-items:center; font-family:var(--util); font-weight:600; font-size:.58rem; color:#06301A; flex:none; }
.ping b{ font-family:var(--util); font-size:.8rem; font-weight:600; display:block; }
.ping span{ font-size:.74rem; color:var(--muted); line-height:1.45; }

/* ── ticker ประเทศ พร้อมธงชาติ ──────────────────────────────── */
.ticker{ border-block:1px solid var(--stroke); background:var(--surface); padding:14px 0; overflow:hidden; display:flex; position:relative; }
.ticker::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, var(--surface), transparent 9%, transparent 91%, var(--surface));
}
.ticker__t{ display:flex; gap:30px; flex:none; padding-right:30px; animation:roll 38s linear infinite; }
@keyframes roll{ to{ transform:translateX(-100%) } }
.ticker__i{
  flex:none; font-family:var(--util); font-size:.8rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:9px;
}
.flag{
  width:24px; height:17px; flex:none; border-radius:3px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 2px 6px rgba(0,0,0,.5);
  display:block;
}
.ticker:hover .ticker__t{ animation-play-state:paused; }

/* ══════════════════════════════════════════════════════════════
   ลายยุโรปแบบเวกเตอร์ ประกอบพื้นหลัง
   ทุกชิ้นวาดด้วย SVG ไม่มีไฟล์ภาพ ปรับความเข้มที่ opacity
   ══════════════════════════════════════════════════════════════ */

/* กุหลาบเรขาคณิตแบบหน้าต่างโบสถ์ หมุนช้ามาก */
.rosette{
  position:absolute; pointer-events:none; z-index:0; color:var(--violet);
  animation:spin 150s linear infinite;
}
.rosette--slow{ animation-duration:210s; animation-direction:reverse; color:var(--fuchsia); }
@keyframes spin{
  from{ transform:translate3d(0,var(--py,0px),0) rotate(0deg) }
  to  { transform:translate3d(0,var(--py,0px),0) rotate(360deg) }
}

/* เถาวัลย์อะแคนธัสเลื่อนแนวนอนไม่รู้จบ */
.vine{
  position:relative; z-index:2; height:44px; overflow:hidden; display:flex;
  mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.vine__t{ display:flex; flex:none; color:var(--violet); opacity:.30; animation:vineRoll 46s linear infinite; }
.vine__t svg{ width:200px; height:44px; flex:none; }
.vine--rev .vine__t{ animation-direction:reverse; color:var(--fuchsia); opacity:.24; }
@keyframes vineRoll{ to{ transform:translateX(-100%) } }

/* เฟลอร์เดอลีส์ลอยขึ้นช้า ๆ เป็นฉากหลัง */
.fleurs{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.fleurs svg{
  position:absolute; color:var(--iris-hi, var(--violet)); opacity:.10;
  width:26px; height:33px; animation:rise 26s linear infinite;
}
@keyframes rise{
  0%   { transform:translateY(30px) rotate(-8deg); opacity:0; }
  12%  { opacity:.13; }
  85%  { opacity:.10; }
  100% { transform:translateY(-260px) rotate(10deg); opacity:0; }
}

/* กรอบบาโรกที่วาดตัวเองเมื่อเลื่อนมาถึง */
.frame-orn{
  position:absolute; inset:-16px; z-index:1; pointer-events:none;
  color:var(--violet); opacity:.34;
}
.frame-orn svg{ width:100%; height:100%; }
.frame-orn path{ stroke-dasharray:1400; stroke-dashoffset:1400; }
.frame-orn.is-in path{ animation:draw 2.4s cubic-bezier(.4,0,.2,1) forwards; }
.frame-orn.is-in path:nth-child(2){ animation-delay:.28s; }
.frame-orn.is-in path:nth-child(3){ animation-delay:.5s; }
.frame-orn.is-in path:nth-child(4){ animation-delay:.72s; }
@keyframes draw{ to{ stroke-dashoffset:0 } }

/* เส้นกีโยเชแบบเลื่อนได้ ใช้แทนเส้นคั่นเดิม */
.orn-rule{
  height:28px; margin-block:0; border:0; position:relative; z-index:2; overflow:hidden;
  display:flex; opacity:.26;
  mask-image:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  background:none;
}
.orn-rule__t{ display:flex; flex:none; color:var(--violet); animation:vineRoll 34s linear infinite; }
.orn-rule__t svg{ width:240px; height:28px; flex:none; }

/* ลายดามาสก์ปูพื้น พร้อมไหลช้า ๆ */
.orn-damask::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23D6C2FF' stroke-width='1.1'%3E%3Cpath d='M70 6c16 14 16 34 0 48-16-14-16-34 0-48z'/%3E%3Cpath d='M70 86c16 14 16 34 0 48-16-14-16-34 0-48z'/%3E%3Cpath d='M6 70c14-16 34-16 48 0-14 16-34 16-48 0z'/%3E%3Cpath d='M86 70c14-16 34-16 48 0-14 16-34 16-48 0z'/%3E%3Ccircle cx='70' cy='70' r='7'/%3E%3Ccircle cx='0' cy='0' r='4'/%3E%3Ccircle cx='140' cy='0' r='4'/%3E%3Ccircle cx='0' cy='140' r='4'/%3E%3Ccircle cx='140' cy='140' r='4'/%3E%3C/g%3E%3C/svg%3E");
  animation:damaskDrift 90s linear infinite;
  mask-image:radial-gradient(130% 90% at 50% 0%, #000 10%, transparent 80%);
  -webkit-mask-image:radial-gradient(130% 90% at 50% 0%, #000 10%, transparent 80%);
}
@keyframes damaskDrift{ to{ background-position:140px 280px } }

/* ช่อใบอะแคนธัสมุมการ์ด */
.orn-corner{ position:absolute; width:74px; height:74px; pointer-events:none; opacity:.18; z-index:1; color:var(--violet); }
.orn-corner--tr{ top:-1px; right:-1px; }
.orn-corner--bl{ bottom:-1px; left:-1px; transform:rotate(180deg); }

/* เส้นคั่นหัวข้อ แบบมีเพชรหมุนตรงกลาง */
.orn-div{ display:flex; align-items:center; justify-content:center; gap:14px; margin:18px auto 0; max-width:280px; }
.orn-div::before, .orn-div::after{ content:""; height:1px; flex:1; background:linear-gradient(90deg, transparent, var(--stroke-2)); }
.orn-div::after{ background:linear-gradient(270deg, transparent, var(--stroke-2)); }
.orn-div i{ width:7px; height:7px; background:var(--violet); flex:none; animation:gem 9s linear infinite; }
@keyframes gem{ to{ transform:rotate(405deg) } }


/* ══════════════════════════════════════════════════════════════
   การเคลื่อนไหวทั่วหน้า
   ══════════════════════════════════════════════════════════════ */

/* แถบบอกความคืบหน้าการเลื่อนหน้า */
.progress{
  position:fixed; left:0; top:0; height:3px; width:0; z-index:90;
  background:var(--grad); box-shadow:0 0 14px rgba(244,95,208,.7);
  transition:width .08s linear;
}

/* ตัวอักษรไล่สีแบบเลื่อนไปมา */
.gt{
  background:linear-gradient(115deg,#9D6BFF,#F45FD0,#5EC8FF,#9D6BFF);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:hue 11s ease-in-out infinite;
}
@keyframes hue{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* ปุ่มหลักมีแสงวิ่งผ่าน */
.btn--grad{ position:relative; overflow:hidden; }
.btn--grad::after{
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation:sheen 4.6s ease-in-out infinite;
}
@keyframes sheen{ 0%,62%{ left:-60% } 88%,100%{ left:120% } }

/* การ์ดเอียงตามเมาส์ */
.tilt{ transform-style:preserve-3d; transition:transform .28s cubic-bezier(.2,.8,.3,1), border-color .3s; will-change:transform; }
.tilt:hover{ border-color:var(--stroke-2); }

/* ชั้นเลื่อนช้ากว่าหน้าเว็บ (parallax)
   ส่งค่าผ่านตัวแปร --py เพราะ CSS animation มีลำดับสูงกว่า inline style */
.par{ will-change:transform; transform:translate3d(0,var(--py,0px),0); }

/* หัวข้อเผยตัวแบบเลื่อนขึ้นทีละบรรทัด */
.rv-up{ opacity:0; transform:translateY(30px); filter:blur(6px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1), filter .8s; }
.rv-up.is-in{ opacity:1; transform:none; filter:none; }

/* ป้ายตัวเลขเต้นเบา ๆ ตอนเปลี่ยนค่า */
@keyframes pop{ 0%{transform:scale(1)} 40%{transform:scale(1.12)} 100%{transform:scale(1)} }
.kpi b.is-pop{ animation:pop .45s ease; }


/* ══════════════════════════════════════════════════════════════
   มาสคอต
   ══════════════════════════════════════════════════════════════ */
.mascot{
  background-image:var(--mascot); background-size:contain;
  background-repeat:no-repeat; background-position:center bottom;
  filter:drop-shadow(0 24px 44px rgba(157,107,255,.5));
}
.mascot--hero{
  position:absolute; z-index:4; right:5%; top:clamp(-118px,-9vw,-72px);
  width:clamp(118px,13.5vw,190px); aspect-ratio:620/515;
  animation:bob 5.5s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{transform:translateY(0) rotate(-1.6deg)} 50%{transform:translateY(-12px) rotate(1.6deg)} }

.mascot--faq{ width:clamp(150px,18vw,220px); aspect-ratio:620/515; flex:none; animation:bob 6.5s ease-in-out infinite; }
.faq-row{ display:flex; align-items:flex-end; gap:clamp(18px,3vw,44px); margin-top:40px; }
.faq-row .faq{ margin-top:0; flex:1; min-width:0; }

/* มาสคอตแอบมองจากขอบซ้ายของส่วน */
.mascot--peek{
  position:absolute; left:-46px; bottom:-16px; z-index:3;
  width:clamp(108px,11vw,158px); aspect-ratio:620/515;
  opacity:0; transform:translateX(-40px) rotate(-10deg);
  transition:opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1);
}
.mascot--peek.is-in{ opacity:1; transform:none; animation:swayL 7s ease-in-out infinite 1s; }
@keyframes swayL{ 0%,100%{transform:rotate(-3deg) translateY(0)} 50%{transform:rotate(3deg) translateY(-9px)} }

/* มาสคอตในบริการ ลอยอยู่มุมขวาบนของส่วน */
.mascot--svc{
  position:absolute; right:clamp(12px,4vw,60px); top:clamp(40px,6vw,86px); z-index:3;
  width:clamp(86px,8.5vw,124px); aspect-ratio:620/515;
  animation:bob 7.5s ease-in-out infinite 1.4s;
}

.mascot--foot{ width:104px; aspect-ratio:620/515; margin-top:18px; animation:bob 8s ease-in-out infinite; }

.mini{
  background-image:var(--mascot-mini); background-size:cover; background-position:center 28%;
  border-radius:50%; flex:none; box-shadow:0 0 0 1px var(--stroke-2);
}

/* กล่องคำพูดของมาสคอต */
.bubble{
  position:relative; padding:15px 18px; border-radius:18px 18px 18px 6px;
  border:1px solid var(--stroke-2); background:linear-gradient(180deg, rgba(157,107,255,.15), rgba(255,255,255,.03));
  font-size:.9rem; color:var(--text);
}
.bubble b{ font-family:var(--util); font-weight:600; display:block; margin-bottom:3px; color:#D9C4FF; font-size:.85rem; }

/* ผู้ช่วยลอยมุมจอ เปลี่ยนคำพูดตามส่วนที่กำลังอ่าน */
.guide{
  position:fixed; left:18px; bottom:18px; z-index:66;
  display:flex; align-items:flex-end; gap:11px; max-width:310px;
  opacity:0; transform:translateY(18px) scale(.94); pointer-events:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1);
}
.guide.is-on{ opacity:1; transform:none; pointer-events:auto; }
.guide__ava{ width:52px; height:52px; flex:none; animation:bob 4.5s ease-in-out infinite; }
.guide__say{
  background:rgba(17,10,31,.95); border:1px solid var(--stroke-2); backdrop-filter:blur(14px);
  border-radius:16px 16px 16px 5px; padding:11px 15px; font-size:.83rem; line-height:1.55;
  box-shadow:0 20px 46px -18px rgba(0,0,0,.9);
}
.guide__say b{ font-family:var(--util); font-size:.78rem; font-weight:600; color:#D9C4FF; display:block; }
.guide__say span{ display:block; color:var(--muted); transition:opacity .3s; }
.guide__say span.is-fade{ opacity:0; }
.guide__x{
  position:absolute; right:-6px; top:-6px; width:22px; height:22px; border-radius:50%; cursor:pointer;
  border:1px solid var(--stroke-2); background:var(--surface2); color:var(--muted); font-size:.8rem; line-height:1;
  display:grid; place-items:center;
}
.guide__x:hover{ color:var(--text); }
.guide__wrap{ position:relative; }


/* ══════════════════════════════════════════════════════════════
   แดชบอร์ด CRM — ตัวอย่างระบบจริงที่กดเล่นได้
   ══════════════════════════════════════════════════════════════ */
.crm{ margin-top:44px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--stroke); background:#0D0719; box-shadow:0 54px 110px -46px rgba(157,107,255,.55); }
.crm__chrome{ display:flex; align-items:center; gap:12px; padding:12px 16px; background:rgba(255,255,255,.045); border-bottom:1px solid var(--stroke); }
.crm__dots{ display:flex; gap:6px; }
.crm__dots i{ width:10px; height:10px; border-radius:50%; background:var(--raise); }
.crm__url{
  flex:1; text-align:center; font-family:var(--util); font-size:.72rem; color:var(--dim);
  background:rgba(255,255,255,.04); border-radius:999px; padding:5px 14px; max-width:340px; margin-inline:auto;
}
.crm__live{ font-family:var(--util); font-size:.66rem; color:var(--mint); display:flex; align-items:center; gap:6px; }
.crm__live i{ width:6px; height:6px; border-radius:50%; background:var(--mint); animation:blip 1.8s infinite; }

.crm__body{ display:grid; grid-template-columns:186px 1fr; min-height:466px; }
.crm__side{ border-right:1px solid var(--stroke); padding:16px 12px; display:flex; flex-direction:column; gap:3px; background:rgba(255,255,255,.02); }
.crm__brand{ display:flex; align-items:center; gap:9px; padding:6px 10px 16px; }
.crm__brand .mini{ width:30px; height:30px; }
.crm__brand b{ font-family:var(--display); font-size:.88rem; font-weight:600; }
.crm__brand span{ display:block; font-family:var(--util); font-size:.56rem; letter-spacing:.2em; color:var(--dim); }
.cnav{
  display:flex; align-items:center; gap:10px; width:100%; cursor:pointer;
  border:0; background:transparent; color:var(--muted); text-align:left;
  font-family:var(--util); font-size:.82rem; padding:10px 12px; border-radius:11px; transition:.2s;
}
.cnav svg{ width:16px; height:16px; flex:none; }
.cnav:hover{ background:rgba(255,255,255,.05); color:var(--text); }
.cnav[aria-selected="true"]{ background:var(--grad); color:#0D0618; font-weight:600; }
.crm__hint{ margin-top:auto; font-family:var(--util); font-size:.64rem; color:var(--dim); padding:10px 12px; line-height:1.6; }

.crm__main{ padding:clamp(16px,2.2vw,24px); overflow:hidden; }
.crm__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.crm__head h3{ font-size:1.1rem; }
.crm__head p{ font-size:.8rem; color:var(--dim); }
.crm__badge{ font-family:var(--util); font-size:.68rem; padding:5px 12px; border-radius:999px; background:var(--grad-soft); border:1px solid var(--stroke-2); color:#D9C4FF; }
.cpanel[hidden]{ display:none; }

.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
.kpi{ border:1px solid var(--stroke); border-radius:15px; padding:14px; background:rgba(255,255,255,.03); }
.kpi span{ font-family:var(--util); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); display:block; margin-bottom:5px; }
.kpi b{ font-family:var(--display); font-size:1.42rem; font-weight:700; letter-spacing:-.03em; display:block; line-height:1.15; }
.kpi u{ text-decoration:none; font-family:var(--util); font-size:.68rem; color:var(--mint); }
.kpi u.down{ color:#FF9BB5; }

.crm__two{ display:grid; grid-template-columns:1.35fr 1fr; gap:12px; }
.card{ border:1px solid var(--stroke); border-radius:16px; padding:15px; background:rgba(255,255,255,.025); }
.card h4{ font-family:var(--util); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin:0 0 14px; font-weight:600; }

/* กราฟแท่ง */
.chart{ display:flex; align-items:flex-end; gap:clamp(5px,1vw,11px); height:132px; }
.bar{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:7px; height:100%; }
.bar i{
  width:100%; max-width:34px; border-radius:6px 6px 3px 3px; display:block;
  background:linear-gradient(180deg, var(--violet), rgba(157,107,255,.28));
  height:0; transition:height 1.1s cubic-bezier(.2,.8,.3,1);
}
.bar.hot i{ background:var(--grad); box-shadow:0 0 22px -4px rgba(244,95,208,.8); }
.bar span{ font-family:var(--util); font-size:.6rem; color:var(--dim); }

/* ตารางอันดับหมอนวด */
.rank{ display:grid; gap:11px; }
.rank__row span{ display:flex; justify-content:space-between; font-family:var(--util); font-size:.78rem; margin-bottom:5px; }
.rank__row span em{ font-style:normal; color:var(--dim); }
.rank__bar{ height:6px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; }
.rank__bar i{ display:block; height:100%; width:0; border-radius:99px; background:var(--grad); transition:width 1.2s cubic-bezier(.2,.8,.3,1); }

/* ตารางลูกค้า */
.tbl{ width:100%; border-collapse:collapse; font-size:.82rem; }
.tbl th{
  font-family:var(--util); font-size:.65rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--dim); text-align:left; font-weight:600; padding:0 10px 10px; border-bottom:1px solid var(--stroke);
}
.tbl td{ padding:11px 10px; border-bottom:1px solid var(--stroke); }
.tbl tr:last-child td{ border-bottom:0; }
.tbl__who{ display:flex; align-items:center; gap:10px; }
.av{ width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--util); font-size:.68rem; font-weight:600; color:#0D0618; background:var(--grad); }
.stamps{ display:flex; gap:3px; }
.stamps i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.12); }
.stamps i.on{ background:var(--mint); }
.pill{ font-family:var(--util); font-size:.68rem; padding:3px 10px; border-radius:999px; border:1px solid var(--stroke); color:var(--muted); white-space:nowrap; }
.pill--warn{ border-color:rgba(255,155,181,.4); color:#FF9BB5; background:rgba(255,155,181,.08); }
.pill--ok{ border-color:rgba(79,227,193,.4); color:var(--mint); background:rgba(79,227,193,.08); }

/* คิววันนี้ */
.queue{ display:grid; gap:9px; }
.qrow{ display:grid; grid-template-columns:62px 1fr auto; gap:13px; align-items:center; border:1px solid var(--stroke); border-radius:13px; padding:11px 13px; background:rgba(255,255,255,.025); }
.qrow time{ font-family:var(--util); font-size:.8rem; font-weight:600; color:#D9C4FF; }
.qrow b{ font-size:.86rem; font-weight:400; display:block; }
.qrow small{ color:var(--dim); font-size:.75rem; }
.qrow--now{ border-color:var(--stroke-2); background:rgba(157,107,255,.1); }

/* สต๊อก */
.stock{ display:grid; gap:13px; }
.stock__row span{ display:flex; justify-content:space-between; font-family:var(--util); font-size:.78rem; margin-bottom:5px; }
.stock__row span em{ font-style:normal; color:var(--dim); }
.stock__bar{ height:6px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; }
.stock__bar i{ display:block; height:100%; width:0; border-radius:99px; background:var(--mint); transition:width 1.2s cubic-bezier(.2,.8,.3,1); }
.stock__bar i.low{ background:#FF9BB5; }

/* ── การ์ดกระจก (ใช้ซ้ำหลายที่) ─────────────────────────────── */
.glass{
  border:1px solid var(--stroke); border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  position:relative;
}
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.10), transparent 34%);
  mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  mask-composite:exclude; -webkit-mask-composite:xor; padding:1px;
}

/* ── ปัญหา → ทางออก ────────────────────────────────────────── */
.pains{ display:grid; gap:12px; margin-top:42px; }
.pain{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(14px,3vw,38px); align-items:center; padding:clamp(18px,2.3vw,26px) clamp(18px,2.8vw,30px); transition:border-color .25s; }
.pain:hover{ border-color:var(--stroke-2); }
.pain__q b{ display:block; font-family:var(--display); font-size:1.05rem; font-weight:600; margin-bottom:4px; }
.pain__q span{ font-size:.9rem; color:var(--dim); }
.pain__arw{ width:34px; height:34px; border-radius:50%; flex:none; border:1px solid var(--stroke-2); display:grid; place-items:center; color:var(--fuchsia); }
.pain__a b{ display:block; font-family:var(--util); font-weight:600; font-size:.94rem; margin-bottom:4px; color:var(--mint); }
.pain__a span{ font-size:.9rem; color:var(--muted); }

/* ── บริการ แบบ bento ───────────────────────────────────────── */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:48px; }
.cell{ padding:clamp(22px,2.6vw,30px); overflow:hidden; transition:transform .32s ease, border-color .32s ease; }
.cell:hover{ transform:translateY(-5px); border-color:var(--stroke-2); }
.cell--wide{ grid-column:span 4; }
.cell--half{ grid-column:span 2; }
.cell--third{ grid-column:span 3; }
.cell__ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--grad-soft); border:1px solid var(--stroke-2); color:var(--violet); margin-bottom:16px; }
.cell__ic svg{ width:20px; height:20px; }
.cell h3{ margin-bottom:8px; }
.cell p{ font-size:.9rem; color:var(--muted); }
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.chip{ font-family:var(--util); font-size:.74rem; padding:5px 12px; border-radius:999px; border:1px solid var(--stroke); color:var(--dim); }

/* ── เดโมระบบจอง ────────────────────────────────────────────── */
.demo{ display:grid; grid-template-columns:310px 1fr; gap:clamp(22px,4vw,52px); align-items:center; margin-top:48px; }
.phone{ border:1px solid var(--stroke-2); border-radius:36px; padding:11px; background:linear-gradient(180deg,#2A1750,#150C26); box-shadow:0 40px 80px -30px rgba(0,0,0,.9); margin-inline:auto; width:100%; max-width:310px; }
.phone__scr{ background:#0C0716; border-radius:27px; padding:20px 16px; min-height:400px; display:flex; flex-direction:column; }
.phone__bar{ display:flex; justify-content:space-between; font-family:var(--util); font-size:.6rem; color:var(--dim); margin-bottom:15px; }
.phone__head{ text-align:center; margin-bottom:15px; }
.phone__head b{ font-family:var(--display); font-weight:600; font-size:.98rem; }
.phone__head span{ display:block; font-family:var(--util); font-size:.52rem; letter-spacing:.28em; color:var(--dim); text-transform:uppercase; }
.step{ border:1px solid var(--stroke); border-radius:13px; padding:11px 13px; margin-bottom:8px; transition:.3s; opacity:.4; }
.step.is-on{ opacity:1; border-color:var(--stroke-2); background:rgba(157,107,255,.10); }
.step.is-done{ opacity:1; border-color:rgba(79,227,193,.30); }
.step__t{ font-family:var(--util); font-size:.58rem; letter-spacing:.16em; color:var(--dim); text-transform:uppercase; display:block; margin-bottom:2px; }
.step__v{ font-size:.86rem; }
.step__v small{ color:var(--muted); font-size:.76rem; }
.phone__go{ margin-top:auto; text-align:center; padding:12px; border-radius:12px; font-family:var(--util); font-weight:600; font-size:.86rem; background:var(--grad); color:#0D0618; transition:transform .2s, filter .3s; filter:grayscale(.75) brightness(.6); }
.phone__go.is-on{ filter:none; }
.phone__go.is-hit{ transform:scale(.95); }

.chat{ border:1px solid var(--stroke); border-radius:var(--r); overflow:hidden; background:#0E0819; }
.chat__top{ display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.04); padding:14px 18px; border-bottom:1px solid var(--stroke); }
.chat__av{ width:34px; height:34px; border-radius:11px; background:var(--brand-ln); display:grid; place-items:center; font-family:var(--util); font-weight:600; font-size:.58rem; color:#06301A; }
.chat__top b{ font-family:var(--util); font-size:.88rem; font-weight:600; }
.chat__top span{ display:block; font-size:.72rem; color:var(--dim); }
.chat__body{ padding:20px 18px; display:flex; flex-direction:column; gap:11px; min-height:330px; }
.bub{ align-self:flex-start; max-width:90%; background:var(--raise); border:1px solid var(--stroke); border-radius:6px 16px 16px 16px; padding:13px 16px; opacity:0; transform:translateY(10px); transition:.42s ease; }
.bub.is-in{ opacity:1; transform:none; }
.bub--alert{ border-color:rgba(6,199,85,.42); background:rgba(6,199,85,.09); }
.bub b{ font-family:var(--util); font-size:.85rem; font-weight:600; display:block; margin-bottom:6px; color:#7FE8A8; }
.bub dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:3px 14px; font-size:.85rem; }
.bub dt{ color:var(--dim); font-family:var(--util); font-size:.76rem; }
.bub dd{ margin:0; }
.bub__t{ font-family:var(--util); font-size:.64rem; color:var(--dim); margin-top:8px; display:block; }
.bub__act{ display:flex; gap:8px; margin-top:11px; }
.bub__act span{ font-family:var(--util); font-size:.73rem; padding:6px 13px; border-radius:999px; border:1px solid var(--stroke); color:var(--muted); }
.bub__act span:first-child{ background:rgba(6,199,85,.16); border-color:rgba(6,199,85,.4); color:#9BE8BC; }

.demo__side{ display:flex; flex-direction:column; gap:16px; }
.replay{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--stroke); color:var(--muted); font-family:var(--util); font-size:.8rem; padding:9px 18px; border-radius:999px; cursor:pointer; transition:.2s; }
.replay:hover{ border-color:var(--fuchsia); color:var(--fuchsia); }
.feats{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.feat{ display:flex; gap:10px; align-items:flex-start; border:1px solid var(--stroke); border-radius:14px; padding:13px 15px; }
.feat i{ color:var(--mint); font-style:normal; flex:none; margin-top:1px; font-size:.8rem; }
.feat b{ font-family:var(--util); font-weight:500; font-size:.85rem; display:block; }
.feat span{ color:var(--dim); font-size:.77rem; }

/* ── สไลด์แบนเนอร์ ──────────────────────────────────────────── */
.slider{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--stroke); background:var(--surface2); }
.slider__view{ position:relative; aspect-ratio:16/6.4; }
.slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .8s ease, visibility .8s; }
.slide.is-on{ opacity:1; visibility:visible; }
.slide.is-on .slide__bg{ transform:scale(1.07); }
.slide__bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1); transition:transform 9s linear; background-image:var(--fallback); }
.slide:nth-child(1) .slide__bg{ background-image:var(--slide-1), var(--fallback); }
.slide:nth-child(2) .slide__bg{ background-image:var(--slide-2), var(--fallback); }
.slide:nth-child(3) .slide__bg{ background-image:var(--slide-3), var(--fallback); }
.slide__scrim{ position:absolute; inset:0; background:linear-gradient(92deg, rgba(9,5,15,.95) 4%, rgba(9,5,15,.74) 46%, rgba(9,5,15,.16) 100%); }
.slide__in{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:center; gap:13px; padding:clamp(22px,4.4vw,58px); max-width:620px; }
.slide__in h3{ font-size:clamp(1.35rem,3vw,2.15rem); line-height:1.22; }
.slide__in p{ color:var(--muted); font-size:.95rem; max-width:44ch; }
.slide__btns{ display:flex; flex-wrap:wrap; gap:9px; margin-top:4px; }
.slider__nav{ position:absolute; right:clamp(14px,2.6vw,26px); bottom:clamp(14px,2.6vw,26px); display:flex; align-items:center; gap:9px; z-index:5; }
.sarrow{ width:40px; height:40px; border-radius:50%; cursor:pointer; border:1px solid var(--stroke); background:rgba(9,5,15,.6); backdrop-filter:blur(8px); color:#fff; display:grid; place-items:center; transition:.22s; }
.sarrow:hover{ background:var(--grad); border-color:transparent; color:#0D0618; }
.sarrow svg{ width:15px; height:15px; }
.sdots{ display:flex; gap:6px; margin-right:4px; }
.sdot{ width:8px; height:8px; padding:0; border-radius:999px; cursor:pointer; border:1px solid rgba(255,255,255,.45); background:transparent; transition:.25s; }
.sdot[aria-current="true"]{ background:var(--fuchsia); border-color:var(--fuchsia); width:24px; }

/* ── ผลงาน ──────────────────────────────────────────────────── */
.works{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; }
.work{ text-decoration:none; display:block; padding:12px; transition:transform .35s ease, border-color .35s ease; }
.work:hover{ transform:translateY(-6px); border-color:var(--stroke-2); }
.work__shot{ border-radius:16px; overflow:hidden; background:var(--fallback); aspect-ratio:3/4; }
.work__shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .6s ease; }
.work:hover .work__shot img{ transform:scale(1.05); }
.work__meta{ padding:14px 6px 6px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.work__meta b{ font-family:var(--util); font-size:.87rem; font-weight:600; }
.work__meta > span > span{ display:block; font-size:.75rem; color:var(--dim); }
.work__meta i{ font-style:normal; color:var(--fuchsia); font-size:1rem; opacity:0; transform:translateX(-5px); transition:.3s; }
.work:hover .work__meta i{ opacity:1; transform:none; }
.tag{ display:inline-block; font-family:var(--util); font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; color:#D9C4FF; background:var(--grad-soft); border:1px solid var(--stroke-2); border-radius:999px; padding:2px 10px; margin-bottom:6px; }

/* ── แบนเนอร์งานพิมพ์ ───────────────────────────────────────── */
.promo{ position:relative; overflow:hidden; }
.promo__bg{ position:absolute; inset:0; background-image:var(--promo-img), var(--fallback); background-size:cover; background-position:center; background-attachment:fixed; opacity:.30; }
.promo__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, var(--bg), rgba(9,5,15,.6) 42%, var(--bg)); }
.promo__in{ text-align:center; }
.promo__in .lead{ margin-inline:auto; margin-top:14px; }
.promo__btns{ display:flex; flex-wrap:wrap; gap:11px; justify-content:center; margin-top:26px; }

.strip{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px,1fr); gap:12px; margin-top:40px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.strip::-webkit-scrollbar{ height:6px; }
.strip::-webkit-scrollbar-thumb{ background:var(--raise); border-radius:99px; }
.shot{ position:relative; aspect-ratio:1; border-radius:18px; overflow:hidden; border:1px solid var(--stroke); scroll-snap-align:start; background-size:cover; background-position:center; background-image:var(--fallback); transition:transform .3s ease, border-color .3s; }
.shot:hover{ transform:translateY(-5px); border-color:var(--stroke-2); }
.shot:nth-child(1){ background-image:var(--shot-1), var(--fallback); }
.shot:nth-child(2){ background-image:var(--shot-2), var(--fallback); }
.shot:nth-child(3){ background-image:var(--shot-3), var(--fallback); }
.shot:nth-child(4){ background-image:var(--shot-4), var(--fallback); }
.shot::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 44%, rgba(9,5,15,.9)); }
.shot b{ position:absolute; left:14px; right:14px; bottom:12px; z-index:2; font-family:var(--util); font-size:.8rem; font-weight:600; }

/* ── แพ็กเกจ + แท็บ ─────────────────────────────────────────── */
.tabs{ display:inline-flex; gap:5px; padding:5px; border-radius:999px; border:1px solid var(--stroke); background:rgba(255,255,255,.04); margin:34px auto 0; }
.tab{
  font-family:var(--util); font-weight:600; font-size:.88rem; cursor:pointer;
  padding:11px 26px; border-radius:999px; border:0; background:transparent; color:var(--muted);
  transition:.25s;
}
.tab[aria-selected="true"]{ background:var(--grad); color:#0D0618; }
.tab:hover{ color:var(--text); }
.tab[aria-selected="true"]:hover{ color:#0D0618; }

.panel[hidden]{ display:none; }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px; align-items:start; }
.plan{ padding:28px 25px; position:relative; }
.plan--star{ border-color:var(--stroke-2); background:linear-gradient(180deg, rgba(157,107,255,.15), rgba(255,255,255,.02)); box-shadow:0 34px 76px -36px rgba(157,107,255,.7); }
.plan__flag{ position:absolute; top:-11px; left:25px; font-family:var(--util); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; background:var(--grad); color:#0D0618; padding:3px 13px; border-radius:999px; }
.plan h3{ font-size:1.24rem; margin-bottom:5px; }
.plan__for{ font-size:.84rem; color:var(--dim); margin-bottom:18px; min-height:2.7em; }
.plan__price{ display:flex; align-items:baseline; gap:7px; padding-bottom:18px; border-bottom:1px solid var(--stroke); margin-bottom:18px; }
.plan__price b{ font-family:var(--display); font-size:1.95rem; font-weight:700; line-height:1; letter-spacing:-.03em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.plan__price span{ font-family:var(--util); font-size:.74rem; color:var(--dim); }
.plan ul{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:8px; }
.plan li{ font-size:.87rem; padding-left:22px; position:relative; color:var(--muted); }
.plan li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--mint); font-size:.8rem; }
.plan li.off{ color:var(--dim); opacity:.45; }
.plan li.off::before{ content:"—"; color:var(--dim); }
.note{ margin-top:24px; text-align:center; font-size:.83rem; color:var(--dim); }

/* ── ขั้นตอน ────────────────────────────────────────────────── */
.flow{ margin-top:48px; display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.node{ padding:0 18px; border-left:1px solid var(--stroke); }
.node:first-child{ border-left:0; padding-left:0; }
.node__n{ font-family:var(--util); font-size:.68rem; letter-spacing:.16em; color:var(--violet); display:block; margin-bottom:11px; }
.node__dot{ width:9px; height:9px; border-radius:50%; background:var(--bg); border:1.6px solid var(--stroke-2); margin-bottom:15px; transition:.45s; }
.node.is-lit .node__dot{ background:var(--fuchsia); border-color:var(--fuchsia); box-shadow:0 0 16px 3px rgba(244,95,208,.55); }
.node h3{ font-size:1rem; margin-bottom:6px; }
.node p{ font-size:.84rem; color:var(--dim); }
.node__time{ font-family:var(--util); font-size:.7rem; color:var(--mint); margin-top:9px; display:block; }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq{ margin-top:40px; max-width:820px; margin-inline:auto; }
.qa{ border-bottom:1px solid var(--stroke); }
.qa__btn{
  width:100%; background:transparent; border:0; cursor:pointer; text-align:left; list-style:none;
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:22px 0;
  color:var(--text); font-family:var(--display); font-size:1.02rem; font-weight:600; line-height:1.5; letter-spacing:-.015em;
}
.qa__btn::-webkit-details-marker{ display:none; }
.qa__btn::marker{ content:""; }
.qa__btn i{ font-style:normal; color:var(--fuchsia); font-size:1.3rem; line-height:1; flex:none; transition:transform .3s ease; }
.qa[open] .qa__btn i{ transform:rotate(45deg); }
.qa__a{ padding:0 44px 22px 0; color:var(--muted); font-size:.93rem; }

/* ── ติดต่อ ─────────────────────────────────────────────────── */
.cta{ position:relative; overflow:hidden; }
.cta__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:start; margin-top:40px; }
.form{ display:grid; gap:12px; }
.field label{ display:block; font-family:var(--util); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--stroke); border-radius:14px;
  padding:13px 15px; color:var(--text); font-family:var(--body); font-size:.94rem; font-weight:300; transition:.2s;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--dim); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--stroke-2); background:rgba(157,107,255,.09); }
.form .field select{
  appearance:none; padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--violet) 50%),linear-gradient(135deg,var(--violet) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size:6px 6px; background-repeat:no-repeat; background-color:rgba(255,255,255,.04);
}
.form .field select option{ background:var(--surface2); color:var(--text); }
.field textarea{ resize:vertical; min-height:94px; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form__msg{ font-size:.84rem; color:var(--mint); min-height:1.5em; font-family:var(--util); }
.form__msg.is-err{ color:#FF9BB5; }

.reach{ display:grid; gap:11px; }
.reach__card{ display:flex; align-items:center; gap:15px; text-decoration:none; border:1px solid var(--stroke); border-radius:18px; padding:17px 19px; transition:.25s; }
.reach__card:hover{ border-color:var(--stroke-2); transform:translateX(5px); background:rgba(157,107,255,.07); }
.reach__ic{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; flex:none; }
.reach__ic svg{ width:21px; height:21px; }
.reach__card b{ font-family:var(--util); font-size:.94rem; font-weight:600; display:block; }
.reach__card > span > span{ font-size:.82rem; color:var(--dim); }
.reach__card i{ font-style:normal; margin-left:auto; color:var(--dim); }
.hours{ border:1px solid var(--stroke); border-radius:18px; padding:19px; font-size:.86rem; color:var(--muted); }
.hours b{ font-family:var(--util); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--violet); display:block; margin-bottom:8px; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--stroke); padding-block:46px 32px; background:var(--surface); position:relative; z-index:2; }
.foot__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:var(--gap); margin-bottom:34px; }
.foot p{ font-size:.86rem; color:var(--dim); max-width:34ch; margin-top:14px; }
.foot h4{ font-family:var(--util); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--violet); margin-bottom:13px; font-weight:600; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.foot ul a{ text-decoration:none; font-size:.87rem; color:var(--muted); transition:color .2s; }
.foot ul a:hover{ color:var(--fuchsia); }
.foot__bar{ border-top:1px solid var(--stroke); padding-top:20px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-family:var(--util); font-size:.75rem; color:var(--dim); }

/* ── ปุ่มลอยบนมือถือ ────────────────────────────────────────── */
.dock{ position:fixed; left:12px; right:12px; bottom:12px; z-index:65; display:none; gap:8px; background:rgba(17,10,31,.94); backdrop-filter:blur(14px); border:1px solid var(--stroke); border-radius:18px; padding:8px; }
.dock .btn{ flex:1; padding:12px 8px; font-size:.83rem; }

/* ── เผยเนื้อหาเมื่อเลื่อน ──────────────────────────────────── */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.rv.is-in{ opacity:1; transform:none; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:1040px){
  .cell--wide{ grid-column:span 6; }
  .cell--half, .cell--third{ grid-column:span 3; }
  .works{ grid-template-columns:repeat(2,1fr); }
  .flow{ grid-template-columns:repeat(2,1fr); gap:24px 0; }
  .node:nth-child(odd){ border-left:0; padding-left:0; }
  .slider__view{ aspect-ratio:16/9; }
  .hcar{ aspect-ratio:16/9; }
  .crm__two{ grid-template-columns:1fr; }
  .kpis{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .nav__links, .nav__cta{ display:none; }
  .burger{ display:flex; }
  .demo{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; }
  .cta__grid{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .dock{ display:flex; }
  body{ padding-bottom:74px; }
  .promo__bg{ background-attachment:scroll; }
  .hcar{ aspect-ratio:4/3; }
  .ping{ position:static; margin:14px auto 0; max-width:100%; }
  .mascot--hero{ right:3%; top:-58px; width:96px; animation:none; }
  .mascot--svc{ display:none; }
  .mascot--peek{ display:none; }
  .guide{ display:none; }
  .rosette{ opacity:.55; }
  .faq-row{ flex-direction:column-reverse; align-items:center; }
  .faq-row .faq{ width:100%; }
  .mascot--faq{ width:150px; }
  /* บนจอเล็ก แดชบอร์ดเปลี่ยนเมนูข้างเป็นแถบเลื่อนแนวนอนด้านบน */
  .crm__body{ grid-template-columns:1fr; }
  .crm__side{
    flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--stroke);
    padding:10px; gap:6px; scrollbar-width:none;
  }
  .crm__side::-webkit-scrollbar{ display:none; }
  .crm__brand, .crm__hint{ display:none; }
  .cnav{ width:auto; white-space:nowrap; padding:9px 14px; }
}
@media (max-width:620px){
  .pain{ grid-template-columns:1fr; gap:12px; }
  .pain__arw{ transform:rotate(90deg); }
  .cell--wide, .cell--half, .cell--third{ grid-column:span 6; }
  .works, .flow, .feats, .f2{ grid-template-columns:1fr; }
  .node{ border-left:0; padding-left:0; }
  .foot__grid{ grid-template-columns:1fr; }
  .tabs{ width:100%; }
  .tab{ flex:1; padding:11px 10px; font-size:.82rem; }
  .slider__view{ aspect-ratio:3/4; }
  .slide__scrim{ background:linear-gradient(180deg, rgba(9,5,15,.44) 0%, rgba(9,5,15,.88) 46%, rgba(9,5,15,.97) 100%); }
  .slide__in{ justify-content:flex-end; padding-bottom:76px; }
  .slider__nav{ left:clamp(14px,2.6vw,26px); justify-content:flex-start; }
  .hcar{ aspect-ratio:1; }
  .hcar__cap{ max-width:82%; bottom:52px; }
  .kpis{ grid-template-columns:repeat(2,1fr); }
  .crm__url{ display:none; }
  .chart{ height:108px; }
  /* ตารางลูกค้าบนมือถือ ตัดคอลัมน์ที่ไม่จำเป็นออก */
  .tbl th:nth-child(3), .tbl td:nth-child(3){ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .rv, .rv-up{ opacity:1; transform:none; filter:none; }
  .ping{ opacity:1; }
  .slide.is-on .slide__bg, .hcar__s.is-on .hcar__bg{ transform:none; }
  .rosette, .vine__t, .orn-rule__t, .fleurs svg, .orn-div i,
  .mascot--hero, .mascot--faq, .mascot--svc, .mascot--foot,
  .mascot--peek.is-in, .guide__ava, .gt, .btn--grad::after{ animation:none; }
  .fleurs{ display:none; }
  .frame-orn path{ stroke-dashoffset:0; }
  .mascot--peek{ opacity:1; transform:none; }
  .par{ --py:0px !important; transform:none !important; }
}

/* ── กันธีม WordPress มายุ่งกับหน้านี้ ──────────────────────── */
.bove-page #wpadminbar{ position:fixed; }
.bove-page .wrap > *{ max-width:none; }