/* ============================================================
   ลูกเล่นหน้าแนะนำระบบ (home.html) — ส่วนเสริมซ้อนทับสไตล์เดิม
   ปิดอนิเมชันอัตโนมัติเมื่อผู้ใช้ตั้งค่า "ลดการเคลื่อนไหว"
   ============================================================ */

html{ scroll-behavior:smooth; }

/* ---------- แถบความคืบหน้าการเลื่อนหน้า ---------- */
.fx-progress{
    position:fixed; top:0; left:0; height:3px; width:100%; z-index:60;
    transform-origin:left; transform:scaleX(0);
    background:linear-gradient(90deg,#4a5fc9,#7186d4 60%,#e8cf7c);
    pointer-events:none;
}

/* ---------- Nav: เล็กลง+เงา เมื่อเลื่อนลง ---------- */
.home-nav{ transition:padding .25s ease, box-shadow .25s ease, background .25s ease; }
.home-nav.scrolled{
    padding-top:10px; padding-bottom:10px;
    background:rgba(255,255,255,.92);
    box-shadow:0 8px 28px rgba(74,99,224,.14);
}
.home-nav .brand .icon{ animation:fx-bob 4.5s ease-in-out infinite; }
@keyframes fx-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }

.nav-btn{ position:relative; overflow:hidden; }
.nav-btn.solid{
    background:linear-gradient(100deg,#4a5fc9,#5b70d6 55%,#4552b0);
    box-shadow:0 8px 18px rgba(74,95,201,.30);
    transition:transform .18s ease, box-shadow .25s ease;
}
.nav-btn.solid::after{
    content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
    transform:skewX(-20deg); animation:fx-shine 4s ease-in-out infinite;
}
@keyframes fx-shine{ 0%,60%{ left:-70%; } 100%{ left:150%; } }
.nav-btn.solid:hover{ transform:translateY(-2px); box-shadow:0 14px 26px rgba(74,95,201,.40); }
.nav-btn.ghost:hover{ transform:translateY(-2px); }

/* ---------- Hero ---------- */
.hero{
    position:relative; overflow:hidden;
    background-size:220% 220%;
    animation:fx-grad 18s ease-in-out infinite;
}
@keyframes fx-grad{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.hero::before, .hero::after{
    content:""; position:absolute; border-radius:50%; pointer-events:none; filter:blur(8px);
}
.hero::before{
    width:520px; height:520px; left:-160px; top:-180px;
    background:radial-gradient(circle,rgba(255,255,255,.65),transparent 70%);
    animation:fx-drift 20s ease-in-out infinite;
}
.hero::after{
    width:460px; height:460px; right:-140px; bottom:-170px;
    background:radial-gradient(circle,rgba(74,95,201,.30),transparent 70%);
    animation:fx-drift 24s ease-in-out infinite reverse;
}
@keyframes fx-drift{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(50px,36px) scale(1.14); } }
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.hero-inner{ position:relative; z-index:1; }

.hero-badge{
    display:flex; width:max-content; margin:0 auto 22px; align-items:center; gap:9px;
    padding:8px 18px; border-radius:999px; font-size:13px; font-weight:600; color:#3547b8;
    background:rgba(255,255,255,.7); border:1px solid rgba(74,99,224,.25);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    box-shadow:0 8px 20px rgba(74,99,224,.12);
    animation:fx-rise .8s ease both;
}
.hero-badge i{
    width:8px; height:8px; border-radius:50%; background:#16a34a; position:relative;
}
.hero-badge i::after{
    content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid #16a34a;
    animation:fx-ping 1.8s ease-out infinite;
}
@keyframes fx-ping{ 0%{ transform:scale(.5); opacity:.9; } 100%{ transform:scale(1.8); opacity:0; } }
@keyframes fx-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* รูปแบนเนอร์เอียงตามเมาส์ + แสงเงา */
.hero-img-wrap{
    transform-style:preserve-3d;
    transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .25s ease-out, box-shadow .3s ease;
    animation:fx-rise .9s .1s ease both;
}
.hero-img-wrap:hover{ box-shadow:0 34px 80px rgba(74,99,224,.34); }
.hero-img-wrap::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.28),transparent 60%);
    opacity:0; transition:opacity .3s ease;
}
.hero-img-wrap:hover::after{ opacity:1; }
.hero-slider-dots{ z-index:3; }

