/* 公共基础样式部分 */
/* 自定义本地字体 */
@font-face {
    font-family: 'PlusJakartaSans-Regular';
    src: url('../font/PlusJakartaSans-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 用于特殊展示的手写字体 */
@font-face {
    font-family: 'LocalFontA';
    src: url('../font/陪你.ttf') format('trueType');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LocalFontB';
    src: url('../font/琴键.ttf') format('trueType');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LocalFontC';
    src: url('../font/行书.ttf') format('trueType');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LocalFontD';
    src: url('../font/可爱.ttf') format('trueType');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 工具类 */
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
}

/* CSS变量定义 */
:root {
    --primary-color: #6B7280;
    --dark: #1F2937;
    --light: #F9FAFB;
    --gray: #f5f5f4;    
    --accent: #4B5563;
    --success-color: #10B981;
    --warning-color: #FFA000;
    --danger-color: #EF4444;
}
.bg-gray{
    background-color: #f5f5f4;
}
.bg-light{
    background-color: #F7F7F7;
}
/* 基础选择器样式 */
html {
    font-size: 10px;
}

body {
    background-color: #FAFAFA;
    font-family: 'PlusJakartaSans-Regular', 'Roboto', sans-serif;
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: 400;
    color: #666;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    scroll-behavior: smooth;
}

a {
    color: #333;
    transition: all 0.4s ease-in-out 0s;
}

a:focus, a:hover {
    text-decoration: none;
    outline: 0;
}

li {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'PlusJakartaSans-SemiBold','Roboto', sans-serif;
    font-weight: 700;
    margin: 0;
    color: #333;
}
h1 {
    font-size: 2.4rem;
    letter-spacing: 3px;
}
h2 {
    font-size: 2.1rem;
    letter-spacing: 3px;
}
h3 {
    font-size: 1.8rem;
}

h4 {
    font-size: 1.6rem;
    letter-spacing: 1px;
}
h5 {
    font-size: 1.2rem;
    letter-spacing: 1px;
}

ul {
    padding-left: 0;
}

.list-none {
    margin: 0;
    padding: 0;
    list-style: none;
}

iframe {
    border: 0;
    width: 100%;
}

.btn {
    border: 0;
    border-radius: 0;
}

button.btn.btn-theme-color:hover {
    border-color: #333;
    background: transparent;
    color: #333;
}

.col-3 {
    width: 33.3333333333%;
    float: left;
}

/* 全局布局样式 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.section {
    padding: 4rem 0;
}

/* 页面区块基础样式 */
.title {
    text-align: center;
}

.tlinks {
    text-indent: -9999px;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
}

.title h2 {
    font-size: 2.1rem;
    line-height: 32px;
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: 500;
    padding: 0 0 0 4px;
    margin: 0 0 1rem;
    position: relative;
    display: inline-block;
}

.title h2:before, .title h2:after {
    content: '';
    position: absolute;
    z-index: 99;
    background-color: #333;
    width: 20px;
    height: 1px;
    top: 15px;
}

.title h2:before {
    left: -30px;
}

.title h2:after {
    right: -30px;
}
/* h4 */

.title h4 {
    position: relative;
    padding: 6px 10px 8px; /* 为竖线留出空间 */
    margin: 1rem 0;
    border-bottom: 1px solid #E0E0E0;
    text-align: left;
}
/* 产品名称前的黄色竖线 */
.title h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.6rem;
    background-color: #FFA000; /* 黄色 */
    border-radius: 2px; /* 稍微圆润一点 */
}

.title p {
    font-style: italic;
    font-size: 12px;
    color: #8E8E8E;
    letter-spacing: .1rem;
    line-height: 25px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .pain-item {
        width: 100%;
        margin: 0.5rem 0;
    }
    
    .benefit-item.col-xs-12 {
        margin-bottom: 20px;
    }
    
    /* 导航栏响应式 */
    .main-menu {
        float: none !important;
        margin: 0;
        padding: 10px 0;
    }
    
    .main-menu li {
        display: block;
        margin: 5px 0;
    }
    .font-select {
        margin: -4.6rem 0 0;
    }
    
    /* specs响应式布局 */
    .specs-content {
        flex-direction: column;
    }
    
}

/* 动画和交互效果 */
.fade-in {
    animation: fadeIn 1s ease-in;
}

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

/* 添加滚动时的元素显示动画 */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 卡片交互效果 */
.benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* 参数项交互效果 */
.specs-item:hover {
    background-color: #f8f9fa;
}

/* 步骤交互效果 */
.usage-step:hover {
    transform: translateY(-8px);
}

/* 滚动显示动画 */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 头部导航样式 */
.site-header {
    padding: 20px 0;
    background-color: transparent;
    transition: all 0.3s ease-in-out 0s;
    border: none;
}

.site-header.fixed {
    background-color: rgba(255, 255, 255, 0.6);
    padding: 5px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.site-header .container {
    position: relative;
}

.navbar-brand {
    height: auto !important;
    padding: 12px;
    width: 96px;
}

.logo {
    float: left;
    margin-top: 7px;
}

.nav-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.toggle-btn {
    background-color: transparent;
    border: 0 none;
    outline: none;
}

.toggle-btn .icon-bar {
    background-color: #222;
    display: block;
    height: 2px;
    margin-bottom: 8px;
    width: 24px;
    position: relative;
    transition: all 0.3s ease-in-out 0s;
}

.toggle-btn.active .icon-bar:nth-child(1) {
    top: 5px;
    transform: rotate(45deg);
}

.toggle-btn.active .icon-bar:nth-child(2) {
    top: -5px;
    transform: rotate(-45deg);
}

.toggle-btn .icon-bar:last-child {
    margin-bottom: 0;
}

.nav-toggle + .navbar-collapse {
    margin-right: 43px;
}

.navbar-nav {
    padding: 0;
}

.site-header .navbar-nav > li > a {
    color: #222;
    font-size: 1.4rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.navbar-default .navbar-nav>li>a:hover, 
.navbar-default .navbar-nav>li>a:focus, 
.nav.navbar-nav.main-menu li a:hover, 
.nav.navbar-nav.main-menu li a:focus {
    color: #222;
    background-color: transparent !important;
    box-shadow: none;
    outline: none;
    border: none;
}

/* 额外的覆盖规则，确保没有任何背景变化 */
.site-header .navbar-nav > li > a:hover, 
.site-header .navbar-nav > li > a:focus {
    background-color: transparent !important;
    box-shadow: none !important;
}

.navbar-toggle {
        border: 0;
        border-radius: 0;
    }
    .navbar-toggle:hover,
    .navbar-toggle:focus {
        background-color: transparent !important;
    }
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #222;
    }

/* 页脚样式 */
.footer {
    background-color: #F7F7F7;
    width: 100%;
    padding: 2rem 0 1rem;
    margin-top: auto;
    border-top: .5px solid #ccc;
}

/* 页脚内容区域 - 实现联系方式左对齐，版权备案右对齐 */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* 联系我们 */
.contact-block {
    text-align: left;
    flex-shrink: 0;
    color: #222;
}

.contact-block i {
    margin: 0 5px 0 0;
}

.icon-store {
    color: #ff6146;
}

.icon-wechat {
    color: #2aae67;
}

.contact-block p {
    font-size: 14px;
    line-height: 20px;
}

.contact-block a {
    transition: all 0.3s ease;
}

/* 版权和备案信息容器 */
.footer-info {
    text-align: right;
    flex-shrink: 0;
}

/* 版权信息样式 */
.footer .copyright {
    font-size: 12px;
    color: #777;
    margin-bottom: 5px;
    padding: 0;
}

.footer .copyright p {
    margin: 0;
}

/* 备案信息样式 */
.footer .beian {
    font-size: 10px;
    color: #aaa;
    margin: 0;
}

.footer .beian a {
    color: #666;
    transition: all 0.3s ease;
}

/* 页脚样式增强 */
footer {
    position: relative;
}

/* index.html 页面专用样式 */
/* 首页 banner */
.home-banner {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: auto;
    width: 100%;
    background-image: url('../img/banner.jpg');
}

.gradient {
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background: #D693A1;
    background: -moz-linear-gradient(45deg, #D693A1 0%, #E2F5FF 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#D693A1), color-stop(100%,#E2F5FF));
    background: -webkit-linear-gradient(45deg, #D693A1 0%,#E2F5FF 100%);
    background: -o-linear-gradient(45deg, #D693A1 0%,#E2F5FF 100%);
    background: -ms-linear-gradient(45deg, #D693A1 0%,#E2F5FF 100%);
    background: linear-gradient(45deg, #D693A1 0%,#E2F5FF 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D693A1', endColorstr='#E2F5FF',GradientType=1 );
}

.dtable {
    display: table;
    vertical-align: middle;
    width: 100%;
}

.dtablecell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.content-inner {
    position: relative;
    z-index: 10;
}

.banner-content h1 {
    font-family: 'PlusJakartaSans-Light', 'Roboto', sans-serif;
    display: inline-block;
    padding: 0 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 24px;
    font-weight: 200;
}

.banner-content h1 ::after {
    content: '';
    margin-left: -14px;
}

.banner-content h3 {
    margin: 18px 0 0;
    letter-spacing: 8px;
    word-spacing: 2px;
    font-weight: 200;
    text-transform: uppercase;
}

/* 关于我们 */
.about {
    padding: 60px 0 30px;
}

.about-img img {
    width: 210px;
}

.about-intro {
    padding: 10px 0 0 0;
}

.about-intro img {
    width: 140px;
    padding: 0 0 10px;
}

.about-intro p {
    margin: 12px 0;
    line-height: 24px;
}

.about-intro .divider {
    display: block;
    margin: 20px 0px;
    width: 40px;
    height: 1px;
    background-color: #333;
}

/* 服务板块 */
.service-inner {
    width: 100%;
    text-align: center;
}

.service-inner .icon-holder {
    position: relative;
    display: inline-block;
}

.service-inner .heading {
    position: relative;
    padding: 0 0 5px;
}

.service-inner .icon-holder > img.icon {
    width: 40px;
}

.service-inner .description {
    width: 90%;
    margin: 0 auto;
}

.service-block .service-inner {
    text-align: center;
    margin: 10px 0;
}

.service-inner i {
    font-size: 3rem;
    background: linear-gradient(135deg, #ffcc80,#FF9800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.service-inner h3 {
    letter-spacing: 1px;
}

/* 作品展示 */
.portfolio {
    margin:0 0 60px 0;
}

.portfolio-item {
    margin-bottom: 30px;
}

.portfolio-item a {
    display: block;
    position: relative;
    color: #fff;
    overflow: hidden;
}

.portfolio-hover {
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    left: 0;
    padding: 10%;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out 0s;
       -moz-transition: all 0.3s ease-in-out 0s;
         -o-transition: all 0.3s ease-in-out 0s;
            transition: all 0.3s ease-in-out 0s;
}

.portfolio-hover:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.portfolio-description h4 {
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 700;
}

.portfolio-item:hover .portfolio-hover {
    opacity: 1;
}

#mygallery div img {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    -moz-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    -webkit-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    -o-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
   
.item-caption {
    position: absolute;
    color: #222;
    bottom: -60px;
    left: 0px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: left;
    transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    opacity: 0;

}

.item-caption h4 {
    line-height: 23px;
    font-weight: 600;
    text-transform: uppercase;
}

.item-caption p {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 400;
    margin-top: 0;
    text-align: left;
    line-height: 20px;
    margin-top: 6px;
}

.item-musk {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7);
    height: 100%;
    position: absolute;
    transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
}

#mygallery div:hover .item-caption {
    bottom: 30px;
    opacity: 1;

}

#mygallery div:hover .item-musk {
    opacity: 1;
    visibility: visible;
}

#mygallery div:hover img {
        transform: scale(1.1);
    transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    width: 100%;

}

/* sleep_spray.html 页面专用样式 */
/* 第1屏：痛点场景增强 */
.pain-point-screen {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #71a8eb 0%, #a668dc 100%); 
    padding: 4rem 0; 
    color: white;
}

.pain-point-screen:before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.pain-points {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 900px;
}

.pain-item {
    width: calc(50% - 2rem);
    color: #fff;
    background: rgba(0,0,0,0.1); 
    border-radius: 50px;
    margin: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
}

.pain-item i {
    font-size: 3.5rem; 
    color: #ffffffdb; 
}

.pain-item h4 {
    color: #e4e4e4e4; 
    margin-bottom: 0.5rem;
}

.pain-item p {
    color: #ffffff91; 
}

.pain-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* 第2屏：产品功效增强 */
.benefit-item {
    transition: all 0.3s ease;
}

.benefit-item:hover .benefit-inner {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.benefit-icon {
    transition: all 0.3s ease;
}

.benefit-item:hover .benefit-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--dark)) !important;
    transform: scale(1.1);
}

.benefit-item:hover .benefit-icon i {
    color: white !important;
}

/* 第3屏：助眠原理增强 */
.principle-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.principle-left,
.principle-right {
    width: 100%;
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .principle-left,
    .principle-right {
        width: calc(50% - 1rem);
    }
}

.principle-right img {
    max-width: 100%;
    height: auto !important;
    object-fit: contain;
}

/* 确保步骤项目不会溢出 */
.principle-steps {
    overflow: hidden;
}

.step-item {
    overflow-wrap: break-word;
}

.principle-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.principle-right > div:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* 第4屏：产品优势增强 */
.ingredients-screen {
    position: relative;
    overflow: hidden;
}

.ingredients-screen:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z" fill="%236A1B9A" fill-opacity="0.05" fill-rule="evenodd"/%3E%3C/svg%3E');
    opacity: 0.5;
}


.zero-features-container {
    position: relative;
    z-index: 1;
}

.zero-features {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.zero-feature {
    position: relative;
    z-index: 1;
}
.zero-feature i {
    font-size: 4rem;
    background: linear-gradient(135deg, #ffcc80,#FF9800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.zero-details {
    position: relative;
    z-index: 2;
    margin: 1rem;
    text-align: center;
    background: white; 
    border-radius: 2rem; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    clear: both;
}

/* #sleep-data部分的h2前后横线颜色为白色 */
#sleep-data .title h2:before, 
#sleep-data .title h2:after {
    background-color: white;
}

/* 睡眠喷雾动画效果 */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.sleep-arrow {
    display: inline-block;
    animation: bounce 1.5s infinite;
    font-size: 1.4rem;
    color: #4CAF50;
}

/* 条形图动画效果 */
@keyframes barGrowWidth {
    from { width: 0; }
    to { width: var(--bar-width); }
}

.bar {
    animation: barGrowWidth 1.5s ease-out forwards;
    transition: all 0.3s ease;
}

.bar-item {
    overflow: hidden;
}


/* 第5屏：使用方法增强 */
/* 步骤条样式 - 桌面横版 */
.steps-container {
    position: relative;
}

.steps-horizontal {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 3rem;
    padding: 0 0 4rem;
}

.step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: start;
    position: relative;
    text-align: left;
    padding: 0 10px;
}

.step-number {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #FFA000;
    background: #fafafa;
    color: #FFA000;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 99;
}
 
.step-number-horizontal {
    left: 30px;
    top: 30px;
}

.step-line {
    position: absolute;
    top: 39px;
    width: 100%;
    height: 1px;
    background: #E0E0E0;
    z-index: 1;
}

.step-content {
    position: relative;
    top: 70px;
    left: 18px;
    flex: 1;
}

.step-content h4 {
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

.step-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-content li {
    line-height: 1.8;
    margin: 0 0 5px 0;
    position: relative;
    color: #666;
}
       
/* 移动端竖版步骤条样式 */
.steps-vertical {
    display: none;
    width: 100%;
    margin: 3rem 0 0;
}

.step-item-vertical {
    display: flex;
    width: 320px;
    align-items: flex-start;
    position: relative;
    padding: 0 0 0 60px;
    margin: 0 auto;
}
            
.step-line-vertical {
    position: absolute;
    left: 21px;
    width: 1px;
    height:100%;
    background: #E0E0E0;
    z-index: 1;
}

.step-content-vertical {
    padding: 30px 0 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: left;
}

.step-number-vertical {
    left: -50px;
}

.step-content-vertical h4 {
    margin-bottom: 15px;
}

.step-content-vertical ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-content-vertical li {
    line-height: 1.8;
    position: relative;
    color: #666;
    text-align: left;
}

.usage-step {
    transition: all 0.3s ease;
}

.usage-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* 第6屏：产品信息 */
.specs-content {
    margin: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white; 
    border-radius: 20px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
}

.specs-left{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 520px;
}

.specs-right{
    padding: 2rem;
}

/* h5 */
.spec-card h5 {
    position: relative;
    font-size: 1.2rem;
    margin: 1rem 0 0.3rem;
    text-align: left;
}

/* word.html 页面专用样式 */
/* 模板/字体按钮样式 */
.font-select {
    float: right;
    align-items: center;
    height: 100%;
    padding: 1rem 0;
}
.font-btn, .print-btn {
    border-radius: 1.2rem;
    padding: .3rem 1.5rem .5rem;
    font-weight: 500;
}
.btn-bg{
    padding: .5rem;
    border-radius: 2rem;
    
}

.template-btn, .font-btn, #print-btn {
    position: relative;
    overflow: hidden;
}

.template-btn{
    border-radius: 2rem;
    padding: .3rem 1.5rem .5rem;
    font-weight: 500;
}

#print-btn {
    margin: 0 0 2rem;
    border-radius: 2rem;
}

