@charset "UTF-8";
/* ==========================================================================
   ซินแสแบงค์ — sinsaebank.com
   Design system. Dark mode only. Palette sampled from resource/design-reference-*.jpg
   Vanilla CSS, no dependencies. Written once by the orchestrator — page authors
   must NOT edit this file; compose pages from the classes defined here.
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted, never external) ---------------------- */
@font-face{font-family:'Prompt';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/prompt-500-thai.woff2) format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/prompt-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Prompt';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/prompt-600-thai.woff2) format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/prompt-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Prompt';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/prompt-700-thai.woff2) format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/prompt-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/sarabun-400-thai.woff2) format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/sarabun-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/sarabun-500-thai.woff2) format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/sarabun-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/sarabun-700-thai.woff2) format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/sarabun-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 2. Tokens --------------------------------------------------- */
:root{
  /* Surfaces — deep navy, sampled from the design references */
  --bg:#0B1730;              /* page base                        */
  --bg-alt:#101F3E;          /* alternating section band         */
  --bg-deep:#070F22;         /* footer / darkest band            */
  --surface:#16264A;         /* card                             */
  --surface-2:#1D3059;       /* raised card / hover              */
  --line:rgba(194,158,95,.22);      /* hairline gold border      */
  --line-soft:rgba(160,185,225,.14);

  /* Gold */
  --gold:#D9B45B;
  --gold-lt:#ECD48C;
  --gold-dp:#AF9369;
  --gold-grad:linear-gradient(135deg,#ECD48C 0%,#D9B45B 45%,#B8914A 100%);

  /* Text — all pairs verified ≥ WCAG AA on --bg / --surface */
  --text:#EEF2FA;
  --text-2:#C3D0E6;          /* body on navy: 11.4:1            */
  --text-3:#94A7C6;          /* muted meta: 6.2:1               */
  --on-gold:#1A1206;         /* text on gold buttons: 11.9:1    */

  /* Type scale (fluid) */
  --fs-xs:.8125rem;
  --fs-sm:clamp(.875rem,.84rem + .18vw,.9375rem);
  --fs-base:clamp(1rem,.96rem + .22vw,1.0625rem);
  --fs-lg:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  --fs-h4:clamp(1.125rem,1.05rem + .4vw,1.3125rem);
  --fs-h3:clamp(1.25rem,1.13rem + .6vw,1.5rem);
  --fs-h2:clamp(1.625rem,1.35rem + 1.35vw,2.375rem);
  --fs-h1:clamp(2rem,1.55rem + 2.2vw,3.375rem);
  --fs-display:clamp(2.25rem,1.6rem + 3vw,4rem);

  /* Spacing scale */
  --s-1:.25rem;  --s-2:.5rem;   --s-3:.75rem;  --s-4:1rem;
  --s-5:1.5rem;  --s-6:2rem;    --s-7:2.5rem;  --s-8:3rem;
  --s-9:4rem;    --s-10:5rem;   --s-11:6.5rem;
  --section-y:clamp(3rem,2rem + 5vw,6.5rem);
  --gutter:clamp(1rem,.6rem + 1.8vw,2rem);
  --maxw:1200px;
  --maxw-prose:72ch;

  --r-sm:6px; --r:12px; --r-lg:18px; --r-pill:999px;
  --shadow:0 10px 34px rgba(0,0,0,.42);
  --shadow-gold:0 8px 26px rgba(194,158,95,.24);
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:.28s;
  --header-h:68px;
}
@media(min-width:1024px){:root{--header-h:78px}}

/* ---------- 3. Base ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{
  margin:0;background:var(--bg);color:var(--text-2);
  font-family:'Sarabun',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--fs-base);line-height:1.85;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration-color:rgba(217,180,91,.4);text-underline-offset:3px}
a:hover{color:var(--gold-lt)}
:where(h1,h2,h3,h4,h5,h6){
  font-family:'Prompt',system-ui,sans-serif;color:var(--text);
  font-weight:600;line-height:1.28;margin:0 0 var(--s-4);letter-spacing:-.01em;
}
h1{font-size:var(--fs-h1);font-weight:700}
h2{font-size:var(--fs-h2);font-weight:700}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
p{margin:0 0 var(--s-5)}
p:last-child{margin-bottom:0}
strong,b{color:var(--text);font-weight:700}
em{color:var(--gold-lt);font-style:normal;font-weight:500}
ul,ol{margin:0 0 var(--s-5);padding-inline-start:1.35em}
li{margin-bottom:var(--s-2)}
hr{border:0;border-top:1px solid var(--line-soft);margin:var(--s-7) 0}
::selection{background:var(--gold);color:var(--on-gold)}
:focus-visible{outline:3px solid var(--gold-lt);outline-offset:3px;border-radius:var(--r-sm)}

.skip-link{
  position:absolute;left:var(--s-4);top:-100px;z-index:1000;
  background:var(--gold);color:var(--on-gold);padding:.7rem 1.2rem;
  border-radius:var(--r-sm);font-weight:600;font-family:'Prompt',sans-serif;
}
.skip-link:focus{top:var(--s-3)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 4. Layout --------------------------------------------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:860px}
.section{padding-block:var(--section-y);position:relative}
.section--alt{background:var(--bg-alt)}
.section--deep{background:var(--bg-deep)}

/* Gold constellation motif — the line-art texture from the design references */
.section--stars{position:relative;overflow:hidden;isolation:isolate}
.section--stars::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 18%,rgba(217,180,91,.5) 0 1.5px,transparent 2px),
    radial-gradient(circle at 27% 62%,rgba(217,180,91,.4) 0 1.5px,transparent 2px),
    radial-gradient(circle at 68% 12%,rgba(217,180,91,.45) 0 1.5px,transparent 2px),
    radial-gradient(circle at 88% 44%,rgba(217,180,91,.4) 0 1.5px,transparent 2px),
    radial-gradient(circle at 54% 84%,rgba(217,180,91,.35) 0 1.5px,transparent 2px),
    linear-gradient(115deg,transparent 48.6%,rgba(194,158,95,.14) 48.8%,transparent 49.1%),
    linear-gradient(58deg,transparent 62.6%,rgba(194,158,95,.11) 62.8%,transparent 63.1%),
    linear-gradient(160deg,transparent 30.6%,rgba(194,158,95,.09) 30.8%,transparent 31.1%);
  background-size:640px 520px,640px 520px,640px 520px,640px 520px,640px 520px,100% 100%,100% 100%,100% 100%;
}

