/* style.css - Panforia Global Styles (FINAL VERSION) */

/* --- 0. 全局变量与基础设置 --- */
:root {
    --primary-accent: #BF4B37;  /* 橙红色 */
    --bg-dark: #2E0D0C;         /* 深红褐色背景 */
    --text-title: #F2D6C2;      /* 标题米杏色 */
    --text-body: #FBF4EF;       /* 正文浅米色 */
    --glow-color: rgba(191, 75, 55, 0.3);
    
    /* 字体变量 */
    --font-heading: "Sora", sans-serif;
    --font-body: "DM Sans", sans-serif;
}

html { scroll-behavior: smooth; }

body { 
    font-family: var(--font-body); 
    font-optical-sizing: auto;
    background-color: var(--bg-dark); 
    color: var(--text-body); 
    margin: 0; 
    overflow-x: hidden; 
    font-weight: 400;
}

/* --- 1. 排版与通用类 --- */
h1, h2, h3, h4, .section-title, .nav-menu a, .cta-btn, .s2-title, .mission-quote, .card-name {
    font-family: var(--font-heading);
    letter-spacing: 0px; 
}

p { color: var(--text-body); }

.accent-text { color: var(--primary-accent) !important; }

/* 字体粗细辅助类 */
.font-light  { font-weight: 300; }
.font-regular{ font-weight: 400; }
.font-medium { font-weight: 500; }
.font-bold   { font-weight: 700; }
.font-black  { font-weight: 900; }

/* 通用部分标题 */
.section-title {
    font-size: clamp(32px, 5vw, 72px); 
    font-weight: 700; 
    
    line-height: 1.1;
    margin-bottom: 50px;
    color: var(--text-title);
    text-shadow: 0 0 30px rgba(242, 214, 194, 0.1);
}

.section-tag {
    color: var(--primary-accent);
    font-weight: 700;
    letter-spacing: 4px;
    
    font-size: 13px;
    margin-bottom: 20px;
    display: block;
}

.content-section {
    padding: 40px 10%; 
    margin: 140px auto;
    background-color: var(--bg-dark);
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.05); /* 增加微妙分割线 */
}

/* --- 2. 按钮样式 (CTA) --- */
.cta-btn {
    background: var(--primary-accent); 
    color: var(--text-body); 
    padding: 20px 50px; 
    font-size: 15px; 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    border: none; 
    cursor: pointer;
    transition: all 0.3s ease; 
    display: inline-block;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(191, 75, 55, 0.3);
    text-decoration: none;
}
.cta-btn:hover { 
    transform: scale(1.05); 
    box-shadow: 0 0 30px rgba(191, 75, 55, 0.6);
    background-color: #d6553f; 
    color: #fff;
}

#canvas {
  width: 100%;
  height: 100%;
}

/* --- 3. 导航栏 (保持原样) --- */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: 30px 4%;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 1000;
    background: rgba(46, 13, 12, 0.85);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: all 0.3s ease;
}

/* 首页特殊导航栏 */
nav.home-nav {
    position: absolute;
    background: transparent;
    border-bottom: none;
    backdrop-filter: none;
}

.nav-menu { display: flex; list-style: none; gap: 60px; align-items: center; margin: 0; padding: 0; }
.nav-menu a {
    text-decoration: none; font-size: 15px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; color: var(--text-body);
    transition: color 0.3s ease;
}
.nav-menu > li > a:hover { color: var(--primary-accent); }

/* 下拉菜单基础逻辑 */
/* 重要：为了让子菜单能相对于 nav 实现全屏宽，这里必须设为 static */
.nav-menu li.dropdown { 
    position: static; 
    display: inline-block; 
    padding-bottom: 55px; 
    margin-bottom: -55px; 
}

.dropdown-content {
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0;
    margin-top: -35px;

    background: rgba(46, 13, 12, 0.95); 
    backdrop-filter: blur(20px);
    z-index: 1001;
    border-top: 1px solid rgba(132, 199, 176,0.9);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    
    border-bottom: 1px solid rgba(132, 199, 176,0.9);
    
}