/* 选中状态样式 */
.template-btn.active {
    @apply ring-2 ring-offset-2 ring-primary;
}

.font-btn.active {
    color: #ffffff;
    background-color: #4f46e5;
    scale: 95%;
}

/* 文本输入和预览样式 */
#text-input, #preview-box {
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 #F1F5F9;
    font-size: 1.8rem;
}

#text-input::-webkit-scrollbar, #preview-box::-webkit-scrollbar {
    width: 6px;
}

#text-input::-webkit-scrollbar-track, #preview-box::-webkit-scrollbar-track {
    background: #F1F5F9;
    border-radius: 3px;
}

#text-input::-webkit-scrollbar-thumb, #preview-box::-webkit-scrollbar-thumb {
    background-color: #CBD5E1;
    border-radius: 3px;
}

/* 纸张样式 */
.card-template {
    width: 444px;
    height: 656px;
    padding: 347px 30px 30px;
}

.letter-template {
    width: 540px;
    height: 810px;
    padding: 90px 30px 30px; /* 四周内边距 */
}

/* 助眠原理动画样式 */
.animation-principle-screen {
    padding: 4rem 0;
    background: linear-gradient(135deg, #f4f4f5, #f3f1fb);
    position: relative;
    overflow: hidden;
}

.principle-animation-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 600px;
    z-index: 2;
}