.section-head{text-align:center;max-width:760px;margin:0 auto var(--s-8)}
.section-head p{color:var(--text-3);font-size:var(--fs-lg)}
.section-head h2{color:var(--gold)}
.eyebrow{
  display:inline-block;font-family:'Prompt',sans-serif;font-weight:500;
  font-size:var(--fs-xs);letter-spacing:.16em;color:var(--gold-dp);
  text-transform:uppercase;margin-bottom:var(--s-3);
}
/* short gold rule under section headings — straight from the reference */
.rule{width:64px;height:2px;background:var(--gold-grad);border:0;margin:var(--s-4) auto var(--s-5);border-radius:2px}
.rule--start{margin-inline:0}

.grid{display:grid;gap:var(--s-5)}
/* Grid children default to min-width:auto and refuse to shrink below their
   content's min-content width. A .table-wrap inside one therefore pushed its
   520px table out past the viewport instead of scrolling. */
.grid>*,.split>*{min-width:0}
@media(min-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}
.split{display:grid;gap:var(--s-7);align-items:center}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr;gap:var(--s-9)}
  .split--wide-text{grid-template-columns:1.15fr .85fr}
  .split--flip>*:first-child{order:2}
}
.prose{max-width:var(--maxw-prose)}
.prose h2{margin-top:var(--s-8)}
.prose h3{margin-top:var(--s-6);color:var(--gold-lt)}
.prose>*:first-child{margin-top:0}

