:root{
  --bg:#f6f6f4;
  --paper:#ffffff;
  --ink:#2a2a2a;
  --muted:#7b7b7b;
  --green:#2EB872;
  --gold:#C7A86D;
  --beige:#e7dfd6;
  --radius:22px;
  --shadow:0 10px 30px rgba(0,0,0,.07);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans TC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,"PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;line-height:1.7}
img{max-width:100%;display:block}
.wrapper{width:min(1120px,90%);margin:auto}
.section{padding:72px 0}
.title{font:700 42px/1.2 "Playfair Display",serif;color:#1a1a1a;margin:0 0 6px}
.subtitle{color:var(--gold);margin:8px 0 18px;font-weight:700;letter-spacing:.08em}

.btn{display:inline-block;background:var(--green);color:#fff;padding:12px 22px;border-radius:999px;text-decoration:none;font-weight:700;box-shadow:var(--shadow);transition:.25s;border:0;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--green);border:2px solid var(--green)}

.grid{display:grid;gap:28px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.brand-grid{grid-template-columns:360px 1fr;align-items:center}
.card{background:var(--paper);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}

/* 品牌區 */
.brand-logo{display:flex;justify-content:center;align-items:center;background:#fff;border-radius:40px;padding:40px 20px;box-shadow:var(--shadow)}
.brand-logo-img{width:320px;max-width:90%;height:auto;display:block;image-rendering:-webkit-optimize-contrast}

/* Logo (text layout if needed) */
.logo{display:flex;flex-direction:column;gap:2px}
.logo .mark{font:700 52px/1 "Playfair Display",serif;color:var(--gold)}
.logo .name{font:700 32px/1.2 "Noto Sans TC",sans-serif}
.logo .sub{color:var(--muted);font-weight:500}

/* 卡片圖示 */
.icon-img{width:92px;height:auto;display:block;margin:0 auto 14px;filter: drop-shadow(0 2px 4px rgba(0,0,0,.06))}

/* Floating CTA */
.float-cta{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:18px;z-index:2000}
.cta-btn{width:64px;height:64px;border-radius:50%;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-decoration:none;color:#333;font-size:11px;font-weight:600;box-shadow:0 8px 22px rgba(0,0,0,.12);transition:transform .25s ease}
.cta-btn:hover{transform:translateY(-3px)}
.cta-btn img{width:28px;height:auto;display:block}
.top-btn span{margin-top:2px;font-size:12px;color:#2a2a2a}

/* Hero */
.hero-media{position:relative;overflow:hidden;border-radius:32px;margin:28px auto;width:min(1280px,92%);aspect-ratio:16/7;box-shadow:var(--shadow)}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:none}
.badge{position:absolute;right:16px;top:16px;background:rgba(255,255,255,.92);padding:10px 14px;border-radius:14px;text-align:right;font-weight:700;color:var(--gold);box-shadow:var(--shadow)}

/* 社會影響 */
.impact{text-align:center;padding:120px 0 90px;position:relative}
.impact-container{width:min(1120px,90%);margin:auto;position:relative}
.impact-media{border-radius:32px;overflow:hidden;box-shadow:var(--shadow);width:100%}
.impact-media img{width:100%;height:auto;display:block}

.impact-text{
  --sticker-w: clamp(90px, 12vw, 160px);
  --sticker-gap: 18px;
  width:min(900px,92%);
  margin:-50px auto 0;
  background:var(--beige);
  padding:36px 42px;
  padding-right: calc(var(--sticker-w) + var(--sticker-gap) + 18px);
  border-radius:22px;
  box-shadow:var(--shadow);
  position:relative;
  z-index:2;
}
.impact-text h3{color:var(--green);margin:0 0 14px;font-weight:700}
.impact-text .impact-sticker{position:absolute;right:var(--sticker-gap);bottom:var(--sticker-gap);width:var(--sticker-w);height:auto;margin:0;pointer-events:none;user-select:none;filter: drop-shadow(0 8px 20px rgba(0,0,0,.10));z-index:3}

/* Testimonials */
.testimonials{background:var(--beige);padding:84px 0}
.testimonials-grid{display:grid;grid-template-columns:1.05fr 1.2fr;align-items:center;gap:36px}
.t-heading{margin:0 0 14px;line-height:1.2}
.t-heading span{color:var(--green);font-weight:800;font-size:clamp(28px,3vw,40px);background:linear-gradient(0deg, rgba(46,184,114,.22) 0 100%);box-decoration-break:clone;padding:.12em .38em;border-radius:6px}
.t-lead{margin:10px 0 18px;color:var(--ink);opacity:.9;font-size:clamp(15px,1.6vw,18px)}
.t-quote{display:inline-block;margin:12px 0;padding:12px 14px;border-radius:8px;background:rgba(120,162,233,.22);line-height:1.9;font-size:clamp(15px,1.7vw,19px)}
.t-author{color:#34424f;opacity:.9;font-weight:600}
.t-media{border-radius:36px;overflow:hidden;box-shadow:var(--shadow)}
.t-media img{width:100%;height:auto;display:block;object-fit:cover}

/* JOIN US CTA */
.join-cta{background:var(--bg);padding:100px 0;text-align:center}
.join-cta-img{width:clamp(90px,14vw,150px);margin:0 auto 28px;display:block}
.join-title{color:var(--green);font-weight:800;font-size:clamp(24px,3vw,36px);margin:0 0 12px}
.join-text{max-width:620px;margin:0 auto 34px;color:var(--ink);opacity:.9;line-height:1.8;font-size:clamp(15px,1.5vw,18px)}

/* =========================
   Footer – professional layout
   ========================= */
.footer{background:#e9e2d7;padding:80px 0 36px;margin-top:80px;position:relative;overflow:hidden}

/* switch grid -> flex for cleaner columns */
.footer-flex{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  flex-wrap:wrap;
}

.footer-col{flex:1 1 240px;text-align:left}

.footer-logo{max-width:200px;width:100%;height:auto;display:block;object-fit:contain;filter: drop-shadow(0 2px 6px rgba(0,0,0,.06));margin-bottom:10px}
.company-name{font-size:17px;font-weight:700;color:#3c2e25;display:block;margin-bottom:6px;letter-spacing:.03em}

.footer-info h4{margin:0 0 12px;font-size:22px;color:#3c2e25;font-weight:800}
.footer-info p{margin:4px 0;font-size:16px;color:#3c2e25;line-height:1.6}

.footer-icons{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-start}
.icon-circle{width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow);transition:.25s}
.icon-circle:hover{transform:translateY(-3px)}
.icon-circle img{width:22px;height:22px;display:block;opacity:.9}

.copyright{text-align:center;margin-top:40px;color:#7a6a59;font-size:14px}

/* ===============================
   SINGLE RESPONSIVE BLOCK (FINAL)
   =============================== */
@media (max-width: 768px){

  html, body { overflow-x: hidden; }

  /* force horizontal text; prevent vertical layout spill */
  h1, h2, h3, h4, .title, .subtitle, .brand-copy, p {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .wrapper{ width: 92%; }

  .grid.two,
  .brand-grid,
  .testimonials-grid{
    grid-template-columns: 1fr !important;
  }

  .hero-media{
    aspect-ratio: 16/10;
    border-radius: 18px;
  }

  .brand-logo{ padding: 28px 14px; }
  .brand-logo-img{ width: 240px; }

  .card{ padding: 20px; border-radius: 18px; }
  .title{ font-size: 32px; }
  .subtitle{ font-size: 16px; }

  .impact-text{
    margin-top: -30px;
    padding: 22px 20px;
    border-radius: 18px;
    padding-right: calc(var(--sticker-w) + 12px);
  }

  /* Floating buttons: keep off text and safe-area */
  .float-cta{
    right: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    gap: 14px;
  }
  .cta-btn{ width: 56px; height: 56px; }
  .cta-btn img{ width: 24px; }

  /* Footer stacks & centers */
  .footer-flex{ justify-content:center; text-align:center; }
  .footer-col{ text-align:center; }
  .footer-icons{ justify-content:center; }
}

/* =========================
   TOP NAVIGATION (MATCHING ORIGINAL STYLE)
   ========================= */

.topbar{
  position: sticky;
  top: 0;
  z-index: 2500;
  background: rgba(246,246,244,.85); /* --bg with blur */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
  padding: 14px 0;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
}

.brand img{
  height: 38px;
  width: auto;
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.brand-title{
  font-family:"Playfair Display",serif;
  font-weight:700;
  font-size:18px;
  color:var(--gold);
}

.brand-sub{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.04em;
}

/* Desktop menu */
.topnav{
  display:flex;
  align-items:center;
  gap: 14px;
}

.topnav a{
  text-decoration:none;
  font-weight:700;
  color:var(--ink);
  padding: 10px 16px;
  border-radius:999px;
  transition:.25s;
}

.topnav a:hover{
  background:var(--beige);
  color:#1a1a1a;
}

.topnav a.is-active{
  background:var(--beige);
  color:#1a1a1a;
}

/* Mobile toggle */
.nav-toggle{ display:none; }

.nav-burger{
  display:none;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--paper);
  box-shadow:var(--shadow);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.nav-burger span,
.nav-burger span:before,
.nav-burger span:after{
  display:block;
  width:18px;
  height:2px;
  background:var(--ink);
  position:relative;
}

.nav-burger span:before,
.nav-burger span:after{
  content:"";
  position:absolute;
  left:0;
}

.nav-burger span:before{ top:-6px; }
.nav-burger span:after{ top:6px; }

/* Mobile layout */
@media (max-width: 900px){
  .nav-burger{ display:flex; }

  .topnav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:var(--paper);
    padding: 14px;
    border-bottom-left-radius:22px;
    border-bottom-right-radius:22px;
    box-shadow:var(--shadow);
    flex-direction:column;
    gap:10px;
  }

  .topnav a{
    width:100%;
    text-align:center;
  }

  .nav-toggle:checked ~ .topnav{
    display:flex;
  }
}