/* 喷雾按钮样式 */
.spray-button-container {
    transform: translateY(-50%);
    z-index: 10;
}

.spray-btn {
    background: linear-gradient(135deg, #9370DB, #7B68EE);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(147, 112, 219, 0.6), 0 0 30px rgba(147, 112, 219, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}

.spray-btn:hover,.spray-btn:active {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(147, 112, 219, 0.8), 0 0 40px rgba(147, 112, 219, 0.6);
    border-color: rgba(255, 255, 255, 0.3);
}

.spray-text {
    font-size: 14px;
    font-weight: 600;
}

/* 动画流程布局 */
.animation-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: calc(100% - 150px);
    margin-left: 100px;
    position: relative;
}

.brain-bg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    z-index: 1;
}
/* 步骤样式 */
.animation-step {
    position: relative;
    width: 160px;
    margin: 0 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

/* 所有步骤相对于brain.svg的固定位置 */
.animation-step.step-1,
.animation-step.step-2,
.animation-step.step-3,
.animation-step.step-4,
.animation-step.step-5{
    position: absolute;
    transform: none;
    width: auto;
    margin: 0;
    z-index: 10; /* 确保在背景上方 */
    text-align: left; /* 文本左对齐以适应左侧位置 */
    opacity: 0; /* 初始透明度为0，点击后通过JavaScript显示 */
    transition: opacity 0.5s ease-in-out; /* 添加过渡动画 */
}
.animation-step.step-1 {
    left: -80px;
    top: 340px;
}
.animation-step.step-2 {
    left: 40px;
    top: 250px;
}
.animation-step.step-3 {
    left: 180px;
    top: 110px;
}
.animation-step.step-4 {
    left: 240px;
    top: 160px;
}
.animation-step.step-5 {
    left: 300px;
    top: 310px;
}
/* 调整所有步骤的内容对齐方式 */
.animation-step.step-1 .step-content,
.animation-step.step-2 .step-content,
.animation-step.step-3 .step-content,
.animation-step.step-4 .step-content,
.animation-step.step-5 .step-content{
    align-items: flex-start;
}

.step-glow {
    position: absolute;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(135, 86, 231, 0.9) 0%, rgba(147,112,219,0.3) 50%, transparent 80%);
    border-radius: 50%;
    opacity: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.principle-step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.step-text h4 {
    font-size: 1.4rem;
    color: #555;
    margin: 0 0 1px 0;
    font-weight: 600;
    position: relative;
    padding-top: 16px;
}

.step-text h4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background-color: #9370db;
    border-radius: 50%;
}