/* ---------- 5. Buttons -------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:'Prompt',sans-serif;font-weight:600;font-size:var(--fs-sm);
  line-height:1.2;padding:.85em 1.5em;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             background-color var(--dur) var(--ease),color var(--dur) var(--ease);
  /* Thai has no spaces, so a long label with white-space:nowrap could not break
     and overflowed the viewport on phones. Let it wrap and never exceed its box. */
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
  max-width:100%;
  min-width:0;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:1.25em;height:1.25em;flex:none}
.btn--line{background:var(--gold-grad);color:var(--on-gold);box-shadow:var(--shadow-gold)}
.btn--line:hover{color:var(--on-gold);box-shadow:0 12px 30px rgba(194,158,95,.36)}
.btn--phone{background:transparent;color:var(--gold-lt);border-color:var(--gold-dp)}
.btn--phone:hover{background:rgba(217,180,91,.12);color:var(--gold-lt)}
.btn--ghost{background:rgba(255,255,255,.05);color:var(--text);border-color:var(--line-soft)}
.btn--ghost:hover{background:rgba(255,255,255,.1);color:var(--text)}
.btn--lg{font-size:var(--fs-base);padding:1em 1.9em}
.btn--block{width:100%}
.cta-set{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.cta-set--center{justify-content:center}
@media(max-width:479px){.cta-set .btn{width:100%}}

/* ---------- 6. Header & navigation -------------------------------------- */
.header{
  position:sticky;top:0;z-index:100;background:rgba(11,23,48,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex;align-items:center;gap:var(--s-4);
  min-height:var(--header-h);max-width:var(--maxw);
  margin-inline:auto;padding-inline:var(--gutter);
}
.brand{display:flex;align-items:center;gap:.6rem;font-family:'Prompt',sans-serif;
  font-weight:700;font-size:1.0625rem;color:var(--text);text-decoration:none;flex:none}
.brand:hover{color:var(--gold-lt)}
.brand__mark{width:34px;height:34px;flex:none}
.brand__name{white-space:nowrap}
@media(max-width:359px){.brand__name{font-size:.9375rem}}

.nav{margin-inline-start:auto;display:none}
.nav__list{display:flex;align-items:center;gap:var(--s-2);list-style:none;margin:0;padding:0}
.nav__link{
  display:inline-flex;align-items:center;gap:.35em;font-family:'Prompt',sans-serif;
  font-weight:500;font-size:.9375rem;color:var(--text-2);text-decoration:none;
  padding:.55rem .7rem;border-radius:var(--r-sm);transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease);
  /* these are <button>s — without this they inherit the UA grey button chrome */
  background:transparent;border:0;cursor:pointer;
}
.nav__link:hover,.nav__link[aria-expanded=true]{color:var(--gold-lt);background:rgba(217,180,91,.1)}
.nav__link[aria-current=page]{color:var(--gold)}
.nav__caret{width:.7em;height:.7em;transition:transform var(--dur) var(--ease)}
.nav__link[aria-expanded=true] .nav__caret{transform:rotate(180deg)}

.nav__item{position:relative}
.nav__panel{
  position:absolute;inset-inline-end:0;top:calc(100% + .5rem);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:var(--s-4);min-width:270px;
  display:none;
}
.nav__panel[data-open]{display:block}
/* The panel sits 8px below the button. Without this invisible bridge the pointer
   crosses a dead zone on its way down, mouseleave fires on .nav__item, and the
   panel closes before you reach it. */
.nav__panel::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:.75rem}
.nav__panel--wide{min-width:min(620px,80vw);columns:2;column-gap:var(--s-5)}
.nav__panel ul{list-style:none;margin:0;padding:0}
.nav__panel a{
  display:block;padding:.5rem .65rem;border-radius:var(--r-sm);
  font-size:.9375rem;color:var(--text-2);text-decoration:none;break-inside:avoid;
}
.nav__panel a:hover{background:rgba(217,180,91,.12);color:var(--gold-lt)}
.nav__panel a[aria-current=page]{color:var(--gold)}