/* 非 Mega Menu 的普通下拉菜单宽度保持不变 (如新增的 Strategy) */
.dropdown:not(:has(.mega-menu)) .dropdown-content {
    width: 350px;
    left: auto; 
    margin-left: -50px;/* 自动对齐父元素 */
}

.dropdown-content a {
    color: rgba(242, 214, 194, 0.8) !important; 
    padding: 15px 25px;
    text-decoration: none; 
    display: block; 
    font-size: 14px; 
    text-transform: none;
    font-weight: 500; 
    transition: all 0.3s ease;
   
}

.dropdown-content a:hover {
    background: rgba(191, 75, 55, 0.1); 
    color: var(--primary-accent) !important; 
    /*padding-left: 35px;*/
}

.dropdown:hover .dropdown-content { display: block; }


/* =========================================
   Mega Menu (Solutions 超级菜单) 特有样式
   ========================================= */

/* 1. 容器调整：与 nav 同宽，左右内边距对齐 */
.dropdown-content.mega-menu {
    width: 100%;           /* 铺满整个导航栏宽度 */
    left: 0;               /* 从屏幕左侧开始 */
    transform: none;       /* 移除之前的偏移 */
    padding: 40px 4%;      /* 左右 4% 与 nav 保持一致 */
    box-sizing: border-box;
    
    
    display: none;         /* 初始隐藏 */
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

/* 2. 悬停显示 */
.dropdown:hover .dropdown-content.mega-menu {
    display: flex; 
}

/* 3. 列样式：允许根据文字内容自动撑开 */
.mega-column {
    flex: 0 1 auto; 
    padding: 0 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.05); 
}

.mega-column:last-child {
    border-right: none;
}

/* 4. 列标题 */
.mega-column h3 {
    color: var(--primary-accent, #dcbfa5); 
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 15px 25px; 
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    letter-spacing: 1px;
}

/* 5. 链接样式：强制文字不换行 */
.dropdown-content.mega-menu a {
    white-space: nowrap;   /* 强制文字在一行显示 */
    line-height: 1.4;
    padding: 10px 25px;
}

.dropdown-content.mega-menu a:hover {
    background: rgba(191, 75, 55, 0.05);
    
}

/* --- 4. Sub-Hero (内页头部) --- */
.sub-hero {
    padding: 240px 10% 140px;
    background-size: cover; background-position: center;
    position: relative;
    border-bottom: 2px solid;
}
.sub-hero h1 { 
    font-size: clamp(42px, 6vw, 80px); line-height: 1.05; 
    color: var(--text-title);  margin-bottom: 30px; 
    text-shadow: 0 10px 30px rgba(0,0,0,0.5); 
    font-weight: 700;
}
.sub-hero p { 
    max-width: 800px; font-size: 20px; line-height: 1.6; 
    border-left: 4px solid var(--primary-accent); padding-left: 25px; 
    backdrop-filter: blur(5px); padding-top: 20px; padding-bottom: 20px;
}

/* --- 5. 组件：Feature Block (Why Choose) --- */
.feature-block {
    background: rgba(255,255,255,0.03); padding: 40px; 
    border: 1px solid rgba(255,255,255,0.05); border-radius: 20px;
    transition: all 0.3s ease; position: relative; overflow: hidden;
}
.feature-block:hover { background: rgba(255,255,255,0.06); border-color: #84C7B0; }
.feature-block::after {
    content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(191, 75, 55, 0.1), transparent);
    transform: skewX(-25deg); transition: 0.7s;
}
.feature-block:hover::after { left: 120%; }

/* --- 6. 组件：Grid Layout (网格) --- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

/* --- 7. 组件：Glass Card (玻璃卡片 - 通用) --- */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px; border-radius: 16px;
    transition: all 0.4s ease; display: flex; flex-direction: column;
}
.glass-card:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-10px);
    border-color: rgba(191, 75, 55, 0.5);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.glass-card h3 {
    color: var(--primary-accent); font-size: 20px; margin-bottom: 15px; 
    letter-spacing: 1px; font-family: var(--font-heading);
}
.glass-card p { font-size: 15px; line-height: 1.6; opacity: 0.8; }
.card-icon {
    width: 50px; height: 50px; margin-bottom: 25px;
    color: var(--primary-accent); transition: transform 0.3s ease;
}
.glass-card:hover .card-icon { transform: scale(1.1) rotate(-5deg); }