.step-text p {
    font-size: 1.2rem;
    color: #777;
    margin: 0;
    line-height: 1.4;
}

/* 光晕动画 - 从圆点中心向外扩散并保持轻微光晕 */
@keyframes glow {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.5);
    }
    100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* 激活状态 */
.step-active .step-glow {
    animation: glow 1.5s ease-out forwards;
    box-shadow: 0 0 15px rgba(147, 112, 219, 0.4);
    background-color: rgba(147, 112, 219, 0.1);
}

.step-active .step-text h4 {
    color:#555;
    transform: translateY(-2px);
    transition: all 0.5s ease;
}

.step-active .step-text h4::before {
    border-color: #aaa;
    transition: all 0.5s ease;
}

/* 平滑过渡 */
.step-icon, .step-text h4, .step-text p {
    transition: all 0.5s ease;
}

/* 文字效果优化 */
.step-active .step-text p {
    color: #666;
    transform: translateY(0);
    opacity: 1;
}

/* 初始状态优化 */
.animation-step .step-text p {
    opacity: 0.7;
}

.spraying {
    animation: sprayEffect 0.5s ease-in-out;
}

@media (max-width: 768px) {

    .zero-details {
    text-align: left;
}
    .principle-animation-container{
        min-height: 400px;
    }
    .animation-flow {
        padding: 20px 0;
        width: 80%;
        margin: 0 0 0 2rem;
    }
    
    .animation-flow::before {
        display: none;
    }
    
    /* 调整大脑背景图在移动端的显示 */
    .brain-bg {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 420px;
        padding: 1rem;
        height: auto;
        z-index: 1;
        margin-bottom: 30px;
    }
    
    /* 调整喷雾按钮容器在移动端的位置 */
    .spray-button-container {
        margin-bottom: 2rem;
        text-align: center;
        margin: 0 0 0 2rem;
    }
    
    /* 调整喷雾按钮大小适配移动端 */
    .spray-btn {
        width: 70px;
        height: 70px;
    }
    
    .spray-text {
        font-size: 12px;
    }
    
    /* 调整步骤内容在移动端的样式 */
    .principle-step-content {
        align-items: center;
    }
    .animation-step.step-1 {
    left: -40px;
    top: 220px;
}
.animation-step.step-2 {
    left: 10px;
    top: 160px;
}
.animation-step.step-3 {
    left: 100px;
    top: 80px;
}
.animation-step.step-4 {
    left: 150px;
    top: 130px;
}
.animation-step.step-5 {
    left: 190px;
    top: 200px;
}
    .step-text h4 {
        font-size: 1.3rem;
    }
    
    .step-text p {
        font-size: 1.1rem;
    }

        .steps-horizontal {
        display: none;
    }
    
    .steps-vertical {
        display: block;
    }
    .specs-left {
    height: 400px;
    margin: 0 0 -5rem;
}
    .specs-left img{
    width: 240px;
}
}