.header__cta{margin-inline-start:auto;display:flex;align-items:center;gap:var(--s-2);flex:none}
.header__cta .btn{padding:.62em 1.05em;font-size:.875rem}
.header__cta .btn--phone{display:none}
@media(min-width:1024px){
  .nav{display:block}
  .header__cta{margin-inline-start:var(--s-4)}
  .header__cta .btn--phone{display:inline-flex}
}

/* Hamburger */
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;flex:none;
  background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;
}
/* Must come AFTER the base rule above or the cascade keeps it visible. */
@media(min-width:1024px){.burger{display:none}}
.burger span{display:block;height:2px;background:var(--gold-lt);border-radius:2px;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.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)}

/* Mobile drawer */
.mnav{
  position:fixed;inset:0;z-index:200;visibility:hidden;
}
.mnav[data-open]{visibility:visible}
.mnav__scrim{
  position:absolute;inset:0;background:rgba(4,9,20,.72);
  opacity:0;transition:opacity var(--dur) var(--ease);
}
.mnav[data-open] .mnav__scrim{opacity:1}
.mnav__panel{
  position:absolute;inset-block:0;inset-inline-end:0;width:min(400px,88vw);
  background:var(--bg-alt);border-inline-start:1px solid var(--line);
  padding:var(--s-5) var(--s-5) var(--s-9);overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(102%);transition:transform var(--dur) var(--ease);
}
.mnav[data-open] .mnav__panel{transform:none}
.mnav__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-5)}
.mnav__close{
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--gold-lt);
}
.mnav__close svg{width:20px;height:20px}
.mnav details{border-bottom:1px solid var(--line-soft)}
.mnav summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:.9rem .25rem;cursor:pointer;list-style:none;
  font-family:'Prompt',sans-serif;font-weight:600;font-size:1.0625rem;color:var(--text);
}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary svg{width:.8em;height:.8em;color:var(--gold);transition:transform var(--dur) var(--ease)}
.mnav details[open] summary svg{transform:rotate(180deg)}
.mnav__sub{list-style:none;margin:0 0 var(--s-4);padding:0}
.mnav__sub a{
  display:block;padding:.55rem .25rem .55rem 1rem;font-size:.9375rem;
  color:var(--text-2);text-decoration:none;border-inline-start:2px solid var(--line-soft);
}
.mnav__sub a:hover,.mnav__sub a[aria-current=page]{color:var(--gold-lt);border-inline-start-color:var(--gold)}
.mnav__flat{
  display:block;padding:.9rem .25rem;border-bottom:1px solid var(--line-soft);
  font-family:'Prompt',sans-serif;font-weight:600;font-size:1.0625rem;
  color:var(--text);text-decoration:none;
}
.mnav__flat:hover{color:var(--gold-lt)}
.mnav__cta{display:grid;gap:var(--s-3);margin-top:var(--s-6)}
@media(min-width:1024px){.mnav{display:none}}

