/* ============================================================
   about.css — 關於頁專屬樣式
   ============================================================ */
section { padding: 100px 80px; }
.body-text { font-size: 15px; color: var(--text-muted); line-height: 1.9; }

/* PAGE HERO */
.page-hero {
  padding-top: calc(var(--nav-h) + 80px);
  padding-bottom: 80px;
  padding-left: 80px; padding-right: 80px;
  background: var(--primary); color: var(--white);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ''; position: absolute; right: -100px; bottom: -150px;
  width: 500px; height: 500px;
  background: radial-gradient(ellipse, rgba(137,222,124,0.2), transparent 70%);
  border-radius: 50%; animation: glow 7s ease-in-out infinite;
}
@keyframes glow { 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }

.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
.ph-label { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.ph-title { font-size: clamp(32px,4vw,52px); font-weight: 900; line-height: 1.2; margin-bottom: 20px; }
.ph-title em { font-style: normal; color: var(--accent); }
.ph-sub { font-size: 15px; opacity: .7; line-height: 1.9; }
.ph-img-wrap {
  height: 400px; border-radius: 24px; overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.25);
  animation: heroFloat 6s ease-in-out infinite;
}
.ph-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
@keyframes heroFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }

/* BRAND CONCEPT */
.brand-concept { background: var(--white); }
.concept-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.concept-quote {
  font-size: clamp(28px,3.5vw,46px); font-weight: 900; color: var(--primary);
  line-height: 1.3; letter-spacing: -.01em;
  border-left: 4px solid var(--accent); padding-left: 28px;
}
.concept-quote span { color: var(--accent-dark); }
.concept-body { display: flex; flex-direction: column; gap: 20px; }
.concept-body p { font-size: 15px; color: var(--text-muted); line-height: 1.9; }



/* ABOUT FOUNDER */
.about-founder { background: var(--bg); }
.founder-inner { display: grid; grid-template-columns: 2fr 3fr; gap: 80px; align-items: start; }
.founder-photo {
  width: 100%;
  height: 400px;
  display: flex;
 align-items: center;
 justify-content: center;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(42,50,75,0.15);
  aspect-ratio: 3/4;
  animation: photoFloat 7s ease-in-out infinite;
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover;   object-fit: cover;
  object-position: center top;}
@keyframes photoFloat { 0%,100%{transform:translateY(0) rotate(-0.5deg);} 50%{transform:translateY(-10px) rotate(0.5deg);} }
.founder-content { padding-top: 8px; }
.founder-content h3 { font-size: 28px; font-weight: 900; margin-bottom: 6px; }
.founder-content .role { font-size: 13px; color: var(--accent-dark); font-weight: 600; letter-spacing: .08em; margin-bottom: 24px; }
.founder-content p { font-size: 15px; color: var(--text-muted); line-height: 1.9; margin-bottom: 16px; }

/* TIMELINE */
.vision { background: var(--primary); color: var(--white); }
.vision .section-label { color: var(--accent); }
.vision .section-title { color: var(--white); }
.timeline { margin-top: 56px; position: relative; }

.tl-item { display: grid; grid-template-columns: 160px 1fr; gap: 40px; padding: 32px 0; border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; }
.tl-item:last-child { border-bottom: none; }
.tl-year { font-size: 28px; font-weight: 900; color: var(--accent); position: relative; text-align: right; }
.tl-year::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
   box-shadow: 0 0 6px 2px rgba(137,222,124,0.6),
              0 0 12px 4px rgba(137,222,124,0.3);
  /*animation: glowPulse 2s ease-in-out infinite;*/
}
.tl-content h4 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.tl-content p { font-size: 14px; opacity: .65; line-height: 1.8; }

/*@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 6px 2px rgba(137,222,124,0.6),
                         0 0 12px 4px rgba(137,222,124,0.3); }
  50%       { box-shadow: 0 0 10px 4px rgba(137,222,124,0.9),
                         0 0 20px 8px rgba(137,222,124,0.4); }
}*/

/* CLOSING */
.closing { background: var(--white); text-align: center; }
.closing-inner { max-width: 640px; margin: 0 auto; }
.closing-inner p { font-size: 15px; color: var(--text-muted); line-height: 2; margin-bottom: 40px; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .page-hero, section { padding: 80px 32px; }
  .page-hero { padding-top: 160px; }
  .hero-grid, .concept-inner, .founder-inner { grid-template-columns: 1fr; gap: 40px; }
  .ph-img-wrap { height: 260px; }

  .tl-item { grid-template-columns: 80px 1fr; gap: 24px; }
  .tl-year { font-size: 20px; }

}
@media (max-width: 1024px) {
  .page-hero { padding-top: calc(var(--nav-h) + 48px + 40px); }
}