


body.zx.zx-deck.zx-v3{
  --v3-n0:#030c17;
  --v3-n1:#041120;
  --v3-n2:#0a1b2b;
  --v3-n3:#112437;
  --v3-paper:#f1f6fb;
  --v3-paper-2:#dde9f4;
  --v3-card:#f8fafd;
  --v3-navy:#0d2a4a;
  --v3-ink-dim:#3a5068;          
  --v3-blue-deep:#1d4a80;        
  --v3-mint:#8FE3C4;
  --v3-acc:#107c5a;              
  --v3-grad-brand:linear-gradient(105deg,#123766 0%,#1d4f8f 45%,#2468b4 100%);
  --v3-grad-cta:linear-gradient(90deg,#1d4a80 0%,#2468b4 55%,#1a6d91 100%);  
  --v3-g:24px;                   
  
  --zx-font-display:"Prompt","Kanit","Anuphan",system-ui,sans-serif;
  --font-display:"Prompt","Kanit","Anuphan",system-ui,sans-serif;
}


body.zx-v3 #top{background:
  radial-gradient(90% 70% at 82% 0%,rgba(36,104,180,.50),transparent 65%),
  radial-gradient(55% 45% at 8% 35%,rgba(143,227,196,.10),transparent 70%),
  var(--v3-n1)}
body.zx-v3 #work{background:
  radial-gradient(70% 45% at 50% 0%,rgba(36,104,180,.45),transparent 70%),
  radial-gradient(45% 40% at 100% 100%,rgba(143,227,196,.10),transparent 70%),
  var(--v3-n1)}
body.zx-v3 #svc{background:var(--v3-grad-brand)}
body.zx-v3 #answer{background:var(--v3-n2)}
body.zx-v3 #about{background:var(--v3-n3)}
body.zx-v3 #faq{background:var(--v3-n2)}
body.zx-v3 #cta{background:var(--v3-grad-cta)}
body.zx-v3 #proof,body.zx-v3 #how,body.zx-v3 #evidence{background:var(--v3-paper)}
body.zx-v3 #vs{background:radial-gradient(45% 55% at 50% 55%,rgba(36,104,180,.16),transparent 72%),var(--v3-paper-2)}