/* ---------- 7. Hero ----------------------------------------------------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--bg-deep)}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,15,34,.82) 0%,rgba(9,19,42,.72) 42%,rgba(11,23,48,.96) 100%);
}
.hero__inner{
  max-width:var(--maxw);margin-inline:auto;padding:clamp(4rem,3rem + 8vw,8.5rem) var(--gutter);
  text-align:center;
}
.hero h1{font-size:var(--fs-display);color:#fff;max-width:20ch;margin-inline:auto;
  text-shadow:0 2px 24px rgba(0,0,0,.55)}
.hero h1 .hl{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
}
.hero__sub{
  font-size:var(--fs-lg);color:#DCE5F5;max-width:56ch;margin:0 auto var(--s-7);
  text-shadow:0 1px 14px rgba(0,0,0,.5);
}
.hero .cta-set{justify-content:center}
.hero__trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3) var(--s-6);
  margin-top:var(--s-7);font-size:var(--fs-sm);color:#B9C7E0;
}
.hero__trust li{display:flex;align-items:center;gap:.45em;margin:0}
.hero__trust svg{width:1.1em;height:1.1em;color:var(--gold);flex:none}
.hero__trust ul{display:contents;list-style:none}

/* ---------- 8. Cards & feature blocks ----------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-6);position:relative;overflow:hidden;
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:rgba(217,180,91,.5);background:var(--surface-2)}
.card h3{color:var(--gold-lt);margin-bottom:var(--s-3)}
.card p{color:var(--text-2);font-size:var(--fs-sm);margin-bottom:0}
.card__media{margin:calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-5);aspect-ratio:16/10;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__price{
  display:inline-block;font-family:'Prompt',sans-serif;font-weight:700;
  font-size:var(--fs-h4);color:var(--gold);margin-bottom:var(--s-2);
}
.card__price small{font-weight:500;font-size:.7em;color:var(--text-3)}
.card__link{
  display:inline-flex;align-items:center;gap:.4em;margin-top:var(--s-4);
  font-family:'Prompt',sans-serif;font-weight:600;font-size:var(--fs-sm);
  color:var(--gold);text-decoration:none;
}
.card__link:hover{gap:.7em;color:var(--gold-lt)}
.card__link svg{width:1em;height:1em;transition:transform var(--dur) var(--ease)}

.icon-circle{
  width:64px;height:64px;display:grid;place-items:center;margin-bottom:var(--s-4);
  border:1.5px solid var(--gold-dp);border-radius:50%;color:var(--gold);
}
.icon-circle svg{width:30px;height:30px;stroke-width:1.4}
.icon-circle--center{margin-inline:auto}

.feature{display:flex;gap:var(--s-4);align-items:flex-start}
.feature__ic{
  width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--r-sm);
  background:rgba(217,180,91,.12);border:1px solid var(--line);color:var(--gold);
}
.feature__ic svg{width:22px;height:22px;stroke-width:1.5}
.feature h3,.feature h4{font-size:var(--fs-h4);margin-bottom:var(--s-2);color:var(--text)}
.feature p{font-size:var(--fs-sm);margin-bottom:0}

/* Check / cross lists */
.list-check,.list-cross{list-style:none;padding:0;margin:0 0 var(--s-5);display:grid;gap:var(--s-3)}
.list-check li,.list-cross li{position:relative;padding-inline-start:2rem;margin:0}
.list-check li::before,.list-cross li::before{
  position:absolute;inset-inline-start:0;top:.2em;width:1.35rem;height:1.35rem;
  display:grid;place-items:center;border-radius:50%;font-size:.8rem;font-weight:700;
}
.list-check li::before{content:"✓";background:rgba(217,180,91,.16);color:var(--gold-lt)}
.list-cross li::before{content:"✕";background:rgba(198,90,90,.16);color:#E68B8B}

/* ---------- 9. Stat band ------------------------------------------------ */
.stats{
  display:grid;gap:var(--s-5);grid-template-columns:repeat(2,1fr);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-6);
}
@media(min-width:768px){.stats{grid-template-columns:repeat(4,1fr);padding:var(--s-7)}}
.stat{text-align:center}
.stat__n{
  display:block;font-family:'Prompt',sans-serif;font-weight:700;line-height:1.1;
  font-size:clamp(1.75rem,1.35rem + 1.8vw,2.75rem);
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
}
.stat__l{font-size:var(--fs-sm);color:var(--text-3);margin:var(--s-2) 0 0}

