/* Light */
@font-face {
    font-family: "GenSenRounded TW";
    src: url("fonts/GenSenRounded2TW-L.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
  }

/* Regular */
@font-face {
    font-family: "GenSenRounded TW";
    src: url("fonts/GenSenRounded2TW-R.otf") format("opentype");
    font-weight: 200;
    font-style: normal;
  }

/* Bold */
@font-face {
    font-family: "GenSenRounded TW";
    src: url("fonts/GenSenRounded2TW-B.otf") format("opentype");
    font-weight: 350;
    font-style: normal;
  }

@font-face {
    font-family: 'Noto Sans TC';
    src: url('fonts/NotoSansTC-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Global */
body {
    font-family: 'GenSenRounded TW', sans-serif;
    background-color: #fffaf6; 
    margin: 0;
    color: #333;
    line-height: 1.8;
}

/* ===== Unified Header (Tutorial Theme) ===== */
.site-header {
  position: relative;
  z-index: 20;
}

.site-header.theme-dark {
  background: transparent;
  border-bottom: none;
}

/* CHANGED: let nav sit on top of hero background */
body.tutorial-page .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 2rem;
}

.site-logo img {
  height: 40px;
  width: auto;
  display: block;
}

.site-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.site-link {
  text-decoration: none;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 200;
}

.site-link:hover { color: #ffd28a; }

.site-item.has-dropdown {
  position: relative;
}

.site-link-btn {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: #ffffff;
  cursor: pointer;
  font-weight: 200;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.site-link-btn::after {
  content: "▾";
  font-size: 0.8rem;
  opacity: 0.8;
}

.site-link-btn:hover { color: #ffd28a; }

.site-dropdown {
  position: absolute;
  top: 140%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  padding: 0.5rem 0;
  display: none;
  z-index: 50;
}

.site-dropdown.open { display: block; }

.site-dropdown a {
  display: block;
  padding: 0.55rem 1rem;
  text-decoration: none;
  color: #3c2500bd;
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: nowrap;
}

.site-dropdown a:hover {
  background: #fff7ee;
  color: #b97b39;
}

.site-cta {
  width: 120px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: url("img/Use Now_Eng.png") center/contain no-repeat;
  cursor: pointer;
  outline: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.site-cta-zh {
  width: 120px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: url("img/Use Now.png") center/contain no-repeat;
  cursor: pointer;
  outline: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.site-cta:hover {
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.05);
}

.site-cta-zh:hover {
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.05);
}

/* Mobile nav */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.4rem;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  margin: 4px 0;
}

.mobile-panel {
  display: none;
  background: rgba(23, 18, 14, 0.96);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.mobile-panel-inner {
  padding: 0.8rem 1.5rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.mobile-panel a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 200;
}

.mobile-panel .mobile-title {
  color: #ffd28a;
  font-weight: 350;
  margin-top: 0.2rem;
}

.mobile-panel .mobile-cta {
  margin-top: 0.4rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  background: linear-gradient(120deg, #c48a53 0%, #d9a35e 100%);
  color: #fff;
  width: fit-content;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

@media (max-width: 960px) {
  .site-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-panel { display: block; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
  .site-header.is-open .mobile-panel { max-height: 480px; }

  .hero {
    min-height: 50vh;  
    padding-top: 0rem; 
    padding-bottom: 3cap;
  }

  .site-logo img { height: 32px; }

  .hero-auto,
  .hero-furniture,
  .hero-advanced {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }

  .hero-content {
    max-width: 90%;
    margin: 0 auto;
  }

  .hero h1 {
    font-size: 1.9rem;
    line-height: 1.3;
  }

  .hero-line {
    font-size: 0.95rem;
    white-space: normal;
  }

  .hero-cta-row {
    flex-direction: column;
    gap: 0.8rem;
  }

  .cta-btn,
  .cta-btn-secondary {
    width: 100%;
    max-width: 320px;
  }
  
  .cta-btn-zh,
  .cta-btn-secondary-zh {
    width: 100%;
    max-width: 320px;
  }

  .footer {
    padding: 1.8rem 1.4rem 1.4rem;
  }

  .hero.hero-furniture .hero-line {
    font-size: 1.1rem;
    white-space: normal;
  }

  .footer-inner,
  .footer-bottom {
    max-width: 100%;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
  }

  .footer-brand {
    flex: 1 1 auto;
  }

  .footer-ai {
    margin-left: 0;
  }
  .footer-bottom {
    margin-top: 0.4rem;
    text-align: left;
  }
}

/* Hero Section */
.hero {
  color: #fff;
  text-align: center;
  padding: 3rem 2rem 6.5rem; 
  position: relative;
  margin-top: -4rem;   
}

/* CHANGED: make hero start at top under nav */
body.tutorial-page .hero {
  margin-top: 0;
  padding-top: 6rem;
}

@media (max-width: 960px) {
  body.tutorial-page .hero {
    padding-top: 5rem;
  }
}

.hero-auto {
  background: url("img/hero-bg 1.jpg") center 76%/cover no-repeat;
}

.hero-furniture {
  background: url("img/hero-bg 2.jpg") center 55%/cover no-repeat;
}

.hero-advanced {
  background: url("img/hero-bg 3.png") center 68%/cover no-repeat;
}

.hero.hero-furniture .hero-content {
  max-width: 1100px;
  margin: 0 auto;
}

.hero.hero-furniture .hero-line {
  font-size: 1.05rem;
  font-weight: 100;
  line-height: 1.8;
  margin: 0;
  white-space: nowrap;
}

.hero.hero-furniture .hero-line-top {
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
}

.hero.hero-furniture .hero-line-bottom {
  margin-bottom: 2rem;
}

.hero-subtext {
  font-family: "GenSenRounded2TW-R", "GenSenRounded TW", sans-serif,'Noto Sans TC';
}  

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  transform: translateY(32px); 
}

.hero h1 {
  font-family: "GenSenRounded TW", 'Noto Sans TC', sans-serif;
  font-size: 2.8rem;
  font-weight: 350;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.cta-btn {
  display: inline-block;
  width: 250px;
  height: 50px;
  padding: 0;
  background: url(img/Button5_Eng.png) center/contain no-repeat;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
  transition: transform 0.15s ease, filter 0.15s ease;
  transform: translateY(12px);
}

.cta-btn-secondary {
  display: inline-block;
  width: 250px;
  height: 50px;
  padding: 0;
  background: url("img/Learn More_Eng.png") center/contain no-repeat;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
  transition: transform 0.15s ease, filter 0.15s ease;
  transform: translateY(12px);
}

.cta-btn:hover,
.cta-btn-secondary:hover {
  transform: translateY(10px) scale(1.02);
  filter: brightness(1.05);
}

.cta-btn-zh {
  display: inline-block;
  width: 250px;
  height: 50px;
  padding: 0;
  background: url(img/Button5_new.png) center/contain no-repeat;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
  transition: transform 0.15s ease, filter 0.15s ease;
  transform: translateY(12px);
}

.cta-btn-secondary-zh {
  display: inline-block;
  width: 250px;
  height: 50px;
  padding: 0;
  background: url("img/Learn More.png") center/contain no-repeat;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
  transition: transform 0.15s ease, filter 0.15s ease;
  transform: translateY(12px);
}

.cta-btn-zh:hover,
.cta-btn-secondary-zh:hover {
  transform: translateY(10px) scale(1.02);
  filter: brightness(1.05);
}

.hero-cta-row {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.hero-line {
  font-family: "GenSenRounded TW", sans-serif;
  font-weight: 100;
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 0;
}

.hero-line-top { margin-bottom: 0.1rem; }
.hero-line-bottom { margin-bottom: 2rem; }

.hero::after {
  content: "";
  position: absolute;
  top: 4rem;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* --- Rest of your existing tutorial styles unchanged --- */
/* (Everything below is your original styling with no visual changes) */

/* Common Section */
.section { 
  display: flex; 
  flex-wrap: wrap; 
  align-items: center; 
  justify-content: center; 
  padding: 5rem 2rem; 
}

.text-block, .image-block { flex: 1 1 450px; padding: 1.5rem; }

.highlight { color: #b97b39; font-weight: 600; }

.feature-list { list-style: none; padding: 0; margin-top: 1rem; color: #5b554e; }
.feature-list li { margin-bottom: 0.6rem; }

.reason-label {
    font-family: "GenSenRounded TW", sans-serif;
    font-weight: 200;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    margin: 0.2rem 0 0.5rem;
    margin-left: 0.2rem;
  
    background: linear-gradient(90deg, #5b3e26 0%, #ff9b1f 45%, #ffce59 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  
  .reason-title {
    font-family: "GenSenRounded TW", sans-serif;
    font-weight: 350;
    font-size: 2.3rem;
    color: #5b3e26;
    margin: -0.6rem 0 1rem;
  }
  
  .reason-desc {
    font-family: "GenSenRounded TW", sans-serif;
    font-weight: 100;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #000000;
    max-width: 520px;
    margin: -0.4rem 0 1.0rem;
  }

  .reason-points {
    margin-top: -0.3rem
  }
  
  .reason-point {
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
    font-family: "GenSenRounded TW", sans-serif;
    font-weight: 200;
    color: #000000;
  }
  
  .reason-point span {
    margin-left: 0.4rem; 
  }

  .reason-icon {
    width: 48px;
    height: 48px;
    margin-right: 0.75rem;
    border-radius: 12px;
    flex-shrink: 0;
  }

/* 讓進階教學這一段的 points 變成橫排 */
.reason-points-inline {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.2rem;
}

.reason-points-inline .reason-point {
  margin-bottom: 0;
}

/* FAQ */
.faq {
  padding: 3rem 2rem 5rem; 
  background: #ffffff;           /* 改回白底 */
  text-align: center;
}

.faq h2 {
  margin-bottom: 2rem;
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 0em;
  margin-left: 0.2rem;
  background: linear-gradient(90deg, #867158 0%, #FFA83D 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;  /* 關鍵：讓文字填色透明 */
  display: inline-block;                 /* 避免有些瀏覽器裁剪異常 */
}

.faq-container {
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
}

/* 單條 FAQ 卡片 */
details {
  background: #fff;
  border-radius: 18px;
  padding: 1.1rem 1.6rem;
  margin-bottom: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);   /* 降低陰影 */
  border: 1px solid rgba(0,0,0,0.02);
}

details[open] {
  box-shadow: 0 6px 14px rgba(0,0,0,0.05);   /* 展開時稍微加一點 */
}

/* 問題行 */
details summary {
  font-weight: 200;
  font-size: 1.1rem;
  color: #5b3e26;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;          
  padding-bottom: 0;              /* 先保持原樣 */
  border-bottom: none;            /* 預設沒有線 */
}

details[open] summary {
  padding-bottom: 0.7rem;         /* 讓線跟文字有點距離 */
  border-bottom: 1px solid #f0ece6;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::after {
  content: "＋";
  font-weight: 100;
  font-size: 1.1rem;
  color: #767676;
}

details[open] summary::after {
  content: "－";
}

/* 答案文字 */
details p {
  margin-top: 1.2rem;
  font-size: 1rem;
  color: #6b655d;    
  font-weight: 100;
  line-height: 1.8;
}

/* 查看全部 */
.see-all {
  margin: 4.5rem auto 0;
  display: block;
  width: 210px;                       /* 依 Button4.png 實際尺寸微調 */
  height: 44px;
  padding: 0;
  border: none;
  background: url('img/Button4_Eng.png') center/contain no-repeat;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.see-all::after {
  content: none;
}

.see-all:hover {
  transform: translateY(-2px) scale(1.02);  /* 滑過稍微浮起＆放大一點 */
  filter: brightness(1.05);
}

.see-all-zh {
  margin: 4.5rem auto 0;
  display: block;
  width: 210px;                       /* 依 Button4.png 實際尺寸微調 */
  height: 44px;
  padding: 0;
  border: none;
  background: url('img/Button4.png') center/contain no-repeat;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.see-all-zh::after {
  content: none;
}

.see-all-zh:hover {
  transform: translateY(-2px) scale(1.02);  /* 滑過稍微浮起＆放大一點 */
  filter: brightness(1.05);
}

/* FAQ 內「查看示例用法教學 ↗︎」樣式 */
.faq-link {
  color: #c57d24;
  font-family: 'Noto Sans TC', 'GenSenRounded TW', sans-serif;
  font-weight: 350;           /* 粗體 */
  text-decoration: none;
  margin-left: 0.2rem;
}

.faq-link:hover {
  text-decoration: underline;
}

.tutorial-anchor-offset {
  position: relative;
  top: -130px;   /* 視乎 nav 高度，想更多空白就改成 -100px 等 */
}

/* Related */
.related {
  padding: 5rem 2rem 4.5rem;
  text-align: center;
  background: #ffffff;          /* 這段保持白色 */
}

.related h2 {
  margin: 0 0 2.5rem;
  font-size: 2.2rem;
  font-weight: 350;
  letter-spacing: 0em;
  background: linear-gradient(90deg, #867158 0%, #FFA83D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;                     /* 間距比原本大一點 */
}

.card {
  width: 300px;                  /* 放大卡片接近設計稿比例 */
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);  /* hover 時也比原本小一級 */
}

.card img {
  width: 100%;
  display: block;
}

.card-content {
  padding: 1.4rem 1.5rem 1.6rem;
  text-align: left;
}

card-content h4 {
  color: #d28a1d;
  font-size: 1.2rem;
  font-weight:200;
  margin: 0 0 0.6rem;
  background: linear-gradient(90deg, #867158 0%, #FFA83D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

.card-content p {
  font-size: 1rem;
  font-weight:100;
  line-height: 1.7;
  color: #555049;   
  margin: 0;
}

/* 標題下那條淺線 */
.card-content::before {
  content: "";
  display: block;
  height: 5px;
  width: 100%;
  margin: 0 0 0.8rem;
  background: #faf9f6;
}

.card-content {
  position: relative;
  padding-bottom: 1.9rem;   /* 留空間給箭咀 */
}

.card-content::after {
  content: "↗";
  position: absolute;
  right: 1.5rem;
  bottom: 1.8rem;
  font-size: 1.1rem;           /* 調小讓線條看起來更細 */
  font-weight: 300;            /* 不要加粗 */
  color: #75726c;              /* 比標題字再淺一點，視覺更輕 */
  opacity: 0.8;                /* 再柔一點，可選 */
}

/* Footer */
.footer {
  background: #fffaf6;
  padding: 1.2rem 0rem 0rem;   /* 整體較矮，左右 padding 略大讓內容更靠中 */
  color: #a2968a;
  font-size: 0.85rem;
  font-weight: 100;
}

/* 上半部四欄 */
.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
}

/* 四欄寬度（統一） */
.footer-col {
  flex: 1 1 220px;
}

/* LOGO 欄：稍窄一些，與 header 對齊感 */
.footer-brand {
  flex: 0 0 240px;
}

.footer-logo {
  height: 26px;
  width: auto;
  display: block;
  margin-bottom: 0.4rem;
}

.footer-inner .footer-col:nth-child(3) {
  margin-left: -1.5rem;   /* 可試 -1rem ~ -2rem，視覺覺得剛好為止 */
}

/* 欄位標題 */
.footer-col h4 {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b4977a;
  font-weight: 200;
}

.footer-ai {
  margin-left: 10rem;     
}

/* 連結與文字：細字 */
.footer-col a,
.footer-col p {
  display: block;
  margin: 0 0 0rem;
  color: #a2968a;
  text-decoration: none;
  font-weight: 100;
}

.footer-col a:hover {
  color: #b97b39;
}

/* 下半部：版權列 */
.footer-bottom {
  max-width: 1120px;
  margin: 0 auto;
  margin-top: -1rem;
  text-align: left;        /* 明確指定靠左 */
}

.footer-copy {
  margin: 0.2rem 0 0.8rem; 
  font-size: 0.8rem;
  color: #b0a59a;
  font-weight: 100;
}

/* Footer 社交 icon */
.footer-social {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.8rem;
  margin: 0.4rem 0 0.4rem;  /* 與標題 / 文字留一點距離 */
}

.footer-social a {
  display: inline-flex;
}

.footer-social img {
  width: 22px;           /* 可依視覺調成 20–24px */
  height: 22px;
  display: block;
  filter: grayscale(30%); /* 稍微柔一點，可視需要移除 */
  transition: transform 0.15s ease, filter 0.15s ease;
}

.footer-social img:hover {
  transform: translateY(-1px) scale(1.03);
  filter: grayscale(0%);
}

/* Center alignment for tutorial GIFs */
  .tutorial-image,
  .image-block {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

/* 1st section */
.tutorial-section {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    max-width: 1120px;
    margin: 0 auto;
    padding: 3.5rem 2rem 3rem;  
    gap: 3rem;
    position: relative;
  }
  
/* 只給 tutorial2 第一個教學區塊白色背景 */
.tutorial-section-wrap {
  background: #ffffff;
}

  .tutorial-section > * {
    transform: translateY(-20px);   /* try -10px to -20px */
  }
  
  .tutorial-text {
    flex: 0 0 46%;
  }
  
  .tutorial-image {
    flex: 0 0 46%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 2rem;
    border-radius: 28px;
  }

  .tutorial-image .animated-gif {
    width: 100%;
    max-width: 520px;
    border-radius: 28px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    margin-top: 2rem;
  }
  
  /* GIF sits on top of the screen area */
  .tablet-gif {
    position: absolute;
    top: 8%;
    left: 5%;
    width: 90%;
    height: 84%;
    object-fit: cover;
    border-radius: 18px;
  }
  .tutorial-text {
    flex: 0 0 46%;
    margin-top: 3rem;
  }

  .tutorial-text .risk-cta {
    margin-top: 1.8rem;
  }
  
    .tutorial-text .risk-cta-zh {
    margin-top: 1.8rem;
  }

/* 只給 tutorial3 Section 1 用的背景色 */
.advanced-overlap-wrap {
  background-color: #fffaf6;
}

/* 確保這一段是左文字右圖片 */
.advanced-overlap {
  display: flex;
  flex-direction: row;          /* 覆蓋原本 row-reverse */
  align-items: center;
  justify-content: space-between;
}


  /* ------------------------------------
   Risk section (降低踩雷風險)
------------------------------------- */

.section-risk {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  max-width: 1120px;
  margin: 0 auto;
  padding: 5rem 2rem;
  gap: 3rem;
}


/* left column text */
.text-risk {
  flex: 0 0 48%;
  text-align: left;
}

/* Right column */
.image-risk {
  flex: 0 0 52%;
  display: flex;
  justify-content: flex-start;   /* images start close to text */
  align-items: center;
}

/* Wrapper for compare-bg + compare-room.gif */
.risk-images {
  position: relative;
  width: 100%;
  max-width: 520px;
}
.section-label {
  font-family: "GenSenRounded TW", sans-serif;
  font-weight: 200;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  margin: 0.2rem 0 0.5rem;
  margin-left: 0.2rem;
  background: linear-gradient(90deg, #5b3e26 0%, #ff9b1f 45%, #ffce59 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-title {
  font-family: "GenSenRounded TW", sans-serif;
  font-weight: 350;
  font-size: 2.2rem;
  color: #5b3e26;
  margin: -0.6rem 0 1.2rem;
}

.section-desc {
  font-family: "GenSenRounded TW", sans-serif;
  font-weight: 100;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #000000;
  max-width: 525px;
  margin: -0.2rem 0 0.9rem;
}

  /* ------------------------------------
   Eraser section (為什麼要用智能傢俱擦膠)
------------------------------------- */
.eraser-section {
  background: #ffffff;           /* 整段白底 */
  padding: 5rem 2rem;
}

.eraser-inner {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}

/* 標題區沿用 section-label / section-title / section-desc 的字型設定 */
.eraser-text {
  max-width: 800px;
  margin: 0 auto 3rem;
}

/* 中間兩張圖片：置中排列 */
.eraser-images {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2.8rem;   /* 原本 2.2rem → 調小讓下面更靠近 */
  margin-top: -1rem;     /* 新增：整個圖片區往上移 */
}

.eraser-img {
  width: 100%;
  max-width: 360px;             /* 依實際圖寬調整 */
  border-radius: 24px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
  object-fit: cover;
}

/* 下方兩個重點：置中並排 */
.eraser-points {
  display: flex;
  justify-content: space-between;   /* 從 center 改成 space-between */
  gap: 5rem;
  max-width: 600px;                 /* 大約等於上面兩張圖加間距的寬度 */
  margin: -0.6rem auto 0;  /* 新增負 margin-top：整排往上 */
}

.eraser-point {
  display: flex;
  align-items: center;
  font-family: "GenSenRounded TW", sans-serif;
  font-weight: 200;
  color: #000000;
}

/* 只調整第二個重點：略向右偏移 */
.eraser-point:nth-child(2) {
  transform: translateX(35px); /* 可調 8–20px 看實際效果 */
}

/* 擦膠段的文字改為置中 */
.eraser-section .text-risk {
  text-align: center;
  margin: 0 auto 2.5rem;
}

/* 擦膠小標：和 section-label 一樣的漸層，但置中用 */
.eraser-label {
  font-family: "GenSenRounded TW", sans-serif;
  font-weight: 200;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  margin: 0.2rem 0 0.5rem;
  text-align: center;

  background: linear-gradient(90deg, #867158 0%, #FFA83D 100%);
  background-clip: text;
  -webkit-background-clip: text;      /* Safari / Chrome 必須 */
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari / 部分瀏覽器必須 */
}

.eraser-desc {
  font-family: "GenSenRounded TW", sans-serif;
  font-weight: 100;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #000000;
  max-width: 600px;
  margin: -0.8rem auto 0.9rem; /* auto 讓它置中 */
  text-align: center;
}


/* RWD：窄螢幕改為直排 */
@media (max-width: 960px) {
  .eraser-images {
    flex-direction: column;
  }
  .eraser-points {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
}

.eraser-icon {
  width: 48px;
  height: 48px;
  margin-right: 0.6rem;
  border-radius: 12px;
  flex-shrink: 0;
}


/* bullet lines with icons */
.section-points {
  display: flex;
  gap: 1.2rem;
  margin-top: 1.8rem;
}

.section-point {
  display: flex;
  align-items: center;
  font-family: "GenSenRounded TW", sans-serif;
  font-weight: 200;
  color: #000000;
}

.section-icon {
  width: 48px;
  height: 48px;
  margin-right: 0.6rem;
  border-radius: 12px;
  flex-shrink: 0;
}

.section-point:nth-child(2) {
  margin-left: 2rem;   /* 覺得還不夠就改成 0.8rem、1rem */
}

.section-point span {
  margin-left: 0.1rem;
}

/* CTA button using Button2 */
.risk-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 525px;
  height: 58px;
  padding: 0;
  background: url("img/Button2_Eng.png") center/contain no-repeat;
  border: none;
  border-radius: 999px;
  color: #fff;
  font-family: "GenSenRounded TW", sans-serif;
  font-weight: 100;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  margin-top: 1.8rem; 
  margin-left: 0;  
}

.risk-cta:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.05);
}

.risk-cta-zh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 525px;
  height: 58px;
  padding: 0;
  background: url("img/Button2.png") center/contain no-repeat;
  border: none;
  border-radius: 999px;
  color: #fff;
  font-family: "GenSenRounded TW", sans-serif;
  font-weight: 100;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  margin-top: 1.8rem; 
  margin-left: 0;  
}

.risk-cta-zh:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.05);
}

/* right column images */
.image-risk {
  flex: 0 0 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.risk-images {
  position: relative;
  width: 100%;
  max-width: 520px;
}

/* top static photo */
.risk-bg {
  width: 100%;
  border-radius: 28px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  object-fit: cover;
}

/* overlapping GIF with white stroke */
.risk-compare {
  position: absolute;
  left: -10%;
  bottom: -8%;         /* tweak up/down */
  width: 68%;
  border-radius: 28px;
  border: 4px solid #ffffff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

/* Section2 共同外層：只處理尺寸，不處理顏色 */
.section-risk-strip {
  width: 100%;
  margin: 0;
  padding: 2.5rem 0;
}

/* index.html：自動佈置那一頁 → white */
.section-risk-auto {
  background: #ffffff;
}

/* tutorial2.html：傢俱替換那一頁 → 奶油色 */
.section-risk-furniture {
  background: #fffaf6;
}

.section-steps {
  padding: 5rem 0rem 4.5rem;
  background: #fffaf6;
}

.steps-bg {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

/* 標題置中 */


.steps-title {
  font-family: "GenSenRounded TW", sans-serif;
  font-weight: 350;
  font-size: 2.2rem;
  color: #5b3e26;
  margin: -0.2rem 0 -2rem;
}

.steps-line {
  display: block;
  margin: 0rem auto 0rem;
  width: 400px;          /* 依實際圖寬調整 */
  max-width: 100%;
}

/* Only change 用家教學 － 智能傢俱替換、智能傢俱擦膠 page - under line */
#steps-furniture .steps-line--short {
  width: 620px;
}

/* 左右兩欄 */

.steps-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* 從 center/space-between 改成 flex-start */
  gap: 4.5rem;
}

.steps-left {
  flex: 0 0 38%;
  display: flex;
  justify-content: flex-end;
  margin-left: -10px;  
}

/* 只改<用家教學 － 智能傢俱替換、智能傢俱擦膠>的整頁左右欄比例 */
#steps-furniture .steps-left {
  flex: 0 0 45%;      /* 左欄變寬 */
}

#steps-furniture .steps-right {
  flex: 0 0 55%;      /* 右欄略窄一點 */
}

.steps-flow-img {
  width: 100%;
  max-width: 360px;
  display: block;
}

/* 只在 steps-furniture 放大 */
#steps-furniture .steps-flow-img {
  width: 100%;
  max-width: 650px;   /* 給一個明顯更大的值 */
  margin-top: 5rem;            /* 只讓 flow 比標題再低少少 */
}

.steps-right {
  flex: 0 0 55%;
  display: flex;
  justify-content: flex-start;
}

/* ------------- 影片 ------------- */

.laptop-frame-steps {
  position: relative;
  width: 100%;
  max-width: 650px;
  background: #fffaf6;          /* 跟頁面一樣的底色 */
  border-radius: 28px;          /* 外框再大一點圓角 */
  overflow: hidden;             /* 超出部分直接裁掉 */
}

/* 只調整 tutorial2 的Video區塊 */
#steps-furniture .laptop-frame-steps {
  max-width: 3000px;   /* 放大一點 */
  margin-top: 6.5rem; /* 和 flow 對齊往下 */
}


.tutorial-video {
  width: 100%;
  height: auto;
  border-radius: 0;
  display: block;
}

/* 自訂播放按鈕覆蓋在影片中央 */

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}

.video-play-btn img {
  width: 72px;
  height: auto;
  display: block;
}

/* CTA：只顯示 Button3 圖片，無文字 */
.steps-cta {
  display: block;
  margin: 3rem auto 0;             /* 在 flow+video 下方置中 */
  width: 408px;
  height: 49px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: url("img/Button3_Eng.png") center/contain no-repeat;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(192, 170, 133, 0.18);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.steps-cta-zh {
  display: block;
  margin: 3rem auto 0;             /* 在 flow+video 下方置中 */
  width: 408px;
  height: 49px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: url("img/Button3.png") center/contain no-repeat;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(192, 170, 133, 0.18);
  transition: transform 0.15s ease, filter 0.15s ease;
}

#steps-furniture .steps-cta .steps-cta-zh{
  margin-top: 5rem;   /* 原本 3rem → 更低 */
}

.steps-cta::before {
  content: "";
}

.steps-cta:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.05);
}

.steps-cta-zh::before {
  content: "";
}

.steps-cta-zh:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.05);
}


/* 窄螢幕 RWD */
@media (max-width: 960px) {
  .steps-bg {
    padding: 3rem 1.5rem 3.2rem;
  }
  .steps-inner {
    flex-direction: column;
    align-items: center;
  }
  .steps-left,
  .steps-right {
    flex: 1 1 auto;
    justify-content: center;
  }
}

.steps-label {
  font-family: "GenSenRounded TW", sans-serif;
  font-weight: 200;
  font-size: 1rem;
  letter-spacing: 0.08em;
  margin: 0.2rem 0 0.5rem;
  margin-left: 0.2rem;

  /* 改成與「常見問題」同一組漸層 */
  background: linear-gradient(90deg, #867158 0%, #FFA83D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 強制 dropdown 內所有文字變橙色 */
.nav-dropdown,
.nav-dropdown * {
  color: #3c2500bd !important;        /* 和「用家教學」active 同色 */
}

/* hover 時再變深一點的橙色 */
.nav-dropdown a:hover {
  background: #fff7ee !important;   /* 奶茶色底 */
  color: #b97b39 !important;        /* 深橙色字 */
}

/* 只給 tutorial3 的進階技巧段落用的對齊方式 */
.advanced-overlap-wrap .reason-desc {
  text-align: justify;
  line-height: 1.5;
}

/* tutorial3：地板重塑段落的說明文字加寬 */
.tutorial3-eraser .eraser-text {
  max-width: 960px;
  text-align: justify;
}

/* 只針對地板區塊的標題，確保置中 */
.tutorial3-eraser .section-title {
  text-align: center;
  margin: -0.6rem auto 1.2rem;  /* 上下留白置中 */
}

/* tutorial3 地板段落：說明文字加寬＋左右對齊 */
.tutorial3-eraser .eraser-desc {
  max-width: 960px;      /* 由 600px 放寬 */
  text-align: center;
}

/* tutorial3：三個重點橫排 */
.tutorial3-eraser .eraser-points {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  max-width: 820px;
  margin: -0.6rem auto 0;
}

.tutorial3-eraser .eraser-point {
  flex: 0 1 260px;
  white-space: nowrap;
  justify-content: center;
}

/* 只調整第 1 個：向左 20px */
.tutorial3-eraser .eraser-point:nth-child(1) {
  transform: translateX(-100px);
}

/* 只調整第 2 個：不動（需要才加） */
.tutorial3-eraser .eraser-point:nth-child(2) {
  transform: translateX(0);
}

/* 只調整第 3 個：向右 20px */
.tutorial3-eraser .eraser-point:nth-child(3) {
  transform: translateX(100px);
}

@media (max-width: 960px) {
  .tutorial3-eraser .eraser-points {
    flex-direction: column;
    align-items: center;
  }

  .tutorial3-eraser .eraser-point {
    flex: 0 1 auto;
    white-space: normal;
  }
}

/* tutorial3：影片區流程圖放大 */
#steps-furniture.tutorial3-steps .steps-flow-img {
  width: 100%;
  max-width: 1000px;   /* 你想要的尺寸，之後可以再調 */
}

/* 只給 tutorial3 用的 steps 區塊 */
#steps-furniture.tutorial3-steps .steps-left {
  flex: 0 0 48%;   /* 原本假設是 38%，你可以調高一點 */
}

#steps-furniture.tutorial3-steps .steps-right {
  flex: 0 0 52%;   /* 右欄相對變窄一點 */
}

#steps-furniture.tutorial3-steps .steps-bg {
  max-width: 1440px;  /* 由 1120px 略為放寬 */
}

/* 卡片連結不要底線 */
.cards .card {
  text-decoration: none;
}

/* hover 時也不要底線（只靠顏色 / 陰影） */
.cards .card:hover {
  text-decoration: none;
}

/* make sure links are clickable above hero overlay */
header.site-header,
header { position: relative; z-index: 100; }

/* Ensure nav layout doesn't create huge horizontal spacing on medium screens */
.nav { padding-left: 3rem; padding-right: 3rem; }
@media (max-width: 1200px){
  .nav { padding-left: 1.5rem; padding-right: 1.5rem; }
  .nav-links { margin-left: 0 !important; }
}

/* Mobile: hamburger + panel */
.nav-toggle{
  display:none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 12px;
}
.nav-toggle-bar{
  display:block;
  width: 22px;
  height: 2px;
  background: #fff;
  margin: 4px 0;
  border-radius: 999px;
}
.nav-mobile{
  display:none;
  width:100%;
  padding: 0.75rem 1.2rem 1rem;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
}
.nav-mobile.open{ display:block; }
.nav-mobile a{ display:block; padding: 0.55rem 0; color: #fff; text-decoration:none; }
.nav-mobile details summary{ cursor:pointer; color:#fff; padding:0.55rem 0; font-weight:200; }
.nav-mobile-sub{
  padding-left: 0.8rem;
  border-left: 2px solid rgba(255,255,255,0.18);
  margin-bottom: 0.5rem;
}

/* Language switch */
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap: 0.4rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
}
.lang-btn{
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 200;
  font-size: 0.95rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  opacity: 0.85;
}
.lang-btn[aria-pressed="true"]{
  background: rgba(255,255,255,0.18);
  opacity: 1;
}

/* Core mobile layout fixes */
@media (max-width: 960px){
  body{ overflow-x: hidden; }

  .nav-links{ display:none !important; }
  .nav-toggle{ display:inline-flex !important; }

  .hero{ margin-top: 0 !important; padding: 2.5rem 1.2rem 3.5rem !important; }
  .hero::after{ top: 3.2rem !important; }
  .hero-content{ transform:none !important; max-width: 100% !important; }

  .hero h1{ font-size: 1.9rem !important; letter-spacing: 0.02em !important; }
  .hero-line{ font-size: 1rem !important; white-space: normal !important; }

  .tutorial-section,
  .advanced-overlap,
  .section-risk,
  .steps-inner{
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .tutorial-text, .tutorial-image,
  .text-risk, .image-risk,
  .steps-left, .steps-right{
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 0 !important;
    justify-content: center !important;
  }

  /* Remove overlap positioning that causes sideways scroll */
  .risk-compare{
    position: relative !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    margin-top: 1rem !important;
  }

  /* Steps tweaks */
  #steps-furniture .steps-flow-img,
  .steps-flow-img{ max-width: 100% !important; margin-top: 0 !important; }
  #steps-furniture .laptop-frame-steps{ max-width: 100% !important; margin-top: 0 !important; }

  /* Related cards */
  .cards{ gap: 1.2rem !important; }
  .card{ width: min(340px, 100%) !important; }
}

@media (max-width: 600px){
  .reason-desc, .section-desc, .eraser-desc{ text-align: left !important; }
  .risk-cta{ width: 100% !important; max-width: 360px !important; }
  .risk-cta-zh{ width: 100% !important; max-width: 360px !important; }
  .steps-cta{ width: 100% !important; max-width: 360px !important; }
  .steps-cta-zh{ width: 100% !important; max-width: 360px !important; }
}

/* 1) On homepage, neutralize the legacy nav rules from style.css */
body:not(.tutorial-page) .nav{
  padding: 10px 20px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
}

body:not(.tutorial-page) .nav-links{
  margin-left: 0 !important;
}

/* Ensure homepage uses site.css colors/sizing */
body:not(.tutorial-page) .nav-link,
body:not(.tutorial-page) .nav-link-btn{
  color: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  padding: inherit !important;
}

body:not(.tutorial-page) .nav-toggle-bar{
  background: currentColor !important;
}

/* 2) Scope ALL legacy header/nav styling to tutorial pages only */
body.tutorial-page header{
  position: relative;
  z-index: 100;
}

body.tutorial-page .nav{
  position: relative;
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 25rem;
}

body.tutorial-page .logo img{ height: 40px; }

body.tutorial-page .nav-links{
  display: flex;
  align-items: center;
  gap: 1.8rem;
  margin-left: 32rem;
  margin-right: 0rem;
}

body.tutorial-page .nav-link,
body.tutorial-page .nav-link-btn{
  color: #ffffff;
  font-size: 1rem;
  font-weight: 200;
}

body.tutorial-page .nav-dropdown,
body.tutorial-page .nav-dropdown *{
  color: #3c2500bd !important;
}

/* 1) Only tutorials should use the legacy .hero styling from style.css */
body.tutorial-page .hero {
  /* keep existing tutorial behavior; no change needed here because
     the original .hero rules above already apply.
     This selector exists mainly to document intent. */
}

/* 2) On NON-tutorial pages, disable tutorial hero overrides */
body:not(.tutorial-page) .hero{
  /* neutralize the tutorial hero block styling that breaks homepage */
  color: inherit !important;
  text-align: inherit !important;
  padding: 0 !important;
  margin-top: 0 !important;
  background: none !important;
}

body:not(.tutorial-page) .hero::before,
body:not(.tutorial-page) .hero::after{
  content: none !important; /* removes dark overlay + hairline */
}

body:not(.tutorial-page) .hero-content{
  transform: none !important;
  max-width: none !important;
}

/* Also undo the mobile hero overrides that were written for tutorials */
@media (max-width: 960px){
  body:not(.tutorial-page) .hero{
    padding: 0 !important;
    margin-top: 0 !important;
  }
  body:not(.tutorial-page) .hero-content{
    transform: none !important;
    max-width: none !important;
  }
}