/* Nexora — CSS กลาง ตาม docs/design-system.md */
@font-face{font-family:"IBM Plex Sans Thai";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-thai-thai-400.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"IBM Plex Sans Thai";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-thai-thai-500.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"IBM Plex Sans Thai";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-thai-thai-600.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"IBM Plex Sans Thai";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-thai-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"IBM Plex Sans Thai";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-thai-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"IBM Plex Sans Thai";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-thai-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500.woff2) format("woff2")}

:root{
  --bg:#0C0D0F;--surface:#16181C;--line:#2A2D33;
  --ink:#EFEDE6;--muted:#A7A9AE;
  --blue:#017CFC;--blue-text:#3D96FF;--blue-btn:#0A5FD6;--blue-btn-hover:#0850B8;
  --ink-on-light:#0C0D0F;--muted-on-light:#5B5E66;
  --font:"IBM Plex Sans Thai",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  --gutter:16px;--nav-h:72px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.75 var(--font);overflow-x:hidden}
img,svg{max-width:100%}
h1,h2,h3,p,ul,ol,dl{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--blue-text)}
.wrap{width:min(1120px,100% - 2*var(--gutter));margin-inline:auto}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.light :focus-visible{outline-color:var(--ink-on-light)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--ink-on-light);padding:8px 16px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.ic{width:24px;height:24px;fill:none;stroke:var(--blue);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.lg{width:32px;height:32px}

/* ตัวอักษร */
h1{font:600 34px/1.2 var(--font)}
h2{font:600 26px/1.3 var(--font)}
h3{font:600 18px/1.4 var(--font)}
.sub{font-size:16px;line-height:1.7;color:var(--muted)}
.prose{max-width:65ch}
.mono{font-family:var(--mono);font-weight:500}
.price{font:500 16px/1 var(--mono);color:var(--blue-text)}
.tbd{display:inline;color:var(--ink);border:1px dashed var(--muted);border-radius:4px;padding:1px 6px;font-size:16px;line-height:1.7;font-style:normal}
.light .tbd{color:var(--ink-on-light);border-color:var(--muted-on-light)}
@media (min-width:1024px){h1{font-size:56px}h2{font-size:36px}h3{font-size:20px}.price{font-size:20px}}

/* ปุ่ม */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:8px;font:500 17px/1 var(--font);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background-color .15s}
.btn-primary{background:var(--blue-btn);color:var(--ink)}
.btn-primary:hover{background:var(--blue-btn-hover)}
.btn-secondary{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-secondary:hover{background:var(--surface)}
.btn-row{display:flex;flex-direction:column;gap:16px}
@media (min-width:640px){.btn-row{flex-direction:row}}

/* แถบเมนู */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);background:var(--bg)}
.nav.scrolled{background:var(--surface)}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{display:block;height:32px;width:auto}
.nav-links{display:none}
.nav-cta{display:none}
.menu-btn{width:48px;height:48px;display:grid;place-items:center;background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--ink);cursor:pointer}
.menu-btn .ic{stroke:var(--ink)}
.menu-btn .i-close{display:none}
.menu-btn[aria-expanded=true] .i-open{display:none}
.menu-btn[aria-expanded=true] .i-close{display:block}
.menu-panel{position:fixed;inset:var(--nav-h) 0 0 0;background:var(--bg);z-index:49;padding:16px var(--gutter) 32px;overflow:auto}
.menu-panel[hidden]{display:none}
.menu-panel a:not(.btn){display:flex;align-items:center;min-height:56px;color:var(--ink);text-decoration:none;font-size:20px;border-bottom:1px solid var(--line)}
.menu-panel a[aria-current=page]{color:var(--blue-text)}
.menu-panel .btn{margin-top:24px;width:100%}
@media (min-width:1024px){
  .menu-btn,.menu-panel{display:none!important}
  .nav-links{display:flex;gap:32px;height:100%}
  .nav-links a{display:flex;align-items:center;height:100%;color:var(--ink);text-decoration:none;font-size:17px;border-bottom:2px solid transparent;padding-top:2px}
  .nav-links a:hover{color:var(--blue-text)}
  .nav-links a[aria-current=page]{border-bottom-color:var(--blue)}
  .nav-cta{display:inline-flex}
}
@media (max-width:1023px){.nav .brand img{height:28px}}

/* ส่วนต่างๆ */
section{padding-block:72px}
@media (min-width:1024px){section{padding-block:104px}}
.sec-head{position:relative;margin-bottom:40px;min-height:48px}
.sec-head h2{position:relative}
.wm{display:none;position:absolute;left:-4px;top:-44px;font:600 112px/1 var(--font);color:var(--line);pointer-events:none;user-select:none;white-space:nowrap}
.sec-head p{position:relative;margin-top:12px}
@media (min-width:640px){.wm{display:block}.sec-head{margin-top:24px}}
.light{background:var(--ink);color:var(--ink-on-light)}
.light .sub{color:var(--muted-on-light)}
.light a{color:var(--blue-btn)}

