/* LogicLayer corporate site — shared design system (logiclayer.co.th) */
:root{
  --ink:#0C1222;--soft:#57607A;--line:#E7E9F2;--paper:#F4F5F9;--card:#fff;
  --b1:#3B5BFF;--b2:#8B5CF6;--b3:#06B6D4;--navy:#0A0F1E;--radius:18px;
  --grad:linear-gradient(100deg,var(--b1),var(--b2));
  --mono:'IBM Plex Mono',ui-monospace,monospace;--ac:#3B5BFF;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans Thai',sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.brand{font-family:'Plus Jakarta Sans','IBM Plex Sans Thai',sans-serif;letter-spacing:-.02em}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.narrow{max-width:820px;margin:0 auto;padding:0 22px}
.eyebrow{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ac)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* nav */
.nav{position:sticky;top:0;z-index:20;transition:background .25s,box-shadow .25s,border-color .25s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(244,245,249,.82);backdrop-filter:blur(12px);border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(12,18,34,.05)}
.nav-in{max-width:1120px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{font-weight:800;font-size:1.08rem;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:8px}
.brand .dot{width:10px;height:10px;border-radius:3px;background:var(--grad);box-shadow:0 0 0 3px rgba(59,91,255,.14);transform:rotate(45deg)}
.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{text-decoration:none;color:var(--soft);font-size:.92rem;font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav .cta{background:var(--ink);color:#fff;text-decoration:none;padding:9px 18px;border-radius:99px;font-size:.9rem;font-weight:600;transition:transform .15s}
.nav .cta:hover{transform:translateY(-1px)}
@media(max-width:680px){.nav-links a:not(.cta){display:none}}

/* buttons */
.btn{text-decoration:none;font-weight:600;font-size:.98rem;padding:13px 24px;border-radius:99px;display:inline-flex;align-items:center;gap:8px;transition:transform .16s,box-shadow .16s}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px rgba(59,91,255,.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(99,102,241,.5)}
.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-ac{background:var(--ac);color:#fff;box-shadow:0 10px 30px color-mix(in srgb,var(--ac) 38%,transparent)}
.btn-ac:hover{transform:translateY(-2px)}
.btn-outline{border:1.5px solid var(--line);color:var(--ink);background:#fff}
.btn-outline:hover{border-color:#cfd6e6}

/* dark hero (home) */
.hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(60% 55% at 18% 8%,rgba(59,91,255,.42),transparent 60%),radial-gradient(55% 50% at 88% 22%,rgba(139,92,246,.40),transparent 62%),radial-gradient(60% 60% at 60% 108%,rgba(6,182,212,.28),transparent 60%),linear-gradient(180deg,#0A0F1E,#0B1226)}

/* generic page hero (subpages) — light, product-accent tinted */
.phero{position:relative;overflow:hidden;background:var(--navy);color:#fff;isolation:isolate;padding:70px 0 46px}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.95;background:radial-gradient(60% 80% at 12% 0%,color-mix(in srgb,var(--ac) 55%,transparent),transparent 60%),radial-gradient(55% 90% at 92% 20%,rgba(139,92,246,.34),transparent 62%),linear-gradient(180deg,#0A0F1E,#0B1226)}
.phero .crumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:#aeb9d6}
.phero .crumb a{color:#c7cfe6;text-decoration:none}
.phero h1{font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.14;margin:14px 0 12px;max-width:20ch}
.phero .lead{color:#ccd5ea;max-width:640px;font-size:clamp(1rem,1.7vw,1.12rem)}
.phero .cat{display:inline-block;font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:color-mix(in srgb,var(--ac) 55%,transparent);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:5px 13px}

/* sections */
.sec{padding:56px 0}
.sec-head{max-width:680px;margin-bottom:30px}
.sec-head h2{font-size:clamp(1.4rem,3vw,1.95rem);margin-top:10px}
.sec-head p{color:var(--soft);margin-top:8px}

/* content prose (product body / article) */
.prose{max-width:760px;font-size:1.04rem}
.prose h2{font-size:1.5rem;margin:34px 0 12px}
.prose h3{font-size:1.18rem;margin:24px 0 8px}
.prose p{margin:0 0 14px;color:#2b3344}
.prose ul,.prose ol{margin:0 0 16px;padding-left:4px;list-style:none}
.prose ul li{position:relative;padding:5px 0 5px 30px}
.prose ul li::before{content:"";position:absolute;left:0;top:11px;width:16px;height:16px;border-radius:5px;background:var(--ac);opacity:.9;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/13px no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/13px no-repeat}
.prose ol{counter-reset:s}
.prose ol li{position:relative;padding:5px 0 5px 34px;counter-increment:s}
.prose ol li::before{content:counter(s);position:absolute;left:0;top:4px;width:22px;height:22px;border-radius:50%;background:var(--ac);color:#fff;font-family:var(--mono);font-size:.72rem;font-weight:600;text-align:center;line-height:22px}
.prose a{color:var(--b1);font-weight:500}
.prose strong{font-family:'Plus Jakarta Sans','IBM Plex Sans Thai',sans-serif;font-weight:600}

/* product page layout */
.prodgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
@media(max-width:860px){.prodgrid{grid-template-columns:1fr;gap:26px}}
.infoframe{background:#fff;border:1px solid var(--line);border-top:3px solid var(--ac);border-radius:16px;overflow:hidden;box-shadow:0 18px 44px rgba(12,18,34,.09);position:sticky;top:80px}
.infoframe .bar{display:flex;gap:6px;align-items:center;height:32px;padding-left:14px;background:#f2f4fa;border-bottom:1px solid var(--line)}
.infoframe .bar i{width:9px;height:9px;border-radius:50%}
.infoframe .bar i:nth-child(1){background:#ff6058}.infoframe .bar i:nth-child(2){background:#ffbd2e}.infoframe .bar i:nth-child(3){background:#28c840}
.infoframe img{display:block;width:100%;height:auto}
.infocap{font-family:var(--mono);font-size:.72rem;color:var(--soft);text-align:center;padding:10px 12px;border-top:1px solid var(--line)}
@media(max-width:860px){.infoframe{position:static}}

/* feature cards row */
.feat{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:22px 0 4px}
.feat .f{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.feat .f h4{font-size:1.02rem;margin-bottom:5px}
.feat .f p{color:var(--soft);font-size:.9rem}
.feat .f .k{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ac)}

/* product cards grid (home + related) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.card{--ac:#3B5BFF;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--ac);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 52px color-mix(in srgb,var(--ac) 24%,rgba(12,18,34,.14))}
.card .frame{position:relative;background:#fff}
.card .frame .dots{display:flex;align-items:center;gap:6px;height:32px;padding-left:14px;background:#f2f4fa;border-bottom:1px solid var(--line)}
.card .frame .dots i{width:9px;height:9px;border-radius:50%;background:#cfd6e6}
.card .frame .dots i:nth-child(1){background:#ff6058}.card .frame .dots i:nth-child(2){background:#ffbd2e}.card .frame .dots i:nth-child(3){background:#28c840}
.card .shot{display:block;width:100%;height:auto}
.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.cat{font-family:var(--mono);font-size:.69rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ac)}
.card-body h3{font-size:1.16rem}
.card-body p{color:var(--soft);font-size:.9rem;flex:1}
.go{font-size:.85rem;font-weight:700;color:var(--ac);display:inline-flex;gap:5px;margin-top:2px}

/* faq */
.faq{display:flex;flex-direction:column;gap:14px;max-width:820px}
.faq .q{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:#fff}
.faq .q h3{font-size:1.04rem;margin-bottom:6px}
.faq .q p{color:var(--soft);font-size:.94rem}
.faq .q a{color:var(--b1)}

/* contact */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:760px){.cgrid{grid-template-columns:1fr}}
.cbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px}
.cbox h3{font-size:1.1rem;margin-bottom:10px}
.cbox p,.cbox li{color:var(--soft);font-size:.95rem}
.cbox ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:8px}
.cbox b{color:var(--ink)}

/* article list */
.alist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.acard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;text-decoration:none;color:inherit;display:block;transition:transform .2s,box-shadow .2s}
.acard:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(12,18,34,.09)}
.acard .tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--b1)}
.acard h3{font-size:1.14rem;margin:8px 0 6px}
.acard p{color:var(--soft);font-size:.92rem}
.acard time{display:block;color:#9099ad;font-size:.8rem;margin-top:10px}

/* contact band */
.band{position:relative;overflow:hidden;border-radius:24px;margin:8px 0 60px;padding:52px 30px;text-align:center;color:#fff;background:var(--navy)}
.band::before{content:"";position:absolute;inset:0;z-index:0;opacity:.9;background:radial-gradient(50% 120% at 15% 0%,rgba(59,91,255,.55),transparent 60%),radial-gradient(50% 120% at 85% 100%,rgba(139,92,246,.55),transparent 60%)}
.band>*{position:relative;z-index:1}
.band h2{font-size:clamp(1.5rem,3.4vw,2rem)}
.band p{color:#c7cfe6;margin:10px auto 22px;max-width:460px}
.band .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.band .b1,.band .b2{padding:12px 24px;border-radius:99px;text-decoration:none;font-weight:600;font-size:.95rem;transition:transform .15s}
.band .b1{background:#06C755;color:#fff}.band .b2{background:#fff;color:var(--ink)}
.band .b1:hover,.band .b2:hover{transform:translateY(-2px)}

/* footer */
.footer{border-top:1px solid var(--line);padding:30px 0 44px;font-size:.85rem;color:var(--soft);background:var(--paper)}
.footer .fcols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:20px}
.footer .fcol h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-bottom:10px;font-family:var(--mono);font-weight:600}
.footer .fcol a{display:block;color:var(--soft);text-decoration:none;padding:3px 0}
.footer .fcol a:hover{color:var(--ink)}
.footer .legal{border-top:1px solid var(--line);padding-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* reveal (js-gated) */
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ── ฟอร์มติดต่อกลาง (.llband + .llform) — ใช้ซ้ำทุกหน้า ────────────────── */
.llband{position:relative;overflow:hidden;border-radius:26px;margin:8px 0 60px;padding:42px 34px;color:#fff;background:var(--navy)}
.llband::before{content:"";position:absolute;inset:0;z-index:0;opacity:.9;
  background:radial-gradient(50% 120% at 12% 0%,rgba(59,91,255,.5),transparent 62%),radial-gradient(55% 120% at 88% 100%,rgba(139,92,246,.5),transparent 62%)}
.llband>*{position:relative;z-index:1}
.llband-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:36px;align-items:start}
@media(max-width:820px){.llband{padding:32px 22px}.llband-grid{grid-template-columns:1fr;gap:24px}}
.llband h2{font-size:clamp(1.4rem,3.2vw,1.9rem)}
.llband .sub{color:#c7cfe6;margin-top:10px;font-size:.95rem}
.lldirect{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.lldirect a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#e6ebf8;font-size:.92rem;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);padding:10px 16px;border-radius:12px;transition:background .16s,transform .16s}
.lldirect a:hover{background:rgba(255,255,255,.11);transform:translateX(2px)}
.llform{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.llform{grid-template-columns:1fr}}
.llform .full{grid-column:1/-1}
.llform label{display:block;font-size:.8rem;color:#b9c4de;margin-bottom:6px;font-weight:500}
.llform input,.llform select,.llform textarea{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);border-radius:12px;padding:12px 14px;color:#fff;font-family:inherit;font-size:.94rem;transition:border-color .16s,background .16s}
.llform input::placeholder,.llform textarea::placeholder{color:#8c99b8}
.llform input:focus,.llform select:focus,.llform textarea:focus{outline:0;border-color:#7d94ff;background:rgba(255,255,255,.12)}
.llform select option{background:#131a2e;color:#fff}
.llform textarea{resize:vertical;min-height:88px}
.llform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.llform .submit{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.llform .note{font-size:.8rem;color:#9aa6c4}
.llform .llmsg{grid-column:1/-1;font-size:.9rem;padding:12px 14px;border-radius:12px;display:none}
.llform .llmsg.ok{display:block;background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.4);color:#a7f3d0}
.llform .llmsg.err{display:block;background:rgba(248,113,113,.14);border:1px solid rgba(248,113,113,.4);color:#fecaca}
.llform .btn{border:0;cursor:pointer;font-family:inherit}
.llform .btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.btn-send{background:linear-gradient(100deg,var(--b1),var(--b2));color:#fff;box-shadow:0 10px 30px rgba(59,91,255,.4)}
.btn-send:hover{transform:translateY(-2px)}