/* ===== ส่วนเสริมหน้า home: ตัวการ์ตูน, เดโม AI, FAQ, ของตกแต่งลอย ===== */
.hx-section-wrap{ position:relative; }
.hx-doodle{ position:absolute; pointer-events:none; opacity:.55; z-index:0; animation:hx-float 7s ease-in-out infinite; }
.hx-doodle svg{ width:100%; height:100%; display:block; }
@keyframes hx-float{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-16px) rotate(5deg); } }
.section, .features-band, .final-cta{ position:relative; }
.section > *:not(.hx-doodle){ position:relative; z-index:1; }

/* ---------- เดโม AI ---------- */
.demo-section{ overflow:hidden; }
.demo-tabs{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:0 0 22px; }
.demo-tab{
    border:1.5px solid rgba(74,99,224,.28); background:#fff; color:#3547b8; font:inherit; font-weight:600; font-size:14px;
    padding:9px 18px; border-radius:999px; cursor:pointer; transition:.2s;
}
.demo-tab.on{ background:linear-gradient(135deg,#4a63e0,#7a8cf0); color:#fff; border-color:transparent; box-shadow:0 10px 22px rgba(74,99,224,.32); }
.demo-win{
    max-width:880px; margin:0 auto; background:#fff; border-radius:22px; border:1px solid #e3e7f8;
    box-shadow:0 30px 70px -30px rgba(74,99,224,.45); overflow:hidden;
}
.demo-bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; background:#f4f6fe; border-bottom:1px solid #e3e7f8; }
.demo-bar i{ width:11px; height:11px; border-radius:50%; background:#ffb4b4; }
.demo-bar i:nth-child(2){ background:#ffe19a; } .demo-bar i:nth-child(3){ background:#a9e8c0; }
.demo-bar span{ margin-left:10px; font-size:12.5px; color:#7b82a0; }
.demo-body{ display:grid; grid-template-columns:1fr 54px 1fr; gap:10px; padding:22px; align-items:stretch; }
.demo-box{ border-radius:16px; padding:16px 18px; min-height:150px; font-size:15.5px; line-height:1.9; color:#232842; }
.demo-box small{ display:block; font-size:12px; font-weight:700; letter-spacing:1px; margin-bottom:6px; }
.demo-before{ background:#fff6f4; border:1px dashed #f3b8ae; }
.demo-before small{ color:#d4543f; }
.demo-after{ background:#f1fbf5; border:1px solid #bfe8cf; position:relative; }
.demo-after small{ color:#1f8f56; }
.demo-after .txt{ opacity:0; transform:translateY(8px); transition:.5s; }
.demo-after.show .txt{ opacity:1; transform:none; }
.demo-mid{ display:flex; align-items:center; justify-content:center; }
.demo-mid .spark{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#4a63e0,#7a8cf0); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 8px 18px rgba(74,99,224,.4); }
.demo-mid.busy .spark{ animation:hx-spin 1s linear infinite; }
@keyframes hx-spin{ to{ transform:rotate(360deg); } }
.demo-caret{ display:inline-block; width:2px; height:1.1em; background:#d4543f; vertical-align:-3px; margin-left:1px; animation:hx-blink 1s steps(2) infinite; }
@keyframes hx-blink{ 50%{ opacity:0; } }
mark.bad{ background:#ffd9d2; color:#b3321f; border-radius:4px; padding:0 3px; text-decoration:underline wavy #d4543f; }
mark.good{ background:#c9f1d9; color:#17693f; border-radius:4px; padding:0 3px; }
.demo-note{ text-align:center; font-size:13px; color:#7b82a0; padding:0 20px 20px; }

/* ---------- FAQ ---------- */
.faq-list{ max-width:780px; margin:26px auto 0; display:grid; gap:12px; }
.faq-list details{ background:#fff; border:1px solid #e3e7f8; border-radius:16px; padding:0 20px; transition:box-shadow .2s; }
.faq-list details[open]{ box-shadow:0 16px 34px -20px rgba(74,99,224,.5); border-color:#c9d2f6; }
.faq-list summary{ cursor:pointer; list-style:none; padding:18px 0; font-weight:600; color:#171a2e; display:flex; justify-content:space-between; gap:12px; align-items:center; }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:"+"; font-size:22px; color:#4a63e0; transition:transform .25s; flex:0 0 auto; }
.faq-list details[open] summary::after{ transform:rotate(45deg); }
.faq-list details p{ margin:0 0 18px; color:#5b6280; line-height:1.8; font-size:14.5px; }

/* ---------- ตัวการ์ตูน น้องสมาร์ท ---------- */
.mascot{ position:fixed; left:12px; bottom:12px; z-index:60; width:92px; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
.mascot svg{ width:100%; display:block; overflow:visible; filter:drop-shadow(0 12px 14px rgba(74,99,224,.35)); animation:hx-bob 3.2s ease-in-out infinite; }
@keyframes hx-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.mascot .eye{ transform-box:fill-box; transform-origin:center; animation:hx-eye 4.5s infinite; }
@keyframes hx-eye{ 0%,92%,100%{ transform:scaleY(1); } 95%{ transform:scaleY(.1); } }
.mascot .wave{ transform-box:fill-box; transform-origin:10% 90%; animation:hx-wave 2.4s ease-in-out infinite; }
@keyframes hx-wave{ 0%,60%,100%{ transform:rotate(0); } 70%{ transform:rotate(-26deg); } 80%{ transform:rotate(8deg); } 90%{ transform:rotate(-22deg); } }
.mascot .ant{ transform-box:fill-box; transform-origin:center; animation:hx-ant 1.8s ease-in-out infinite; }
@keyframes hx-ant{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.35); } }
.mascot.jump svg{ animation:hx-jump .6s ease; }
@keyframes hx-jump{ 0%{ transform:translateY(0) scale(1,1); } 30%{ transform:translateY(-26px) scale(.94,1.08); } 60%{ transform:translateY(0) scale(1.08,.92); } 100%{ transform:translateY(0) scale(1); } }
.mascot-bubble{
    position:absolute; left:6px; bottom:100%; margin-bottom:8px; width:max-content; max-width:min(230px, 62vw);
    background:#fff; color:#232842; font-size:13.5px; line-height:1.55; font-weight:500;
    padding:10px 14px; border-radius:16px 16px 16px 4px; border:1px solid #d6dcf7;
    box-shadow:0 14px 28px -12px rgba(74,99,224,.5);
    opacity:0; transform:translateY(8px) scale(.96); transform-origin:left bottom; pointer-events:none; transition:.28s;
}
.mascot-bubble.on{ opacity:1; transform:none; }

@media(max-width:700px){
    .demo-body{ grid-template-columns:1fr; padding:14px; }
    .demo-mid{ transform:rotate(90deg); padding:2px 0; }
    .demo-box{ min-height:0; font-size:14.5px; }
    .mascot{ width:70px; left:8px; bottom:8px; }
    .hx-doodle{ opacity:.35; }
}
@media(prefers-reduced-motion:reduce){
    .hx-doodle, .mascot svg, .mascot .eye, .mascot .wave, .mascot .ant, .demo-caret, .demo-mid.busy .spark{ animation:none !important; }
}

/* จอเล็กมาก (<=380px): แถบบนไม่ให้ล้น */
@media(max-width:380px){
    .home-nav{ padding:10px 12px; }
    .home-nav .brand{ font-size:14px; gap:6px; }
    .home-nav .brand .icon{ width:34px; height:34px; }
    .home-nav .nav-actions{ gap:6px; }
    .home-nav .nav-btn{ padding:8px 11px; font-size:12.5px; }
}
@media(max-width:360px){
    .home-nav .brand{ min-width:0; flex:1 1 auto; overflow:hidden; }
    .home-nav .brand > span:not(.icon), .home-nav .brand > :not(.icon){ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .home-nav .nav-actions{ flex:0 0 auto; }
}