/* --- 8. 组件：Horizontal Scroll (横向滚动) --- */
.h-scroll-section { height: 400vh; position: relative; }
.h-sticky-wrapper {
    position: sticky; top: 0; height: 100vh; width: 100%;
    overflow: hidden; display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(180deg, var(--bg-dark) 0%, #3a1110 50%, var(--bg-dark) 100%);
}
.h-header { padding: 0 10%; margin-bottom: 40px; position: absolute; top: 10%; left: 0; z-index: 10; }
.h-track {
    margin-top: 150px; display: flex; gap: 120px;
    padding-left: 10%; padding-right: 10%; will-change: transform;
}
.h-card {
    width: 66vw; height: 60vh; flex-shrink: 0; 
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px; overflow: hidden;
    position: relative; display: flex;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}
.h-card:hover {
    transform: translateY(-20px) scale(1.02);
    border-color: var(--primary-accent);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}
.h-card-img { flex: 1.2; height: 100%; position: relative; overflow: hidden; }
.h-card-img img { 
    width: 100%; height: 100%; object-fit: cover; 
    filter: grayscale(100%) contrast(1.2); transition: all 0.6s ease; 
}
.h-card:hover .h-card-img img { filter: grayscale(0%) contrast(1); transform: scale(1.1); }
.h-card-content {
    flex: 1; padding: 60px; display: flex; flex-direction: column; justify-content: center;
    position: relative; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px);
}
.h-card-num {
    font-size: 80px; font-weight: 900; color: rgba(255, 255, 255, 0.03);
    position: absolute; top: 20px; right: 30px; font-family: var(--font-heading);
    transition: color 0.4s;
}
.h-card:hover .h-card-num { color: rgba(191, 75, 55, 0.15); }
.h-card h3 {
    font-size: 32px; color: var(--text-title); margin-bottom: 25px; 
    line-height: 1.2; transition: 0.3s; font-family: var(--font-heading);
}
.h-card:hover h3 { color: var(--primary-accent); }
.h-card p { font-size: 18px; line-height: 1.7; opacity: 0.8; }
@media (max-width: 768px) {
    .h-card { width: 85vw; flex-direction: column; height: 75vh; }
    .h-card-img { height: 40%; flex: none; }
    .h-card-content { flex: 1; padding: 30px; }
    .h-track { gap: 40px; }
}

/* --- 9. 组件：Split Layout (左右分栏) --- */
.split-section-container { display: flex; flex-direction: column; gap: 100px; }
.split-layout { display: flex; flex-wrap: wrap; gap: 60px; align-items: center; }
.split-layout:nth-child(even) { flex-direction: row-reverse; }
.split-text { flex: 1; min-width: 320px; }
.split-img { 
    flex: 1; min-width: 320px; height: 450px; 
    border-radius: 12px; overflow: hidden; 
    border: 1px solid rgba(255,255,255,0.1); position: relative;
}
.split-img img { 
    width: 100%; height: 100%; object-fit: cover; 
    transition: transform 0.6s ease; filter: grayscale(20%); 
}
.split-layout:hover .split-img img { transform: scale(1.05); filter: grayscale(0%); }

/* 高亮文本框 */
.highlight-box {
    border-left: 4px solid var(--primary-accent);
    background: linear-gradient(90deg, rgba(191,75,55,0.1) 0%, transparent 100%);
    padding: 25px; border-radius: 0 8px 8px 0; margin-top: 30px;
}

