/* ============================================================================
   SmithSystem — ระบบดีไซน์กลาง ใช้ร่วมกันทุกหน้า
   ----------------------------------------------------------------------------
   แนวคิด: "ช่างวางระบบ" ไม่ใช่ "เว็บ AI"
   - พื้นกระดาษอุ่น + หมึกเข้ม + น้ำเงินสีเดียว (ตัดพื้นดำ-ฟ้านีออนที่เห็นทุกเว็บออก)
   - หัวข้อฟอนต์เซอริฟไทย Noto Serif Thai — ให้กลิ่นนิตยสาร/สิ่งพิมพ์ ดูมีน้ำหนักและน่าเชื่อถือ
   - เนื้อความและป้ายกำกับ Athiti — เรขาคณิตสะอาด อ่านง่ายบนมือถือ
   🔴 Smith เลือกชุดนี้เอง (10 ก.ย. 69) จากการเทียบ 6 แบบ — ห้ามเปลี่ยนเองโดยไม่ถาม
   ห้ามใช้ Kanit / Prompt / Sarabun / Noto Sans Thai เด็ดขาด เพราะเป็นฟอนต์ที่เว็บ AI ใช้กันจนโหล
   ============================================================================ */
:root{
  --paper:#f4f1ea;
  --paper-2:#ece7dc;
  --paper-3:#e2dccd;
  --ink:#121518;
  --ink-2:#1c2127;
  --ink-3:#2b323a;
  --text:#1a1f24;
  --muted:#65707c;
  --line:rgba(18,21,24,.13);
  --line-strong:rgba(18,21,24,.28);
  --blue:#1d4fe0;
  --blue-deep:#10318f;
  --blue-soft:rgba(29,79,224,.09);
  --amber:#e4a03a;
  --red:#c6432c;
  --green:#1f6b4e;
  --accent:var(--blue);          /* หน้าผลงานเปลี่ยนค่านี้ตามชิ้นงาน */
  --accent-soft:var(--blue-soft);
  --radius:6px;                  /* มุมคมกว่าเว็บทั่วไปนิด ให้กลิ่นแบบแปลน */
  --radius-lg:14px;
  --maxw:1180px;
  --header-h:70px;
  --serif:"Noto Serif Thai",Georgia,serif;
  --sans:"Athiti","Segoe UI",system-ui,sans-serif;
  --mono:"Athiti","Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.8;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* ภาษาไทยไม่มีเว้นวรรค เบราว์เซอร์ตัดบรรทัดไม่เป็นถ้าไม่บอก */
h1,h2,h3,h4,p,li,dt,dd{overflow-wrap:anywhere; word-break:break-word; line-break:loose}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.25; margin:0 0 .5em; letter-spacing:-.005em}
h1{font-size:clamp(30px,5.4vw,62px)}
h2{font-size:clamp(26px,3.8vw,44px)}
h3{font-size:clamp(20px,2.3vw,26px)}
h4{font-family:var(--sans); font-weight:700; font-size:18px; margin:0 0 .4em; line-height:1.4}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%}
strong{font-weight:700}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px}
.muted{color:var(--muted)}
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}
.nowrap{white-space:nowrap}
section[id]{scroll-margin-top:calc(var(--header-h) + 10px)}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
::selection{background:var(--blue); color:#fff}

/* ---- ป้ายกำกับเล็ก ๆ ทั้งเว็บ ---- */
.kicker{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin:0 0 12px;
  display:flex; align-items:center; gap:10px;
}
.kicker::before{content:""; width:22px; height:1.5px; background:currentColor; flex:none}
.lead{color:var(--muted); font-size:clamp(16px,1.6vw,18.5px); max-width:62ch}

/* ---- เส้นตารางแบบแปลน (ใช้เป็นพื้นหลังบางส่วน) ---- */
.grid-bg{
  position:relative; isolation:isolate;
}
.grid-bg::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
}
.dark{background:var(--ink); color:var(--paper)}
.dark .muted{color:#a4adb8}
.dark .lead{color:#b7bfc9}
.dark .kicker{color:#7f9dff}
.dark.grid-bg::before{opacity:.35; background-image:
    linear-gradient(rgba(244,241,234,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,234,.13) 1px, transparent 1px)}

/* ---- แถบเมนูบน ---- */
header.top{
  position:sticky; top:0; z-index:50;
  background:rgba(244,241,234,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
header.top.stuck{border-bottom-color:var(--line)}
.nav{display:flex; align-items:center; gap:14px; height:var(--header-h)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0}
/* 🔴 โลโก้เป็นรูปหน้า Smith ตามที่สั่ง (9 ก.ย. 69) — เดิมเป็นตัว S
   จุดฟ้าเล็ก ๆ มุมขวาบนคือสัญลักษณ์ "ระบบยังเดินอยู่" เก็บไว้จากโลโก้เดิม */
.brand .mark{
  width:42px; height:42px; flex:none; position:relative; border-radius:50%;
  background:var(--ink); overflow:hidden;
  box-shadow:0 0 0 1.5px var(--line-strong), 0 4px 12px rgba(18,21,24,.18);
}
.brand .mark img{width:100%; height:100%; object-fit:cover; display:block}
.brand .live{
  position:absolute; top:1px; right:1px; width:11px; height:11px; border-radius:50%;
  background:var(--blue); border:2.5px solid var(--paper);
}
.dark .brand .live{border-color:var(--ink)}
.brand .name{
  font-family:var(--mono); font-weight:700; font-size:18px; letter-spacing:.02em; line-height:1.1;
  color:var(--ink);
}
/* 🔴 ชื่อเพจต้องอยู่ข้างโลโก้ตามที่ Smith สั่ง — ไม่ใช่ลิงก์ เป็นชื่อแบรนด์
   บนจอแคบย่อให้เล็กลง แต่ต้องยังเห็น (ดู media query ข้างล่าง) */
.brand .tag{
  display:block; font-family:var(--sans); font-weight:500; font-size:12.5px; letter-spacing:.01em;
  color:var(--muted); margin-top:3px; white-space:nowrap;
}
.nav nav{margin-inline-start:auto; display:flex; gap:24px; align-items:center; font-size:15px}
.nav nav a{color:var(--muted); text-decoration:none; transition:color .2s; position:relative; padding:4px 0}
.nav nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--blue);
  transition:right .25s ease;
}
.nav nav a:hover,.nav nav a.here{color:var(--ink)}
.nav nav a:hover::after,.nav nav a.here::after{right:0}
.nav .call{
  color:#fff; background:var(--ink); padding:10px 18px; border-radius:999px; font-weight:600;
  white-space:nowrap; text-decoration:none; font-size:14.5px; transition:background .2s, transform .2s;
}
.nav .call:hover{background:var(--blue); color:#fff}
.nav .call::after{display:none}
.burger{
  margin-inline-start:auto; display:none; width:44px; height:44px; border-radius:var(--radius);
  background:transparent; border:1px solid var(--line-strong); color:var(--ink);
  cursor:pointer; padding:0; place-items:center;
}
.burger span{display:block; width:18px; height:2px; background:currentColor; border-radius:2px; transition:transform .25s, opacity .2s}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{display:none}
@media(max-width:900px){
  .nav nav{display:none}
  .burger{display:grid}
  .nav .call.desk{display:none}
  .drawer{
    display:grid; overflow:hidden; max-height:0; transition:max-height .3s ease;
    border-top:1px solid transparent; background:var(--paper);
  }
  .drawer.open{max-height:460px; border-top-color:var(--line)}
  .drawer a{padding:15px 22px; text-decoration:none; color:var(--text); font-weight:500; border-bottom:1px solid var(--line)}
  .drawer a.hi{color:var(--blue); font-weight:700}
}
/* 🔴 Smith สั่งให้ชื่อเพจอยู่ข้างโลโก้ — บนมือถือก็ต้องเห็น แค่ย่อลง ไม่ซ่อน */
@media(max-width:560px){.brand .tag{font-size:11px} .brand .name{font-size:16.5px} .brand{gap:10px} .brand .mark{width:38px; height:38px} .brand .live{width:9px; height:9px; border-width:2px}}

/* ---- ปุ่ม ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; cursor:pointer;
  padding:15px 26px; border-radius:999px; font:inherit; font-weight:600; font-size:16px;
  text-decoration:none; line-height:1.2;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .2s, color .2s, border-color .2s;
  will-change:transform;
}
.btn-main{background:var(--blue); color:#fff; box-shadow:0 10px 26px rgba(29,79,224,.28)}
.btn-main:hover{background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 16px 34px rgba(29,79,224,.34)}
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:var(--ink-3); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px)}
.dark .btn-ghost{color:var(--paper); border-color:rgba(244,241,234,.35)}
.dark .btn-ghost:hover{border-color:var(--paper)}
.btn-line{background:#06c755; color:#fff; box-shadow:0 10px 26px rgba(6,199,85,.28)}
.btn-line:hover{background:#05b04b; color:#fff; transform:translateY(-2px)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}

/* ---- การ์ดพื้นฐาน ---- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
  position:relative;
}
.card:hover{border-color:var(--line-strong); box-shadow:0 18px 40px rgba(18,21,24,.08)}
.dark .card{background:var(--ink-2); border-color:rgba(244,241,234,.12)}
.dark .card:hover{border-color:rgba(244,241,234,.28); box-shadow:0 18px 40px rgba(0,0,0,.35)}

/* ---- เลขกำกับแบบตราประทับ ---- */
.stamp{
  font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.1em;
  display:inline-flex; align-items:center; gap:8px; padding:5px 10px 4px;
  border:1.5px solid currentColor; border-radius:3px; color:var(--accent); line-height:1;
}

/* ---- แถบคำวิ่ง ---- */
.ticker{
  border-block:1px solid var(--line); overflow:hidden; padding:13px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker ul{display:flex; gap:40px; margin:0; padding:0; list-style:none; width:max-content; animation:slide 40s linear infinite}
.ticker li{
  display:flex; align-items:center; gap:14px; white-space:nowrap;
  font-family:var(--mono); font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600;
}
.ticker li::before{content:"✦"; color:var(--accent); font-size:11px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover ul{animation-play-state:paused}

/* ---- กรอบมือถือ / กรอบหน้าจอ ---- */
.phone{
  position:relative; border-radius:30px; padding:9px;
  background:linear-gradient(160deg,#2a3038,#0f1216 60%);
  box-shadow:0 26px 60px rgba(18,21,24,.35), inset 0 1px 0 rgba(255,255,255,.14);
}
.phone::before{
  content:""; position:absolute; z-index:3; top:9px; left:50%; transform:translateX(-50%);
  width:34%; height:15px; border-radius:0 0 12px 12px; background:#0f1216;
}
.screen{position:relative; border-radius:22px; overflow:hidden; background:#f6f2f0; aspect-ratio:720/1240}
.screen img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
/* หน้าจอแดชบอร์ดที่ไม่ใช่มือถือเต็มจอ ใช้กรอบหน้าต่างแทน */
.window{
  position:relative; border-radius:14px; overflow:hidden; background:#fff;
  border:1px solid var(--line-strong); box-shadow:0 26px 60px rgba(18,21,24,.22);
}
.window::before{
  content:""; display:block; height:30px; background:var(--paper-2); border-bottom:1px solid var(--line);
  background-image:radial-gradient(circle,#c9c2b3 4px,transparent 5px),radial-gradient(circle,#c9c2b3 4px,transparent 5px),radial-gradient(circle,#c9c2b3 4px,transparent 5px);
  background-size:14px 14px; background-position:12px 8px,28px 8px,44px 8px; background-repeat:no-repeat;
}
.window .screen{border-radius:0; aspect-ratio:5/5.6; background:#eef1ee}

/* ---- แถวปุ่มติดต่อ ---- */
.cta-row{display:flex; gap:12px; flex-wrap:wrap}

/* ---- แถบติดต่อลอยล่างจอ เฉพาะมือถือ ---- */
.callbar{display:none}
@media(max-width:900px){
  body{padding-bottom:82px}
  .callbar{
    display:grid; grid-template-columns:1fr 1fr; gap:10px; position:fixed; z-index:60;
    left:0; right:0; bottom:0; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(244,241,234,.96); border-top:1px solid var(--line); backdrop-filter:blur(12px);
  }
  .callbar .btn{padding:13px 10px; font-size:15.5px}
}

/* ---- ข้อความแจ้งมุมล่าง ---- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:80;
  padding:12px 20px; border-radius:999px; font-size:15px; font-weight:600;
  background:var(--ink); color:#fff; box-shadow:0 14px 40px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
}
.toast.show{opacity:1; transform:translate(-50%,0)}
@media(max-width:900px){.toast{bottom:100px}}

/* ---- ส่วนท้าย ---- */
footer.foot{border-top:1px solid var(--line); padding:34px 0; color:var(--muted); font-size:14.5px}
footer.foot .wrap{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
footer.foot .brandline{display:flex; align-items:center; gap:10px; color:var(--ink)}
footer.foot .brandline b{font-family:var(--mono)}
footer.foot a{text-decoration:none}
/* 🔴 บนมือถือ 4 ชิ้นในท้ายเว็บเคยไหลปนกันไม่เป็นระเบียบ — จัดเป็นแถวลงมา แยกเครดิตไว้ล่างสุด */
@media(max-width:640px){
  footer.foot .wrap{flex-direction:column; align-items:flex-start; gap:8px}
  footer.foot .brandline{flex-wrap:wrap; gap:6px}
  footer.foot .wrap>span:last-child{margin-inline-start:0; width:100%; padding-top:12px; margin-top:6px; border-top:1px solid var(--line); font-size:13.5px}
}

/* ---- ไม้บรรทัดบอกตำแหน่งข้างจอ (เฉพาะจอกว้าง) ---- */
.ruler{
  position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:40;
  display:none; flex-direction:column; gap:14px; align-items:flex-end;
}
@media(min-width:1180px) and (hover:hover){.ruler{display:flex}}
.ruler a{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--muted);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  transition:color .2s;
}
.ruler a::after{content:""; width:14px; height:1.5px; background:currentColor; transition:width .25s}
.ruler a.here{color:var(--accent)}
.ruler a.here::after{width:28px}
.ruler a span{opacity:0; transform:translateX(6px); transition:opacity .2s, transform .2s}
.ruler:hover a span,.ruler a.here span{opacity:1; transform:none}

/* ---- เคอร์เซอร์วงแหวน (เฉพาะเครื่องที่มีเมาส์) ---- */
.cursor{display:none}
@media(hover:hover) and (pointer:fine){
  .cursor{
    display:block; position:fixed; z-index:200; pointer-events:none; left:0; top:0;
    width:34px; height:34px; border-radius:50%; border:1.5px solid var(--accent);
    transform:translate(-50%,-50%); opacity:0;
    transition:width .25s, height .25s, opacity .3s, border-color .3s, background .25s;
  }
  .cursor.on{opacity:.9}
  .cursor.hot{width:56px; height:56px; background:var(--accent-soft)}
}

/* ---- เอฟเฟกต์ปรากฏ: จากเบลอเป็นชัด (ต่างจากเลื่อนขึ้นเฉย ๆ ที่เห็นทุกเว็บ) ---- */
.rise{opacity:0; transform:translateY(18px); filter:blur(6px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1), filter .8s ease}
.rise.in{opacity:1; transform:none; filter:none}
.rise.d1{transition-delay:.08s}.rise.d2{transition-delay:.16s}.rise.d3{transition-delay:.24s}

/* ---- แผนผังวาดตัวเอง ---- */
.draw path,.draw circle,.draw line,.draw rect{
  stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1);
}
.draw.in path,.draw.in circle,.draw.in line,.draw.in rect{stroke-dashoffset:0}
.draw text{opacity:0; transition:opacity .5s ease 1.1s}
.draw.in text{opacity:1}

/* ---- ดูรูปเต็มจอ ---- */
.lightbox{
  position:fixed; inset:0; z-index:90; display:none; place-items:center; padding:24px;
  background:rgba(18,21,24,.9); backdrop-filter:blur(8px);
}
.lightbox.open{display:grid}
.lightbox img{max-width:min(460px,92vw); max-height:88vh; width:auto; border-radius:16px; box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lightbox .x{
  position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff;
  font-size:22px; cursor:pointer; display:grid; place-items:center;
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1; transform:none; filter:none; transition:none}
  .ticker ul{animation:none}
  .draw path,.draw circle,.draw line,.draw rect{stroke-dashoffset:0; transition:none}
  .draw text{opacity:1; transition:none}
  .cursor{display:none!important}
  .btn,.card{transition:none}
}