:root{
  --color-white: #FFFFFF;
  --color-black-100: #F4F4F4;
  --color-black-300: #BEBEBE;
  --color-black-500: #868686;
  --color-black-700: #434343;
  --color-black-900: #1D1D1D;
  --color-primary-100: #FFF1E6;
  --color-primary-500: #ED6D00;
  --color-secondary-100: #FFFAE9;
  --color-secondary-500: #FABE00;
  --color-red-100: #FFEBEC;
  --color-red-500: #E60012;
  --color-button-start: #FF3F31;
  --color-button-mid: #FF5A37;
  --color-button-end: #FFCC50;
  --color-title-start: #FFD756;
  --color-title-end: #F6B738;
  --color-card-start: #FBFBFB;
  --color-card-end: #EFEFEF;

  --brand: var(--color-primary-500);
  --brand-soft: var(--color-primary-100);
  --accent: var(--color-secondary-500);
  --accent-soft: var(--color-secondary-100);
  --orange: var(--color-primary-500);
  --green: var(--color-secondary-500);

  --bg: var(--color-white);
  --bg-2: var(--color-secondary-100);
  --card: var(--color-white);
  --border: var(--color-black-100);

  --text: var(--color-black-900);
  --muted: var(--color-black-500);
  --text-secondary: var(--color-black-700);

  --primary: var(--color-primary-500);
  --primary-2: rgba(237,109,0,.16);
  --gradient-button: linear-gradient(270deg, var(--color-button-start) -8.25%, var(--color-button-mid) 15.4%, var(--color-button-end) 111.75%);
  --gradient-button-hover: linear-gradient(270deg, var(--color-button-end) -8.25%, var(--color-button-mid) 88.1%, var(--color-button-start) 111.75%);
  --gradient-title: linear-gradient(180deg, var(--color-title-start) 0%, var(--color-title-end) 100%);
  --gradient-card: linear-gradient(180deg, var(--color-card-start) 0%, var(--color-card-end) 100%);
  --gradient-border-width: 1.15px;
  --gradient-soft-surface: linear-gradient(291deg, #FFF5D7 4.61%, #FFFFFF 100.51%);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --radius: var(--radius-md);
  --shadow-card: 0 6px 15px 3px rgba(182,182,182,.25);
  --shadow: 0 10px 30px rgba(29,29,29,.1);

  --container: 1200px;
  --section-pad: 56px;
  --header-height: 72px;
  --field-height: 56px;
  --field-height-lg: 64px;
}

*{ box-sizing:border-box; }
.form-website-trap{
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
html{
  min-height: 100%;
  scroll-padding-top: calc(var(--header-height) + 32px);
}
body{
  min-height:100%;
  margin:0;
  background-color: var(--bg);
  color:var(--text);
  font-family: "Noto Sans TC", "Noto Sans CJK TC", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  line-height:1.65;
  position: relative;
  padding-top: var(--header-height);
}

body::before{
  content:none;
}

a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.95; }

.container{
  width: min(var(--container), calc(100% - 80px));
  margin: 0 auto;
}

.site-main{
  min-height: 60vh;
  position: relative;
  z-index: 1;
}

.section{
  padding: var(--section-pad) 0;
  position: relative;
  z-index: 1;
}

.h1{
  margin:0 0 14px 0;
  font-size: clamp(32px, 3.4vw, 52px);
  letter-spacing: 0;
  line-height: 1.15;
}

.h2{
  margin:0 0 18px 0;
  font-size: clamp(22px, 2.1vw, 32px);
  letter-spacing: 0;
  position: relative;
  display: inline-block;
  margin-bottom: 24px;
  font-weight: 700;
}

.h2::after {
  content: "";
  display: block;
  width: 81px;
  height: 6px;
  background: var(--gradient-button);
  margin-top: 12px;
  border-radius: 0;
}

.muted{ color: var(--muted); }
.small{ font-size: 13px; }

.grid{
  display:grid;
  gap: 18px;
}
.grid-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px){
  .grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root{ --section-pad: 42px; }
}

@media (max-width: 620px){
  :root{ --header-height: 68px; }
  .grid-3{ grid-template-columns: 1fr; }
}

@media (max-width: 860px), (pointer: coarse){
  html,
  body{
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  @supports (overflow: clip){
    html,
    body{
      overflow-x: clip;
    }
  }

  body{
    height: auto;
    touch-action: pan-y pinch-zoom;
  }

  /* Touch scrolling should remain on the compositor instead of competing
     with dozens of reveal transitions as new content enters the viewport. */
  .reveal,
  .reveal.is-in{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.inline-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.section-alt {
  background: var(--color-secondary-100);
  border-top: 0;
  border-bottom: 0;
}

.section-lead{
  margin: -8px 0 20px;
  color: var(--color-black-500);
  font-size: 15px;
  max-width: 70ch;
}

.card img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 12px;
}

.form-label{
  display: block;
  margin-bottom: 8px;
  color: var(--color-black-700);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.req{
  color: var(--color-primary-500);
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select{
  min-height: var(--field-height);
  border: 1px solid var(--color-black-300);
  border-radius: var(--radius-sm);
  background: var(--gradient-card);
  color: var(--color-black-900);
  font: inherit;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus{
  outline: none;
  border-color: var(--color-secondary-500);
  background: var(--color-secondary-100);
  box-shadow: none;
}

input[type="checkbox"]{
  width: 23px;
  height: 23px;
  margin: 0;
  border-radius: var(--radius-xs);
  accent-color: var(--color-primary-500);
}

.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease;
}

.reveal.is-in{
  opacity: 1;
  transform: none;
}

.toast-stack{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
}

.toast-msg{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(237,109,0,.22);
  background: rgba(255,255,255,.97);
  color: #6b3200;
  box-shadow: 0 12px 28px rgba(237,109,0,.18);
  animation: toast-in .22s ease;
}

.toast-text{
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
}

.toast-close{
  border: 0;
  background: transparent;
  color: rgba(107,50,0,.55);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
}

.toast-msg.success{
  border-color: rgba(237,109,0,.42);
}

.toast-msg.warning,
.toast-msg.error{
  border-color: rgba(200,90,0,.45);
}

.toast-msg.is-out{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}

@keyframes toast-in{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px){
  .toast-stack{
    right: 10px;
    left: 10px;
    width: auto;
    bottom: 10px;
  }
}