:root {
    --background-blue: #EAF6FF;
    --logo-pink: #ff00fe;
    --background-pink: #ffe4f6;

   
}

/* 在 css 文件最顶部添加这段代码 */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

.navbar {
    display: flex;
    height: 80px;
    justify-content: space-between;
    align-items: center;
    padding: 0px 40px 5px 30px;
    background-color: var(--background-blue);
}

.nav-left, .nav-right {
    display: flex;
    align-items: center;
}

.menu-links {
    margin-left: 30px;
}
.menu-links a, .nav-link {
    /* margin-left: 20px; */
    text-decoration: none;
    color: black;
    font-size: 20px;
    margin: 20px 15px;
    transition: font-weight 0.2s;
}

.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;
    /* transform: scale(0.6);
    transform-origin: left center; */
}

.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 20px; /* 增加与导航栏的间距，防止贴得太死 */
    margin-bottom: 20px;
}

.hero-title {
    font-size: 55px;
    font-weight: 700;
    color: black;
    /* 核心修改：移除固定高度，移除默认外边距 */
    height: auto; 
    margin: 0; 
    /* 设置一个较小的下外边距来拉近距离 */
    margin-bottom: 0px; 
}

.hero-subtitle {
    font-size: 20px;
    font-weight: 400;
    color: var(--gray-700);
    line-height: 1.6;
    /* 确保顶部没有多余间距 */
    margin-top: 0; 
}

.decorative-container {
    display: flex;
    justify-content: center; /* 在页面水平居中 */
    gap: 20px;               /* 左右两个盒子之间的间距 */
    margin-top: 0px;        /* 距离上方文字的间距 */
    padding: 0 40px;         /* 侧边留白 */
}



.box-right {
    position: relative; /* 核心：为绝对定位的子元素提供锚点 */
    width: 900px;       /* 保持你原本的盒子宽度 */
    height: 600px;
    background-color: var(--background-blue, #EAF6FF);
    border-radius: 20px;
    overflow: hidden;   /* 确保所有溢出部分（包括图片和覆盖层）都在圆角内 */
    display: flex;
    justify-content: flex-end; /* 图片依然靠最右 */
    align-items: center;
}
/* 微调原有的 .box-left 容器布局，使其符合图中的精美排版 */
.box-left {
    width: 600px;
    height: 600px;           /* 保持你的基础高度 */
    background-color: var(--background-blue);
    border-radius: 20px;
    flex-shrink: 0;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: flex-start; /* 从 center 改为 flex-start，实现精美的左对齐 */
    
    padding: 60px 50px;      /* 增加呼吸感内边距 */
    box-sizing: border-box;  /* 确保 padding 不会撑大 600px 的总宽高 */
}

/* 主标题 Miracor */
.miracor-title {
    font-size: 56px;
    font-weight: 800;
    color: var(--text-action); /* 使用你的深色主文字变量 */
    margin: 0 0 8px 0;         /* 紧贴副标题 */
    font-family: system-ui, -apple-system, sans-serif;
}

/* 副标题 The Digital Mirror of Your Soul */
.miracor-subtitle {
    font-size: 20px;
    font-style: italic;        /* 斜体 */
    font-weight: 400;
    color: #667085;            /* 优雅的烟灰色 */
    margin: 0 0 40px 0;        /* 与正文留出空隙 */
}

/* 正文描述 */
.miracor-description {
    font-size: 20px;
    line-height: 1.6;          /* 舒适的行高 */
    font-weight: 500;
    color: var(--text-action);
    margin: 0 0 45px 0;
}

/* 粉色装饰分割线 */
.pink-divider {
    width: 320px;              /* 精准还原图中的短横线长度 */
    height: 3px;               /* 粗细 */
    background-color: var(--logo-pink); /* 动态调用你的粉色变量 */
    margin: 0 0 25px 0;
}

/* 底部口号 Slogan */
.miracor-slogan {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-action);
    margin: 0;
}

.right-aligned-img {
    max-height: 100%;          /* 高度最高与容器等高，实现完美贴合 */
    object-fit: contain;       /* 保持图片原本的宽高比，不拉伸变形 */
    display: block;
}

.box-right-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;      /* 强行指定宽度为 600px */
    height: 100%;      /* 等高 */
    background-color: #EAF6FF; /* 使用你指定的纯色背景，覆盖底层图片 */
    z-index: 2;        /* 确保层级在图片上方 */
    
    /* 圆角微调：左侧保持容器的 20px 圆角，右侧直角切齐过渡 */
    border-radius: 20px 0 0 20px; 
    
    /* 内部文案排版 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 50px 40px;
    box-sizing: border-box;
}

/* 覆盖层内的文案细节样式 */
.overlay-tag {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--logo-pink, #ff00fe);
    font-weight: 700;
    margin-bottom: 12px;
}

