/* ============================================
   HKEEIA Site Theme — 全站設計系統
   源自 AI 實驗室視覺語言：
   漸變 hero · 圓點圖案 · 漂浮圖形 · 玻璃擬態 · 漸變文字
   ============================================ */

/* ---------- 頁面 Hero（每頁一個配色變體） ---------- */
.page-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 5.5rem 0 4.5rem;
    isolation: isolate;
}

.page-hero::before { /* 放射光暈 */
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(560px 340px at 12% 18%, rgba(255, 255, 255, 0.14), transparent 65%),
        radial-gradient(640px 420px at 88% 82%, rgba(255, 255, 255, 0.10), transparent 65%);
    pointer-events: none;
}

.page-hero::after { /* 圓點網格，向下淡出 */
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 82%);
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 82%);
    pointer-events: none;
}

/* 各頁配色 */
.page-hero--violet { background: linear-gradient(135deg, #1a1a40 0%, #270082 52%, #7a0bc0 100%); }
.page-hero--indigo { background: linear-gradient(135deg, #171744 0%, #34318f 50%, #5b4fcf 100%); }
.page-hero--sky    { background: linear-gradient(135deg, #062a52 0%, #0b5fa5 50%, #0ea5e9 100%); }
.page-hero--teal   { background: linear-gradient(135deg, #043b3a 0%, #0b6e63 50%, #14b8a6 100%); }
.page-hero--rose   { background: linear-gradient(135deg, #3d0c33 0%, #86135f 50%, #ec4899 100%); }
.page-hero--amber  { background: linear-gradient(135deg, #3f2004 0%, #92501a 50%, #f59e0b 100%); }
.page-hero--grape  { background: linear-gradient(135deg, #2b0b45 0%, #5b21b6 50%, #a855f7 100%); }
.page-hero--ocean  { background: linear-gradient(135deg, #082f3f 0%, #0e5e77 50%, #06b6d4 100%); }
.page-hero--jade   { background: linear-gradient(135deg, #053b2f 0%, #0f7a5c 50%, #10b981 100%); }

/* 漂浮裝飾圖形（放在 hero 內的 .page-hero-shapes 容器） */
.page-hero-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.page-hero-shapes span {
    position: absolute;
    display: block;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    background: rgba(255, 255, 255, 0.08);
    animation: phFloat 10s ease-in-out infinite;
}
.page-hero-shapes span:nth-child(1) { width: 220px; height: 220px; top: -70px; right: 8%; }
.page-hero-shapes span:nth-child(2) { width: 140px; height: 140px; bottom: -40px; left: 6%; animation-delay: -3s; animation-duration: 12s; }
.page-hero-shapes span:nth-child(3) { width: 90px; height: 90px; top: 32%; right: 28%; animation-delay: -6s; animation-duration: 9s; background: rgba(255, 255, 255, 0.06); }

@keyframes phFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-22px) rotate(8deg); }
}

/* Hero 內容元素 */
.page-hero .glass-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: var(--fs-sm, 0.9rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-bottom: 1.25rem;
}

.page-hero h1 {
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

.page-hero h1 .gradient-text,
.gradient-text {
    background: linear-gradient(92deg, #ffe29f 0%, #ffa99f 48%, #ffd6ff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.page-hero .lead { color: rgba(255, 255, 255, 0.88); max-width: 46rem; }

.page-hero .hero-icon { /* 右側大圖示（可選） */
    font-size: clamp(4rem, 9vw, 7.5rem);
    color: rgba(255, 255, 255, 0.20);
    line-height: 1;
}

/* ---------- 區塊標題 ---------- */
.section-title { margin-bottom: 2.75rem; }
.section-title .overline {
    display: inline-block;
    font-size: var(--fs-xs, 0.78rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary-color, #667eea);
    margin-bottom: 0.6rem;
}
.section-title h2 { font-weight: 800; letter-spacing: 0.01em; }
.section-title .title-underline {
    width: 64px;
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary-color, #667eea), var(--secondary-color, #764ba2));
    margin-top: 1rem;
}
.section-title.text-center .title-underline { margin-left: auto; margin-right: auto; }

/* ---------- 通用卡片（22px 圓角 + 懸浮浮起） ---------- */
.site-card {
    border: 1px solid rgba(102, 126, 234, 0.12);
    border-radius: 22px;
    box-shadow: 0 6px 24px rgba(23, 23, 68, 0.07);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    overflow: hidden;
    background: #fff;
}
.site-card:hover, a.site-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 44px rgba(23, 23, 68, 0.14);
}

/* ---------- 漸變 CTA 面板 ---------- */
.cta-panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 26px;
    padding: 3.5rem 2.5rem;
    color: #fff;
    background: linear-gradient(135deg, #1a1a40 0%, #270082 52%, #7a0bc0 100%);
    box-shadow: 0 20px 50px rgba(39, 0, 130, 0.28);
}
.cta-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(120deg, transparent 40%, rgba(0, 0, 0, 0.85));
            mask-image: linear-gradient(120deg, transparent 40%, rgba(0, 0, 0, 0.85));
}
.cta-panel h2 { font-weight: 800; }

/* ---------- 漸變按鈕 ---------- */
.btn-gradient {
    background: linear-gradient(92deg, #667eea, #764ba2);
    border: none;
    color: #fff;
    font-weight: 700;
    padding: 0.7rem 1.7rem;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(102, 126, 234, 0.38);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-gradient:hover, .btn-gradient:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.5);
}
.btn-glass { /* 深色背景上的玻璃按鈕 */
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-weight: 700;
    padding: 0.7rem 1.7rem;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    transition: background 0.25s ease, transform 0.25s ease;
}
.btn-glass:hover, .btn-glass:focus { background: rgba(255, 255, 255, 0.26); color: #fff; transform: translateY(-2px); }

/* ---------- 進場動畫 ---------- */
@keyframes phRise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rise-in { animation: phRise 0.7s ease both; }
.rise-in[data-delay="1"] { animation-delay: 0.1s; }
.rise-in[data-delay="2"] { animation-delay: 0.2s; }
.rise-in[data-delay="3"] { animation-delay: 0.3s; }

/* ---------- 頁面主體柔背景 ---------- */
.soft-section { background: linear-gradient(180deg, #f6f7ff 0%, #ffffff 100%); }

/* ---------- 減少動態偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    .page-hero-shapes span,
    .rise-in { animation: none !important; }
    .site-card, .site-card:hover { transition: none; transform: none; }
}

@media (max-width: 767.98px) {
    .page-hero { padding: 4rem 0 3.25rem; }
    .cta-panel { padding: 2.5rem 1.5rem; }
}