.hero-cta-row{ animation:fx-rise .9s .25s ease both; }
.hero-cta-row .nav-btn.solid{ animation:fx-pulse 2.8s ease-in-out infinite; }
@keyframes fx-pulse{
    0%,100%{ box-shadow:0 8px 18px rgba(74,95,201,.30), 0 0 0 0 rgba(74,95,201,.35); }
    50%{ box-shadow:0 8px 18px rgba(74,95,201,.30), 0 0 0 12px rgba(74,95,201,0); }
}

/* ชิปหลักการ AI ลอยเข้า */
.hero-principles{
    display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px;
}
.hero-principles .pchip{
    padding:8px 16px; border-radius:999px; font-size:13px; font-weight:600; color:#3547b8;
    background:rgba(255,255,255,.72); border:1px solid rgba(74,99,224,.22);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    box-shadow:0 6px 16px rgba(74,99,224,.10);
    opacity:0; animation:fx-rise .7s ease forwards, fx-bob 5s ease-in-out infinite;
    transition:transform .2s ease, background .2s ease, color .2s ease;
}
.hero-principles .pchip:nth-child(1){ animation-delay:.5s,1.2s; }
.hero-principles .pchip:nth-child(2){ animation-delay:.65s,1.6s; }
.hero-principles .pchip:nth-child(3){ animation-delay:.8s,2.0s; }
.hero-principles .pchip:nth-child(4){ animation-delay:.95s,2.4s; }
.hero-principles .pchip:nth-child(5){ animation-delay:1.1s,2.8s; }
.hero-principles .pchip:hover{ background:#4a5fc9; color:#fff; transform:translateY(-4px) scale(1.05); }
.hero-principles-title{ text-align:center; margin-top:28px; font-size:12.5px; letter-spacing:2px; color:#4a5fc9; font-weight:600; }

/* ---------- แถบตัวเลข ---------- */
.stats-strip{ max-width:1180px; margin:-36px auto 0; padding:0 32px; position:relative; z-index:3; }
.stats-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:0;
    background:#fff; border-radius:22px; padding:10px;
    box-shadow:0 24px 56px rgba(74,99,224,.18), 0 2px 6px rgba(15,23,42,.05);
}
.stat{ text-align:center; padding:22px 12px; position:relative; }
.stat + .stat::before{ content:""; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:#e6e9f7; }
.stat .num{
    font-size:38px; font-weight:700; line-height:1.1; letter-spacing:-.5px;
    background:linear-gradient(90deg,#3547b8,#6b80e0); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
}
.stat .num small{ font-size:20px; font-weight:600; }
.stat .lbl{ font-size:13px; color:#6b7080; margin-top:4px; }
.stats-note{ text-align:center; font-size:11.5px; color:#9a9fae; margin:12px 0 0; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0s); }
.reveal.in{ opacity:1; transform:none; }

/* หัวข้อมีเส้นขีดวิ่ง */
.section-eyebrow::before{ transition:width .7s ease .2s; width:0; }
.in .section-eyebrow::before, .section-eyebrow.in::before{ width:22px; }
.section-title{
    background:linear-gradient(90deg,#171a2e 20%,#3547b8 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.features-inner .section-title{ background:none; -webkit-text-fill-color:#fff; color:#fff; }

/* ---------- ขั้นตอน ---------- */
.guide-grid{ position:relative; }
.guide-grid::before{
    content:""; position:absolute; left:10%; right:10%; top:43px; height:2px; z-index:0;
    background:repeating-linear-gradient(90deg,#aebbef 0 8px,transparent 8px 16px);
    transform-origin:left; transform:scaleX(0); transition:transform 1.4s ease .3s;
}
.guide-grid.in::before{ transform:scaleX(1); }
.guide-step{ z-index:1; overflow:hidden; }
.guide-step::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
    background:linear-gradient(90deg,#4a5fc9,#e8cf7c); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.guide-step:hover::after{ transform:scaleX(1); }
.guide-step:hover .step-icon{ animation:fx-wiggle .6s ease; background:linear-gradient(135deg,#4a5fc9,#7186d4); color:#fff; }
.guide-step .step-icon{ transition:background .3s ease, color .3s ease; }
@keyframes fx-wiggle{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-10deg) scale(1.08); } 60%{ transform:rotate(8deg) scale(1.08); } }
.guide-step.in .step-num{ animation:fx-pop .6s cubic-bezier(.3,1.6,.5,1) both; animation-delay:calc(var(--d,0s) + .25s); }
@keyframes fx-pop{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* ---------- ชนิดเอกสาร ---------- */
.doc-chip{ position:relative; overflow:hidden; transition:transform .22s ease, box-shadow .25s ease, border-color .25s ease; }
.doc-chip::before{
    content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s ease;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(74,99,224,.12),transparent 60%);
}
.doc-chip:hover{ transform:translateY(-4px); border-color:#aebbef; box-shadow:0 16px 30px rgba(74,99,224,.16); }
.doc-chip:hover::before{ opacity:1; }
.doc-chip .doc-icon{ transition:transform .35s ease, background .3s ease, color .3s ease; position:relative; }
.doc-chip:hover .doc-icon{ transform:rotate(-8deg) scale(1.12); background:linear-gradient(135deg,#4a5fc9,#7186d4); color:#fff; }
.doc-chip .label{ position:relative; }

/* ---------- จุดเด่น ---------- */
.features-band{
    position:relative; overflow:hidden;
    background:linear-gradient(160deg,#4552b0,#5b70d6 45%,#7688e2 75%,#4552b0);
    background-size:200% 200%; animation:fx-grad 16s ease-in-out infinite;
}
.features-band::before, .features-band::after{
    content:""; position:absolute; border-radius:50%; pointer-events:none;
}
.features-band::before{ width:420px; height:420px; left:-120px; bottom:-200px; background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%); animation:fx-drift 19s ease-in-out infinite; }
.features-band::after{ width:360px; height:360px; right:-100px; top:-160px; background:radial-gradient(circle,rgba(232,207,124,.30),transparent 70%); animation:fx-drift 23s ease-in-out infinite reverse; }
.features-inner{ position:relative; z-index:1; }
.feature-card{
    position:relative; overflow:hidden;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    transition:transform .25s ease, background .25s ease, box-shadow .3s ease;
}
.feature-card::before{
    content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s ease;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 65%);
}
.feature-card:hover{ transform:translateY(-6px); background:rgba(255,255,255,.2); box-shadow:0 20px 40px rgba(20,25,90,.28); }
.feature-card:hover::before{ opacity:1; }
.feature-card .f-icon{ position:relative; transition:transform .4s ease; }
.feature-card:hover .f-icon{ transform:rotate(-8deg) scale(1.14); }
.feature-card > *{ position:relative; }

/* ---------- Final CTA ---------- */
.final-cta{ position:relative; }
.final-cta .cta-box{
    max-width:880px; margin:0 auto; padding:56px 32px; border-radius:28px; position:relative; overflow:hidden;
    background:linear-gradient(135deg,#eef1fb,#d3daf5 60%,#aebbef);
    box-shadow:0 26px 60px rgba(74,99,224,.2);
}
.final-cta .cta-box::before{
    content:""; position:absolute; width:340px; height:340px; border-radius:50%; right:-90px; top:-130px;
    background:radial-gradient(circle,rgba(255,255,255,.7),transparent 70%); animation:fx-drift 18s ease-in-out infinite;
}
.final-cta .cta-box > *{ position:relative; }
.final-cta .nav-btn.solid{ animation:fx-pulse 2.8s ease-in-out infinite; }

/* ---------- ปุ่มกลับขึ้นบน ---------- */
.fx-top{
    position:fixed; right:22px; bottom:22px; z-index:50; width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
    background:linear-gradient(135deg,#4a5fc9,#7186d4); color:#fff; font-size:20px;
    box-shadow:0 12px 24px rgba(74,95,201,.4);
    opacity:0; transform:translateY(16px); pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
}
.fx-top.show{ opacity:1; transform:none; pointer-events:auto; }
.fx-top:hover{ transform:translateY(-3px); }

@media(max-width:1000px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } .stat:nth-child(3)::before{ display:none; } }
@media(max-width:640px){
    .stats-strip{ padding:0 16px; margin-top:-24px; }
    .stat .num{ font-size:30px; }
    .guide-grid::before{ display:none; }
    .final-cta .cta-box{ padding:40px 20px; }
}

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation:none !important; transition-duration:.01s !important; }
    .reveal, .hero-principles .pchip, .hero-badge, .hero-img-wrap, .hero-cta-row{ opacity:1 !important; transform:none !important; }
    html{ scroll-behavior:auto; }
}

/* แถบเมนูบนมือถือ: ไม่ให้ข้อความปุ่มตัดบรรทัด */
.nav-btn{ white-space:nowrap; }
@media(max-width:640px){
    .home-nav .brand span{ font-size:15px; white-space:nowrap; }
    .home-nav .nav-actions{ gap:8px; }
    .home-nav .nav-btn{ padding:8px 14px; font-size:13px; }
    .home-nav .brand .icon{ width:38px; height:38px; }
}