/* 打印样式优化 */
@media print {
    /* 隐藏非打印元素 */
    body > header,
    .title,
    .template-btn,
    .font-btn,
    #print-btn,
    .text-gray-500.text-sm,
    footer {
        display: none !important;
    }
    
    /* 打印内容样式 */
    body {
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #preview-box {
        width: 100% !important;
        height: 100% !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        position: static !important;
        /* 移除padding: 0 !important，这样不会覆盖模板特定的内边距设置 */
    }

    /* 确保打印尺寸正确 */
    @page {
        margin: 0;
        size: auto;
    }
    
    /* 贺卡打印尺寸 - 保持与预览相同的比例和内边距 */
    .card-template {
        width: 11.5cm !important;
        height: 17cm !important;
        padding: 310px 380px 30px 30px !important; /* 保持与预览相同的内边距 */
        box-sizing: border-box !important;
    }
    
    /* 信纸打印尺寸 */
    .letter-template {
        width: 14cm !important;
        height: 21cm !important;
        padding: 50px 270px 40px 40px !important; /* 保持与预览相同的内边距 */
        box-sizing: border-box !important;
    }
}

/* 其他增强样式 */
/* 纸张样式 */
.card-template {
    width: 444px;
    height: 656px;
    padding: 347px 30px 30px;
}

.letter-template {
    width: 540px;
    height: 810px;
    padding: 90px 30px 30px; /* 四周内边距 */
}