/* Hero */
.hero{padding-block:48px 72px}
.hero .wrap{display:grid;gap:48px;align-items:center}
.hero-copy{display:grid;gap:24px}
.hero-copy p{max-width:36ch;font-size:17px}
.hero .btn-row{margin-top:8px}
@media (min-width:640px){.hero-copy p{max-width:none}}
@media (min-width:1024px){
  .hero{padding-block:88px 112px}
  .hero .wrap{grid-template-columns:5fr 7fr;gap:64px}
  .hero-copy p{font-size:18px}
}
.grid-art{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (min-width:1024px){.grid-art{grid-template-columns:repeat(4,1fr);gap:12px}}
.grid-note{margin-top:16px;color:var(--muted);font-size:16px}
.cell{--cut:14px;background:var(--blue);padding:1px;aspect-ratio:1/1;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.cell .in{height:100%;background:var(--surface);clip-path:polygon(0 0,calc(100% - var(--cut) + 1px) 0,100% calc(var(--cut) - 1px),100% 100%,0 100%);display:flex;flex-direction:column;justify-content:space-between;padding:12%}
.cell .bars{display:grid;gap:6px}
.cell .bars i{display:block;height:4px;border-radius:2px;background:var(--line)}
.cell .bars i:nth-child(2){width:62%}
.cell .bars i:nth-child(3){width:40%}
.cell .ic{width:28px;height:28px}
.cell.done .in{background:var(--blue);align-items:center;justify-content:center}
.cell.done .ic{stroke:var(--ink);width:44%;height:44%}
@media (max-width:1023px){.cell.m-hide{display:none}}
@media (prefers-reduced-motion:no-preference){
  .cell{animation:cellEdge .35s ease-out both;animation-delay:calc(var(--i)*.2s + .3s)}
  .cell .in{animation:cellFill .35s ease-out both;animation-delay:calc(var(--i)*.2s + .3s)}
  .cell:not(.done) .in{animation:none}
  .cell.done .ic{animation:tick .3s ease-out both;animation-delay:calc(var(--i)*.2s + .5s)}
}
@keyframes cellEdge{from{background:var(--line)}}
@keyframes cellFill{from{background:var(--surface)}}
@keyframes tick{from{opacity:0}}

/* การ์ด */
.cards{display:grid;gap:16px}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.cards{grid-template-columns:repeat(3,1fr);gap:24px}}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:12px}
.card .cat{color:var(--muted);font-size:16px;line-height:1.7}
.card .desc{font-size:16px;color:var(--muted);line-height:1.7}
.card .btn{align-self:flex-start;margin-top:auto}
.stamp{position:absolute;top:12px;left:12px;z-index:2;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:0 8px;font-size:16px;line-height:1.6;color:var(--ink)}
.ph{--cut:22px;background:var(--line);padding:1px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);aspect-ratio:4/3;width:100%}
.ph>div{height:100%;clip-path:polygon(0 0,calc(100% - var(--cut) + 1px) 0,100% calc(var(--cut) - 1px),100% 100%,0 100%);display:grid;place-items:center;color:var(--muted);font-size:16px;
  background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/28px 28px,var(--bg)}
.ph span{background:var(--bg);padding:4px 12px;border-radius:4px}
.cat-card{gap:16px}
.cat-card a.link{margin-top:auto;font-size:17px}
.featured{display:grid;gap:24px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:24px;position:relative}
.featured .body{display:flex;flex-direction:column;gap:16px;justify-content:center}
.featured .price{font-size:20px}
@media (min-width:1024px){.featured{grid-template-columns:1fr 1fr;gap:48px;padding:32px;align-items:center}}

/* จุดเด่น 2x2 */
.quad{display:grid;grid-template-columns:1fr}
.quad>div{padding:32px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line)}
.quad>div:first-child{border-top:0}
.quad p{font-size:16px;color:var(--muted);line-height:1.7}
@media (min-width:640px){
  .quad{grid-template-columns:1fr 1fr}
  .quad>div{border-top:0}
  .quad>div:nth-child(odd){border-right:1px solid var(--line)}
  .quad>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* ขั้นตอน */
.steps{display:grid;gap:32px}
.steps li{display:flex;gap:16px;align-items:flex-start}
.steps .num{flex:none;width:48px;height:48px;border-radius:50%;background:var(--blue-btn);color:var(--ink);display:grid;place-items:center;font:500 20px/1 var(--mono)}
.steps h3{margin-bottom:4px}
@media (min-width:1024px){.steps{grid-template-columns:repeat(3,1fr);gap:48px}.steps li{flex-direction:column}}

/* FAQ */
details.q{border-bottom:1px solid var(--line)}
details.q:first-of-type{border-top:1px solid var(--line)}
details.q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:12px 0;font:500 18px/1.5 var(--font)}
details.q summary::-webkit-details-marker{display:none}
details.q .pm{position:relative;width:24px;height:24px;flex:none}
details.q .pm::before,details.q .pm::after{content:"";position:absolute;left:4px;right:4px;top:11px;height:2px;border-radius:1px;background:var(--blue)}
details.q .pm::after{transform:rotate(90deg)}
details.q[open] .pm::after{display:none}
details.q .a{padding:0 0 24px;max-width:65ch;color:var(--muted)}
.faq-more{margin-top:32px}
.faq-group{margin-top:48px}
.faq-group:first-of-type{margin-top:0}
.faq-group h2{font-size:22px;margin-bottom:16px}
@media (min-width:1024px){.faq-group h2{font-size:26px}}

