:root{--blue:#00a8e8;--navy:#ffffff;--orange:#ff9a18;--cyan:#0284c7;--ink:#18212b;--muted:#64748b;--paper:#f8fafc}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,"Noto Sans Thai",ui-sans-serif,system-ui,sans-serif}.site-header{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid rgba(15,23,42,.08);background:rgba(255,255,255,.88);backdrop-filter:blur(18px)}.brand-wrap{filter:drop-shadow(0 8px 20px rgba(0,168,232,.18))}.nav-link{position:relative;transition:.3s}.nav-link:after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:linear-gradient(90deg,var(--blue),var(--orange));transition:.3s}.nav-link{color:#475569}.nav-link:hover{color:#0f172a}.nav-link:hover:after{right:0}.btn-animated{position:relative;overflow:hidden;border-radius:14px;padding:.78rem 1.1rem;font-size:.875rem;font-weight:800;isolation:isolate;transition:transform .25s,box-shadow .25s}.btn-animated:hover{transform:translateY(-2px)}.btn-animated:before{content:"";position:absolute;inset:-2px;z-index:-2;background:conic-gradient(from var(--angle),#00a8e8,#ff9a18,#fff,#00a8e8);animation:spinBorder 3s linear infinite}.btn-animated:after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:12px;background:#ffffff}.btn-primary:after{background:linear-gradient(135deg,#008fd1,#ff8d16)}.btn-primary{box-shadow:0 10px 35px rgba(0,168,232,.22)}.btn-ghost{color:#0f172a}.menu-btn{width:44px;height:44px;border:1px solid rgba(15,23,42,.12);border-radius:14px;display:grid;place-content:center;gap:4px}.menu-btn span{display:block;width:20px;height:2px;background:#0f172a}.mobile-menu{display:none;padding:0 1rem 1rem;background:rgba(255,255,255,.98)}.mobile-menu.open{display:grid;gap:.8rem}.mobile-menu>a{padding:.8rem 0;border-bottom:1px solid rgba(15,23,42,.08);font-weight:700}.hero-2026{background:radial-gradient(circle at 76% 32%,rgba(0,168,232,.13),transparent 34%),radial-gradient(circle at 12% 68%,rgba(255,154,24,.11),transparent 28%),linear-gradient(180deg,#ffffff 0%,#f3f8fc 100%)}.hero-mesh{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(15,23,42,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.05) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,black,transparent 85%)}.orb{position:absolute;border-radius:999px;filter:blur(2px);opacity:.55;animation:floatOrb 8s ease-in-out infinite}.orb-a{width:280px;height:280px;background:radial-gradient(circle,#0ea5e9,transparent 68%);top:120px;left:-80px}.orb-b{width:220px;height:220px;background:radial-gradient(circle,#fb923c,transparent 68%);right:-60px;bottom:80px;animation-delay:-3s}.ring{position:absolute;border:1px solid rgba(2,132,199,.18);border-radius:50%;animation:rotateSlow 20s linear infinite}.ring-a{width:520px;height:520px;right:7%;top:18%}.eyebrow,.dark-eyebrow{font-size:.76rem;font-weight:900;letter-spacing:.22em;color:#0284c7}.dark-eyebrow{color:#0284c7}.gradient-text{background:linear-gradient(90deg,#67e8f9,#fbbf24 48%,#fb923c);-webkit-background-clip:text;color:transparent}.cta-neon,.cta-minimal,.cta-white{display:inline-flex;align-items:center;gap:.7rem;border-radius:16px;font-weight:900;transition:.25s}.cta-neon{padding:1rem 1.3rem;color:white;background:linear-gradient(135deg,#009ee5,#ff8f1c);box-shadow:0 14px 45px rgba(0,168,232,.25);position:relative;overflow:hidden}.cta-neon:after{content:"";position:absolute;top:-150%;left:-50%;width:42%;height:400%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:shine 3.6s infinite}.cta-minimal{padding:1rem 1.3rem;border:1px solid rgba(15,23,42,.12);color:#334155;background:rgba(255,255,255,.72)}.cta-neon:hover,.cta-minimal:hover,.cta-white:hover{transform:translateY(-3px)}.metric-card{padding:1rem;border:1px solid rgba(15,23,42,.08);border-radius:18px;background:rgba(255,255,255,.84)}.metric-card strong{display:block;font-size:1.25rem;color:#0f172a}.metric-card span{font-size:.72rem;color:#64748b}.media-frame{position:relative;overflow:hidden;border:1px solid rgba(15,23,42,.1);border-radius:34px;padding:9px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,246,255,.9));box-shadow:0 40px 100px rgba(15,23,42,.16)}.media-frame img{border-radius:26px}.tilted-frame{transform:perspective(1200px) rotateY(-6deg) rotateX(3deg)}.media-shine{position:absolute;inset:-50%;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.16),transparent 60%);animation:frameShine 5s infinite}.floating-chip{position:absolute;padding:.65rem .9rem;border-radius:999px;background:rgba(255,255,255,.94);border:1px solid rgba(2,132,199,.18);font-size:.7rem;font-weight:900;letter-spacing:.08em;box-shadow:0 12px 35px rgba(15,23,42,.12)}.chip-one{left:-20px;bottom:35px}.chip-two{right:-12px;top:30px}.section-shell{position:relative}.section-heading{max-width:760px}.section-heading span{font-size:.75rem;font-weight:900;letter-spacing:.24em;color:#0284c7} .section-heading h2,.display-dark{font-size:clamp(2rem,4vw,3.7rem);font-weight:950;line-height:1.1;letter-spacing:-.035em;margin-top:.8rem}.section-heading p{margin-top:1rem;color:#64748b;line-height:1.9}.glass-card{border:1px solid rgba(15,23,42,.08);border-radius:32px;background:linear-gradient(180deg,#ffffff,#f8fbff);box-shadow:0 30px 80px rgba(15,23,42,.09)}.glass-card h3,.feature-card h3,.pillar h3{font-size:1.2rem;font-weight:900}.glass-card p,.feature-card p,.pillar p{margin-top:.65rem;line-height:1.8;color:#64748b}.feature-card{padding:1.5rem;border-left:3px solid transparent;border-image:linear-gradient(#0ea5e9,#fb923c) 1;background:rgba(255,255,255,.84);border-radius:0 22px 22px 0}.feature-card span{font-size:.7rem;color:#0284c7;font-weight:900}.light-card{padding:1.25rem;border:1px solid #e2e8f0;border-radius:20px;background:white;box-shadow:0 12px 36px rgba(15,23,42,.07)}.light-card b{display:block;font-size:1.05rem}.light-card span{display:block;margin-top:.35rem;color:#64748b;font-size:.9rem}.image-stack-wrap{position:relative;padding:2rem}.image-stack-main{border-radius:28px;box-shadow:0 30px 60px rgba(2,132,199,.18);transform:rotate(2deg)}.image-stack-wrap:before{content:"";position:absolute;inset:0 3rem 2rem 0;border-radius:28px;background:linear-gradient(135deg,#0ea5e9,#fb923c);transform:rotate(-3deg)}.stack-note{position:absolute;right:0;bottom:0;padding:1rem 1.2rem;border-radius:18px;background:#0f172a;color:#fff;font-weight:900;box-shadow:0 18px 40px rgba(15,23,42,.25)}.stack-note small{font-weight:600;color:#94a3b8}.pillar{padding:1.7rem;border:1px solid rgba(15,23,42,.08);border-radius:26px;background:linear-gradient(180deg,#ffffff,#f7fbff);transition:.3s}.pillar:hover{transform:translateY(-6px);border-color:rgba(2,132,199,.28);box-shadow:0 18px 45px rgba(15,23,42,.08)}.pillar-icon{display:grid;width:46px;height:46px;place-content:center;border-radius:15px;background:linear-gradient(135deg,rgba(14,165,233,.25),rgba(251,146,60,.18));margin-bottom:1rem;color:#0284c7}.cta-strip{position:relative;background:linear-gradient(100deg,#0284c7,#0f172a 55%,#ea580c)}.cta-line{position:absolute;inset:0;background:repeating-linear-gradient(120deg,transparent 0 28px,rgba(255,255,255,.06) 28px 29px);animation:lineMove 10s linear infinite}.cta-white{position:relative;padding:1rem 1.3rem;background:white;color:#0f172a}.timeline{border-left:1px solid #cbd5e1;padding-left:2rem}.timeline-item{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:0 0 2rem}.timeline-item i{display:grid;width:38px;height:38px;place-content:center;margin-left:-3.2rem;border-radius:50%;background:#0f172a;color:white;font-style:normal;font-weight:900;box-shadow:0 0 0 8px white}.timeline-item h3{font-size:1.1rem;font-weight:900}.timeline-item p{margin-top:.4rem;color:#64748b;line-height:1.7}.footer-2026{background:#f8fafc;border-top:1px solid #e2e8f0;color:#0f172a}.footer-2026 h3{font-weight:900;margin-bottom:1rem} .footer-2026 a{display:block;color:#64748b;margin:.55rem 0;font-size:.9rem}.reveal{opacity:0;transform:translateY(18px);transition:.75s cubic-bezier(.2,.8,.2,1)}.reveal.in-view{opacity:1;transform:none}.reveal-delay{transition-delay:.12s}@keyframes spinBorder{to{--angle:360deg}}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes shine{0%,65%{left:-60%}100%{left:150%}}@keyframes frameShine{0%,70%{transform:translateX(-35%)}100%{transform:translateX(35%)}}@keyframes floatOrb{50%{transform:translate3d(0,-18px,0) scale(1.04)}}@keyframes rotateSlow{to{transform:rotate(360deg)}}@keyframes lineMove{to{background-position:140px 0}}@media(max-width:1023px){.tilted-frame{transform:none}.ring-a{right:-240px}.hero-2026 .min-h-\[760px\]{min-height:auto}.site-header .sm\:flex{display:none}.mobile-menu .grid{display:grid}}@media(max-width:640px){.hero-2026 h1{font-size:2.65rem}.metric-card{padding:.8rem}.chip-one,.chip-two{display:none} .section-heading h2,.display-dark{font-size:2.35rem}.image-stack-wrap{padding:1rem 0}.image-stack-wrap:before{inset:0 1rem 1rem 0}.timeline{padding-left:1.35rem}}

/* Light theme overrides */
.site-header{box-shadow:0 8px 30px rgba(15,23,42,.05)}
.site-header .nav-link{color:#475569}
.menu-btn span{background:#0f172a}
.hero-2026 h1{color:#111827}
.hero-2026 p{color:#64748b}
.metric-card{background:rgba(255,255,255,.9);box-shadow:0 10px 30px rgba(15,23,42,.05)}
.floating-chip{color:#0f172a}
.section-shell{color:#0f172a}
.glass-card,.feature-card,.pillar{color:#0f172a}
.cta-minimal{color:#334155;border-color:#cbd5e1;background:rgba(255,255,255,.75)}
.footer-2026 p{color:#64748b!important}.footer-2026 .text-slate-400{color:#64748b!important}.footer-2026 .text-slate-500{color:#94a3b8!important}


/* Mobile off-canvas drawer only */
@media(max-width:1023px){
  .mobile-menu{display:grid!important;position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);height:100dvh;padding:88px 18px 24px;background:rgba(255,255,255,.985);box-shadow:-18px 0 50px rgba(15,23,42,.18);z-index:70;transform:translateX(105%);transition:transform .3s ease;overflow-y:auto;gap:.45rem}
  .mobile-menu.open{transform:translateX(0)}
  .mobile-menu>a{padding:.9rem .7rem;border-bottom:1px solid rgba(15,23,42,.08)}
  body.drawer-open{overflow:hidden}
}
@media(min-width:1024px){.mobile-menu{display:none!important}}

/* Responsive containment: allow grid content to shrink and keep table scrolling local. */
.content-grid > *, .subsections > *, .section-title > *, .footer-grid > *,
.hero-2026 .grid > *, .hero-2027 .grid > * { min-width: 0; }
.content-body, .rich-copy, .table-wrap { min-width: 0; max-width: 100%; }
.content-container h2, .content-container h3, .footer-copy-wide { overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  html { overflow-x: clip; }
  /* A closed drawer must not enlarge the page or remain keyboard-focusable. */
  #mobileMenu { visibility: hidden; transition: transform .3s ease, visibility .3s; }
  #mobileMenu.open { visibility: visible; }
}

/* Mobile navigation refresh; desktop and page content retain their existing styles. */
.drawer-backdrop { display: none; }
@media (max-width: 1023px) {
  .mobile-topbar { gap: 8px; }
  .mobile-brand { flex: 0 1 auto; min-width: 0; }
  .mobile-brand img { width: clamp(74px, 22vw, 122px); height: auto; }
  header .mobile-actions { display: flex !important; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
  header .mobile-actions > a { display: inline-flex !important; align-items: center; justify-content: center; padding: 10px 9px; font-size: 12px; line-height: 1.4; white-space: nowrap; border-radius: 12px; }
  header #menuBtn { display: grid; place-content: center; flex: 0 0 38px; width: 38px; height: 38px; }
  .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 80; border: 0; background: rgba(15,23,42,.38); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  body.drawer-open .drawer-backdrop { opacity: 1; visibility: visible; }
  #mobileMenu { z-index: 90; display: flex !important; flex-direction: column; gap: 8px; width: min(88vw, 340px); max-width: 100%; height: 100vh; height: 100dvh; padding: max(22px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom)); background: #fff; border-radius: 24px 0 0 24px; box-shadow: -12px 0 48px rgba(15,23,42,.16); overscroll-behavior: contain; }
  .drawer-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; margin-bottom: 16px; padding-bottom: 20px; border-bottom: 1px solid #e8eef5; }
  .drawer-heading img { width: 100px; height: auto; }
  .drawer-close { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #e2e8f0; border-radius: 12px; color: #475569; background: #f8fafc; font-size: 25px; line-height: 1; cursor: pointer; }
  .drawer-caption { margin: 0 12px 6px; font-size: 10px; font-weight: 800; letter-spacing: .16em; color: #94a3b8; }
  #mobileMenu > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; min-height: 48px; padding: 13px 15px; border: 1px solid #edf2f7; border-radius: 14px; background: #f8fafc; color: #334155; font-size: 14px; font-weight: 700; line-height: 1.4; transition: background .2s, border-color .2s, color .2s; }
  #mobileMenu > a::after { content: '›'; color: #94a3b8; font-size: 22px; font-weight: 400; line-height: 1; }
  #mobileMenu > a:hover, #mobileMenu > a:focus-visible { background: #eff8ff; border-color: #bae6fd; color: #0284c7; }
  #mobileMenu > .grid { flex: 0 0 auto; margin-top: auto; padding-top: 24px; gap: 10px; }
  #mobileMenu > .grid > a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 8px; font-size: 12px; line-height: 1.5; text-align: center; }
  #mobileMenu :focus-visible, header #menuBtn:focus-visible { outline: 2px solid #0284c7; outline-offset: 3px; }
}
@media (max-width: 359px) {
  header .mobile-actions { gap: 4px; }
  header .mobile-actions > a { padding: 10px 7px; font-size: 11px; }
  .mobile-topbar { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  #mobileMenu, .drawer-backdrop { transition: none !important; }
}

/* FAQ only: accessible accordion motion and shared responsive foundations. */
.faq-refresh .faq-layout { min-width: 0; }
.faq-refresh .faq-intro { min-width: 0; }
.faq-refresh .faq-intro .section-title { margin-bottom: 20px; }
.faq-refresh .faq-intro .rich-copy { margin-top: 20px; }
.faq-refresh .faq-list-new { display: grid; gap: 12px; min-width: 0; }
.faq-refresh .faq-entry { min-width: 0; overflow: hidden; }
.faq-refresh .faq-entry h3 { margin: 0; }
.faq-refresh .faq-toggle { width: 100%; display: flex; align-items: center; gap: 16px; padding: 23px 24px; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; font-size: 16px; font-weight: 750; line-height: 1.55; color: #1e293b; }
.faq-refresh .faq-question { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.faq-refresh .faq-symbol { position: relative; display: block; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; transition: background .3s, transform .3s; }
.faq-refresh .faq-symbol::before, .faq-refresh .faq-symbol::after { content: ''; position: absolute; top: 14px; left: 9px; width: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s; }
.faq-refresh .faq-symbol::after { transform: rotate(90deg); }
.faq-refresh .faq-entry.is-open .faq-symbol::after { transform: rotate(0); }
.faq-refresh .faq-panel { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .34s cubic-bezier(.2,.7,.2,1), opacity .24s ease, visibility .34s; }
.faq-refresh .faq-panel-inner { min-height: 0; overflow: hidden; }
.faq-refresh .faq-answer-copy { padding: 0 24px 24px; color: #64748b; font-size: 15px; line-height: 1.85; overflow-wrap: anywhere; }
.faq-refresh .faq-entry.is-open .faq-panel { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
.faq-refresh .faq-toggle:focus-visible { outline: 2px solid #0284c7; outline-offset: -4px; border-radius: 14px; }
@media (max-width: 640px) {
 .faq-refresh .faq-toggle { padding: 19px 17px; gap: 12px; font-size: 15px; }
 .faq-refresh .faq-answer-copy { padding: 0 17px 20px; font-size: 14px; }
 .faq-refresh .faq-intro .section-title h2 { font-size: clamp(1.75rem,7vw,2.4rem); }
}
@media (prefers-reduced-motion: reduce) {
 .faq-refresh .faq-panel, .faq-refresh .faq-symbol, .faq-refresh .faq-symbol::after { transition: none; }
}

/* 2026: blue accents, individual rounded cards and an editorial side heading. */
.faq-2026 { background: linear-gradient(145deg,#f1f8ff,#f8fafc) !important; }
.faq-2026 .faq-layout { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.4fr); gap: 48px; align-items: start; }
.faq-2026 .section-title { display: block; }
.faq-2026 .section-title span { margin-bottom: 24px; background: #e0f2fe; color: #0284c7; }
.faq-2026 .section-title h2 { font-size: clamp(1.9rem,3vw,2.75rem); line-height: 1.2; letter-spacing: -.035em; }
.faq-2026 .faq-entry { border: 1px solid #e1eaf3; border-radius: 20px; background: #fff; box-shadow: 0 5px 18px rgba(15,23,42,.025); transition: border-color .3s, box-shadow .3s; }
.faq-2026 .faq-entry:hover { border-color: #a5d7f3; }
.faq-2026 .faq-entry.is-open { border-color: #7dd3fc; box-shadow: 0 10px 28px rgba(2,132,199,.08); }
.faq-2026 .faq-symbol { background: #eff6ff; color: #0284c7; }
.faq-2026 .is-open .faq-symbol { background: #0284c7; color: #fff; }
.faq-2026 .is-open .faq-toggle { color: #0369a1; }
@media (max-width: 899px) { .faq-2026 .faq-layout { grid-template-columns: minmax(0,1fr); gap: 28px; } }

/* Footer copy uses the available container width instead of a narrow column. */
.footer-2026 > .grid { grid-template-columns: minmax(0, 1fr); }
.footer-2026 > .grid > div, .footer-2026 > .grid > nav { grid-column: 1 / -1; min-width: 0; }
.footer-2026 > .grid > div > p { max-width: none; width: 100%; }