/* =====================================================================
   LibraryFace theme — main.css
   โทน: น้ำเงินกรม (ความน่าเชื่อถือ/การศึกษา) + ฟ้าสด + เหลืองอำพันจากโลโก้
   ฟอนต์: Prompt (หัวข้อ) / Sarabun (เนื้อหา)
   ===================================================================== */
:root {
	--lf-navy: #0b1f4b;
	--lf-navy-2: #12306e;
	--lf-navy-3: #1a3f8f;
	--lf-blue: #1d4ed8;
	--lf-blue-2: #2563eb;
	--lf-sky: #38bdf8;
	--lf-sky-bg: #e9f2ff;
	--lf-bg: #f5f8fd;
	--lf-amber: #f59e0b;
	--lf-amber-2: #fbbf24;
	--lf-green: #06c755;
	--lf-text: #0f172a;
	--lf-muted: #526078;
	--lf-line: #dfe6f3;
	--lf-white: #fff;
	--lf-radius: 18px;
	--lf-radius-sm: 12px;
	--lf-shadow: 0 12px 34px rgba(11, 31, 75, .10);
	--lf-shadow-sm: 0 4px 14px rgba(11, 31, 75, .08);
	--lf-head: 'Prompt', 'Noto Sans Thai', 'Sarabun', system-ui, sans-serif;
	--lf-body: 'Sarabun', 'Noto Sans Thai', 'Prompt', system-ui, sans-serif;
	--lf-container: 1200px;
	--lf-topbar-h: 38px;
	--lf-header-h: 78px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--lf-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--lf-text);
	background: var(--lf-white);
	overflow-x: hidden;
}
img, video, iframe { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--lf-blue); text-decoration: none; }
a:hover { color: var(--lf-navy); }
h1, h2, h3, h4, h5 { font-family: var(--lf-head); line-height: 1.25; margin: 0 0 .5em; color: var(--lf-navy); font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
button { font-family: inherit; }
.lf-ic { width: 1.1em; height: 1.1em; vertical-align: -.18em; flex: none; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
.lf-skip { position: absolute; left: -999px; top: 0; background: var(--lf-navy); color: #fff; padding: 10px 16px; z-index: 1000; }
.lf-skip:focus { left: 8px; top: 8px; }
.lf-container { width: 100%; max-width: var(--lf-container); margin: 0 auto; padding: 0 22px; }
.lf-center { text-align: center; }

/* ---------- Kickers & headings ---------- */
.lf-kicker { display: inline-block; font-family: var(--lf-head); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lf-blue); margin-bottom: 10px; }
.lf-kicker--light { color: var(--lf-amber-2); }
.lf-h2 { font-size: clamp(26px, 3.2vw, 38px); }
.lf-h3 { font-size: clamp(22px, 2.4vw, 28px); }
.lf-section { padding: 72px 0; }
.lf-section--tight { padding: 28px 0; }
.lf-section--soft { background: var(--lf-bg); }
.lf-section--navy { background: linear-gradient(160deg, var(--lf-navy) 0%, var(--lf-navy-2) 60%, #16407f 100%); color: #dbe6ff; }
.lf-section--navy .lf-h2, .lf-section--navy h3, .lf-section--navy h4 { color: #fff; }
.lf-section--navy p { color: #dbe6ff; }
.lf-section__head { max-width: 840px; margin: 0 auto 40px; text-align: center; }
.lf-section__head p { color: var(--lf-muted); font-size: 18px; margin: 0; }
.lf-section--navy .lf-section__head p { color: #c7d6f6; }
.lf-section__head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; text-align: left; }
.lf-section__head--row > div { max-width: 720px; }
.lf-section__head--row .lf-btn { flex: none; }
.lf-p { font-size: 18px; color: #2b3a55; }

/* ---------- Buttons ---------- */
.lf-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-family: var(--lf-head); font-weight: 500; font-size: 15.5px; line-height: 1.2; border: 2px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; white-space: nowrap; cursor: pointer; }
.lf-btn .lf-ic { width: 1.05em; height: 1.05em; }
.lf-btn:hover { transform: translateY(-1px); }
.lf-btn--primary { background: var(--lf-blue); color: #fff; box-shadow: 0 8px 20px rgba(29, 78, 216, .28); }
.lf-btn--primary:hover { background: var(--lf-navy-3); color: #fff; }
.lf-btn--accent { background: linear-gradient(135deg, var(--lf-amber-2), var(--lf-amber)); color: #2b1d00; box-shadow: 0 8px 20px rgba(245, 158, 11, .35); }
.lf-btn--accent:hover { color: #000; }
.lf-btn--light { background: #fff; color: var(--lf-navy); box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
.lf-btn--light:hover { color: var(--lf-blue); }
.lf-btn--outline { background: transparent; color: var(--lf-blue); border-color: var(--lf-blue); }
.lf-btn--outline:hover { background: var(--lf-blue); color: #fff; }
.lf-btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); }
.lf-btn--ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.lf-btn--line { background: var(--lf-green); color: #fff; box-shadow: 0 8px 20px rgba(6, 199, 85, .3); }
.lf-btn--line:hover { color: #fff; background: #05b34c; }
.lf-btn--link { padding: 0; background: none; color: var(--lf-blue); border: 0; font-weight: 600; }
.lf-btn--link:hover { color: var(--lf-navy); transform: none; }
.lf-btn--link .lf-ic { transition: transform .15s; }
.lf-btn--link:hover .lf-ic { transform: translateX(3px); }

/* ---------- Topbar ---------- */
.lf-topbar { background: var(--lf-navy); color: #c9d6f2; font-size: 13.5px; height: var(--lf-topbar-h); }
.lf-topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 16px; }
.lf-topbar__left, .lf-topbar__right { display: flex; align-items: center; gap: 18px; min-width: 0; }
.lf-topbar a { color: #dbe6ff; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lf-topbar a:hover { color: #fff; }
.lf-topbar .lf-ic { width: 15px; height: 15px; opacity: .9; }
.lf-topbar__line { color: #9ff0bd !important; }
.lf-topbar__demo { background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 3px 12px; color: var(--lf-amber-2) !important; font-weight: 600; }

/* ---------- Header ---------- */
.lf-header { position: sticky; top: 0; z-index: 900; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--lf-line); transition: box-shadow .2s; }
.lf-header.is-scrolled { box-shadow: 0 6px 24px rgba(11, 31, 75, .08); }
.lf-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--lf-header-h); }
.lf-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--lf-navy); flex: none; }
.lf-brand__mark { width: 56px; height: auto; }
.lf-brand__logo { max-height: 56px; width: auto; }
.lf-brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.lf-brand__text strong { font-family: var(--lf-head); font-size: 22px; font-weight: 700; color: var(--lf-navy); letter-spacing: -.01em; }
.lf-brand__text small { font-family: var(--lf-head); font-size: 11.5px; color: var(--lf-blue); font-weight: 500; letter-spacing: .04em; }
.lf-header__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.lf-header__demo { display: none !important; }
.lf-header__contact { padding: 10px 18px; font-size: 14.5px; }
.lf-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--lf-line); border-radius: 12px; background: #fff; color: var(--lf-navy); align-items: center; justify-content: center; cursor: pointer; }
.lf-burger .lf-ic { width: 24px; height: 24px; }
.lf-burger__close { display: none; }
.lf-nav-open .lf-burger__open { display: none; }
.lf-nav-open .lf-burger__close { display: block; }

/* nav desktop */
.lf-nav { flex: 1; min-width: 0; display: flex; justify-content: center; }
.lf-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.lf-nav__list > li { position: relative; }
.lf-nav__list > li > a { display: inline-flex; align-items: center; padding: 9px 10px; border-radius: 10px; font-family: var(--lf-head); font-size: 14px; font-weight: 500; color: #1e2a44; white-space: nowrap; }
.lf-nav__list > li > a:hover, .lf-nav__list > li.current-menu-item > a, .lf-nav__list > li.current-menu-ancestor > a, .lf-nav__list > li.current-menu-parent > a { color: var(--lf-blue); background: var(--lf-sky-bg); }
.lf-nav__list > li.menu-item-has-children > a::after { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -3px 0 0 8px; opacity: .6; }
.lf-nav__toggle { display: none; }
.lf-nav__list .sub-menu { list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0; min-width: 260px; background: #fff; border: 1px solid var(--lf-line); border-radius: 14px; box-shadow: var(--lf-shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .18s ease; z-index: 50; }
.lf-nav__list > li:hover > .sub-menu, .lf-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lf-nav__list .sub-menu a { display: block; padding: 9px 12px; border-radius: 9px; font-size: 14.5px; color: #1e2a44; font-family: var(--lf-head); }
.lf-nav__list .sub-menu a:hover, .lf-nav__list .sub-menu .current-menu-item > a { background: var(--lf-sky-bg); color: var(--lf-blue); }
.lf-nav__list > li.lf-nav__cta, .lf-nav__list > li.menu-item-home { display: none; }
.lf-nav__mobile-contact { display: none; }

/* ---------- Hero (home) ---------- */
.lf-hero { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 85% -10%, #1f4fb0 0%, transparent 60%), radial-gradient(800px 500px at -10% 110%, #17407f 0%, transparent 55%), linear-gradient(160deg, var(--lf-navy) 0%, var(--lf-navy-2) 100%); color: #fff; padding: 72px 0 84px; }
.lf-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 80%); pointer-events: none; }
.lf-hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.lf-hero h1 { color: #fff; font-size: clamp(30px, 4.2vw, 50px); font-weight: 700; line-height: 1.18; margin-bottom: 18px; }
.lf-hero h1 em { font-style: normal; color: var(--lf-amber-2); }
.lf-hero__lead { font-size: 18.5px; color: #d6e2ff; max-width: 600px; margin-bottom: 26px; }
.lf-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lf-hero__trust { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.lf-hero__trust li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: #c7d6f6; }
.lf-hero__trust .lf-ic { width: 22px; height: 22px; color: var(--lf-amber-2); }
.lf-hero__trust strong { color: #fff; font-family: var(--lf-head); font-weight: 600; }
.lf-hero__media { position: relative; }
.lf-hero__frame { border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .15); background: #fff; }
.lf-hero__frame img { width: 100%; height: auto; }
.lf-hero__badge { position: absolute; left: -18px; bottom: -22px; display: flex; align-items: center; gap: 12px; background: #fff; color: var(--lf-navy); padding: 12px 18px; border-radius: 16px; box-shadow: var(--lf-shadow); }
.lf-hero__badge .lf-ic { width: 30px; height: 30px; color: var(--lf-amber); }
.lf-hero__badge strong { display: block; font-family: var(--lf-head); font-size: 15px; }
.lf-hero__badge span { font-size: 13px; color: var(--lf-muted); }

/* ---------- Quick product row ---------- */
.lf-quick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: -60px; position: relative; z-index: 2; }
.lf-quick__item { background: #fff; border: 1px solid var(--lf-line); border-radius: 14px; padding: 10px 10px 12px; text-align: center; color: var(--lf-text); box-shadow: var(--lf-shadow-sm); transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; gap: 4px; }
.lf-quick__item:hover { transform: translateY(-4px); box-shadow: var(--lf-shadow); color: var(--lf-blue); }
.lf-quick__img { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--lf-bg); }
.lf-quick__img img { width: 100%; height: 100%; object-fit: cover; }
.lf-quick__item strong { font-family: var(--lf-head); font-size: 13.5px; font-weight: 600; margin-top: 4px; }
.lf-quick__item small { font-size: 12px; color: var(--lf-muted); line-height: 1.35; }

/* ---------- Grids ---------- */
.lf-grid { display: grid; gap: 24px; }
.lf-grid > * { min-width: 0; }
.lf-grid--2 { grid-template-columns: repeat(2, 1fr); }
.lf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lf-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Product cards ---------- */
.lf-pcard { background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--lf-shadow-sm); transition: transform .2s, box-shadow .2s; }
.lf-pcard:hover { transform: translateY(-4px); box-shadow: var(--lf-shadow); }
.lf-pcard__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--lf-bg); }
.lf-pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.lf-pcard:hover .lf-pcard__img img { transform: scale(1.04); }
.lf-pcard__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.lf-pcard__tag { display: inline-block; align-self: flex-start; font-family: var(--lf-head); font-size: 12px; font-weight: 600; color: var(--lf-blue); background: var(--lf-sky-bg); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.lf-pcard h3 { font-size: 26px; margin: 0 0 2px; }
.lf-pcard h3 a { color: var(--lf-navy); }
.lf-pcard__sub { color: var(--lf-muted); margin-bottom: 12px; font-weight: 500; }
.lf-pcard .lf-checks { flex: 1; margin-bottom: 16px; }

/* check lists */
.lf-checks { list-style: none; padding: 0; margin: 0 0 1em; }
.lf-checks li { position: relative; padding-left: 30px; margin-bottom: 8px; font-size: 16px; line-height: 1.6; }
.lf-checks li::before { content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--lf-sky-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231d4ed8'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 12-12L20.1 5.6z'/%3E%3C/svg%3E") center / 13px no-repeat; }
.lf-checks--light li { color: #e6eeff; }
.lf-checks--light li::before { background-color: rgba(255, 255, 255, .15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fbbf24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 12-12L20.1 5.6z'/%3E%3C/svg%3E"); }
.lf-section--navy .lf-checks li { color: #e6eeff; }
.lf-section--navy .lf-checks li::before { background-color: rgba(255, 255, 255, .15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fbbf24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 12-12L20.1 5.6z'/%3E%3C/svg%3E"); }

/* ---------- Split (image + text) ---------- */
.lf-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.lf-split--rev .lf-split__media { order: 2; }
.lf-split__frame { border-radius: var(--lf-radius); overflow: hidden; box-shadow: var(--lf-shadow); background: #fff; border: 1px solid rgba(11, 31, 75, .06); }
.lf-split__frame img { width: 100%; height: auto; }
.lf-split__frame--plain { box-shadow: none; border: 0; background: transparent; }
.lf-split__text .lf-h2, .lf-split__text .lf-h3 { margin-bottom: 14px; }
.lf-split__text p { color: #2b3a55; font-size: 17.5px; }
.lf-section--navy .lf-split__text p { color: #dbe6ff; }
.lf-split__text--wide { max-width: 640px; }
.lf-section--split { padding: 56px 0; }
.lf-section--split .lf-split__frame img { aspect-ratio: 4 / 3; object-fit: cover; }

/* media cards (DKC) */
.lf-mediacards { margin-top: 48px; }
.lf-mediacard { display: flex; flex-direction: column; gap: 4px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--lf-radius); padding: 22px 24px; color: #fff; transition: background .15s, transform .15s; }
.lf-mediacard:hover { background: rgba(255, 255, 255, .13); transform: translateY(-3px); color: #fff; }
.lf-mediacard__icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(251, 191, 36, .18); color: var(--lf-amber-2); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.lf-mediacard__icon .lf-ic { width: 24px; height: 24px; }
.lf-mediacard strong { font-family: var(--lf-head); font-size: 20px; }
.lf-mediacard small { color: #c7d6f6; font-size: 14px; }
.lf-mediacard__cta { margin-top: 10px; font-family: var(--lf-head); font-size: 14px; color: var(--lf-amber-2); display: inline-flex; align-items: center; gap: 6px; }

/* kiosk cards */
.lf-kcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-radius); overflow: hidden; color: var(--lf-text); box-shadow: var(--lf-shadow-sm); transition: transform .2s, box-shadow .2s; }
.lf-kcard:hover { transform: translateY(-4px); box-shadow: var(--lf-shadow); color: var(--lf-text); }
.lf-kcard__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--lf-bg); }
.lf-kcard__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lf-kcard__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 3px; }
.lf-kcard__body small { font-family: var(--lf-head); font-size: 12px; color: var(--lf-blue); letter-spacing: .05em; text-transform: uppercase; }
.lf-kcard__body strong { font-family: var(--lf-head); font-size: 18px; color: var(--lf-navy); }
.lf-kcard__body span { font-size: 14.5px; color: var(--lf-muted); }

/* hardware row */
.lf-hwrow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 28px; }
.lf-hwrow__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 12px 8px; border-radius: 14px; border: 1px solid var(--lf-line); background: #fff; color: var(--lf-text); transition: transform .15s, box-shadow .15s; }
.lf-hwrow__item:hover { transform: translateY(-3px); box-shadow: var(--lf-shadow-sm); color: var(--lf-blue); }
.lf-hwrow__img { width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: var(--lf-bg); }
.lf-hwrow__img img { width: 100%; height: 100%; object-fit: cover; }
.lf-hwrow__item strong { display: block; font-family: var(--lf-head); font-size: 13px; font-weight: 600; }
.lf-hwrow__item small { display: block; font-size: 12px; color: var(--lf-muted); line-height: 1.3; }

/* feature tiles */
.lf-feat { background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-radius); padding: 26px 26px 22px; display: flex; flex-direction: column; }
.lf-feat h3 { font-size: 19px; margin: 0 0 8px; }
.lf-feat p { color: var(--lf-muted); font-size: 15.5px; margin: 0; }
.lf-feat__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--lf-sky-bg); color: var(--lf-blue); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.lf-feat__icon .lf-ic { width: 26px; height: 26px; }
.lf-feat--dark { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
.lf-feat--dark h3 { color: #fff; }
.lf-feat--dark p { color: #c7d6f6; }
.lf-feat--dark .lf-feat__icon { background: rgba(251, 191, 36, .18); color: var(--lf-amber-2); }
.lf-feat--link { color: var(--lf-text); transition: transform .15s, box-shadow .15s; }
.lf-feat--link:hover { transform: translateY(-3px); box-shadow: var(--lf-shadow); color: var(--lf-text); }

/* roles */
.lf-roles { margin-top: 56px; }
.lf-roles__head { text-align: center; max-width: 700px; margin: 0 auto 28px; }
.lf-roles__head h3 { font-size: 26px; }
.lf-roles__head p { color: var(--lf-muted); margin: 0; }
.lf-role { background: linear-gradient(180deg, #fff, var(--lf-sky-bg)); border: 1px solid var(--lf-line); border-radius: var(--lf-radius); padding: 24px; text-align: center; }
.lf-role__icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: var(--lf-navy); color: var(--lf-amber-2); display: flex; align-items: center; justify-content: center; }
.lf-role__icon .lf-ic { width: 26px; height: 26px; }
.lf-role h4 { font-size: 18px; margin-bottom: 6px; }
.lf-role p { font-size: 15px; color: var(--lf-muted); margin: 0; }

/* logos */
.lf-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lf-logos img { width: 100%; height: auto; background: #fff; border: 1px solid var(--lf-line); border-radius: 14px; padding: 8px; }
.lf-logos--compact { grid-template-columns: repeat(2, 1fr); }
.lf-logos__note { text-align: center; font-size: 13.5px; color: var(--lf-muted); margin: 10px 0 0; }

/* quote band */
.lf-quote { background: var(--lf-navy); color: #fff; padding: 64px 0; text-align: center; position: relative; overflow: hidden; }
.lf-quote::before { content: '“'; position: absolute; left: 4%; top: -40px; font-family: var(--lf-head); font-size: 260px; color: rgba(255, 255, 255, .05); line-height: 1; }
.lf-quote blockquote { margin: 0 auto; max-width: 860px; }
.lf-quote p { font-family: var(--lf-head); font-size: clamp(19px, 2.4vw, 26px); font-weight: 500; line-height: 1.6; color: #fff; }
.lf-quote cite { font-style: normal; color: var(--lf-amber-2); font-size: 15.5px; }

/* doc cards */
.lf-doccard { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-radius); padding: 22px; color: var(--lf-text); transition: transform .15s, box-shadow .15s; }
.lf-doccard:hover { transform: translateY(-3px); box-shadow: var(--lf-shadow); color: var(--lf-text); }
.lf-doccard .lf-ic { width: 28px; height: 28px; color: var(--lf-blue); }
.lf-doccard strong { font-family: var(--lf-head); font-size: 16.5px; color: var(--lf-navy); }
.lf-doccard small { font-size: 14px; color: var(--lf-muted); line-height: 1.5; }

/* ---------- CTA band ---------- */
.lf-cta { background: radial-gradient(900px 400px at 10% 0%, #1f4fb0 0%, transparent 60%), linear-gradient(160deg, var(--lf-navy-2), var(--lf-navy)); color: #fff; padding: 72px 0; }
.lf-cta__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.lf-cta h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); }
.lf-cta__text p { color: #d6e2ff; font-size: 17.5px; max-width: 560px; }
.lf-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.lf-cta__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--lf-amber-2); font-family: var(--lf-head); font-weight: 500; }
.lf-cta__more:hover { color: #fff; }
.lf-cta__inner--single { grid-template-columns: 1fr; }
.lf-cta__inner--single .lf-cta__text { max-width: 760px; }
.lf-cta__card .lf-kicker { margin-bottom: 4px; }
.lf-cta__card p { color: var(--lf-muted); font-size: 15.5px; }
.lf-cta__card { background: #fff; color: var(--lf-text); border-radius: var(--lf-radius); padding: 28px; box-shadow: 0 24px 50px rgba(0, 0, 0, .3); }
.lf-cta__card h3 { font-size: 20px; margin-bottom: 12px; }
.lf-cta__card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lf-cta__note { font-size: 13.5px; color: var(--lf-muted); margin: 14px 0 0; }
.lf-contact-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lf-contact-lines li a, .lf-contact-lines__static { display: inline-flex; align-items: center; gap: 10px; color: inherit; font-size: 16px; }
.lf-contact-lines li a:hover { color: var(--lf-blue); }
.lf-contact-lines .lf-ic { width: 20px; height: 20px; color: var(--lf-blue); }
.lf-contact-lines--compact li a, .lf-contact-lines--compact .lf-contact-lines__static { font-size: 15px; }

/* ---------- Footer ---------- */
.lf-footer { background: #071538; color: #b9c8ea; padding: 64px 0 0; font-size: 15px; }
.lf-footer a { color: #d6e2ff; }
.lf-footer a:hover { color: var(--lf-amber-2); }
.lf-footer h3 { color: #fff; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
.lf-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.lf-footer ul { list-style: none; margin: 0; padding: 0; }
.lf-footer li { margin-bottom: 8px; }
.lf-footer__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.lf-footer__logo img { width: 64px; height: auto; background: #fff; border-radius: 12px; padding: 5px; }
.lf-footer__logo strong { display: block; font-family: var(--lf-head); font-size: 22px; color: #fff; }
.lf-footer__logo small { display: block; font-size: 12px; color: #9fb3e0; }
.lf-footer__company { color: #fff; font-weight: 600; margin-bottom: 8px; }
.lf-footer__company span { font-weight: 400; color: #9fb3e0; font-size: 14px; }
.lf-footer__addr { display: flex; gap: 8px; align-items: flex-start; }
.lf-footer__addr .lf-ic { width: 18px; height: 18px; margin-top: 4px; color: var(--lf-amber-2); }
.lf-footer__contact .lf-contact-lines .lf-ic { color: var(--lf-amber-2); }
.lf-footer__contact .lf-contact-lines li a { color: #d6e2ff; }
.lf-footer__person { margin: 12px 0 14px; font-size: 14px; color: #9fb3e0; }
.lf-footer .lf-btn--light { color: var(--lf-navy); }
.lf-footer .lf-btn--light:hover { color: var(--lf-blue); }
.lf-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 48px; padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: #8fa3d4; }
.lf-footer__links a { margin-left: 18px; }

/* ---------- Dock ---------- */
.lf-dock { position: fixed; right: 18px; bottom: 18px; z-index: 800; display: flex; flex-direction: column; gap: 10px; }
.lf-dock a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 999px; color: #fff; font-family: var(--lf-head); font-weight: 600; font-size: 14.5px; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
.lf-dock .lf-ic { width: 22px; height: 22px; }
.lf-dock__line { background: var(--lf-green); animation: lf-pulse 2.4s infinite; }
.lf-dock__line:hover { color: #fff; }
.lf-dock__call { display: none !important; background: var(--lf-blue); }
@keyframes lf-pulse { 0% { box-shadow: 0 0 0 0 rgba(6, 199, 85, .5); } 70% { box-shadow: 0 0 0 14px rgba(6, 199, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(6, 199, 85, 0); } }

/* ---------- Inner page hero ---------- */
.lf-phero { background: radial-gradient(900px 400px at 90% -20%, #1f4fb0 0%, transparent 60%), linear-gradient(160deg, var(--lf-navy), var(--lf-navy-2)); color: #fff; padding: 48px 0 56px; }
.lf-phero--small { padding: 36px 0 40px; }
.lf-phero__inner { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.lf-phero--img .lf-phero__inner, .lf-phero--product .lf-phero__inner { grid-template-columns: 1.1fr .9fr; }
.lf-phero h1 { color: #fff; font-size: clamp(28px, 3.8vw, 44px); font-weight: 700; margin-bottom: 10px; }
.lf-phero__sub { font-family: var(--lf-head); font-size: 19px; color: var(--lf-amber-2); font-weight: 500; margin-bottom: 10px; }
.lf-phero__desc { color: #d6e2ff; font-size: 17.5px; max-width: 640px; }
.lf-phero .lf-hero__actions { margin-top: 20px; }
.lf-phero__media img { width: 100%; height: auto; border-radius: var(--lf-radius); box-shadow: 0 24px 50px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .15); aspect-ratio: 4 / 3; object-fit: cover; }
.lf-phero--product .lf-phero__media img { aspect-ratio: 4 / 3; }
.lf-crumb { font-size: 13px; color: #9fb3e0; margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.lf-crumb a { color: #c7d6f6; }
.lf-crumb a:hover { color: #fff; }

/* highlights */
.lf-hl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -54px; position: relative; z-index: 2; }
.lf-hl__item { display: flex; gap: 12px; background: #fff; border: 1px solid var(--lf-line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--lf-shadow-sm); }
.lf-hl__item .lf-ic { width: 26px; height: 26px; color: #fff; background: var(--lf-blue); border-radius: 50%; padding: 5px; flex: none; }
.lf-hl__item strong { display: block; font-family: var(--lf-head); font-size: 15.5px; color: var(--lf-navy); }
.lf-hl__item span { font-size: 14px; color: var(--lf-muted); line-height: 1.45; display: block; }
.lf-lead-quote { margin: 30px auto 0; max-width: 820px; text-align: center; font-family: var(--lf-head); font-size: 18.5px; color: var(--lf-navy-2); font-weight: 500; }

/* gallery */
.lf-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lf-gallery__item { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: #fff; box-shadow: var(--lf-shadow-sm); }
.lf-gallery__item img { width: 100%; height: 100%; object-fit: cover; }

/* person / upgrade */
.lf-person { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-radius); padding: 36px; box-shadow: var(--lf-shadow-sm); }
.lf-person__name { font-family: var(--lf-head); font-size: 20px; color: var(--lf-navy); font-weight: 600; margin: 8px 0 12px; }
.lf-person__name span { font-size: 14px; font-weight: 400; color: var(--lf-muted); }
.lf-person__side { background: var(--lf-sky-bg); border-radius: 14px; padding: 24px; }
.lf-person__side h3 { font-size: 19px; }

/* diagram */
.lf-diagram { margin: 0 auto; max-width: 980px; border-radius: var(--lf-radius); overflow: hidden; border: 1px solid var(--lf-line); background: #fff; box-shadow: var(--lf-shadow-sm); }
.lf-diagram img { width: 100%; height: auto; }

/* videos */
.lf-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lf-videos__item { border-radius: 14px; overflow: hidden; background: #0b1f4b; box-shadow: var(--lf-shadow-sm); aspect-ratio: 16 / 9; }
.lf-videos__item video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0b1f4b center / cover no-repeat; }

/* kiosk detail */
.lf-kiosk { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; padding: 36px 0; border-top: 1px solid var(--lf-line); scroll-margin-top: 100px; }
.lf-kiosk:first-of-type { border-top: 0; padding-top: 0; }
.lf-kiosk--rev .lf-kiosk__media { order: 2; }
.lf-kiosk__media { border-radius: var(--lf-radius); overflow: hidden; background: var(--lf-bg); box-shadow: var(--lf-shadow-sm); aspect-ratio: 4 / 5; }
.lf-kiosk__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lf-kiosk__body h3 { font-size: 26px; margin-bottom: 8px; }
.lf-kiosk__body > p { color: #2b3a55; }
.lf-spec { background: var(--lf-bg); border: 1px solid var(--lf-line); border-radius: 12px; padding: 14px 18px; margin-top: 12px; }
.lf-spec h4 { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--lf-blue); margin-bottom: 6px; }
.lf-spec ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.lf-spec li { font-size: 14px; background: #fff; border: 1px solid var(--lf-line); border-radius: 999px; padding: 3px 12px; color: #2b3a55; }

/* hardware detail */
.lf-hw { background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-radius); padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.lf-hw__img { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--lf-bg); margin-bottom: 10px; }
.lf-hw__img img { width: 100%; height: 100%; object-fit: cover; }
.lf-hw small { font-family: var(--lf-head); font-size: 12px; color: var(--lf-blue); letter-spacing: .05em; text-transform: uppercase; }
.lf-hw h3 { font-size: 18px; margin: 0; }
.lf-hw p { font-size: 14.5px; color: var(--lf-muted); margin: 4px 0 8px; flex: 1; }

/* media type cards */
.lf-mtype { background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-radius); padding: 26px; display: flex; flex-direction: column; }
.lf-mtype h3 { font-size: 24px; margin: 0; }
.lf-mtype small { color: var(--lf-blue); font-weight: 600; margin-bottom: 10px; }
.lf-mtype p { color: var(--lf-muted); font-size: 15.5px; flex: 1; }
.lf-browsers { margin: 36px auto 0; text-align: center; }
.lf-browsers img { margin: 0 auto 8px; width: min(420px, 100%); }
.lf-browsers span { font-family: var(--lf-head); color: var(--lf-muted); font-size: 14px; }

/* ---------- FAQ ---------- */
.lf-faq__inner { max-width: 900px; }
.lf-faq__list { display: flex; flex-direction: column; gap: 10px; }
.lf-faq__item { background: #fff; border: 1px solid var(--lf-line); border-radius: 14px; overflow: hidden; }
.lf-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; font-family: var(--lf-head); font-weight: 600; font-size: 17px; color: var(--lf-navy); }
.lf-faq__item summary::-webkit-details-marker { display: none; }
.lf-faq__item summary .lf-ic { width: 22px; height: 22px; color: var(--lf-blue); transition: transform .2s; flex: none; }
.lf-faq__item[open] summary .lf-ic { transform: rotate(180deg); }
.lf-faq__item[open] summary { border-bottom: 1px solid var(--lf-line); background: var(--lf-sky-bg); }
.lf-faq__a { padding: 14px 20px 18px; color: #2b3a55; font-size: 16px; }
.lf-faq__a p { margin: 0; }
.lf-faq--inline { margin-top: 40px; }
.lf-faq--inline h2 { font-size: 24px; margin-bottom: 14px; }
/* ---------- SEO text (home) ---------- */
.lf-seo__inner { display: grid; grid-template-columns: 1.4fr .9fr; gap: 40px; align-items: start; }
.lf-seo__text p { color: #2b3a55; font-size: 16.5px; }
.lf-seo__text a { text-decoration: underline; text-decoration-color: rgba(29, 78, 216, .35); text-underline-offset: 3px; }
.lf-seo__side { background: var(--lf-bg); border: 1px solid var(--lf-line); border-radius: var(--lf-radius); padding: 24px; }
.lf-seo__side h3 { font-size: 18px; margin-bottom: 12px; }
.lf-seo__side .lf-checks li { font-size: 15px; }
/* ---------- Articles hub ---------- */
.lf-acard { background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--lf-shadow-sm); transition: transform .2s, box-shadow .2s; }
.lf-acard:hover { transform: translateY(-4px); box-shadow: var(--lf-shadow); }
.lf-acard--pillar { border-color: var(--lf-blue); }
.lf-acard__img { display: block; aspect-ratio: 16 / 9; background: var(--lf-bg); overflow: hidden; }
.lf-acard__img img { width: 100%; height: 100%; object-fit: cover; }
.lf-acard__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.lf-acard h2 { font-size: 20px; margin: 4px 0 8px; line-height: 1.35; }
.lf-acard h2 a { color: var(--lf-navy); }
.lf-acard p { color: var(--lf-muted); font-size: 15px; flex: 1; }
/* article prose extras */
.lf-prose .lf-lead { font-size: 19px; color: #2b3a55; border-left: 4px solid var(--lf-amber); padding-left: 16px; }
.lf-prose table.gs-fit, .lf-prose .gs-fit table { min-width: 0; }
.lf-prose .lf-compare th:first-child, .lf-prose .lf-compare td:first-child { font-weight: 600; color: var(--lf-navy); white-space: nowrap; }
.lf-author__date { display: block; font-size: 13px; color: var(--lf-muted); margin-top: 4px; }

/* ---------- Demo page ---------- */
.lf-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lf-step { position: relative; background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-radius); padding: 30px 26px 26px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--lf-shadow-sm); }
.lf-step__num { width: 44px; height: 44px; border-radius: 50%; background: var(--lf-navy); color: var(--lf-amber-2); font-family: var(--lf-head); font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.lf-step h3 { font-size: 20px; margin: 0; }
.lf-step p { color: var(--lf-muted); font-size: 15.5px; margin: 0; }
.lf-step .lf-checks { margin: 6px 0 4px; }
.lf-step .lf-btn { align-self: flex-start; margin-top: auto; }
.lf-step__note { font-size: 12.5px; color: var(--lf-muted); }
.lf-demo__url { display: inline-flex; align-items: center; gap: 8px; background: var(--lf-bg); border: 1px dashed var(--lf-line); border-radius: 10px; padding: 8px 14px; font-family: var(--lf-head); font-weight: 600; color: var(--lf-navy); align-self: flex-start; margin: 4px 0 8px; }
.lf-demo__url .lf-ic { color: var(--lf-blue); }

/* ---------- Contact page ---------- */
.lf-contact { display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: start; }
.lf-contact__card { background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-radius); padding: 32px; box-shadow: var(--lf-shadow-sm); }
.lf-contact__card h2 { font-size: 26px; margin-bottom: 2px; }
.lf-contact__en { color: var(--lf-muted); font-family: var(--lf-head); margin-bottom: 20px; }
.lf-contact__list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lf-contact__list li { display: flex; gap: 14px; align-items: flex-start; }
.lf-contact__list .lf-ic { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--lf-sky-bg); color: var(--lf-blue); flex: none; }
.lf-contact__list strong { display: block; font-family: var(--lf-head); font-size: 13px; color: var(--lf-muted); font-weight: 500; letter-spacing: .04em; }
.lf-contact__list span { font-size: 17px; }
.lf-contact__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lf-contact__person { display: flex; gap: 16px; align-items: flex-start; margin-top: 22px; background: var(--lf-sky-bg); border-radius: var(--lf-radius); padding: 22px; }
.lf-contact__person strong { display: block; font-family: var(--lf-head); font-size: 19px; color: var(--lf-navy); }
.lf-contact__person > div > span { font-size: 14px; color: var(--lf-muted); display: block; margin-bottom: 6px; }
.lf-contact__person p { margin: 0; font-size: 15px; color: #2b3a55; }
.lf-contact__avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--lf-navy); color: var(--lf-amber-2); display: flex; align-items: center; justify-content: center; flex: none; }
.lf-contact__avatar .lf-ic { width: 26px; height: 26px; }
.lf-contact__side { display: flex; flex-direction: column; gap: 20px; }
.lf-contact__side .lf-contact__person { margin-top: 0; }
.lf-map { border-radius: var(--lf-radius); overflow: hidden; border: 1px solid var(--lf-line); background: #fff; box-shadow: var(--lf-shadow-sm); }
.lf-map iframe { display: block; width: 100%; height: 360px; }
.lf-map__note { font-size: 12.5px; color: var(--lf-muted); text-align: center; margin: 0; padding: 0 14px 12px; }
.lf-map__link { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; font-family: var(--lf-head); font-size: 14.5px; }
.lf-admin-note { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--lf-muted); background: var(--lf-bg); border: 1px dashed var(--lf-line); border-radius: 10px; padding: 10px 14px; }

/* ---------- Docs & article layout ---------- */
.lf-docs__grid { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
.lf-docs__side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.lf-docs__nav { background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-radius); padding: 18px; }
.lf-docs__nav h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lf-docs__nav ul { list-style: none; margin: 0; padding: 0; }
.lf-docs__nav li a { display: block; padding: 8px 10px; border-radius: 9px; font-size: 14.5px; color: #1e2a44; line-height: 1.4; }
.lf-docs__nav li a:hover { background: var(--lf-bg); color: var(--lf-blue); }
.lf-docs__nav li.is-current a { background: var(--lf-sky-bg); color: var(--lf-blue); font-weight: 600; }
.lf-docs__nav em { font-style: normal; font-size: 11px; color: var(--lf-muted); }
.lf-docs__box { background: var(--lf-navy); color: #dbe6ff; border-radius: var(--lf-radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.lf-docs__box h3 { color: #fff; font-size: 17px; margin: 0; }
.lf-docs__box p { font-size: 14.5px; margin: 0; }
.lf-docs__box a { color: var(--lf-amber-2); }
.lf-docs__box .lf-btn { align-self: flex-start; margin-top: 6px; }
.lf-docs__box .lf-btn--primary { background: var(--lf-amber); color: #2b1d00; box-shadow: none; }
.lf-docs__box .lf-btn--outline { border-color: rgba(255, 255, 255, .5); color: #fff; }
.lf-docs__box--soft { background: var(--lf-bg); color: var(--lf-text); border: 1px solid var(--lf-line); }
.lf-docs__box--soft h3 { color: var(--lf-navy); }
.lf-docs__box--soft .lf-contact-lines li a { color: var(--lf-text); }
.lf-docs__main { min-width: 0; }
.lf-docs__updated { margin-top: 30px; font-size: 13.5px; color: var(--lf-muted); border-top: 1px solid var(--lf-line); padding-top: 14px; }
.lf-article__grid { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.lf-article__main { min-width: 0; }
.lf-article__side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.lf-author { display: flex; gap: 16px; align-items: center; margin-top: 40px; background: var(--lf-bg); border: 1px solid var(--lf-line); border-radius: var(--lf-radius); padding: 20px 24px; }
.lf-author__avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--lf-navy); color: var(--lf-amber-2); display: flex; align-items: center; justify-content: center; flex: none; }
.lf-author__avatar .lf-ic { width: 26px; height: 26px; }
.lf-author small { display: block; font-size: 12px; color: var(--lf-muted); letter-spacing: .05em; text-transform: uppercase; }
.lf-author strong { display: block; font-family: var(--lf-head); font-size: 18px; color: var(--lf-navy); }
.lf-author span { font-size: 14px; color: var(--lf-muted); }

/* ---------- Prose (เนื้อหาบล็อกเดิม) ---------- */
.lf-prose { font-size: 17px; line-height: 1.8; }
.lf-prose--narrow { max-width: 820px; }
.lf-prose--article { font-size: 17.5px; }
.lf-prose > * { max-width: 100%; }
.lf-prose { overflow-wrap: anywhere; }
.lf-prose figure, .lf-prose .wp-block-image, .lf-prose .wp-block-image.is-resized, .lf-prose [style*="width:"] { max-width: 100% !important; }
.lf-docs__main, .lf-article__main, .lf-prose--narrow { overflow-x: hidden; }
.lf-prose h1, .lf-prose h2, .lf-prose h3, .lf-prose h4 { margin-top: 1.6em; }
.lf-prose h1 { font-size: 30px; }
.lf-prose h2 { font-size: 27px; }
.lf-prose h3 { font-size: 22px; }
.lf-prose h4 { font-size: 18px; }
.lf-prose h1:first-child, .lf-prose h2:first-child { margin-top: 0; }
.lf-prose p { margin-bottom: 1.1em; }
.lf-prose p:empty { display: none; }
.lf-prose ul, .lf-prose ol { margin-bottom: 1.2em; }
.lf-prose li { margin-bottom: .35em; }
.lf-prose li::marker { color: var(--lf-blue); }
.lf-prose figure { margin: 1.4em 0; }
.lf-prose img { border-radius: 12px; height: auto; }
.lf-prose figcaption { font-size: 13.5px; color: var(--lf-muted); text-align: center; margin-top: 6px; }
.lf-prose a { text-decoration: underline; text-decoration-color: rgba(29, 78, 216, .35); text-underline-offset: 3px; }
.lf-prose blockquote { border-left: 4px solid var(--lf-amber); background: var(--lf-bg); padding: 14px 20px; border-radius: 0 12px 12px 0; margin: 1.4em 0; }
.lf-prose blockquote p:last-child { margin-bottom: 0; }
.lf-prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 15px; }
.lf-prose th, .lf-prose td { border: 1px solid var(--lf-line); padding: 8px 12px; text-align: left; vertical-align: top; }
.lf-prose th { background: var(--lf-sky-bg); color: var(--lf-navy); font-family: var(--lf-head); font-weight: 600; }
.lf-prose .wp-block-table { overflow-x: auto; }
.lf-prose hr, .lf-prose .wp-block-separator { border: 0; border-top: 1px solid var(--lf-line); margin: 2em auto; width: 100%; }
.lf-prose video { width: 100%; border-radius: 12px; background: #000; }
/* block-theme leftovers */
.lf-prose .alignfull, .lf-prose .alignwide { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
.lf-prose .wp-block-group.has-background, .lf-prose .has-accent-background-color, .lf-prose .has-accent-2-background-color, .lf-prose .has-accent-3-background-color, .lf-prose .has-accent-4-background-color, .lf-prose .has-accent-5-background-color, .lf-prose .has-base-2-background-color, .lf-prose .has-contrast-2-background-color { background: var(--lf-bg) !important; color: var(--lf-text) !important; border-radius: 16px; padding: 22px 26px !important; margin: 1.4em 0; border: 1px solid var(--lf-line); }
.lf-prose .has-contrast-background-color, .lf-prose .has-contrast-2-background-color, .lf-prose .has-accent-background-color { color: var(--lf-text) !important; }
.lf-prose .has-base-color, .lf-prose .has-base-2-color, .lf-prose .has-contrast-color, .lf-prose .has-contrast-2-color, .lf-prose .has-contrast-3-color { color: inherit !important; }
.lf-prose [style*="color:#"] { color: inherit !important; }
.lf-prose .wp-block-columns { display: flex !important; flex-wrap: wrap !important; gap: 24px; margin: 1.2em 0; }
.lf-prose .wp-block-column { flex: 1 1 220px !important; min-width: 0; max-width: 100%; }
.lf-prose .wp-block-column:empty { display: none; }
.lf-prose .wp-block-column > .wp-block-columns { margin: .6em 0; }
.lf-prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 1em 0; }
.lf-prose .wp-block-button__link { display: inline-block; background: var(--lf-blue) !important; color: #fff !important; border-radius: 999px !important; padding: 9px 18px; font-family: var(--lf-head); font-size: 14.5px; text-decoration: none; }
.lf-prose .wp-block-button__link:hover { background: var(--lf-navy-3) !important; }
.lf-prose .is-style-outline .wp-block-button__link { background: transparent !important; color: var(--lf-blue) !important; border: 2px solid var(--lf-blue); }
.lf-prose .wp-block-image.alignright, .lf-prose .alignright { float: right; margin: 0 0 1em 1.5em; max-width: 45%; }
.lf-prose .wp-block-image.alignleft, .lf-prose .alignleft { float: left; margin: 0 1.5em 1em 0; max-width: 45%; }
.lf-prose .wp-block-image.aligncenter, .lf-prose .aligncenter { margin-left: auto; margin-right: auto; }
.lf-prose .wp-block-image.is-resized img { max-width: 100%; }
.lf-prose .is-style-rounded img { border-radius: 16px; }
.lf-prose .wp-block-group::after, .lf-prose .wp-block-columns::after { content: ''; display: table; clear: both; }
.lf-prose .has-x-large-font-size, .lf-prose .has-xx-large-font-size { font-size: 26px !important; font-family: var(--lf-head); color: var(--lf-navy) !important; line-height: 1.3; }
.lf-prose .has-large-font-size { font-size: 22px !important; font-family: var(--lf-head); }
.lf-prose .has-medium-font-size { font-size: 18px !important; }
.lf-prose .has-small-font-size { font-size: 14.5px !important; }
.lf-prose .has-heading-font-family { font-family: var(--lf-head) !important; }
.lf-prose .wp-block-details summary { cursor: pointer; font-family: var(--lf-head); font-weight: 600; color: var(--lf-navy); padding: 10px 0; }
.lf-prose .wp-block-details { border-bottom: 1px solid var(--lf-line); }
.lf-prose .wp-block-cover { min-height: 0 !important; border-radius: 16px; overflow: hidden; }
.lf-prose .wp-block-media-text { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.lf-prose .ninja_table_wrapper { overflow-x: auto; }
.lf-prose .wp-block-spacer { display: none; }
.lf-prose img:not([src]), .lf-prose img[src=""] { display: none; }
.lf-prose .wp-block-post-author, .lf-prose .wp-block-post-author-name { font-size: 14px; color: var(--lf-muted); }

/* ---------- Search / pagination / 404 ---------- */
.lf-search { display: flex; max-width: 520px; margin: 0 auto; border: 1px solid var(--lf-line); border-radius: 999px; overflow: hidden; background: #fff; }
.lf-search input { flex: 1; border: 0; padding: 12px 20px; font: inherit; font-size: 16px; outline: none; min-width: 0; }
.lf-search button { border: 0; background: var(--lf-blue); color: #fff; padding: 0 20px; cursor: pointer; }
.lf-search button .lf-ic { width: 20px; height: 20px; }
.lf-searchwrap { margin: 0 auto 32px; }
.lf-pagination { margin-top: 36px; text-align: center; }
.lf-pagination .page-numbers { display: inline-block; padding: 8px 14px; border: 1px solid var(--lf-line); border-radius: 10px; margin: 0 3px; color: var(--lf-navy); }
.lf-pagination .page-numbers.current { background: var(--lf-blue); color: #fff; border-color: var(--lf-blue); }
.lf-404 { padding: 96px 0; }
.lf-404 .lf-hero__actions { justify-content: center; margin-top: 24px; }

/* ---------- Strip (ท้ายหน้าสินค้า) ---------- */
.lf-strip__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
.lf-strip__grid--hw { margin-top: 18px; }
.lf-strip__item { background: #fff; border: 1px solid var(--lf-line); border-radius: 14px; padding: 10px 10px 12px; text-align: center; color: var(--lf-text); display: flex; flex-direction: column; gap: 3px; transition: transform .15s, box-shadow .15s; }
.lf-strip__item:hover { transform: translateY(-3px); box-shadow: var(--lf-shadow); color: var(--lf-blue); }
.lf-strip__img { display: block; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--lf-bg); }
.lf-strip__img--sq { aspect-ratio: 1; }
.lf-strip__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lf-strip__item strong { font-family: var(--lf-head); font-size: 13.5px; font-weight: 600; margin-top: 4px; }
.lf-strip__item small { font-size: 12px; color: var(--lf-muted); line-height: 1.35; }

/* ---------- Reveal ---------- */
.lf-reveal { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lf-reveal { opacity: 1; transform: none; transition: none; } .lf-dock__line { animation: none; } }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1200px) {
	.lf-nav__list > li.menu-item-home { display: flex; }
}
@media (max-width: 1100px) {
	.lf-quick, .lf-strip__grid, .lf-hwrow { grid-template-columns: repeat(4, 1fr); }
	.lf-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.lf-hl { grid-template-columns: repeat(2, 1fr); }
	.lf-topbar__mail { display: none !important; }
}
@media (max-width: 1200px) {
	.lf-header__demo, .lf-header__contact { display: none; }
	.lf-burger { display: inline-flex; }
	.lf-nav { position: fixed; top: calc(var(--lf-topbar-h) + var(--lf-header-h)); left: 0; right: 0; bottom: 0; background: #fff; overflow-y: auto; padding: 14px 22px 40px; display: none; flex-direction: column; justify-content: flex-start; border-top: 1px solid var(--lf-line); z-index: 890; }
	.lf-nav.is-open { display: flex; }
	.lf-nav-open { overflow: hidden; }
	.lf-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.lf-nav__list > li { border-bottom: 1px solid var(--lf-line); display: flex; flex-wrap: wrap; align-items: center; }
	.lf-nav__list > li > a { flex: 1; padding: 14px 6px; font-size: 17px; border-radius: 0; }
	.lf-nav__list > li > a:hover, .lf-nav__list > li.current-menu-item > a { background: none; }
	.lf-nav__list > li.menu-item-has-children > a::after { display: none; }
	.lf-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: var(--lf-navy); cursor: pointer; }
	.lf-nav__toggle svg { transition: transform .2s; }
	.lf-nav__list > li.is-open .lf-nav__toggle svg { transform: rotate(180deg); }
	.lf-nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 10px 12px; min-width: 0; width: 100%; display: none; background: transparent; }
	.lf-nav__list > li.is-open > .sub-menu { display: block; }
	.lf-nav__list .sub-menu a { padding: 9px 10px; font-size: 15.5px; }
	.lf-nav__list > li.lf-nav__cta { display: flex; }
	.lf-nav__mobile-contact { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; padding: 18px; background: var(--lf-bg); border-radius: 14px; }
	.lf-nav__mobile-contact .lf-btn { align-self: flex-start; }
	.lf-hero__inner, .lf-split, .lf-cta__inner, .lf-contact, .lf-person, .lf-seo__inner, .lf-phero--img .lf-phero__inner, .lf-phero--product .lf-phero__inner { grid-template-columns: 1fr; }
	.lf-split--rev .lf-split__media { order: 0; }
	.lf-hero { padding: 48px 0 70px; }
	.lf-hero__badge { left: 12px; bottom: -18px; }
	.lf-footer__grid { grid-template-columns: 1fr 1fr; }
	.lf-docs__grid { grid-template-columns: 1fr; }
	.lf-docs__side { position: static; order: 2; }
	.lf-article__grid { grid-template-columns: 1fr; }
	.lf-article__side { position: static; }
	.lf-kiosk { grid-template-columns: 1fr; }
	.lf-kiosk--rev .lf-kiosk__media { order: 0; }
	.lf-kiosk__media { aspect-ratio: 4 / 3; max-width: 520px; }
	.lf-phero__media { max-width: 640px; }
	.lf-gallery, .lf-videos { grid-template-columns: repeat(2, 1fr); }
	.lf-steps { grid-template-columns: 1fr; }
	.lf-section__head--row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 860px) {
	.lf-grid--3 { grid-template-columns: 1fr; }
	.lf-quick, .lf-strip__grid, .lf-hwrow { grid-template-columns: repeat(3, 1fr); }
	.lf-section { padding: 56px 0; }
	.lf-quote::before { display: none; }
}
@media (max-width: 640px) {
	body { font-size: 16px; }
	:root { --lf-header-h: 68px; }
	.lf-container { padding: 0 16px; }
	.lf-topbar { font-size: 12.5px; }
	.lf-topbar__left { gap: 12px; }
	.lf-topbar__right, .lf-topbar__line span { display: none; }
	.lf-topbar__line { font-size: 0; }
	.lf-topbar__line .lf-ic { width: 16px; height: 16px; }
	.lf-brand__mark { width: 50px; }
	.lf-brand__text strong { font-size: 20px; }
	.lf-brand__text small { font-size: 10px; }
	.lf-hero h1 { font-size: 30px; }
	.lf-hero__lead { font-size: 16.5px; }
	.lf-hero__actions .lf-btn { width: 100%; justify-content: center; }
	.lf-hero__trust { gap: 8px; flex-direction: column; }
	.lf-quick, .lf-strip__grid { grid-template-columns: repeat(2, 1fr); margin-top: -40px; }
	.lf-strip__grid { margin-top: 0; }
	.lf-hwrow { grid-template-columns: repeat(2, 1fr); }
	.lf-grid--2, .lf-grid--4 { grid-template-columns: 1fr; }
	.lf-hl { grid-template-columns: 1fr; margin-top: -30px; }
	.lf-gallery, .lf-videos, .lf-logos, .lf-logos--compact { grid-template-columns: 1fr 1fr; }
	.lf-footer__grid { grid-template-columns: 1fr; gap: 28px; }
	.lf-footer__bottom { flex-direction: column; }
	.lf-footer__links a { margin: 0 14px 0 0; }
	.lf-cta__card { padding: 22px; }
	.lf-cta__actions .lf-btn, .lf-cta__card-actions .lf-btn, .lf-contact__actions .lf-btn { width: 100%; justify-content: center; }
	.lf-contact__card { padding: 22px; }
	.lf-person { padding: 22px; }
	.lf-prose .wp-block-image.alignright, .lf-prose .wp-block-image.alignleft, .lf-prose .alignright, .lf-prose .alignleft { float: none; max-width: 100%; margin: 1em 0; }
	.lf-prose .wp-block-media-text { grid-template-columns: 1fr; }
	.lf-prose .has-x-large-font-size, .lf-prose .has-xx-large-font-size { font-size: 22px !important; }
	/* mobile: ซ่อน topbar (แถบล่างมีโทร/LINE แล้ว) */
	.lf-topbar { display: none; }
	.lf-nav { top: var(--lf-header-h); }
	.lf-steps { grid-template-columns: 1fr; }
	/* mobile dock = แถบล่าง */
	body { padding-bottom: 68px; }
	.lf-dock { left: 0; right: 0; bottom: 0; flex-direction: row; gap: 0; }
	.lf-dock a { flex: 1; justify-content: center; border-radius: 0; padding: 14px; font-size: 16px; box-shadow: 0 -4px 16px rgba(0, 0, 0, .12); }
	.lf-dock__line { animation: none; }
	.lf-dock__call { display: inline-flex !important; }
	.lf-nav { padding-bottom: 90px; }
}