/* ---------- 10. Process timeline ---------------------------------------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5);counter-reset:step}
@media(min-width:768px){.steps--row{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
.step{
  counter-increment:step;position:relative;padding:var(--s-6) var(--s-5) var(--s-5);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin:0;
}
.step::before{
  content:counter(step);position:absolute;top:calc(var(--s-5) * -1);inset-inline-start:var(--s-5);
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  background:var(--gold-grad);color:var(--on-gold);
  font-family:'Prompt',sans-serif;font-weight:700;font-size:1.05rem;box-shadow:var(--shadow-gold);
}
.step h3{font-size:var(--fs-h4);margin:var(--s-2) 0 var(--s-2);color:var(--gold-lt)}
.step p{font-size:var(--fs-sm);margin:0}

/* ---------- 11. Table --------------------------------------------------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:var(--s-5);
  border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;min-width:520px;font-size:var(--fs-sm)}
caption{caption-side:top;text-align:start;padding:var(--s-4);color:var(--text-3);font-size:var(--fs-sm)}
th,td{padding:.85rem 1rem;text-align:start;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{
  background:rgba(217,180,91,.1);color:var(--gold-lt);font-family:'Prompt',sans-serif;
  font-weight:600;white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.03)}
td strong{color:var(--gold-lt)}

/* ---------- 12. FAQ (all open by default) ------------------------------- */
.faq{display:grid;gap:var(--s-3);max-width:900px;margin-inline:auto}
.faq details{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s-4) var(--s-5);
}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);
  cursor:pointer;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{
  margin:0;font-size:var(--fs-h4);font-weight:600;color:var(--gold-lt);line-height:1.45;
}
.faq summary::after{
  content:"";flex:none;width:.72em;height:.72em;margin-top:.5em;
  border-inline-end:2px solid var(--gold);border-block-end:2px solid var(--gold);
  transform:rotate(-135deg);transition:transform var(--dur) var(--ease);
}
.faq details:not([open]) summary::after{transform:rotate(45deg)}
.faq details>*:not(summary){margin-top:var(--s-4)}
.faq details p:last-child{margin-bottom:0}

/* ---------- 13. Testimonials -------------------------------------------- */
.quote{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-6);position:relative;
}
.quote::before{
  content:"”";position:absolute;top:.1em;inset-inline-end:.3em;
  font-family:'Prompt',serif;font-size:4.5rem;line-height:1;color:rgba(217,180,91,.2);
}
.quote blockquote{margin:0 0 var(--s-4);font-size:var(--fs-base);color:var(--text-2)}
.quote figcaption{display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-sm);color:var(--text-3)}
.quote figcaption strong{display:block;color:var(--text)}
.quote img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}

/* ---------- 14. CTA band ------------------------------------------------ */
.cta-band{
  background:linear-gradient(135deg,#101F3E 0%,#16264A 55%,#1D3059 100%);
  border-block:1px solid var(--line);text-align:center;
}
.cta-band h2{color:var(--gold-lt)}
.cta-band p{max-width:60ch;margin-inline:auto;color:var(--text-2)}
.cta-band .cta-set{justify-content:center;margin-top:var(--s-6)}
.cta-band__note{font-size:var(--fs-sm);color:var(--text-3);margin-top:var(--s-5)}

/* ---------- 15. Footer -------------------------------------------------- */
/* Extra bottom padding keeps the legal links clear of the sticky chat button,
   which is fixed to the viewport and would otherwise cover them at full scroll. */
.footer{background:var(--bg-deep);border-top:1px solid var(--line);
  padding-block:var(--s-9) calc(var(--s-6) + 4.5rem);
  font-size:var(--fs-sm)}
.footer__grid{display:grid;gap:var(--s-7)}
@media(min-width:768px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:1024px){.footer__grid{grid-template-columns:1.6fr 1fr 1fr 1.1fr}}
.footer h2,.footer h3{font-size:1rem;color:var(--gold);margin-bottom:var(--s-4);font-weight:600}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1)}
.footer a{color:var(--text-2);text-decoration:none}
/* WCAG 2.5.8 target size: as bare text links these were ~18px tall. Padding
   lifts them past the 24px minimum; the list gap above is reduced to match so
   the visual rhythm is unchanged. */
.footer ul a{display:inline-block;padding-block:.32rem}
.footer a:hover{color:var(--gold-lt)}
.footer__areas{color:var(--text-3);line-height:1.9}
.footer__social{display:flex;gap:var(--s-3);margin-top:var(--s-4)}
.footer__social a{
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:var(--text-2);
}
.footer__social a:hover{border-color:var(--gold);color:var(--gold-lt);background:rgba(217,180,91,.1)}
.footer__social svg{width:20px;height:20px}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);justify-content:space-between;
  align-items:center;margin-top:var(--s-8);padding-top:var(--s-5);
  border-top:1px solid var(--line-soft);color:var(--text-3);
}
/* `.footer ul` above sets display:grid and outranks a single class selector,
   which stacked these vertically — match its specificity to win. */