/* --- 10. Contact Section & Footer --- */
/* --- 10. Contact Section (Fix 1px gap) --- */
#contact {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    position: relative; 
    overflow: hidden;
    
    background-color: var(--bg-dark);
    background-image: url('/image/cta.jpg'); 
    background-size: cover; 
    background-position: center;
    padding: 140px 10%;
    
    /* 关键修复 1: 移除可能继承自 .content-section 的边框 */
    border-top: none !important; 
}

#contact::before {
    content: "";
    position: absolute;
    /* 关键修复 2: 向上延伸 1px，确保覆盖所有缝隙 */
    top: -1px; 
    left: 0; 
    width: 100%; 
    /* 高度加 1px 以匹配向上延伸的部分 */
    height: calc(100% + 1px); 
    
    background-color: var(--primary-accent);
    z-index: 2;
    -webkit-mask-image: radial-gradient(circle 250px at var(--x, -500px) var(--y, -500px), rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 1) 100%);
    mask-image: radial-gradient(circle 250px at var(--x, -500px) var(--y, -500px), rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 1) 100%);
    pointer-events: none;
}
#contact svg { z-index: 1; }
#contact div { position: relative; z-index: 10; }

/* --- New Framework Grid (All-Visible Layout) --- */
.framework-section {
    position: relative;
    z-index: 10;
}

.bento-grid {
    display: grid;
    /* 大屏默认 3 列，自动适应 */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.bento-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    group: transition;
}

/* 悬停效果 */
.bento-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-accent);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* 图片区域 */
.bento-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.bento-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%); /* 默认黑白 */
    transition: transform 0.6s ease, filter 0.6s ease;
}

.bento-card:hover .bento-img img {
    transform: scale(1.1);
    filter: grayscale(0%); /* 悬停变彩色 */
}

/* 内容区域 */
.bento-content {
    padding: 30px;
    flex: 1; /* 撑满高度 */
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 背景大数字 */
.bento-num {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: var(--font-heading);
    font-size: 60px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.03);
    line-height: 1;
    pointer-events: none;
    transition: color 0.3s;
}
.bento-card:hover .bento-num {
    color: rgba(191, 75, 55, 0.15); /* 悬停数字变色 */
}

.bento-title {
    font-size: 22px;
    color: #fff;
    margin-bottom: 15px;
    font-family: var(--font-heading);
    position: relative;
    z-index: 2;
}

.bento-desc {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    z-index: 2;
}

/* 装饰性底条 */
.bento-card::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; width: 0%;
    height: 3px;
    background: var(--primary-accent);
    transition: width 0.4s ease;
}
.bento-card:hover::after {
    width: 100%;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr; /* 手机单列 */
    }
}

/* --- 新版服务展示：非对称网格 (纯橙色 + 统一标题 + 底部呼吸感留白) --- */
.framework-section {
    position: relative;
    z-index: 10;
}

.service-showcase {
    display: grid;
    /* 将整行分为 6 份，方便灵活切分 */
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-top: 50px;
}

/* --- 卡片基础样式 --- */
.svc-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    background: var(--bg-dark);
}

/* 布局控制：上 2 下 3 */
.svc-card:nth-child(1), .svc-card:nth-child(2) {
    grid-column: span 3; 
    height: 350px;
}
.svc-card:nth-child(3), .svc-card:nth-child(4), .svc-card:nth-child(5) {
    grid-column: span 2; 
    height: 300px;
}

/* --- 背景图片与遮罩 --- */
.svc-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(100%);
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.84);
    z-index: 1;
}

/* 默认状态：纯净的品牌橙红色 */
.svc-card::after {
    content: ''; position: absolute; inset: 0;
    background: var(--primary-accent); /* 纯色 */
    opacity: 0.85; /* 极微弱透明度，保持纯色感的同时避免死板 */
    z-index: 2;
    transition: all 0.5s ease;
}