body.zx-v3 :is(#proof,#how,#vs,#evidence){
  --zx-on-ink:var(--v3-navy);
  --zx-on-ink-dim:var(--v3-ink-dim);
  --zx-eyebrow-ink:var(--v3-blue-deep);
  
  --zx-fig:var(--zx-mint-ink);
  --zx-rule-ink:rgba(13,42,74,.16);
  
  --zx-grad:linear-gradient(90deg,#1d4a80,#0d6b4e);
  --zx-grad-dark:linear-gradient(90deg,#1d4a80,#0d6b4e);
  color:var(--v3-navy);
}

body.zx-v3 #about{--zx-grad:linear-gradient(to right,#5a9ff8,#18B87A)}


body.zx-v3 .zx-sec .zx-tear{display:none}

body.zx-v3 .zx-sec[data-prev-ground]{--zx-prev:transparent}


body.zx-v3 :is(#svc,#top,#work){--zx-ground:transparent}
body.zx-v3 :is(#proof,#how,#evidence){--zx-ground:var(--v3-paper)}
body.zx-v3 :is(#answer,#faq){--zx-ground:var(--v3-n2)}
body.zx-v3 #about{--zx-ground:var(--v3-n3)}
body.zx-v3 #vs{--zx-ground:var(--v3-paper-2)}

body.zx-v3 .zx-sec:not(.zx-grad) .zx-stub{border-color:var(--zx-rule-ink)}


body.zx-v3 #work .zx-case{border-radius:24px;
  box-shadow:0 0 0 1px rgba(143,227,196,.20),0 12px 40px rgba(0,0,0,.30),0 0 48px rgba(36,104,180,.38)}


body.zx-v3 #svc .zx-rack{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
body.zx-v3 #svc .zx-rack-strip{margin:0}
body.zx-v3 #svc .zx-carousel-viewport{overflow:visible;padding:0;cursor:auto}
body.zx-v3 #svc .zx-carousel-track{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;
  transform:none!important;transition:none;will-change:auto}

body.zx-v3 #svc .zx-car-nav{display:none}

body.zx-v3 #svc .zx-ticket{
  flex:none;width:auto;margin:0;rotate:none;
  display:flex;flex-direction:column;
  padding:16px;border:0;border-radius:20px;overflow:hidden;
  background:var(--v3-card);color:#0d1a29;
  box-shadow:0 0 0 1px rgba(255,255,255,.55),0 10px 32px rgba(6,20,40,.30),0 0 36px rgba(143,227,196,.16);
  translate:0 calc(var(--off,0px) - var(--p,0) * var(--k,0px));
  transition:opacity .6s ease var(--rd,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--rd,0s),box-shadow .25s ease;
}

@supports (translate:0 round(1.4px,1px)){
  body.zx-v3 #svc .zx-ticket{translate:0 round(calc(var(--off,0px) - var(--p,0) * var(--k,0px)),1px)}
}

.zx-deck-js body.zx-v3 #svc .zx-ticket.zx-rv{transform:translateY(32px)}
.zx-deck-js body.zx-v3 #svc .zx-ticket.zx-rv.zx-in{transform:none}

body.zx-v3 #svc .zx-ticket.v3-done{transition:box-shadow .25s ease,transform .25s ease}
.zx-deck-js body.zx-v3 #svc .zx-ticket.zx-rv.zx-in:hover,
body.zx-v3 #svc .zx-ticket:hover{transform:translateY(-3px);z-index:1;
  box-shadow:0 0 0 2px var(--v3-mint),0 14px 40px rgba(6,20,40,.34),0 0 56px rgba(143,227,196,.45)}


body.zx-v3 #svc .zx-perf{display:none}
body.zx-v3 #svc .zx-ticket .zx-tk-stub::before,
body.zx-v3 #svc .zx-ticket .zx-tk-stub::after,
body.zx-v3 #svc .zx-card-cover::after{content:none}
body.zx-v3 #svc .zx-tk-top{display:flex;flex-direction:column;flex:1 1 auto;transform:none}
body.zx-v3 #svc .zx-card-cover{display:block;margin:0;aspect-ratio:3/2;border-radius:12px;overflow:hidden}

body.zx-v3 #svc .zx-card-cover :is(picture,img){display:block;width:100%;height:100%;min-width:0}
body.zx-v3 #svc .zx-card-cover img{transform:none;object-fit:cover;aspect-ratio:auto}
body.zx-v3 #svc .zx-card-body{display:flex;flex-direction:column;gap:0;padding:14px 0 0;background:none}

body.zx-v3 #svc .zx-ticket .zx-h3{text-align:left}
body.zx-v3 #svc .zx-ticket :is(.zx-card-l,.zx-card-sub){text-align:left!important}
body.zx-v3 #svc .zx-card-tag{font-size:12px;letter-spacing:.06em;padding:0 0 6px;border:0;color:#445160}
body.zx-v3 #svc .zx-ticket .zx-h3{font-size:clamp(1.25rem,1.1rem + .45vw,1.5rem);line-height:1.35;padding:0 0 8px;margin:0}
body.zx-v3 #svc .zx-ticket p.zx-card-l{font-size:1rem;line-height:1.5;margin:0}
body.zx-v3 #svc .zx-tk-stub{margin-top:auto;padding:14px 0 0;background:none;border-radius:0;transform:none}
body.zx-v3 #svc .zx-ticket .zx-card-price,
body.zx-v3 #svc .zx-ticket .zx-tk-stub .zx-card-sub{padding-right:0}
body.zx-v3 #svc .zx-ticket .zx-price{font-size:1.375rem;line-height:1.15}  
body.zx-v3 #svc .zx-ticket .zx-price-u{font-size:.875rem}
body.zx-v3 #svc .zx-ticket p.zx-card-sub{font-size:.875rem;line-height:1.5;margin:4px 0 0}


@media(min-width:1181px){
  body.zx-v3 #svc .zx-rack{
    grid-template-columns:calc((100% - 4 * var(--v3-g)) / 5) minmax(0,1fr);
    grid-template-rows:repeat(5,auto);column-gap:var(--v3-g);row-gap:0;
    margin-top:48px;padding-bottom:100px;   
  }
  body.zx-v3 #svc .zx-tk-hero{grid-column:1;grid-row:1/6}
  body.zx-v3 #svc .zx-rack-strip,
  body.zx-v3 #svc .zx-carousel-viewport{grid-row:1/6;display:grid;
    grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:0}
  body.zx-v3 #svc .zx-rack-strip{grid-column:2}
  body.zx-v3 #svc .zx-carousel-track{grid-row:1/6;grid-template-rows:subgrid;
    grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--v3-g);row-gap:0}
  body.zx-v3 #svc .zx-ticket{grid-row:1/6;display:grid;grid-template-rows:subgrid;
    grid-template-columns:minmax(0,1fr);row-gap:0;will-change:translate}
  body.zx-v3 #svc .zx-tk-top{grid-row:1/5;display:grid;grid-template-rows:subgrid;row-gap:0}
  body.zx-v3 #svc .zx-card-body{grid-row:1/4;display:grid;grid-template-rows:subgrid;row-gap:0;padding:0}
  body.zx-v3 #svc .zx-card-tag{grid-row:1;align-self:start}
  body.zx-v3 #svc .zx-ticket .zx-h3{grid-row:2}
  body.zx-v3 #svc .zx-ticket p.zx-card-l{grid-row:3;padding-bottom:14px}
  body.zx-v3 #svc .zx-card-cover{grid-row:4;align-self:start}
  body.zx-v3 #svc .zx-tk-stub{grid-row:5;margin:0}
  
  body.zx-v3 #svc .zx-tk-hero,
  body.zx-v3 #svc .zx-carousel-track > .zx-ticket:nth-child(4){--off:0px;--k:48px;--rd:.18s}
  body.zx-v3 #svc .zx-carousel-track > .zx-ticket:nth-child(1),
  body.zx-v3 #svc .zx-carousel-track > .zx-ticket:nth-child(3){--off:50px;--k:24px;--rd:.09s}
  body.zx-v3 #svc .zx-carousel-track > .zx-ticket:nth-child(2){--off:100px;--k:0px;--rd:0s}
}
@media(min-width:1181px) and (max-width:1319px){
  body.zx-v3 #svc .zx-ticket .zx-price{font-size:1.2rem}
}