.footer ul.footer__legal{
  display:flex;flex-flow:row wrap;gap:var(--s-3) var(--s-5);
  list-style:none;margin:0;padding:0;justify-content:flex-end;
}
@media(max-width:639px){.footer ul.footer__legal{justify-content:flex-start}}

/* ---------- 16. Sticky chat button -------------------------------------- */
/* --cookie-h is set by main.js while the consent bar is open, so the chat
   button is never covered by it. Falls back to 0 once consent is decided. */
.chat{position:fixed;
  inset-block-end:calc(var(--s-5) + var(--cookie-h,0px) + env(safe-area-inset-bottom));
  inset-inline-end:var(--s-5);z-index:150;display:flex;flex-direction:column;
  align-items:flex-end;gap:var(--s-3);
  transition:inset-block-end var(--dur) var(--ease)}
.chat__list{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-3);
  margin:0;padding:0;list-style:none}
.chat__list[hidden]{display:none}
.chat__item{display:flex;align-items:center;gap:.6rem;text-decoration:none;
  animation:chatIn .26s var(--ease) backwards}
.chat__item:nth-child(2){animation-delay:.05s}
.chat__item:nth-child(3){animation-delay:.1s}
@keyframes chatIn{from{opacity:0;transform:translateY(10px) scale(.9)}}
.chat__blob{
  background:var(--surface-2);color:var(--text);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.5rem .9rem;font-family:'Prompt',sans-serif;
  font-weight:500;font-size:.8125rem;white-space:nowrap;box-shadow:var(--shadow);
}
.chat__item:hover .chat__blob{border-color:var(--gold);color:var(--gold-lt)}
.chat__ic{
  width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:50%;
  box-shadow:var(--shadow);
}
.chat__ic svg{width:27px;height:27px}
/* LINE brand icon is used AS-IS per LINE's brand guidelines: no recolour,
   no crop, no added shape. Its own rounded-square silhouette is the mark. */
.chat__ic--line{background:none;box-shadow:none;border-radius:0}
.chat__ic--line img{width:52px;height:52px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
.chat__ic--phone{background:var(--gold-grad);color:var(--on-gold);border:1px solid rgba(0,0,0,.15)}
/* LINE mark inside buttons — again unmodified, just scaled */
.btn__line-mark{width:1.5em;height:1.5em;flex:none}
.chat__toggle{
  display:flex;align-items:center;gap:.6rem;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;
}
.chat__fab{
  width:60px;height:60px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--gold-grad);color:var(--on-gold);box-shadow:0 8px 26px rgba(0,0,0,.45);
  transition:transform var(--dur) var(--ease);
}
.chat__toggle:hover .chat__fab{transform:scale(1.07)}
.chat__toggle[aria-expanded=true] .chat__fab{transform:rotate(45deg)}
.chat__fab svg{width:30px;height:30px}
.chat__toggle[aria-expanded=true] .chat__blob{display:none}
@media(max-width:479px){
  .chat{inset-inline-end:var(--s-4);
    inset-block-end:calc(var(--s-4) + var(--cookie-h,0px) + env(safe-area-inset-bottom))}
  .chat__fab{width:54px;height:54px}
  .chat__blob{font-size:.75rem;padding:.42rem .75rem}
}

/* ---------- 17. Modal (LINE QR popup) ----------------------------------- */
.modal{position:fixed;inset:0;z-index:300;display:none;place-items:center;padding:var(--s-4)}
.modal[data-open]{display:grid}
.modal__scrim{position:absolute;inset:0;background:rgba(4,9,20,.8)}
.modal__box{
  position:relative;width:min(460px,100%);max-height:90dvh;overflow-y:auto;
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-7) var(--s-6) var(--s-6);box-shadow:var(--shadow);text-align:center;
}
.modal__close{
  position:absolute;top:var(--s-3);inset-inline-end:var(--s-3);width:40px;height:40px;
  display:grid;place-items:center;background:transparent;border:1px solid var(--line);
  border-radius:50%;color:var(--text-2);cursor:pointer;
}
.modal__close:hover{color:var(--gold-lt);border-color:var(--gold)}
.modal__close svg{width:18px;height:18px}
.modal h2{font-size:var(--fs-h3);color:var(--gold-lt);margin-bottom:var(--s-2)}
.modal p{font-size:var(--fs-sm);color:var(--text-3)}
.qr{width:200px;height:200px;margin:var(--s-5) auto;background:#fff;padding:10px;
  border-radius:var(--r);border:1px solid var(--line)}