.overlay-heading {
    font-size: 32px;
    line-height: 1.2;
    color: var(--text-action, #0d1b2a);
    font-weight: 800;
    margin: 0 0 40px 0;
}

.overlay-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: auto; /* 将尾部宣言推向最下方 */
}

.content-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.content-item p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-action, #0d1b2a);
    margin: 0;
}

/* 还原图中的数字标签风格 */
.item-num-pink, .item-num-black {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}
.item-num-pink { background-color: var(--logo-pink, #ff00fe); }
.item-num-black { background-color: #0d1b2a; }



.overlay-content {
    display: flex;
    flex-direction: column;
    gap: 18px; /* 稍微缩紧间距，为第三条内容腾出完美空间 */
    margin-bottom: auto; 
}

/* 底部宣言与演讲者的外层包裹框 */
.footer-quote-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 25px;
}

/* 底部战略主张宣言（去掉了原有的左边框，采用更纯粹的引用样式） */
.overlay-footer {
    font-size: 13.5px;
    line-height: 1.5;
    font-style: italic;
    color: #5c677d;
    margin: 0 0 6px 0;
}

/* 演讲者姓名：实现完美右对齐 */
.quote-author {
    font-size: 14px;
    font-weight: 700;
    color: #5c677d;
    align-self: flex-end; /* 核心：强行让自身在 Flex 容器中靠右对齐 */
    font-family: system-ui, -apple-system, sans-serif;
}


/* 核心内容包裹框 */
.about-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 40px;
    display: flex;
    flex-direction: column;
    gap: 60px; /* 移除了中文，模块更紧凑精致 */
    box-sizing: border-box;
}

/* 独立篇章卡片基础样式 */
.about-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    background-color: var(--background-blue, #EAF6FF);
    padding: 60px;
    border-radius: 20px;
    box-sizing: border-box;
}

/* 文字叙事主区域 */
.section-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 针对全宽度的第二、三篇章 */
.section-content.full-width {
    width: 100%;
}

/* 顶部小标签 */
.section-tag {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--logo-pink, #ff00fe);
    font-weight: 700;
    margin-bottom: 12px;
}

/* 篇章核心大标题 */
.section-title {
    font-size: 36px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--text-action, #0d1b2a);
    margin: 0 0 16px 0;
}

/* PPT 风格的粉色精细分割线 */
.pink-line {
    width: 60px;
    height: 3px;
    background-color: var(--logo-pink, #ff00fe);
    margin-bottom: 20px;
}

/* 英文正文描述 */
.section-desc {
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-action, #0d1b2a);
    margin: 0;
}

.section-image {
    flex-shrink: 0;
    width: 420px;
    height: 300px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(13, 27, 42, 0.04);
}

.lonely-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证原图完美填充不缩放变形 */
}


.product-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    gap: 80px;
    box-sizing: border-box;
}

/* 模块通用骨架 */
.prod-section {
    background-color: var(--background-blue, #EAF6FF);
    border-radius: 20px;
    padding: 60px;
    box-sizing: border-box;
}

/* 经典对称左右布局网格 */
.prod-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.prod-text-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.prod-tag {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--logo-pink, #ff00fe);
    font-weight: 700;
    margin-bottom: 12px;
}

.prod-title {
    font-size: 34px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--text-action, #0d1b2a);
    margin: 0 0 16px 0;
}

.prod-pink-line {
    width: 60px;
    height: 3px;
    background-color: var(--logo-pink, #ff00fe);
    margin-bottom: 24px;
}
.prod-pink-line.centered { margin: 0 auto 40px auto; }

.prod-desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-action, #0d1b2a);
    margin: 0;
}

/* 居中型头部控制 */
.center-header {
    text-align: center;
}

/* ==========================================================================
   第一篇章：水獭招手动画专享 DIV 挂载点
   ========================================================================== */
.sea-otter-animation-container {
    width: 100%;
    height: 340px;
    background-color: #ffffff; /* 保持纯白底，给动画提供干净的画布空间 */
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(13, 27, 42, 0.03);
}

/* ==========================================================================
   第二篇章：三位吉祥物卡片网格布局
   ========================================================================== */
.guardians-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.guardian-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 20px rgba(13, 27, 42, 0.02);
}