@media(min-width:641px) and (max-width:1180px){
  body.zx-v3 #svc .zx-rack{gap:24px}
  body.zx-v3 #svc .zx-tk-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    grid-template-rows:auto 1fr auto;column-gap:24px}
  body.zx-v3 #svc .zx-tk-hero .zx-tk-top{display:contents}
  body.zx-v3 #svc .zx-tk-hero .zx-card-cover{grid-column:1;grid-row:1/4;align-self:start}
  body.zx-v3 #svc .zx-tk-hero .zx-card-body{grid-column:2;grid-row:1;padding-top:0}
  body.zx-v3 #svc .zx-tk-hero .zx-tk-stub{grid-column:2;grid-row:3}
  body.zx-v3 #svc .zx-carousel-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-bottom:48px}
  body.zx-v3 #svc .zx-carousel-track > .zx-ticket:nth-child(even){--off:48px}
}


@media(max-width:640px){
  body.zx-v3 #svc .zx-rack,
  body.zx-v3 #svc .zx-carousel-track{gap:12px}
  body.zx-v3 #svc .zx-ticket{display:grid;grid-template-columns:112px minmax(0,1fr);
    grid-template-rows:auto 1fr auto;padding:0;border-radius:16px}
  body.zx-v3 #svc .zx-tk-top{display:contents}
  body.zx-v3 #svc .zx-card-cover{grid-column:1;grid-row:1/4;aspect-ratio:auto;height:100%;border-radius:0}
  body.zx-v3 #svc .zx-card-body{grid-column:2;grid-row:1;padding:14px 14px 0}
  body.zx-v3 #svc .zx-tk-stub{grid-column:2;grid-row:3;padding:10px 14px 14px}
  body.zx-v3 #svc .zx-ticket .zx-h3{font-size:1.125rem}
  body.zx-v3 #svc .zx-ticket .zx-price{font-size:1.125rem}
  
  body.zx-v3 #svc .zx-carousel-track > .zx-ticket:nth-child(odd){grid-template-columns:minmax(0,1fr) 112px}
  body.zx-v3 #svc .zx-carousel-track > .zx-ticket:nth-child(odd) .zx-card-cover{grid-column:2}
  body.zx-v3 #svc .zx-carousel-track > .zx-ticket:nth-child(odd) :is(.zx-card-body,.zx-tk-stub){grid-column:1}
}


body.zx-v3 #evidence .zx-tornstub{--zx-notch:var(--v3-paper)}


@property --v3-run{syntax:"<angle>";initial-value:135deg;inherits:false}
body.zx-v3 #vs .zx-vs-panel.zx-us{
  position:relative;isolation:isolate;
  border:0;border-radius:20px;background:#0f2a4a;
  --zx-eyebrow-ink:var(--v3-mint);    
  --zx-rule-ink:rgba(143,227,196,.40);  
  box-shadow:0 0 60px rgba(47,127,214,.35),0 24px 60px rgba(13,42,74,.22);
}
body.zx-v3 #vs .zx-vs-panel.zx-us::before{
  content:"";position:absolute;inset:-3px;z-index:-2;border-radius:23px;pointer-events:none;
  background:linear-gradient(var(--v3-run,135deg),#2f7fd6 0%,#8FE3C4 5%,#8FE3C4 14%,#2f7fd6 28%,rgba(47,127,214,0) 55%);
  filter:drop-shadow(0 0 10px rgba(47,127,214,.70));
  animation:v3Run 4s linear infinite;
}
body.zx-v3 #vs .zx-vs-panel.zx-us::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:20px;pointer-events:none;
  background:linear-gradient(180deg,#16406f 0%,var(--v3-n1) 100%);
}

body.zx-v3 #vs .zx-vs-panel.zx-us .zx-vs-badge{color:var(--v3-n1)!important}

body.zx-v3 #vs .zx-vs-panel.zx-muted .zx-vs-list li + li{border-top-color:rgba(13,42,74,.28)}

body.zx-v3 #vs .zx-vs-seam{display:none}
@keyframes v3Run{to{--v3-run:495deg}}
@keyframes v3Glow{
  0%,100%{filter:drop-shadow(0 0 14px rgba(47,127,214,.85)) drop-shadow(0 0 34px rgba(47,127,214,.55)) drop-shadow(0 0 60px rgba(143,227,196,.40))}
  50%{filter:drop-shadow(0 0 10px rgba(47,127,214,.45)) drop-shadow(0 0 24px rgba(47,127,214,.28)) drop-shadow(0 0 40px rgba(143,227,196,.18))}
}

@media(min-width:1024px){
  body.zx-v3 #vs .zx-vs-panel.zx-us::before{animation:v3Run 4s linear infinite,v3Glow 4s ease-in-out infinite}
}