.copy-row{
  display:flex;align-items:center;gap:var(--s-3);justify-content:space-between;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:.7rem .7rem .7rem 1rem;margin-bottom:var(--s-3);text-align:start;
}
.copy-row__val{
  font-family:'Prompt',sans-serif;font-weight:600;color:var(--text);
  font-size:var(--fs-sm);word-break:break-word;
}
.copy-row__val small{display:block;font-weight:400;font-size:.75rem;color:var(--text-3);
  font-family:'Sarabun',sans-serif}
.copy-btn{
  flex:none;background:rgba(217,180,91,.14);border:1px solid var(--gold-dp);color:var(--gold-lt);
  border-radius:var(--r-sm);padding:.5rem .8rem;font-family:'Prompt',sans-serif;
  font-weight:600;font-size:.8125rem;cursor:pointer;
}
.copy-btn:hover{background:rgba(217,180,91,.24)}
.copy-btn[data-copied]{background:#06C755;border-color:#06C755;color:#fff}
.modal__note{
  font-size:.8125rem;color:var(--text-3);text-align:start;
  background:rgba(217,180,91,.07);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s-4);margin-top:var(--s-4);
}
.modal__note strong{color:var(--gold-lt)}

/* ---------- 18. Cookie consent ------------------------------------------ */
.cookie{
  position:fixed;inset-block-end:0;inset-inline:0;z-index:250;
  background:var(--bg-alt);border-top:1px solid var(--line);
  padding:var(--s-5) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom));
  box-shadow:0 -8px 30px rgba(0,0,0,.4);display:none;
}
.cookie[data-open]{display:block}
.cookie__inner{
  max-width:var(--maxw);margin-inline:auto;display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--s-4) var(--s-6);justify-content:space-between;
}
.cookie p{font-size:var(--fs-sm);margin:0;max-width:70ch;color:var(--text-2)}
.cookie__actions{display:flex;gap:var(--s-3);flex-wrap:wrap}
.cookie .btn{font-size:.8125rem;padding:.65em 1.2em}
@media(max-width:639px){
  .cookie__inner{flex-direction:column;align-items:stretch}
  .cookie__actions .btn{flex:1}
}

/* ---------- 19. Misc ---------------------------------------------------- */
.breadcrumb{font-size:var(--fs-sm);color:var(--text-3);padding-block:var(--s-4) 0}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.breadcrumb li{margin:0;display:flex;align-items:center;gap:.4rem}
.breadcrumb li+li::before{content:"›";color:var(--gold-dp)}
.breadcrumb a{color:var(--text-3);text-decoration:none}
.breadcrumb a:hover{color:var(--gold-lt)}

.badge{
  display:inline-block;padding:.3em .8em;border-radius:var(--r-pill);
  background:rgba(217,180,91,.14);border:1px solid var(--line);
  color:var(--gold-lt);font-family:'Prompt',sans-serif;font-weight:500;font-size:var(--fs-xs);
}
.note{
  background:rgba(217,180,91,.07);border-inline-start:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:var(--s-5);margin-bottom:var(--s-5);
}
.note p:last-child{margin-bottom:0}
.figure{margin:0 0 var(--s-5);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.figure figcaption{padding:var(--s-3) var(--s-4);font-size:var(--fs-xs);color:var(--text-3);background:var(--surface)}
.media{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}

/* ---------- 20. Reduced motion ------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .btn:hover,.card:hover,.chat__toggle:hover .chat__fab{transform:none}
  .mnav__panel{transition:none}
}