:root{
  --navy:#0B1F3B; --navy-deep:#071530; --navy-soft:#14294D;
  --blue:#00966D; --teal:#047857; --ink:#1F2937; --mist:#FFFFFF;
  --logo-dark:#1C232B; --gold:#E5C87E; --burgundy:#7A2048;
}
html{scroll-behavior:smooth; font-size:17px;}
body{background:#fff; color:var(--ink); line-height:1.65;}
[x-cloak]{display:none !important;}
::selection{background:var(--teal); color:#fff;}
.en-lang{font-family:'Inter',sans-serif;}
.th-lang{font-family:'IBM Plex Sans Thai',sans-serif;}
.zh-lang{font-family:'Noto Sans SC',sans-serif;}
h1,h2,h3,.font-display{font-weight:800;}
p{ font-size:1rem; }
.eyebrow{font-family:'IBM Plex Mono',monospace; letter-spacing:.13em; font-size:.8125rem;}

.brand-texture{
  background:
    radial-gradient(ellipse 70% 60% at 15% 20%, rgba(0,150,109,0.05), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 15%, rgba(4,120,87,0.05), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
}
.brand-texture::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

.card{ background:#FFFFFF; border:1px solid rgba(11,31,59,0.08); box-shadow:0 1px 2px rgba(11,31,59,0.04); border-radius:1rem; }
.card-hover{ transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease; }
.card-hover:hover{ border-color: rgba(47,111,237,0.35); box-shadow: 0 22px 44px -22px rgba(11,31,59,0.22); transform: translateY(-3px); }

.btn-blue{ background:var(--blue); color:#fff; transition: background .2s ease, transform .2s ease; }
.btn-blue:hover{ background:#255ecb; transform: translateY(-1px); }
.btn-outline{ border:1.5px solid var(--navy); color:var(--navy); transition: background .2s ease, color .2s ease; }
.btn-outline:hover{ background:var(--navy); color:#fff; }
.btn-teal{ background:var(--teal); color:#fff; transition: background .2s ease, transform .2s ease; }
.btn-teal:hover{ background:#0f9c8c; transform: translateY(-1px); }

/* badge — same tone as the logo background, gold text */
.badge-logo{ background:var(--logo-dark); color:var(--gold); border:1px solid rgba(229,200,126,0.25); }

.chip{ transition: all .2s ease; }
.chip.active{ background:var(--blue); color:#fff; border-color:var(--blue); }
.focus-ring:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

.nav-shell{ transition: box-shadow .3s ease, background-color .3s ease; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{scroll-behavior:auto;}
}

.img-frame{ background:linear-gradient(135deg, rgba(47,111,237,0.06), rgba(20,184,166,0.06)); }
.dot{ width:8px; height:8px; border-radius:999px; background:rgba(11,31,59,0.18); transition:all .2s ease; }
.dot.active{ background:var(--blue); width:22px; border-radius:999px; }

@keyframes rise{ 0%{opacity:0; transform:translateY(14px);} 100%{opacity:1; transform:translateY(0);} }
.animate-rise{ animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }

/* section rhythm — more breathing room across the elevated site */
.section-pad{ padding-top:6rem; padding-bottom:6rem; }
@media (max-width:640px){ .section-pad{ padding-top:4rem; padding-bottom:4rem; } }

/* never render text smaller than this anywhere meaningful */
.min-readable{ font-size:max(0.9375rem, 15px); }

/* burgundy signature accent — used sparingly for highlighted statements */
.burgundy-accent{ border-left:3px solid var(--burgundy); padding-left:1.25rem; }
.text-burgundy{ color:var(--burgundy); }