:root {
  --bg: #f6f7f9;
  --surface: rgba(255, 255, 255, 0.78);
  --surface-solid: #ffffff;
  --surface-2: #f9fafb;
  --text: #09090a;
  --text-soft: #4b5563;
  --line: rgba(148, 163, 184, 0.18);
  --line-strong: rgba(148, 163, 184, 0.32);
  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-soft: rgba(37, 99, 235, 0.1);
  --success: #16a34a;
  --danger: #dc2626;
  --shadow-1: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 24px 60px rgba(15, 23, 42, 0.08);
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --container: 1560px;
  --header-height: 82px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at top left, rgba(248, 215, 232, 0.55), transparent 34%),
    radial-gradient(circle at 85% 10%, rgba(217, 242, 255, 0.7), transparent 28%),
    linear-gradient(180deg, #f8fafc 0%, #f6f7f9 100%);
  color: var(--text);
  font-family: Inter, "Noto Sans Thai", "Noto Sans SC", system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body[data-lang="th"] { font-family: "Noto Sans Thai", Inter, system-ui, sans-serif; }
body[data-lang="zh"] { font-family: "Noto Sans SC", Inter, system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.skipLink { position: absolute; left: -999px; top: 12px; z-index: 200; background: #fff; color: var(--text); padding: 10px 14px; border-radius: 10px; }
.skipLink:focus { left: 12px; }
.container { width: min(100% - 32px, var(--container)); margin: 0 auto; }
.siteHeader {
  position: sticky; top: 0; z-index: 100; backdrop-filter: blur(18px);
  background: rgba(246, 247, 249, 0.72); border-bottom: 1px solid rgba(255,255,255,.5);
}
.headerInner { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -0.02em; }
.brandMark {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(248,215,232,.85), rgba(217,242,255,.95));
  border: 1px solid rgba(255,255,255,.85); box-shadow: var(--shadow-1);
}
.brandText { font-size: 1.05rem; }
.mainNav { display: flex; align-items: center; gap: 26px; }
.mainNav a, .footerLinks a, .mobileMenu a { color: var(--text-soft); font-size: .95rem; transition: color 180ms ease; }
.mainNav a:hover, .footerLinks a:hover, .mobileMenu a:hover { color: var(--text); }
.headerActions { display: flex; align-items: center; gap: 12px; }
.langSwitcher {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px; border-radius: 999px;
  background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.8); box-shadow: var(--shadow-1);
}
.langBtn, .menuBtn, .sliderBtn { border: 0; background: transparent; cursor: pointer; }
.langBtn { padding: 12px 8px; border-radius: 999px; color: var(--text-soft); }
.langBtn.isActive { color: #fff; background: var(--text); }
.menuBtn {
  width: 44px; height: 44px; border-radius: 14px; display: none; padding: 0;
  background: rgba(255,255,255,.7); box-shadow: var(--shadow-1);
}
.menuBtn span { display: block; width: 18px; height: 2px; background: var(--text); margin: 4px auto; border-radius: 999px; }
.mobileMenu { display: none; padding: 0 16px 16px; gap: 12px; flex-direction: column; }
.mobileMenu.isOpen { display: flex; }
.section { padding: 88px 0; }
.hero { position: relative; overflow: clip; padding-top: 56px; }
.heroBlur { position: absolute; border-radius: 999px; filter: blur(64px); opacity: .72; pointer-events: none; }
.heroBlurA { width: 380px; height: 380px; left: -80px; top: 10px; background: rgba(248,215,232,.9); }
.heroBlurB { width: 420px; height: 420px; right: -80px; top: 70px; background: rgba(217,242,255,.95); }
.heroBlurC { width: 260px; height: 260px; left: 45%; top: 20px; background: rgba(233,213,255,.7); }
.heroGrid { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 32px; align-items: center; }
.eyebrow { margin: 0 0 18px; color: var(--brand); font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; }
.heroTitle, .sectionHead h2, .compactHead h2 { margin: 0; line-height: 1.08; letter-spacing: -0.04em; text-wrap: balance; }
.heroTitle { font-size: clamp(2.3rem, 5.4vw, 4.6rem); }
.heroDescription, .sectionDescription, .serviceCard p, .faqItem p, .contactNotes p, .footerInner p, .planPrice, .pricingCard li, .formHelp, .renewalDescription, .showcaseBody p, .planFit { color: var(--text-soft); }
.heroDescription { font-size: 1.06rem; line-height: 1.85; margin: 18px 0 0; }
.heroActions, .formActions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 999px;
  border: 1px solid transparent; padding: 10px 18px; max-width: 100%; font-weight: 600; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
  white-space: normal; text-align: center; line-height: 1.3;
}
.btn:hover { transform: translateY(-1px); }
.btnPrimary { background: var(--text); color: #fff; box-shadow: var(--shadow-1); }
.btnPrimary:hover { background: #1f2937; }
.btnSecondary, .btnGhost { background: rgba(255,255,255,.62); border-color: rgba(148,163,184,.18); }
.heroTrust { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.heroTrust li, .trustItem {
  padding: 14px 14px; border-radius: 16px; background: rgba(255,255,255,.54); border: 1px solid rgba(255,255,255,.8); box-shadow: var(--shadow-1); color: var(--text); font-size: .95rem;
  justify-items: center; align-items: center; text-align: center;
}
.heroVisual { min-height: 560px; position: relative; }
.floatingCard { position: absolute; border-radius: var(--r-lg); background: rgba(255,255,255,.68); border: 1px solid rgba(255,255,255,.86); backdrop-filter: blur(18px); box-shadow: var(--shadow-2); }
.cardLarge { inset: 30px 100px 150px 0; padding: 18px; }
.cardPhone { width: 180px; right: 10px; top: -20px; padding: 18px; }
.cardSmall { right: 44px; bottom: 78px; width: 280px; padding: 20px; display: grid; gap: 8px; }
.cardTag { margin: 0; font-size: .78rem; font-weight: 700; color: var(--brand); }
.cardSmall strong { font-size: 1rem; }
.cardSmall span { color: var(--text-soft); line-height: 1.6; font-size: .95rem; }
.windowBar { display: flex; gap: 7px; }
.windowBar span { width: 10px; height: 10px; border-radius: 999px; background: rgba(148,163,184,.4); }
.heroMockSurface {
  margin-top: 14px; min-height: 320px; border-radius: 24px; padding: 26px;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(246,247,249,.92)), radial-gradient(circle at 20% 12%, rgba(248,215,232,.65), transparent 26%), radial-gradient(circle at 76% 70%, rgba(217,242,255,.82), transparent 28%), radial-gradient(circle at 76% 18%, rgba(233,213,255,.72), transparent 24%);
  border: 1px solid rgba(255,255,255,.8);
}
.heroMockText, .heroMockLine, .showcaseLine, .templateTopMeta, .showcaseBlock { background: rgba(15,15,15,.18); border: 1px solid rgba(17,24,39,.12); }
.heroMockText { width: 44%; height: 8px; border-radius: 999px; }
.heroMockLine { width: 28%; height: 8px; border-radius: 999px; margin-top: 12px; }
.heroMockCard { width: 56%; height: 112px; border-radius: 22px; margin-top: 18px; border: 1px solid rgba(17,24,39,.08); background: radial-gradient(circle at 30% 20%, rgba(248,215,232,.72), transparent 30%), radial-gradient(circle at 76% 70%, rgba(217,242,255,.92), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96));}
.heroMockButtons, .showcaseButtons { display: flex; gap: 12px; margin-top: 18px; }
.heroMockButtons span, .showcaseButtons span { width: 120px; height: 40px; border-radius: 999px; border: 1px solid rgba(160, 164, 170, 0.28); background: rgba(255,255,255,.72); }
.phoneFrame { aspect-ratio: .56 / 1; border-radius: 18px; padding: 10px; border: 2px solid rgba(17,24,39,.42); background: rgba(255,255,255,.95); }
.phoneGradient { height: 100%; border-radius: 20px; background: radial-gradient(circle at 30% 20%, rgba(248,215,232,.72), transparent 30%), radial-gradient(circle at 76% 70%, rgba(217,242,255,.92), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96)); }
.phoneMark { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 999px; background: rgba(17,24,39,.92); color: #fff; display: grid; place-items: center; font-weight: 700; }
.trustGrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.sectionHead { max-width: 800px; margin: 0 auto 30px; text-align: center; }
.sectionHeadSplit { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 20px; text-align: left; }
.sectionHeadLeft, .compactHead { margin-left: 0; text-align: left; }
.sliderActions { display: flex; gap: 10px; }
.sliderBtn {
  width: 46px; height: 46px; border-radius: 999px; background: rgba(255,255,255,.78); border: 1px solid rgba(148,163,184,.18); box-shadow: var(--shadow-1); font-size: 1.3rem; color: var(--text);
}
.showcaseScroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 420px); gap: 18px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.showcaseScroller::-webkit-scrollbar { height: 8px; }
.showcaseScroller::-webkit-scrollbar-thumb { background: rgba(148,163,184,.28); border-radius: 999px; }
.showcaseCard, .pricingCard, .renewalCard, .serviceCard, .processCard, .contactForm, .faqItem {
  border-radius: 28px; background: rgba(255,255,255,.74); border: 1px solid rgba(255,255,255,.85); box-shadow: var(--shadow-1); backdrop-filter: blur(14px);
}
.showcaseCard { aspect-ratio: 3 / 2; scroll-snap-align: start; overflow: hidden; }
.showcaseVisual { padding: 8px; }
.showcaseMock {
  aspect-ratio: 3 / 2;
  min-height: 240px; border-radius: 24px; padding: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(246,247,249,.92)), radial-gradient(circle at 18% 14%, rgba(248,215,232,.52), transparent 26%), radial-gradient(circle at 84% 72%, rgba(217,242,255,.76), transparent 30%), radial-gradient(circle at 72% 18%, rgba(233,213,255,.66), transparent 28%);
  border: 1px solid rgba(226,232,240,.72);
}
.showcaseLine { height: 16px; border-radius: 999px; }
.showcaseLine.long { width: 42%; }
.showcaseLine.short { width: 30%; margin-top: 12px; }
.showcaseBlock { width: 58%; height: 96px; border-radius: 20px; margin-top: 18px; }
.showcaseBody { padding: 0 22px 24px; }
.templateTopMeta { display: inline-flex; gap: 10px; margin: 0 0 12px; background: transparent; border: 0; }
.badge, .categoryChip, .featureChip, .planMeta span {
  display: inline-flex; align-items: center; border-radius: 999px; padding: 8px 12px; border: 1px solid rgba(148,163,184,.18); background: rgba(255,255,255,.72); font-size: .92rem; color: var(--text-soft);
}
.badge { color: var(--brand); font-weight: 700; background: rgba(37,99,235,.09); }
.showcaseBody h3, .pricingCard h3, .renewalCard h3, .serviceCard h3, .processCard h3 { margin: 0; line-height: 1.2; letter-spacing: -0.03em; }
.showcaseBody h3 { font-size: 1.72rem; margin-bottom: 14px; }
.showcaseBody p, .planFit, .renewalDescription { line-height: 1.8; margin: 0; }
.featureList { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cardBottom { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 20px; }
.priceHint { font-weight: 600; line-height: 1.5; }
.cardActions { display: flex; gap: 10px; flex-wrap: wrap; }
.actionLink {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(148,163,184,.18); background: rgba(255,255,255,.78); font-weight: 600;
}
.pricingGridFive { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.pricingCard, .renewalCard, .serviceCard, .processCard { padding: 24px; display: grid; align-content: start; gap: 14px; }
.pricingCard { min-height: 100%; }
.featuredPlan { background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(239,246,255,.85)); border-color: rgba(191,219,254,.8); box-shadow: var(--shadow-2); }
.planLabel { margin: 0; color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .86rem; }
.planPrice { font-size: 1.25rem; margin: 0; font-weight: 700; color: var(--text); }
.planMeta { display: flex; flex-wrap: wrap; gap: 8px; }
.planFit { min-height: 84px; }
.pricingCard ul, .renewalCard ul { margin: 0; padding-left: 18px; display: grid; gap: 10px; }
.planBtn { margin-top: auto; }
.renewalsWrap { margin-top: 34px; }
.renewalGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.serviceGrid, .processGrid, .contactGrid { display: grid; gap: 18px; }
.serviceGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.serviceIcon {
  width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; font-size: 1.25rem;
  background: linear-gradient(135deg, rgba(248,215,232,.48), rgba(217,242,255,.68)); border: 1px solid rgba(255,255,255,.82);
}
.processGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stepNo { font-size: .84rem; color: var(--brand); font-weight: 700; letter-spacing: .08em; }
.faqWrap { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: 24px; align-items: start; }
.faqList { display: grid; gap: 14px; }
.faqItem { padding: 0; overflow: hidden; }
.faqItem summary { list-style: none; cursor: pointer; font-weight: 700; padding: 20px 22px; }
.faqItem summary::-webkit-details-marker { display: none; }
.faqItem p { margin: 0; padding: 0 22px 20px; line-height: 1.75; }
.contactGrid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: start; }
.contactNotes { display: grid; gap: 16px; margin-top: 24px; }
.contactNotes strong { display: block; margin-bottom: 8px; }
.contactForm { padding: 24px; }
.formRow { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.contactForm label { display: grid; gap: 8px; margin-bottom: 14px; }
.contactForm span { font-weight: 600; }
.contactForm input, .contactForm textarea, .contactForm select {
  width: 100%; min-width: 0; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(148,163,184,.22); background: rgba(255,255,255,.78); color: var(--text);
}
.contactForm textarea { resize: vertical; }
.formStatus { margin: 14px 0 0; min-height: 24px; font-weight: 600; }
.formStatus.isSuccess { color: var(--success); }
.formStatus.isError { color: var(--danger); }
.siteFooter { padding: 0 0 44px; }
.footerInner {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 28px 0 0; border-top: 1px solid rgba(148,163,184,.16);
}
.footerInner p { max-width: 46ch; line-height: 1.8; }
.footerLinks { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 1180px) {
  .pricingGridFive { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .processGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .mainNav, .desktopOnly { display: none; }
  .menuBtn { display: inline-block; }
  .heroGrid, .faqWrap, .contactGrid, .serviceGrid { grid-template-columns: 1fr; }
  .heroVisual { min-height: 480px; }
  .cardLarge { inset: 20px 92px 144px 0; }
  .trustGrid, .pricingGridFive, .renewalGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sectionHeadSplit { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .hero { padding-top: 36px; }
  .heroTitle { max-width: none; font-size: clamp(2.05rem, 10vw, 3.3rem); }
  .heroTrust, .trustGrid, .pricingGridFive, .renewalGrid, .formRow, .processGrid { grid-template-columns: 1fr; }
  .heroVisual { min-height: 420px; }
  .cardLarge { inset: 10px 50px 136px 0; }
  .cardPhone { width: 138px; }
  .cardSmall { left: 20px; right: 20px; width: auto; bottom: 12px; }
  .showcaseScroller { grid-auto-columns: minmax(280px, 86vw); }
  .cardBottom { flex-direction: column; align-items: stretch; }
  .footerInner { flex-direction: column; }
}

@media (max-width: 520px) {
  .container { width: min(100% - 24px, var(--container)); }
  .headerInner { gap: 12px; }
  .brandText { font-size: 1rem; }
  .langSwitcher { padding: 4px; gap: 4px; }
  .langBtn { padding: 8px 10px; font-size: .88rem; }
  .btn, .actionLink { width: 100%; }
  .heroActions, .cardActions { width: 100%; }
  .heroVisual { min-height: 360px; }
  .cardLarge { inset: 0 32px 122px 0; }
  .cardPhone { width: 116px; right: 0; top: 8px; }
  .showcaseBody h3 { font-size: 1.46rem; }
  .contactForm { padding: 18px; }
}


/* ===== vNext premium patch ===== */
body {
  background:
    radial-gradient(72rem 40rem at 16% 0%, rgba(233, 213, 255, 0.42), transparent 62%),
    radial-gradient(78rem 42rem at 100% 0%, rgba(217, 242, 255, 0.52), transparent 56%),
    radial-gradient(52rem 22rem at 50% 42%, rgba(248, 215, 232, 0.16), transparent 70%),
    linear-gradient(180deg, #f7f7fa 0%, #f5f7fa 52%, #f7f8fb 100%);
}
.siteHeader {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(18px);
  background: rgba(246,247,249,0.72);
}
.headerInner { min-height: 78px; }
.mainNav { gap: 20px; }
.mainNav a { font-size: .9rem; }
.headerActions { gap: 10px; }
.langSwitcher {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 176px;
  padding: 6px;
  gap: 0;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 24px rgba(15,23,42,.04);
  --lang-index: 0;
}
.langPill {
  position: absolute;
  top: 8px;
  left: 6px;
  width: calc(((100% - 6px) / 3) - 2px);
  height: calc(100% - 14px);
  border-radius: 999px;
  background: #0f1b34;
  box-shadow: 0 10px 24px rgba(192, 192, 194, 0.15);
  transform: translateX(calc(var(--lang-index) * 100%));
  transition: transform 960ms cubic-bezier(.2,.8,.2,1);
}
.langBtn {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0px 0;
  color: var(--text-soft);
  transition: color 220ms ease, transform 480ms ease;
}
.langBtn.isActive { color: #fff; }
.btnPrimary.desktopOnly, .headerActions .btnPrimary {
  width: 148px;
  justify-content: center;
  flex: 0 0 148px;
  white-space: nowrap;
}
.heroTitle {
  font-size: clamp(2.6rem, 5vw, 5.05rem);
  line-height: 1.06;
  letter-spacing: -.045em;
}
.heroDescription { max-width: 58ch; }
.heroGrid { align-items: center; }
.heroVisual { min-height: 600px; }
.heroVisual::after {
  content: '';
  position: absolute;
  inset: auto 8% 6% 10%;
  height: 24%;
  background: radial-gradient(circle at center, rgba(37,99,235,.08), transparent 72%);
  filter: blur(24px);
  pointer-events: none;
}
.floatingCard { will-change: transform; }
.cardLarge { animation: floatBrowser 6.5s ease-in-out infinite; }
.cardPhone { animation: floatPhone 7.8s ease-in-out infinite; }
.cardSmall { animation: floatInfo 4.8s ease-in-out infinite; }
.heroMockText, .heroMockLine { transform-origin: left center; }
.heroMockText { animation: pulseLineA 5.2s ease-in-out infinite; }
.heroMockLine { animation: pulseLineB 3.1s ease-in-out infinite .6s; }
@keyframes pulseLineA {
  0%,100% { transform: scaleX(1); opacity: .92; }
  50% { transform: scaleX(.44); opacity: .72; }
}
@keyframes pulseLineB {
  0%,100% { transform: scaleX(1); opacity: .88; }
  50% { transform: scaleX(1.32); opacity: .65; }
}
@keyframes floatBrowser {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-16px,0); }
}
@keyframes floatPhone {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-24px,0); }
}
@keyframes floatInfo {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-32px,0); }
}
#showcase, #packages, .processSection {
  position: relative;
}
#showcase::before, #packages::before, .processSection::before {
  content: '';
  position: absolute;
  inset: 6% 0 auto;
  margin: 0 auto;
  width: min(92vw, 1180px);
  height: 260px;
  background: radial-gradient(circle at 15% 20%, rgba(233,213,255,.18), transparent 48%), radial-gradient(circle at 85% 0%, rgba(217,242,255,.22), transparent 44%);
  filter: blur(10px);
  pointer-events: none;
}
.sectionHeadSplit { align-items: end; }
.showcaseMetaHint {
  color: var(--text-soft);
  font-size: .94rem;
  max-width: 28ch;
  text-align: right;
}
.showcaseRows { display: grid; gap: 18px; margin-top: 34px; }
.showcaseRail {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
}
.showcaseRail::before, .showcaseRail::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 3;
  pointer-events: none;
}
.showcaseRail::before {
  left: 0;
  background: linear-gradient(90deg, #f6f7f9 0%, rgba(246,247,249,0) 100%);
}
.showcaseRail::after {
  right: 0;
  background: linear-gradient(270deg, #f6f7f9 0%, rgba(246,247,249,0) 100%);
}
.showcaseScroller {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 4px 12px;
  scroll-snap-type: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.showcaseScroller::-webkit-scrollbar { display: none; }
.showcaseCard {
  aspect-ratio: 3 / 2;
  flex: 0 0 clamp(240px, 26vw, 320px);
  min-height: 268px;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.78);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-1);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms ease, border-color 240ms ease;
}
.showcaseCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(15,23,42,.1);
  border-color: rgba(255,255,255,.95);
  z-index: 4;
}
.showcaseVisual {
  padding: 8px;
  height: 100%;
}
.showcaseMock {
  aspect-ratio: 3 / 2;
  width: 100%;
  position: relative;
  height: 100%;
  /* min-height: 236px; */
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.5));
  border: 1px solid rgba(255,255,255,.72);
  overflow: hidden;
}
/* 
.showcaseMock::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 22% 16%, rgba(248,215,232,.9), transparent 24%),
    radial-gradient(circle at 76% 30%, rgba(233,213,255,.78), transparent 26%),
    radial-gradient(circle at 60% 76%, rgba(217,242,255,.82), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.42));
  opacity: .92;
}
.showcaseMock::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.0));
} */
.showcaseMockImage {
  aspect-ratio: 3 / 2;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  z-index: 0;
  overflow: hidden;
  /* transform: scale(1.01); */
}
.showcaseMock::before { z-index: 1; }
.showcaseMock::after { z-index: 1; }
.showcaseTopBar,
.showcaseCaption { z-index: 2; }
.showcaseTopBar {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.codeChip, .packChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  backdrop-filter: blur(8px);
}
.codeChip {
  background: #0f1b34;
  color: #fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.18);
}
.packChip {
  background: rgba(255,255,255,.8);
  color: var(--text-soft);
  border: 1px solid rgba(255,255,255,.9);
}
.showcaseCaption {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}
.showcaseCaptionText {
  display: grid;
  gap: 4px;
}
.showcaseCaptionText strong {
  font-size: 1.02rem;
  line-height: 1.15;
}
.showcaseCaptionText span {
  color: var(--text-soft);
  font-size: .86rem;
}
.showcaseOpen {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.92);
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  transition: transform 220ms ease, background 220ms ease;
}
.showcaseOpen:hover { transform: translateY(-2px); background: #fff; }
.sliderActions { display: none !important; }
.pricingGridFive {
  gap: 20px;
  align-items: stretch;
}
.pricingCard {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 26px 24px 22px;
}
.pricingCard h3 { font-size: 1.16rem; }
.planMeta { gap: 10px; }
.planMeta span { white-space: nowrap; }
.planFit { min-height: 88px; }
.pricingCard ul { margin-top: 0; }
.planBtn {
  margin-top: auto;
  min-height: 50px;
  align-self: stretch;
  justify-content: center;
}
.featuredPlan {
  box-shadow: 0 22px 56px rgba(37,99,235,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
@media (max-width: 1180px) {
  .pricingGridFive {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 920px) {
  .headerInner { min-height: 72px; }
  .mainNav a { font-size: .88rem; }
  .showcaseMetaHint { text-align: left; }
  .pricingGridFive {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .siteHeader { background: rgba(246,247,249,.84); }
  .headerInner { min-height: 68px; }
  .langSwitcher { width: 164px; }
  .heroTitle {
    font-size: clamp(2.28rem, 9.4vw, 3.9rem);
  }
  .heroVisual { min-height: 430px; }
  .showcaseRows { margin-top: 26px; gap: 14px; }
  .showcaseRail::before, .showcaseRail::after { width: 42px; }
  .showcaseCard { aspect-ratio: 3 / 2; flex-basis: 78vw; min-height: 236px; }
  .showcaseCaptionText strong { font-size: .95rem; }
  .pricingGridFive {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(272px, 82vw);
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .pricingGridFive::-webkit-scrollbar { display: none; }
  .pricingCard { scroll-snap-align: start; }
  .planFit { min-height: auto; }
}
@media (max-width: 560px) {
  .langSwitcher { width: 156px; }
  .headerActions .btnPrimary { width: 138px; flex-basis: 138px; }
  .cardPhone { width: 120px; top: 2px; }
  .cardSmall { left: 10px; right: 10px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cardLarge, .cardPhone, .cardSmall, .heroMockText, .heroMockLine { animation: none !important; }
  .showcaseCard, .showcaseOpen, .langPill { transition: none !important; }
}
#showcaseScrollerTop,
#showcaseScrollerBottom {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
}
.showcaseViewport {
  overflow: hidden;
  width: 100%;
}



/* ===== motion + language smooth patch ===== */
:root {
  --enter-ease: cubic-bezier(.22, .84, .24, 1);
  --enter-duration: 1220ms;
  --enter-duration-fast: 760ms;
  --switch-duration: 1360ms;
  --switch-ease: cubic-bezier(.2, .8, .2, 1);
  --lang-pad: 6px;
  --lang-pill-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}
html { overflow-x: clip; }
body {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow-x: clip;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(247,247,250,.72), rgba(247,248,251,.28));
  animation: pageSoftReveal 820ms var(--enter-ease) forwards;
}
.siteHeader,
.heroGrid > *,
.sectionHead,
.sectionHeadSplit,
.compactHead,
.heroTrust li,
.trustItem,
.showcaseCard,
.pricingCard,
.renewalCard,
.serviceCard,
.processCard,
.contactForm,
.faqItem,
.footerInner {
  animation: premiumFadeUp var(--enter-duration) var(--enter-ease) both;
  will-change: transform, opacity, filter;
}
.siteHeader { animation-duration: var(--enter-duration-fast); animation-name: premiumFadeDown; }
.heroGrid > *:nth-child(1) { animation-delay: 90ms; }
.heroGrid > *:nth-child(2) { animation-delay: 170ms; }
.heroTrust li:nth-child(1), .trustItem:nth-child(1), .showcaseCard:nth-child(1), .pricingCard:nth-child(1), .renewalCard:nth-child(1), .serviceCard:nth-child(1), .processCard:nth-child(1), .faqItem:nth-child(1) { animation-delay: 40ms; }
.heroTrust li:nth-child(2), .trustItem:nth-child(2), .showcaseCard:nth-child(2), .pricingCard:nth-child(2), .renewalCard:nth-child(2), .serviceCard:nth-child(2), .processCard:nth-child(2), .faqItem:nth-child(2) { animation-delay: 110ms; }
.heroTrust li:nth-child(3), .trustItem:nth-child(3), .showcaseCard:nth-child(3), .pricingCard:nth-child(3), .renewalCard:nth-child(3), .serviceCard:nth-child(3), .processCard:nth-child(3), .faqItem:nth-child(3) { animation-delay: 180ms; }
.heroTrust li:nth-child(4), .trustItem:nth-child(4), .showcaseCard:nth-child(4), .pricingCard:nth-child(4), .renewalCard:nth-child(4), .serviceCard:nth-child(4), .processCard:nth-child(4), .faqItem:nth-child(4) { animation-delay: 250ms; }
.heroTrust li:nth-child(n + 5), .trustItem:nth-child(n + 5), .showcaseCard:nth-child(n + 5), .pricingCard:nth-child(n + 5), .renewalCard:nth-child(n + 5), .serviceCard:nth-child(n + 5), .processCard:nth-child(n + 5), .faqItem:nth-child(n + 5) { animation-delay: 320ms; }

.siteHeader, .brand, .brandMark, .brandText, .mainNav a, .footerLinks a, .mobileMenu a, .langSwitcher, .langPill, .langBtn, .btn, .actionLink, .sliderBtn, .menuBtn, .showcaseCard, .pricingCard, .renewalCard, .serviceCard, .processCard, .contactForm, .faqItem, .contactForm input, .contactForm textarea, .contactForm select, .showcaseOpen, .showcaseCaptionText strong, .showcaseCaptionText span, .planLabel, .planPrice, .planFit, .renewalDescription, .pageShell, .heroTitle, .heroDescription, .sectionDescription {
  transition:
    opacity var(--switch-duration) ease,
    transform var(--switch-duration) var(--switch-ease),
    color var(--switch-duration) ease,
    background-color var(--switch-duration) ease,
    border-color var(--switch-duration) ease,
    box-shadow var(--switch-duration) ease,
    filter var(--switch-duration) ease;
}
.pageShell.isSwitching {
  opacity: 0;
  transform: translate3d(0, 0px, 0) scale(.998);
  filter: blur(5px);
  pointer-events: none;
}
#showcaseScrollerTop > .showcaseCard,
#showcaseScrollerBottom > .showcaseCard,
#packageGrid > .pricingCard,
#renewalGrid > .renewalCard { animation: premiumFadeUp 640ms var(--enter-ease) both; }

.showcaseCard:hover,
.pricingCard:hover,
.renewalCard:hover,
.serviceCard:hover,
.processCard:hover,
.contactForm:hover,
.faqItem:hover { transform: translateY(-4px); z-index: 4;}

/* language switcher stabilization */
.langSwitcher {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  width: 176px;
  min-width: 176px;
  height: 46px;
  padding: var(--lang-pad);
  gap: 0;
  border-radius: 999px;
  isolation: isolate;
  overflow: hidden;
  --lang-index: 0;
}
.langPill {
  position: absolute;
  top: var(--lang-pad);
  left: var(--lang-pad);
  width: calc((100% - (var(--lang-pad) * 2)) / 3);
  height: calc(100% - (var(--lang-pad) * 2));
  border-radius: 999px;
  background: #0f1b34;
  box-shadow: var(--lang-pill-shadow);
  transform: translateX(calc(var(--lang-index) * 100%));
  transition: transform 560ms cubic-bezier(.2,.8,.2,1), width var(--switch-duration) ease, height var(--switch-duration) ease, box-shadow var(--switch-duration) ease;
  will-change: transform;
}
.langBtn {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  min-height: 34px;
  height: 100%;
  padding: 0;
  border-radius: 999px;
  font-size: .95rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}
.langBtn[data-lang="en"],
.langBtn[data-lang="th"],
.langBtn[data-lang="zh"] { font-size: .95rem; }
.langBtn.isActive { color: #fff; background: transparent; }
body[data-lang="th"] .langBtn,
body[data-lang="zh"] .langBtn,
body[data-lang="en"] .langBtn { font-family: Inter, "Noto Sans Thai", "Noto Sans SC", system-ui, sans-serif; }

#showcaseScrollerTop,
#showcaseScrollerBottom,
.showcaseViewport,
.showcaseScroller,
.showcaseCard,
.showcaseMock,
.heroMockSurface,
.cardLarge,
.cardPhone,
.cardSmall {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cardLarge {
  animation: premiumFadeScale 860ms var(--enter-ease) 150ms both, floatBrowser 6.5s ease-in-out 1010ms infinite;
}
.cardPhone {
  animation: premiumFadeScale 900ms var(--enter-ease) 230ms both, floatPhone 7.8s ease-in-out 1130ms infinite;
}
.cardSmall {
  animation: premiumFadeScale 940ms var(--enter-ease) 310ms both, floatInfo 4.8s ease-in-out 1250ms infinite;
}
.heroMockText {
  animation: premiumFadeUp 680ms var(--enter-ease) 220ms both, pulseLineA 5.2s ease-in-out 1020ms infinite;
}
.heroMockLine {
  animation: premiumFadeUp 680ms var(--enter-ease) 280ms both, pulseLineB 3.1s ease-in-out 1080ms infinite;
}

@media (max-width: 767px) {
  .langSwitcher { width: 164px; min-width: 164px; height: 42px; }
  .langBtn,
  .langBtn[data-lang="en"],
  .langBtn[data-lang="th"],
  .langBtn[data-lang="zh"] { font-size: .92rem; }
}
@media (max-width: 560px) {
  .langSwitcher { width: 156px; min-width: 156px; height: 40px; }
  .langBtn,
  .langBtn[data-lang="en"],
  .langBtn[data-lang="th"],
  .langBtn[data-lang="zh"] {
    font-size: .84rem;
    top: 0;
    line-height: 1;
    display: grid;
    place-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .siteHeader,
  .heroGrid > *,
  .sectionHead,
  .sectionHeadSplit,
  .compactHead,
  .heroTrust li,
  .trustItem,
  .showcaseCard,
  .pricingCard,
  .renewalCard,
  .serviceCard,
  .processCard,
  .contactForm,
  .faqItem,
  .footerInner,
  #showcaseScrollerTop > .showcaseCard,
  #showcaseScrollerBottom > .showcaseCard,
  #packageGrid > .pricingCard,
  #renewalGrid > .renewalCard,
  .cardLarge,
  .cardPhone,
  .cardSmall,
  .heroMockText,
  .heroMockLine { animation: none !important; }

  .siteHeader, .brand, .brandMark, .brandText, .mainNav a, .footerLinks a, .mobileMenu a, .langSwitcher, .langPill, .langBtn, .btn, .actionLink, .sliderBtn, .menuBtn, .showcaseCard, .pricingCard, .renewalCard, .serviceCard, .processCard, .contactForm, .faqItem, .contactForm input, .contactForm textarea, .contactForm select, .showcaseOpen, .showcaseCaptionText strong, .showcaseCaptionText span, .planLabel, .planPrice, .planFit, .renewalDescription, .pageShell, .heroTitle, .heroDescription, .sectionDescription {
    transition: none !important;
  }

}
@keyframes premiumFadeUp {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.988); filter: blur(10px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
@keyframes premiumFadeDown {
  from { opacity: 0; transform: translate3d(0, -12px, 0); filter: blur(8px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes premiumFadeScale {
  from { opacity: 0; transform: translate3d(0, 20px, 0) scale(.94); filter: blur(12px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
@keyframes pageSoftReveal {
  0% { opacity: .92; }
  100% { opacity: 0; visibility: hidden; }
}


.showcaseMockImage {
  animation: premiumImageIn 900ms var(--enter-ease) both;
}

@keyframes premiumImageIn {
  from { opacity: 0; transform: scale(1.04); filter: blur(10px); }
  to { opacity: 1; transform: scale(1.01); filter: blur(0); }
}
/* =========================================================
   WebsiteDD / LINGRADO premium motion + showcase patch
   Append this block at the END of styles.css
   patch 3.0
   ========================================================= */

/* ---------- motion tokens ---------- */
:root {
  --enter-ease: cubic-bezier(.22, .84, .24, 1);
  --enter-duration: 760ms;
  --enter-duration-fast: 520ms;
  --switch-duration: 320ms;
  --switch-ease: cubic-bezier(.2, .8, .2, 1);

  --showcase-gap: 20px;
  --showcase-card-min: 260px;
  --showcase-card-max: 360px;

  --section-glow-a: rgba(233, 213, 255, 0.24);
  --section-glow-b: rgba(217, 242, 255, 0.28);
  --section-glow-c: rgba(248, 215, 232, 0.14);
}

/* ---------- global smoothness ---------- */
html,
body {
  overflow-x: clip;
}

body {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ---------- premium mid-page gradient ---------- */
main,
.pageShell {
  position: relative;
}

/* ---------- page fade overlay on hard load ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(247, 247, 250, .82), rgba(247, 248, 251, .24));
  animation: pageSoftReveal var(--enter-duration) var(--enter-ease) forwards;
}

/* ---------- smooth switching state ---------- */
.pageShell {
  transform-origin: 50% 0;
  transition:
    opacity var(--switch-duration) ease,
    transform var(--switch-duration) var(--switch-ease),
    filter var(--switch-duration) ease;
}

.pageShell.isSwitching {
  opacity: 0;
  transform: translate3d(0, 0px, 0) scale(.998);
  filter: blur(5px);
  pointer-events: none;
}

/* ---------- shared enter animation ---------- */
.siteHeader,
.heroGrid > *,
.sectionHead,
.sectionHeadSplit,
.compactHead,
.heroTrust li,
.trustItem,
.showcaseCard,
.pricingCard,
.renewalCard,
.serviceCard,
.processCard,
.contactForm,
.faqItem,
.footerInner {
  animation: premiumFadeUp var(--enter-duration) var(--enter-ease) both;
  will-change: transform, opacity, filter;
}

.siteHeader {
  animation-name: premiumFadeDown;
  animation-duration: var(--enter-duration-fast);
}

.heroGrid > *:nth-child(1) { animation-delay: 70ms; }
.heroGrid > *:nth-child(2) { animation-delay: 150ms; }

.showcaseCard:nth-child(1),
.pricingCard:nth-child(1),
.renewalCard:nth-child(1),
.serviceCard:nth-child(1),
.processCard:nth-child(1),
.faqItem:nth-child(1) { animation-delay: 40ms; }

.showcaseCard:nth-child(2),
.pricingCard:nth-child(2),
.renewalCard:nth-child(2),
.serviceCard:nth-child(2),
.processCard:nth-child(2),
.faqItem:nth-child(2) { animation-delay: 100ms; }

.showcaseCard:nth-child(3),
.pricingCard:nth-child(3),
.renewalCard:nth-child(3),
.serviceCard:nth-child(3),
.processCard:nth-child(3),
.faqItem:nth-child(3) { animation-delay: 160ms; }

.showcaseCard:nth-child(4),
.pricingCard:nth-child(4),
.renewalCard:nth-child(4),
.serviceCard:nth-child(4),
.processCard:nth-child(4),
.faqItem:nth-child(4) { animation-delay: 220ms; }

.showcaseCard:nth-child(n + 5),
.pricingCard:nth-child(n + 5),
.renewalCard:nth-child(n + 5),
.serviceCard:nth-child(n + 5),
.processCard:nth-child(n + 5),
.faqItem:nth-child(n + 5) { animation-delay: 280ms; }

/* ---------- shared transition polish ---------- */
.siteHeader,
.brand,
.brandMark,
.brandText,
.mainNav a,
.footerLinks a,
.mobileMenu a,
.langSwitcher,
.langPill,
.langBtn,
.btn,
.actionLink,
.menuBtn,
.sliderBtn,
.showcaseCard,
.showcaseMock,
.showcaseMockImage,
.showcaseOpen,
.pricingCard,
.renewalCard,
.serviceCard,
.processCard,
.contactForm,
.faqItem,
.contactForm input,
.contactForm textarea,
.contactForm select,
.heroTitle,
.heroDescription,
.sectionDescription,
.planLabel,
.planPrice,
.planFit,
.renewalDescription {
  transition:
    opacity var(--switch-duration) ease,
    transform var(--switch-duration) var(--switch-ease),
    color var(--switch-duration) ease,
    background-color var(--switch-duration) ease,
    border-color var(--switch-duration) ease,
    box-shadow var(--switch-duration) ease,
    filter var(--switch-duration) ease;
}

/* =========================================================
   1) SHOWCASE SECTION — agency style
   ========================================================= */

.showcaseRows {
  display: grid;
  gap: 18px;
  margin-top: 34px;
}

.showcaseRail,
.showcaseViewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 30px;
}

.showcaseRail::before,
.showcaseRail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 92px;
  z-index: 3;
  pointer-events: none;
}

.showcaseRail::before {
  left: 0;
  background: linear-gradient(90deg, #f6f7f9 0%, rgba(246, 247, 249, 0) 100%);
}

.showcaseRail::after {
  right: 0;
  background: linear-gradient(270deg, #f6f7f9 0%, rgba(246, 247, 249, 0) 100%);
}

.showcaseScroller,
#showcaseScrollerTop,
#showcaseScrollerBottom {
  display: flex;
  gap: var(--showcase-gap);
  width: max-content;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.showcaseScroller {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 4px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.showcaseScroller::-webkit-scrollbar {
  display: none;
}

/* ---------- 3:2 lock for every screen ---------- */
.showcaseCard {
  flex: 0 0 clamp(var(--showcase-card-min), 26vw, var(--showcase-card-max));
  flex-basis: 28vw;
  aspect-ratio: 3 / 2;
  min-height: 0;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  border-radius: 28px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .84);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 34px rgba(15, 23, 42, .07);
}

.showcaseCard:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 50px rgba(15, 23, 42, .11);
  z-index: 4;
}

.showcaseVisual {
  height: 100%;
  padding: 8px;
}

.showcaseMock {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  min-height: 0;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .76);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, .52)),
    radial-gradient(circle at 20% 16%, rgba(248, 215, 232, .70), transparent 24%),
    radial-gradient(circle at 78% 28%, rgba(233, 213, 255, .66), transparent 26%),
    radial-gradient(circle at 62% 78%, rgba(217, 242, 255, .72), transparent 24%);
}

.showcaseMock::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 22%, rgba(15,23,42,.04) 100%);
  pointer-events: none;
}

.showcaseMockImage {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.01);
  animation: premiumImageIn 900ms var(--enter-ease) both;
}

.showcaseTopBar,
.showcaseCaption {
  position: absolute;
  z-index: 2;
}

.showcaseTopBar {
  top: 18px;
  left: 18px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.codeChip,
.packChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  backdrop-filter: blur(8px);
}

.codeChip {
  background: #0f1b34;
  color: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .18);
}

.packChip {
  background: rgba(255, 255, 255, .84);
  color: var(--text-soft);
  border: 1px solid rgba(255, 255, 255, .92);
}

.showcaseCaption {
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.showcaseCaptionText {
  display: grid;
  gap: 4px;
  max-width: calc(100% - 58px);
}

.showcaseCaptionText strong {
  font-size: 1.02rem;
  line-height: 1.14;
  letter-spacing: -.02em;
}

.showcaseCaptionText span {
  color: rgba(17, 24, 39, .72);
  font-size: .86rem;
  line-height: 1.45;
}

.showcaseOpen {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(255, 255, 255, .96);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.showcaseOpen:hover {
  transform: translateY(-2px) scale(1.52);
  background: #fff;
}

.showcaseMetaHint {
  color: var(--text-soft);
  font-size: .94rem;
  max-width: 28ch;
  text-align: right;
}

.sliderActions {
  display: none !important;
}

/* =========================================================
   2) stronger mid-page section glow
   ========================================================= */

#showcase,
#packages,
.processSection,
#faq,
#contact {
  position: relative;
  isolation: isolate;
}

#showcase::before,
#packages::before,
.processSection::before,
#faq::before,
#contact::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  width: min(1180px, 94vw);
  height: 240px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 16% 22%, rgba(233, 213, 255, .18), transparent 34%),
    radial-gradient(circle at 84% 10%, rgba(217, 242, 255, .22), transparent 32%);
  filter: blur(12px);
}

/* =========================================================
   3) premium hover / card balance
   ========================================================= */

.pricingCard,
.renewalCard,
.serviceCard,
.processCard,
.contactForm,
.faqItem {
  box-shadow: 0 12px 34px rgba(15, 23, 42, .06);
}

.pricingCard:hover,
.renewalCard:hover,
.serviceCard:hover,
.processCard:hover,
.contactForm:hover,
.faqItem:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .09);
}

/* =========================================================
   language switcher stabilization
   ========================================================= */

.langSwitcher {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  width: 176px;
  min-width: 176px;
  height: 46px;
  padding: 6px;
  gap: 0;
  border-radius: 999px;
  isolation: isolate;
  overflow: hidden;
  --lang-index: 0;
}

.langPill {
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc((100% - 12px) / 3);
  height: calc(100% - 12px);
  border-radius: 999px;
  background: #0f1b34;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
  transform: translateX(calc(var(--lang-index) * 100%));
  transition:
    transform 560ms cubic-bezier(.2, .8, .2, 1),
    width var(--switch-duration) ease,
    height var(--switch-duration) ease;
  will-change: transform;
}

.langBtn {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  height: 100%;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  line-height: 1;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}

.langBtn[data-lang="th"],
.langBtn[data-lang="en"],
.langBtn[data-lang="zh"] {
  font-size: .95rem;
}

.langBtn.isActive {
  color: #fff;
  background: transparent;
}

/* =========================================================
   mobile / tablet
   ========================================================= */

@media (max-width: 1180px) {
  .showcaseCard {
    flex-basis: 68vw;
  }
}

@media (max-width: 920px) {
  .showcaseMetaHint {
    text-align: left;
  }
  .showcaseCard {
    flex-basis: 68vw;
  }
  .showcaseRail::before,
  .showcaseRail::after {
    width: 56px;
  }
}

@media (max-width: 767px) {
  .pageShell::before {
    top: 30%;
    height: 320px;
  }

  .langSwitcher {
    width: 164px;
    min-width: 164px;
    height: 42px;
  }

  .langBtn,
  .langBtn[data-lang="th"],
  .langBtn[data-lang="en"],
  .langBtn[data-lang="zh"] {
    font-size: .92rem;
  }

  .showcaseRows {
    gap: 14px;
    margin-top: 26px;
  }

  .showcaseRail::before,
  .showcaseRail::after {
    width: 40px;
  }

  .showcaseCard {
    flex-basis: 58vw;
  }

  .showcaseCaptionText strong {
    font-size: .96rem;
  }

  .showcaseCaptionText span {
    font-size: .84rem;
  }
}

@media (max-width: 560px) {
  .langSwitcher {
    width: 156px;
    min-width: 156px;
    height: 40px;
  }

  .langBtn,
  .langBtn[data-lang="th"],
  .langBtn[data-lang="en"],
  .langBtn[data-lang="zh"] {
    font-size: .84rem;
  }

  .showcaseCard {
    flex-basis: 84vw;
  }

  .showcaseVisual {
    padding: 8px;
  }

  .showcaseTopBar {
    top: 14px;
    left: 14px;
  }

  .showcaseCaption {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .codeChip,
  .packChip {
    height: 30px;
    padding: 0 10px;
    font-size: .76rem;
  }

  .showcaseOpen {
    width: 40px;
    height: 40px;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body::after,
  .siteHeader,
  .heroGrid > *,
  .sectionHead,
  .sectionHeadSplit,
  .compactHead,
  .heroTrust li,
  .trustItem,
  .showcaseCard,
  .pricingCard,
  .renewalCard,
  .serviceCard,
  .processCard,
  .contactForm,
  .faqItem,
  .footerInner {
    animation: none !important;
  }

  .pageShell,
  .pageShell.isSwitching,
  .langPill,
  .langBtn,
  .showcaseCard,
  .showcaseOpen,
  .pricingCard,
  .renewalCard,
  .serviceCard,
  .processCard,
  .contactForm,
  .faqItem {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }

  .pageShell.isSwitching {
    opacity: 1 !important;
  }
}

/* ---------- keyframes ---------- */
@keyframes premiumFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.788);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes premiumFadeDown {
  from {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes premiumImageIn {
  from {
    opacity: 0;
    transform: scale(1.04);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: scale(1.01);
    filter: blur(0);
  }
}

@keyframes pageSoftReveal {
  0% {
    opacity: .92;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* ===== 2026 premium interaction patch ===== */

.pageShell.isSwitching {
  opacity: 0;
  transform: translate3d(0, 0px, 0);
  filter: blur(2px);
  pointer-events: none;
}

.showcaseCard {
  transition:
    transform 320ms cubic-bezier(.22,.84,.24,1),
    box-shadow 320ms ease,
    border-color 320ms ease,
    opacity 320ms ease;
}
.showcaseCard:hover {
  transform: translateY(-10px) scale(1.028);
  box-shadow: 0 28px 54px rgba(15, 23, 42, 0.14);
  z-index: 4;
}
.showcaseScroller.isPaused .showcaseCard:not(:hover) {
  opacity: .92;
}
.showcaseMockImage {
  transition: transform 420ms cubic-bezier(.22,.84,.24,1), filter 420ms ease;
}
.showcaseCard:hover .showcaseMockImage {
  transform: scale(1.04);
  /* filter: saturate(1.02); */
}

.planBadge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 1rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f7cff, #7aa2ff);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.packageDeck {
  display: grid;
  gap: 20px;
}
.packageControls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.packageArrow {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  border: 1px solid rgba(166, 174, 194, 0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(237,241,248,.82));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 14px 34px rgba(15,23,42,.10);
  color: rgba(38, 46, 70, .82);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease, color 220ms ease, opacity 220ms ease;
}
.packageArrow:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 18px 38px rgba(15,23,42,.1);
  color: #0f1b34;
}
.packageArrow:disabled {
  opacity: .38;
  cursor: default;
}
.packageDots {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 18px;
}
.packageDot {
  width: 44px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(168, 177, 195, .28);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.75);
  cursor: pointer;
  transition: width 260ms ease, background-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}
.packageDot.isActive {
  width: 52px;
  background: linear-gradient(90deg, rgba(66, 113, 214, 0.88), rgba(50, 118, 245, 0.96));
  box-shadow: 0 8px 18px rgba(6, 67, 158, 0.14);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.65);
  transform: translateY(-1px);
}
.packageViewport {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 4px 14px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.packageViewport::-webkit-scrollbar {
  display: none;
}
.pricingGridFive {
  display: grid !important;
  grid-auto-flow: column;
  grid-template-columns: none !important;
  grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px;
  align-items: stretch;
  width: max-content;
}
.pricingCard {
  min-height: 100%;
  max-width: 420px;
}
.featuredPlan {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,247,255,.92)),
    radial-gradient(circle at top right, rgba(217,242,255,.26), transparent 42%);
  border-color: rgba(213, 222, 248, .96);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 24px 52px rgba(85, 96, 140, 0.10);
}
.featuredPlan .planLabel {
  color: #3c4f99;
}

.footerAside {
  display: grid;
  justify-items: end;
  gap: 18px;
}
.footerSocials {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}
.socialLink-facebook,
.socialLink-line,
.socialLink-email,
.socialLink-phone
 {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(37, 46, 70, .86);
  font-size: 32px;
  /* background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(242,245,250,.84));
  border: 1px solid rgba(180, 188, 206, .24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 12px 28px rgba(15,23,42,.06); */
  transition: transform 220ms ease, box-shadow 220ms ease, color 220ms ease, border-color 220ms ease;
}
.socialLink-facebook:hover {
  transform: translateY(-2px);
  border-radius: 999px;
  color: #f0f0f0;
  background: linear-gradient(180deg, rgba(18, 85, 187, 0.88), rgba(24, 66, 204, 0.84));
  font-size: 32px;
  border-color: rgba(157, 167, 197, .42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 16px 34px rgba(15,23,42,.14);
}
.socialLink-line:hover {
  transform: translateY(-2px);
  color: rgba(28, 163, 15, 0.88);
  font-size: 42px;
  border-color: rgba(157, 167, 197, .42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 16px 34px rgba(15,23,42,.14);
}
.socialLink-email:hover {
  transform: translateY(-2px);
  color: #973737;
  font-size: 38px;
  background: rgba(241, 241, 231, 0.12);
  border-color: rgba(157, 167, 197, .42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 16px 34px rgba(15,23,42,.14);
}
.socialLink-phone:hover {
  transform: translateY(-2px);
  color: rgba(253, 253, 250, 0.98);
  background: linear-gradient(180deg, rgba(73, 202, 61, 0.88), rgba(53, 160, 31, 0.84));
  font-size: 36px;
  border-color: rgba(157, 167, 197, .42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 16px 34px rgba(15,23,42,.14);
}

.siteFooter {
  padding-top: 10px;
}
.footerInner {
  padding-top: 34px;
  gap: 32px;
}
.footerBrand + p {
  margin-top: 18px;
}

.sectionHead h2,
.compactHead h2,
.heroTitle {
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.showcaseRail,
.packageViewport,
.renewalCard,
.serviceCard,
.processCard,
.contactForm,
.faqItem,
.pricingCard {
  backdrop-filter: blur(18px);
}

@media (max-width: 1180px) {
  .pricingGridFive {
    grid-auto-columns: calc((100% - 20px) / 2);
  }
}

@media (max-width: 767px) {
  .packageControls {
    gap: 12px;
  }
  .packageArrow {
    width: 52px;
    height: 52px;
    border-radius: 18px;
  }
  .packageDot {
    width: 28px;
  }
  .packageDot.isActive {
    width: 40px;
  }
  .pricingGridFive {
    grid-auto-columns: minmax(286px, 84vw);
  }
  .footerAside {
    justify-items: start;
  }
  .footerSocials {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pageShell,
  .pageShell.isInitialReveal,
  .pageShell.isSwitching,
  .showcaseCard,
  .packageArrow,
  .packageDot,
  .socialLink {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}


/* ===== package practical sizing patch ===== */
.packageViewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 18px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.packageViewport::-webkit-scrollbar {
  display: none;
}

.pricingGridFive {
  --package-gap: 20px;
  --package-card-w: calc((100% - (var(--package-gap) * 2)) / 3);
  display: grid !important;
  grid-auto-flow: column;
  grid-template-columns: none !important;
  grid-auto-columns: var(--package-card-w);
  gap: var(--package-gap);
  width: max-content;
  min-width: 100%;
  align-items: stretch;
  padding-right: 2px;
}

.pricingCard {
  width: var(--package-card-w);
  min-width: 0;
  max-width: none;
  scroll-snap-align: start;
}

.planFit {
  min-height: 0;
}

.packageControls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto 22px;
}

.packageArrow {
  flex: 0 0 auto;
}

.packageDots {
  justify-content: center;
}

@media (max-width: 1080px) {
  .pricingGridFive {
    --package-gap: 18px;
  }
}

@media (max-width: 700px) {
  .pricingGridFive {
    --package-gap: 16px;
  }

  .pricingCard {
    border-radius: 24px;
  }
}
.siteHeader {
  position: sticky; top: 0; z-index: 100; backdrop-filter: blur(18px);
  background: rgba(246, 247, 249, 0.72); border-bottom: 1px solid rgba(255,255,255,.5);
}