.card-img-wrapper {
    width: 140px;
    height: 140px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.guardian-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.guardian-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-action, #0d1b2a);
    margin: 0 0 10px 0;
}

/* 吉祥物属性小胶囊样式 */
.element-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}
.element-badge.earth { background-color: #E2F5EC; color: #15803D; }
.element-badge.water { background-color: #E0F2FE; color: #0369A1; }
.element-badge.wind  { background-color: #FEF3C7; color: #B45309; }

.badge-title {
    font-size: 13px;
    font-weight: 700;
    color: #5c677d;
    margin: 0 0 10px 0;
}

.card-detail {
    font-size: 13.5px;
    line-height: 1.5;
    color: #5c677d;
    margin: 0;
}

/* ==========================================================================
   第三篇章：硬件实物展示区
   ========================================================================== */
.hardware-bullets {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.bullet-item {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-action, #0d1b2a);
    padding-left: 14px;
    border-left: 3px solid var(--logo-pink, #ff00fe);
}

.demo-image-wrapper {
    width: 100%;
    height: 360px;
    border-radius: 14px;
    overflow: hidden;
}

.demo-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证硬件大图平铺不变形 */
}

/* ==========================================================================
   第四篇章：时间线行为路径布局
   ========================================================================== */
.timeline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.timeline-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 30px;
    box-sizing: border-box;
    border: 2px solid transparent;
}

/* 完美高亮 PPT 里的 14:00 黄金时段 */
.timeline-card.highlighted-time {
    background-color: var(--text-action, #0d1b2a);
    color: #ffffff;
}

.time-header {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 4px;
    font-family: monospace, sans-serif;
}

.time-tag {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--logo-pink, #ff00fe);
    margin-bottom: 16px;
}

.timeline-card p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.timeline-card:not(.highlighted-time) p { color: #5c677d; }

/* ==========================================================================
   移动端响应式处理
   ========================================================================== */
@media (max-width: 968px) {
    .prod-grid-2, .guardians-grid, .timeline-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .prod-section { padding: 40px 24px; }
}

.box-video-circle {
    padding-top: 0px;
    padding-bottom: 0px;
    width: 400px;            /* 设置为正方形宽度 */
    height: 400px;           /* 设置为正方形高度 */
    border-radius: 50%;      /* 核心：直接将视频变成圆形 */
    object-fit: cover;       /* 核心：确保视频内容填满圆形且不拉伸 */
    
    background-color: var(--sea--decorativeCircle); /* 视频加载前或透明区域的背景色 */
}

/* ==========================================================================
   Our Plan 页面核心美化（横竖交替复合排版风格）
   ========================================================================== */

.plan-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    gap: 80px;
    box-sizing: border-box;
}

.plan-section {
    background-color: #ffffff; /* 采用白底容器，内部配合带有各种主题色的PPT卡片 */
    border-radius: 24px;
    padding: 40px;
    box-sizing: border-box;
    border: 1px solid rgba(13, 27, 42, 0.05);
}

.plan-tag {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--logo-pink, #ff00fe);
    font-weight: 700;
    margin-bottom: 12px;
    display: block;
}

.plan-title {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--text-action, #0d1b2a);
    margin: 0 0 16px 0;
}

.plan-pink-line {
    width: 60px;
    height: 3px;
    background-color: var(--logo-pink, #ff00fe);
    margin-bottom: 32px;
}
.plan-pink-line.centered { margin: 0 auto 32px auto; }

/* ==========================================================================
   第一篇章：商业经济飞轮网格 (纵横混排)
   ========================================================================== */
.flywheel-mixed-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* 左侧卡片堆叠，右侧横向飞轮 */
    gap: 40px;
    align-items: stretch;
}

/* 左侧纵向卡片层叠结构 */
.monetization-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mono-card {
    border-radius: 16px;
    padding: 24px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.mono-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
}
.mono-card p {
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
}

/* 完美还原 PPT 的三种频次业务色块组合 */
.bento-dark { background-color: var(--text-action, #0d1b2a); color: #ffffff; }
.bento-dark p { color: #a4b0be; }
.bento-pink { background-color: #FFF0FF; border: 1.5px solid var(--logo-pink, #ff00fe); color: var(--text-action, #0d1b2a); }
.bento-blue { background-color: #F0F7FF; color: var(--text-action, #0d1b2a); }

/* 卡片右上角小标签 */
.card-badge {
    position: absolute;
    top: 24px;
    right: 30px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.card-badge.long-tail { color: var(--logo-pink, #ff00fe); }
.card-badge.medium-freq { color: var(--logo-pink, #ff00fe); }
.card-badge.high-freq { color: #0284c7; }

/* 右侧横向飞轮逻辑展示盒 */
.flywheel-logic-box {
    background-color: var(--background-blue, #EAF6FF);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logic-header {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--logo-pink, #ff00fe);
    margin-bottom: 30px;
}

.logic-flow-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.step-node {
    background-color: #ffffff;
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(13, 27, 42, 0.02);
    display: flex;
    flex-direction: column;
}

.step-sub {
    font-size: 12px;
    color: #5c677d;
    margin-top: 2px;
}

.step-arrow {
    text-align: center;
    color: var(--logo-pink, #ff00fe);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
}

/* ==========================================================================
   第二篇章：GTM 三横列大卡片布局
   ========================================================================== */
.gtm-phases-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.phase-border-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 35px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
}

/* 三色精致极细外边框还原 */
.phase-border-card.border-pink { border: 2px solid #FFC2FF; }
.phase-border-card.border-blue { border: 2px solid #BFDBFE; }
.phase-border-card.border-green { border: 2px solid #BBF7D0; }

.phase-border-card h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-action, #0d1b2a);
    margin: 16px 0 12px 0;
}

.phase-border-card p {
    font-size: 14px;
    line-height: 1.5;
    color: #5c677d;
    margin: 0;
}

/* 阶段名称彩色小药丸标签 */
.phase-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    color: #ffffff;
}
.pill-pink { background-color: var(--logo-pink, #ff00fe); }
.pill-blue { background-color: #3b82f6; }
.pill-green { background-color: #10b981; }

/* GTM 底部横向流动长条 */
.gtm-footer-bar {
    background-color: var(--background-blue, #EAF6FF);
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.bar-item {
    font-size: 13px;
    display: flex;
    flex-direction: column;
}
.bar-item strong { color: var(--logo-pink, #ff00fe); margin-bottom: 2px; }
.bar-item span { color: var(--text-action, #0d1b2a); font-size: 12px; }
.bar-arrow { color: var(--logo-pink, #ff00fe); font-weight: 700; }

/* ==========================================================================
   第三篇章：跨年度产品路线图看板 (纵向四列全高排版)
   ========================================================================== */
.roadmap-board-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
}

.roadmap-column {
    border-radius: 20px;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 极致高级的 PPT 莫兰迪低饱和半透明底色复刻 */
.col-soft-blue   { background-color: #EFF6FF; border: 1.5px solid #DBEAFE; }
.col-soft-pink   { background-color: #FFF5FF; border: 1.5px solid #FCE7F3; }
.col-soft-green  { background-color: #F0FDF4; border: 1.5px solid #DCFCE7; }
.col-soft-purple { background-color: #FA57FF10; border: 1.5px solid #F3E8FF; }

.col-time {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-action, #0d1b2a);
    margin-bottom: 4px;
}

.col-subtitle {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.col-soft-blue .col-subtitle   { color: #2563eb; }
.col-soft-pink .col-subtitle   { color: var(--logo-pink, #ff00fe); }
.col-soft-green .col-subtitle  { color: #16a34a; }
.col-soft-purple .col-subtitle { color: #9333ea; }

.col-bullet-list {
    padding-left: 16px;
    margin: 0 0 auto 0; /* 自动向下推开 Milestone 门禁盒子 */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.col-bullet-list li {
    font-size: 13px;
    line-height: 1.5;
    color: #4a5568;
}

/* 底部关键里程碑卡片 */
.gate-box {
    margin-top: 30px;
    background-color: #ffffff;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #4a5568;
    border-left: 3px solid var(--text-action, #0d1b2a);
    box-shadow: 0 4px 10px rgba(13, 27, 42, 0.02);
}
.gate-box strong {
    color: var(--text-action, #0d1b2a);
    display: block;
    margin-bottom: 2px;
}

/* ==========================================================================
   全设备流式响应式断点
   ========================================================================== */
@media (max-width: 1024px) {
    .roadmap-board-grid { grid-template-columns: repeat(2, 1fr); }
    .gtm-phases-row { grid-template-columns: 1fr; }
    .flywheel-mixed-grid { grid-template-columns: 1fr; }
    .gtm-footer-bar { flex-direction: column; text-align: center; }
    .bar-arrow { transform: rotate(90deg); margin: 5px 0; }
}
@media (max-width: 640px) {
    .roadmap-board-grid { grid-template-columns: 1fr; }
}