/* 悬停状态：透出背景图，变为深色渐变以凸显白色文字 */
.svc-card:hover .svc-bg {
    transform: scale(1.05); /* 图片微放大 */
    filter: grayscale(0%);  /* 图片变彩色 */
}
.svc-card:hover::after {
    opacity: 1;
    /* 底部深暗红，顶部透明，给文字留出对比度 */
    background: linear-gradient(to top, rgba(20, 5, 5, 0.95) 0%, rgba(191, 75, 55, 0.6) 60%, rgba(191, 75, 55, 0.2) 100%);
}

/* --- 内容区域 --- */
.svc-content {
    position: absolute; inset: 0;
    z-index: 3;
    padding: 40px; /* 固定的 40px 内边距（留白） */
    display: flex; flex-direction: column; justify-content: flex-end;
}

/* 左上角数字 */
.svc-num {
    position: absolute; top: 30px; left: 30px;
    font-family: var(--font-heading); font-size: 20px; font-weight: 900;
    color: rgba(255,255,255,0.4); 
    transition: 0.4s;
    letter-spacing: 2px;
}
.svc-card:hover .svc-num { color: #fff; }

/* 文本容器：修复距离底边太近的问题 */
.svc-text-wrapper {
    transform: translateY(0); /* 归零！不再往下压，稳稳停在 padding 限定的 40px 处 */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.svc-card:hover .svc-text-wrapper {
    transform: translateY(-10px); /* 悬停时微微上浮一点点，给展开的描述腾出动感 */
}

/* 标题：统一所有卡片的字号 */
.svc-title {
    font-family: var(--font-heading); font-weight: 700;
    color: #fff; margin: 0;
    text-transform: uppercase; letter-spacing: 1px;
    transition: 0.4s;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
    font-size: 26px; /* 统一字号 */
    line-height: 1.2;
}

/* 详细描述：默认隐藏 */
.svc-desc {
    font-size: 15px; color: rgba(255,255,255,0.95); line-height: 1.6;
    max-height: 0; opacity: 0; overflow: hidden; /* 高度为0且隐藏溢出 */
    margin-top: 0;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.svc-card:hover .svc-desc {
    max-height: 150px; /* 悬停展开高度 */
    opacity: 1;
    margin-top: 15px; /* 与标题拉开距离 */
}
.cta-btn.with-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 18px; /* 箭头更长了，间距也稍微加大一点点让视觉更平衡 */
    }

    /* 箭头的初始状态 (无 transition，确保移开时不回转) */
    .cta-btn.with-arrow .arrow-icon {
        display: inline-block;
    }

    /* 鼠标悬浮时的状态 (只在这里加 transition) */
    .cta-btn.with-arrow:hover .arrow-icon {
        transition: transform 2.5s; 
        transform: rotateX(540deg);
    }


/* --- 移动端适配 --- */
@media (max-width: 900px) {
    .service-showcase { grid-template-columns: 1fr; }
    .svc-card:nth-child(n) { grid-column: span 1; height: 320px; }
    /* 手机上没有鼠标悬停，默认展示全部文字，背景保持深色渐变 */
    .svc-card::after {
        background: linear-gradient(to top, rgba(20, 5, 5, 0.95) 0%, rgba(191, 75, 55, 0.8) 60%, rgba(191, 75, 55, 0.2) 100%);
    }
    .svc-text-wrapper { transform: translateY(0); }
    .svc-desc { max-height: 200px; opacity: 1; margin-top: 15px; }
}
/* --- 新版服务展示：非对称网格 (纯橙色 + 统一标题 + 底部呼吸感留白) --- */


footer {
    padding: 70px 10%; background-color: var(--bg-dark); 
    display: flex; justify-content: space-between; align-items: center; 
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* Reveal Animation */
.reveal { opacity: 0; transform: translateY(30px); transition: all 1s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }