/* --- 全局重置與基礎樣式 (單行模式) --- */
#apple-about-creative * { box-sizing: border-box; }

.apple-container { width: 100%; overflow: hidden; position: relative; padding-bottom: 80px; }
.content-wrapper { max-width: 1200px; margin: 0 auto; padding: 56px 18px 110px; position: relative; border-radius: 28px; }

/* --- 背景裝飾 (絕對定位元素) --- */
.bg-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.blob-purple-top { position: absolute; left: 50%; top: 120px; width: 980px; height: 520px; border-radius: 999px; transform: translateX(-50%); background: radial-gradient(circle, rgba(168,85,247,0.16) 0%, rgba(168,85,247,0.00) 64%); }
.blob-purple-bottom {position: absolute;left: 50%;bottom: 0;width: 10vw;aspect-ratio: 1/1;height: auto;border-radius: 999px;transform: translateX(-50%);background: radial-gradient(circle, rgba(109,40,217,0.14) 0%, rgba(109,40,217,0.00) 62%);}
.grid-pattern-right { position: absolute; right: -42px; top: 110px; width: 240px; height: 240px; border-radius: 28px; opacity: 0.16; background-image: radial-gradient(rgba(109,40,217,0.62) 1.2px, transparent 1.2px); background-size: 12px 12px; transform: rotate(10deg); }
.grid-pattern-left { position: absolute; left: -46px; bottom: 220px; width: 240px; height: 240px; border-radius: 28px; opacity: 0.12; background-image: radial-gradient(rgba(168,85,247,0.62) 1.2px, transparent 1.2px); background-size: 12px 12px; transform: rotate(-8deg); }

/* --- 圖片區 --- */
.hero-image-box { position: relative; z-index: 2; margin: 0 0 42px 0; text-align: center; }
.hero-image-box img { width: 100%; max-width: 980px; margin: 0 auto; }

/* --- 通用元件：標籤 Pill --- */
.pill-label { display: inline-block; padding: 8px 14px; border-radius: 999px; background: rgba(109,40,217,0.12); color: #4c1d95; font-size: 12px; font-weight: 900; letter-spacing: 0.18em; }
.pill-label-white { background: rgba(255,255,255,0.22); color: #ffffff; }

/* --- Section 02: Header 標題區 (更新版) --- */
.header-card { position: relative; margin: 0 0 44px 0; border-radius: 34px; z-index: 1; }
.header-bg-decor { position: absolute; inset: -20px; pointer-events: none; z-index: 0; overflow: hidden; }
.header-skew-blob { position: absolute; left: -140px; top: -100px; width: 480px; height: 320px; border-radius: 96px; background: linear-gradient(135deg, rgba(109,40,217,0.20), rgba(168,85,247,0.06)); transform: rotate(12deg) skewX(-10deg); }
.header-flow-blob { position: absolute; right: -180px; bottom: -90px; width: 640px; height: 220px; border-radius: 999px; background: linear-gradient(90deg, rgba(109,40,217,0.14), rgba(168,85,247,0.06)); transform: rotate(-10deg) skewX(10deg); }
.flow-line { position: absolute; height: 2px; border-radius: 99px; transform: rotate(-10deg); }
.flow-line.one { left: -50px; top: 92px; width: 780px; background: linear-gradient(90deg, rgba(109,40,217,0.00), rgba(109,40,217,0.24), rgba(168,85,247,0.00)); }
.flow-line.two { left: -30px; top: 118px; width: 900px; height: 1px; background: linear-gradient(90deg, rgba(168,85,247,0.00), rgba(168,85,247,0.22), rgba(109,40,217,0.00)); }
.flow-line.three { left: -20px; top: 144px; width: 860px; height: 1px; background: linear-gradient(90deg, rgba(109,40,217,0.00), rgba(109,40,217,0.18), rgba(168,85,247,0.00)); }

.header-content { position: relative; z-index: 2; padding: 42px 32px; border-radius: 34px; background: var(--accent-bg-glass); border: 1px solid var(--accent-border); backdrop-filter: blur(10px); }
.header-title-block { text-align: left; margin-bottom: 32px; }
.header-subtitle { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px 0; flex-wrap: wrap; }
.header-subtitle span:last-child { font-size: 13px; font-weight: 800; color: var(--text-light-gray); }
.main-title { font-size: 46px; font-weight: 900; margin: 0 0 16px 0; letter-spacing: 0.02em; line-height: 1.2; color: var(--text-dark); }
.header-desc { max-width: 920px; color: var(--text-gray); font-size: 16px; line-height: 1.7; }

/* 強調區塊的新樣式 */
.header-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 32px; }
.kpi-box { background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(109, 40, 217, 0.2); border-radius: 20px; padding: 20px; text-align: center; box-shadow: 0 8px 24px rgba(109, 40, 217, 0.06); transition: transform 0.2s ease; }
.kpi-box:hover { transform: translateY(-3px); }
.kpi-title { display: block; font-size: 20px; font-weight: 900; color: #4c1d95; margin-bottom: 6px; letter-spacing: 0.05em; }
.kpi-sub { font-size: 13px; font-weight: 600; color: #6b7280; letter-spacing: 0.05em; }


/* --- Section 03: Motto 格言 --- */
.motto-section { position: relative; margin: 0 0 60px 0; }
.motto-bg-square { position: absolute; left: -28px; top: 10px; width: 240px; height: 240px; border-radius: 56px; z-index: 0; pointer-events: none; background: linear-gradient(135deg, rgba(109,40,217,0.14), rgba(168,85,247,0.05)); transform: rotate(18deg); }
.motto-card-wrapper { position: relative; border-radius: 34px; overflow: hidden; }
.motto-decor-top { position: absolute; left: -20%; top: -58px; width: 140%; height: 170px; transform: skewY(-6deg); background: linear-gradient(90deg, rgba(109,40,217,0.22), rgba(168,85,247,0.12)); }
.motto-decor-bottom { position: absolute; left: -12%; bottom: -68px; width: 130%; height: 180px; transform: skewY(7deg); background: linear-gradient(90deg, rgba(168,85,247,0.12), rgba(109,40,217,0.06)); }
.motto-content { position: relative; padding: 32px 30px; border-radius: 34px; background: var(--accent-bg-glass); border: 1px solid var(--accent-border); backdrop-filter: blur(5px); }
.motto-flex { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.motto-label-col { min-width: 200px; }
.gradient-bar { margin-top: 10px; width: 52px; height: 4px; border-radius: 99px; background: linear-gradient(135deg,#6d28d9,#a855f7); }
.motto-text-col { flex: 1; min-width: 260px; }
.motto-heading { font-size: 18px; font-weight: 900; color: var(--text-dark); margin: 0 0 8px 0; }
.motto-desc { color: #475569; font-size: 14px; }

/* --- Section 04: Story 故事 --- */
.story-section { position: relative; margin: 0 0 72px 0; }
.story-bg-card { position: absolute; right: -56px; top: -8px; width: 240px; height: 170px; border-radius: 52px; pointer-events: none; z-index: 0; background: linear-gradient(135deg, rgba(168,85,247,0.14), rgba(109,40,217,0.05)); transform: rotate(-12deg); }
.section-title { font-size: 34px; font-weight: 900; margin: 0 0 14px 0; position: relative; z-index: 1; }
.story-body {position: relative;padding-left: 0;max-width: 100%;display: flex;flex-direction: column;justify-content: center;}
.vertical-line-accent {position: absolute;left: -2%;top: 6px;bottom: 6px;width: 3px;border-radius: 99px;background: linear-gradient(180deg,#6d28d9,#a855f7);opacity: 0;}
.story-p { color: var(--text-gray); font-size: 15px; margin: 0 0 14px 0; }
.quote-box {position: relative;margin-top: 50px;padding: 18px 18px;border-radius: 26px;background: rgba(255,255,255,0.66);border: 1px dashed rgba(109,40,217,0.26);}
.quote-deco-pill { position: absolute; left: 14px; top: -10px; width: 92px; height: 18px; border-radius: 999px; background: rgba(109,40,217,0.14); }
.quote-highlight { font-weight: 900; color: #4c1d95; margin: 0 0 8px 0; }
.quote-text { font-weight: 900; color: var(--text-dark); font-size: 15px; }

.story-JJbox{display:grid;grid-template-columns: 28% 70%;gap: 2%;}


/* --- Section 05: Mission 使命 --- */
.mission-section { position: relative; margin: 0 0 78px 0; }
.mission-bg-blob { position: absolute; left: -80px; top: 36px; width: 280px; height: 116px; border-radius: 999px; pointer-events: none; z-index: 0; background: linear-gradient(90deg, rgba(109,40,217,0.14), rgba(168,85,247,0.05)); transform: rotate(8deg); }
.mission-card-wrapper { position: relative; border-radius: 36px; overflow: hidden; }
.mission-skew-bg { position: absolute; left: -14%; top: -60px; width: 140%; height: 190px; transform: skewY(-6deg); background: linear-gradient(90deg, rgba(109,40,217,0.14), rgba(168,85,247,0.10)); }
.mission-flow-line { position: absolute; left: -40px; top: 56px; width: 780px; height: 2px; border-radius: 99px; opacity: 0.50; background: linear-gradient(90deg, rgba(109,40,217,0.00), rgba(109,40,217,0.18), rgba(168,85,247,0.00)); transform: rotate(-8deg); }
.mission-content { position: relative; padding: 30px 28px; border-radius: 36px; background: var(--accent-bg-glass); border: 1px solid var(--accent-border); }
.mission-punchline {margin-top: 10px;font-weight: 900;color: #4c1d95;font-size: 20px;}

/* --- Section 06: How We Do 方法 --- */
.how-section { position: relative; margin: 0 0 80px 0; }
.how-bg-square {position: absolute;right: 60px;top: 6px;width: 240px;height: 240px;border-radius: 60px;pointer-events: none;z-index: 0;background: linear-gradient(135deg, rgba(109,40,217,0.12), rgba(168,85,247,0.06));transform: rotate(10deg);}
.how-grid { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; }
.how-col { flex: 1; min-width: 280px; position: relative; border-radius: 30px; overflow: hidden; }
/* 左欄裝飾 */
.how-decor-left-1 { position: absolute; left: -110px; top: -76px; width: 400px; height: 210px; border-radius: 90px; background: linear-gradient(135deg, rgba(168,85,247,0.12), rgba(109,40,217,0.06)); transform: rotate(12deg); }
.how-decor-left-2 { position: absolute; right: -110px; bottom: -86px; width: 500px; height: 210px; border-radius: 999px; background: linear-gradient(90deg, rgba(109,40,217,0.10), rgba(168,85,247,0.04)); transform: rotate(-8deg); }
/* 右欄裝飾 */
.how-decor-right-1 { position: absolute; left: -40px; top: 44px; width: 760px; height: 2px; border-radius: 99px; opacity: 0.45; background: linear-gradient(90deg, rgba(109,40,217,0.00), rgba(109,40,217,0.16), rgba(168,85,247,0.00)); transform: rotate(-10deg); }
.how-decor-right-2 { position: absolute; left: -20px; top: 70px; width: 860px; height: 1px; border-radius: 99px; opacity: 0.42; background: linear-gradient(90deg, rgba(168,85,247,0.00), rgba(168,85,247,0.14), rgba(109,40,217,0.00)); transform: rotate(-10deg); }

.how-card-content { position: relative; z-index: 2; padding: 26px 22px; border-radius: 30px; background: var(--accent-bg-glass); border: 1px solid var(--accent-border); height: 100%; }
.how-step-item { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px 0; }
.how-step-item:last-child { margin: 0; }
.step-num { min-width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12px; color: #fff; background: linear-gradient(135deg,#6d28d9,#a855f7); }
.step-desc { color: var(--text-gray); font-size: 14px; }
.how-punchline {font-weight: 900;color: #4c1d95;font-size: 18px;margin-top: 6px;}
.how-card-content.toowitem{display: grid;grid-template-columns: 39% 58%;gap: 3%;align-items: center;}
/* --- Section 07: Evolution 進化之路 (更新：線條貫穿) --- */
.evo-section { position: relative; margin: 0 0 86px 0; }
.evo-bg-blob { position: absolute; left: -48px; top: 10px; width: 210px; height: 210px; border-radius: 52px; pointer-events: none; z-index: 0; background: linear-gradient(135deg, rgba(168,85,247,0.10), rgba(109,40,217,0.05)); transform: rotate(-10deg); }
.evo-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 18px 0; }
.evo-timeline-wrap { position: relative; padding-left: 26px; }

.JJpoimg img{border-radius: 15px;}

/* 計算說明：
   - 圓點(.evo-dot) 在 item 內 left: 22px
   - Item 在 wrapper 內 margin-left: -26px
   - Wrapper padding-left: 26px
   => Item content box starts at Wrapper border box 0px?
   - 調整策略：讓線條對齊圓點中心。圓點寬 14px，中心 7px。
   - 圓點相對 Item: left 22px. Center = 29px.
   - 線條寬 3px. Center = 1.5px.
   - 線條 left = 29 - 1.5 = 27.5px.
*/
.evo-main-line { position: absolute; left: 27.5px; top: 0; bottom: 0; width: 3px; border-radius: 99px; background: linear-gradient(180deg,#6d28d9,#a855f7); z-index: 0; }

.evo-item { position: relative; margin: 0 0 18px 0; margin-left: -26px; padding: 22px 20px 22px 46px; border-radius: 30px; background: var(--accent-bg-glass); border: 1px solid var(--accent-border); overflow: hidden; z-index: 1; }
.evo-item:last-child { margin-bottom: 0; }
.evo-dot { position: absolute; left: 22px; top: 28px; width: 14px; height: 14px; border-radius: 99px; background: #eef0f3; border: 3px solid #8b5cf6; box-shadow: 0 10px 24px rgba(109,40,217,0.18); z-index: 2; }
.evo-year { font-weight: 900; color: #4c1d95; font-size: 14px; margin: 0 0 6px 0; position: relative; z-index: 2; }
.evo-title { font-weight: 900; color: var(--text-dark); font-size: 16px; margin: 0 0 8px 0; position: relative; z-index: 2; }
.evo-desc { color: var(--text-gray); font-size: 14px; margin: 0; position: relative; z-index: 2; }

/* 進化卡片個別裝飾 */
.evo-decor-1 { position: absolute; left: -110px; top: -74px; width: 400px; height: 210px; border-radius: 90px; pointer-events: none; background: linear-gradient(135deg, rgba(109,40,217,0.14), rgba(168,85,247,0.05)); transform: rotate(14deg); }
.evo-decor-2 { position: absolute; right: -160px; bottom: -100px; width: 660px; height: 230px; border-radius: 999px; pointer-events: none; background: linear-gradient(90deg, rgba(168,85,247,0.10), rgba(109,40,217,0.05)); transform: rotate(-10deg); }
.evo-decor-3 { position: absolute; left: -40px; top: 54px; width: 860px; height: 2px; border-radius: 99px; opacity: 0.42; pointer-events: none; background: linear-gradient(90deg, rgba(109,40,217,0.00), rgba(109,40,217,0.14), rgba(168,85,247,0.00)); transform: rotate(-10deg); }
.evo-decor-4 { position: absolute; left: -110px; bottom: -86px; width: 500px; height: 230px; border-radius: 999px; pointer-events: none; background: linear-gradient(90deg, rgba(109,40,217,0.12), rgba(168,85,247,0.05)); transform: rotate(10deg); }
.evo-decor-5 { position: absolute; right: -72px; top: -56px; width: 240px; height: 170px; border-radius: 52px; pointer-events: none; background: linear-gradient(135deg, rgba(168,85,247,0.14), rgba(109,40,217,0.06)); transform: rotate(-14deg); }

/* --- Section 08: CTA --- */
.cta-section { position: relative; margin: 0 0 90px 0; border-radius: 38px; overflow: hidden; background: linear-gradient(135deg, rgba(109,40,217,0.62) 0%, rgba(168,85,247,0.50) 48%, rgba(109,40,217,0.44) 100%); }
.cta-bg-wrapper { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cta-decor-1 { position: absolute; left: -10%; top: -110px; width: 120%; height: 260px; transform: skewY(-5deg); background: linear-gradient(90deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.08) 55%, rgba(255,255,255,0.00) 100%); }
.cta-decor-2 { position: absolute; right: -160px; bottom: -150px; width: 620px; height: 320px; border-radius: 999px; background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.00) 62%); }
.cta-decor-3 { position: absolute; left: -160px; bottom: -220px; width: 520px; height: 520px; border-radius: 999px; background: radial-gradient(circle, rgba(15,23,42,0.12) 0%, rgba(15,23,42,0.00) 66%); }
.cta-decor-rect { position: absolute; left: 18px; top: 16px; width: 176px; height: 54px; border-radius: 18px; background: rgba(255,255,255,0.24); border: 1px solid rgba(255,255,255,0.26); transform: rotate(-2deg); }
.cta-decor-line-1 { position: absolute; left: -40px; top: 84px; width: 760px; height: 2px; border-radius: 99px; opacity: 0.38; background: linear-gradient(90deg, rgba(255,255,255,0.00), rgba(255,255,255,0.24), rgba(255,255,255,0.00)); transform: rotate(-10deg); }
.cta-decor-line-2 { position: absolute; left: -24px; top: 110px; width: 820px; height: 1px; border-radius: 99px; opacity: 0.34; background: linear-gradient(90deg, rgba(255,255,255,0.00), rgba(255,255,255,0.20), rgba(255,255,255,0.00)); transform: rotate(-10deg); }
.cta-content { position: relative; z-index: 2; padding: 34px 28px; }
.cta-title {font-size: 3rem;font-weight: 900;color: #ffffff;margin: 0 0 10px 0;}
.cta-desc { color: rgba(255,255,255,0.92); font-size: 14px; max-width: 980px; margin: 0; }

/* --- Section 09: Video --- */
.video-section { margin: 0; padding: 0; }
.video-label { font-size: 14px; font-weight: 900; color: #4c1d95; letter-spacing: 0.18em; margin: 0 0 12px 0; }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 28px; background: #000; box-shadow: 0 22px 56px rgba(15,23,42,0.20); border: 1px solid rgba(109,40,217,0.10); }
.video-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 980px){
    .story-JJbox{display:flex;flex-direction: column;align-items: center;}
   .story-bimg{display: flex;flex-direction: column;align-items: center;}
    .story-bimg img{width:min(500px , 100%)}
}
@media (max-width: 768px) {
    .content-wrapper { padding: 40px 16px 80px; }
    .main-title , .section-title {font-size: 30px;}
    .header-top-row { justify-content: flex-start; }
    .kpi-group { justify-content: flex-start; }
    .motto-flex { flex-direction: column; gap: 10px; }
    .motto-label-col { min-width: 100%; }
    .how-col { min-width: 100%; }
    .how-card-content.toowitem{display:flex;flex-direction: column;}
}

@media (max-width: 480px) {
    .main-title { font-size: 28px; }
    .section-title { font-size: 26px; }
    .header-content, .motto-content, .mission-content, .cta-content, .how-card-content { padding: 24px 20px; }
    .evo-item { padding: 20px 16px 20px 42px; }
    .evo-dot { left: 18px; }
    .header-kpi-grid { grid-template-columns: 1fr; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}