/* ปิดท้าย */
.closing{border-top:1px solid var(--line)}
.closing .wrap{display:grid;gap:32px;justify-items:start}

/* หน้าย่อย */
.page-head{padding-block:56px 24px}
.page-head p{margin-top:16px;max-width:65ch}
@media (min-width:1024px){.page-head{padding-block:88px 32px}}
.page-body{padding-block:24px 96px}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.filter[hidden]{display:none}
.filter .btn{height:44px}
.filter .btn[aria-pressed=true]{background:var(--ink);color:var(--ink-on-light)}
.detail{margin-top:88px;padding-top:56px;border-top:1px solid var(--line);display:grid;gap:40px}
.detail h2{margin-bottom:16px}
.detail h3{font-size:20px;margin-bottom:8px}
.detail-info{display:grid;gap:24px;align-content:start}
.detail-info section,.detail-info div.blk{padding:0}
.detail ul.list{display:grid;gap:8px;color:var(--muted)}
.detail ul.list li{display:flex;gap:12px}
@media (min-width:1024px){.detail{grid-template-columns:7fr 5fr;gap:56px}}
.policy-grid{display:grid;gap:40px}
.toc{border:1px solid var(--line);border-radius:8px;padding:16px 24px;background:var(--surface);align-self:start}
.toc h2{font:600 18px/1.4 var(--font);margin-bottom:8px}
.toc a{display:flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--blue-text)}
.policy-body section{padding:0;margin-bottom:48px;scroll-margin-top:96px}
.policy-body h2{font-size:26px;margin-bottom:16px}
.policy-body p{max-width:65ch;color:var(--muted);margin-bottom:16px}
.policy-body p strong{color:var(--ink);font-weight:500}
@media (min-width:1024px){.policy-grid{grid-template-columns:260px 1fr;gap:64px}.toc{position:sticky;top:96px}}
.contact-card{max-width:640px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:32px;display:grid;gap:20px}
.contact-card .mail{font:500 20px/1.4 var(--mono);word-break:break-all}

/* ส่วนท้าย */
.foot{border-top:1px solid var(--line);padding-block:56px 32px}
.foot-cols{display:grid;gap:40px}
.foot h2{font:600 18px/1.4 var(--font);margin-bottom:8px}
.foot li a{display:flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.foot li a:hover{color:var(--blue-text)}
.foot .brand{margin-bottom:0}
.foot .about{margin-top:16px;color:var(--muted);font-size:16px;max-width:36ch}
.foot-base{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:16px;display:grid;gap:8px}
.foot-base p{max-width:75ch}
@media (min-width:1024px){.foot-cols{grid-template-columns:1.4fr 1fr 1fr;gap:64px}}
@media (min-width:640px) and (max-width:1023px){.foot-cols{grid-template-columns:1fr 1fr}.foot-cols>:first-child{grid-column:1/-1}}
@media (min-width:640px){:root{--gutter:24px}}

/* หน้าสินค้าจริง (T02c) */
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.fig{margin:0}
.fig figcaption,.shot figcaption{margin-top:12px;font-size:16px;line-height:1.7;color:var(--muted)}
.shot figcaption strong{color:var(--ink);font-weight:500}
.pdetail{display:grid;gap:32px;align-items:center}
@media (min-width:1024px){.pdetail{grid-template-columns:7fr 5fr;gap:56px}}
.block{margin-top:64px}
.pdetail+.block{margin-top:80px}
.block p,.block .list{max-width:65ch}
.h-sm{font-size:22px;margin-bottom:16px}
@media (min-width:1024px){.h-sm{font-size:26px}}
.block p{color:var(--muted)}
.block p strong{color:var(--ink);font-weight:500}
.list{display:grid;gap:12px;color:var(--muted)}
.list li{display:flex;gap:12px;align-items:flex-start}
.list li .ic{margin-top:2px}
.files{display:grid;gap:16px}
.filerow{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:24px}
.filerow .btn{grid-column:1/-1}
.filerow .mono{font-size:16px;word-break:break-all;color:var(--ink)}
@media (min-width:640px){.filerow{grid-template-columns:auto 1fr auto}.filerow .btn{grid-column:auto}}
.shots{display:grid;gap:40px;margin-top:32px}
.shot{margin:0}
.shot a{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;line-height:0}
.shot img{width:100%;height:auto;display:block}
.info-grid{display:grid;gap:0 48px}
@media (min-width:1024px){.info-grid{grid-template-columns:1fr 1fr}}
.info-grid .block{margin-top:48px}
.note{border:1px solid var(--blue);border-radius:8px;padding:24px;align-self:start}
.note p{color:var(--ink)}
.featured .fig{min-width:0}

/* T02g */
.lnk{display:inline-block;padding-block:12px;margin-block:-12px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}