/* ========================================= */
/* 全局 3D 悬浮层样式 */
/* ========================================= */
#global-whaleshark-container {
    position: fixed;   /* 固定在屏幕上，不随原本网页的滚动而卷走 */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;    
    
    /* 💡 极其重要的一行魔法代码！*/
    /* 这会让鼠标事件“穿透”这层画布，这样你就依然可以点击网页上的 Get Started 等按钮了 */
    pointer-events: none; 
}


/* style.css - Maldives Insider Landing Page */
:root {
--primary: #2ad4ff;
--primary-dark: #1aa0c0;
--secondary: #ffd966;
--dark: #02121c;
--dark-light: #0a2835;
--text: #e6f3ff;
--text-muted: #9bb7d4;
--gradient: linear-gradient(135deg, #2ad4ff, #7b68ee);
--card-bg: rgba(10, 40, 55, 0.7);
--border: rgba(255, 255, 255, 0.1);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: 'Inter', sans-serif;
background-color: var(--dark);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
}

/* 在现有的 :root 之后添加白天模式变量 */
:root {
/* 现有深色主题变量 */
--primary: #2ad4ff;
--primary-dark: #1aa0c0;
--secondary: #ffd966;
--dark: #02121c;
--dark-light: #0a2835;
--text: #e6f3ff;
--text-muted: #9bb7d4;
--gradient: linear-gradient(135deg, #2ad4ff, #7b68ee);
--card-bg: rgba(10, 40, 55, 0.7);
--border: rgba(255, 255, 255, 0.1);
}

/* 白天模式变量 - 蒂芙尼蓝主题 */
:root[data-theme="light"] {
--primary: #00b8a9; /* 蒂芙尼蓝主色 */
--primary-dark: #009688;
--secondary: #ffb347;
--dark: #f0f9ff; /* 浅色背景 */
--dark-light: #e0f0fa;
--text: #2c3e50; /* 深色文字 */
--text-muted: #5a6b7a;
--gradient: linear-gradient(135deg, #00b8a9, #3b9ae1);
--card-bg: rgba(255, 255, 255, 0.7);
--border: rgba(0, 184, 169, 0.2);
--navbar-bg: rgba(255, 255, 255, 0.9);
}

/* 更新导航栏背景使用变量 */
.navbar {
/* ... 现有样式 ... */
background: var(--navbar-bg, rgba(2, 18, 28, 0.8));
}

/* 主题切换按钮样式 */
.nav-actions {
display: flex;
align-items: center;
gap: 16px;
}

.theme-toggle {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--card-bg);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}

.theme-toggle:hover {
transform: scale(1.1);
border-color: var(--primary);
}

.theme-toggle-icon {
transition: transform 0.3s ease;
}

[data-theme="light"] .theme-toggle-icon {
transform: rotate(180deg);
}

/* 白天模式下的卡片背景调整 */
[data-theme="light"] .feature-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .testimonial-card,
[data-theme="light"] .contact-info,
[data-theme="light"] .contact-form {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 184, 169, 0.1);
}

[data-theme="light"] .island-preview-card {
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .pricing-card.featured {
background: rgba(255, 255, 255, 0.95);
border-color: var(--primary);
box-shadow: 0 12px 40px rgba(0, 184, 169, 0.2);
}

[data-theme="light"] .cta-section {
background: linear-gradient(135deg, #e0f0fa, #c0e6f5);
}

[data-theme="light"] footer {
background: #d0e8f5;
border-top: 1px solid var(--border);
}

[data-theme="light"] .footer-links a {
color: var(--text);
}

[data-theme="light"] .btn-outline {
color: var(--text);
}

[data-theme="light"] .hero-stats .stat-number {
color: var(--primary);
}

[data-theme="light"] .island-tag {
background: rgba(0, 184, 169, 0.2);
color: var(--primary-dark);
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}

/* 修改导航栏：增加从上到下的渐变透明背景 */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 32px;
/* 👇 修改这里：使用线性渐变，从顶部的 90% 不透明过渡到下方的完全透明 (0%) */
background: linear-gradient(to bottom, rgba(2, 18, 28, 0.9) 0%, transparent 100%);
/* 可选：增加极轻微的背景模糊，让文字背后的区域更具高级质感 */
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
/* 增加平滑过渡属性 */
transition: all 0.3s ease;
}

/* 👇 确保你也适配了你的白天（蒂芙尼蓝）模式，请在下面补充这段代码 */
[data-theme="light"] .navbar {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, transparent 100%);
}

/* 滚动时的效果（可选） */
.navbar.scrolled {
background: rgba(2, 18, 28, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}

/* 白天模式滚动时的效果 */
[data-theme="light"] .navbar.scrolled {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0, 184, 169, 0.2);
}

.logo {
display: flex;
align-items: center;
gap: 8px;
font-size: 1.5rem;
font-weight: 600;
}

.logo-icon {
font-size: 1.8rem;
}

.logo-highlight {
color: var(--primary);
margin-left: 4px;
}

.nav-links {
display: flex;
gap: 32px;
}

.nav-link {
color: var(--text);
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}

.nav-link:hover {
color: var(--primary);
}

.btn {
display: inline-block;
padding: 10px 24px;
border-radius: 40px;
text-decoration: none;
font-weight: 600;
transition: all 0.2s;
cursor: pointer;
}

.btn-primary {
background: var(--primary);
color: var(--dark);
}

.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(42, 212, 255, 0.3);
}

.btn-outline {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
}

.btn-outline:hover {
border-color: var(--primary);
color: var(--primary);
}

.btn-large {
padding: 16px 36px;
font-size: 1.1rem;
}

.btn-block {
display: block;
width: 100%;
text-align: center;
}

/* Hero Section */
/* 解决主场景与下方 Section 过渡生硬：添加底部羽化渐变 */
.hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 15vh; /* 渐变过渡区域的高度，相当于屏幕高度的15%，你可以根据喜好改成 100px 或 20vh */
/* 从透明平滑过渡到网页的背景色 */
background: linear-gradient(to bottom, transparent 0%, var(--dark) 100%);
z-index: 1; /* 确保它盖在 3D 画布 (z-index: 1) 之上 */
pointer-events: none; /* 防止遮罩挡住用户的鼠标点击和滑动操作 */
}

.hero {
position: relative;
height: 100vh;
min-height: 700px;
display: flex;
align-items: center;
padding-left: 5%;
overflow: hidden;
}

.hero-content {
position: relative;
z-index: 10;
max-width: 650px;
}

/* 优化主标题：前卫的大字号与紧凑排版 */
.hero-title {
/* 使用 clamp 实现动态流体排版，在大屏幕上字体会非常大 */
font-size: clamp(4rem, 8vw, 7.5rem); 
line-height: 0.95; /* 极其紧凑的行高，前卫设计的标志 */
letter-spacing: -3px; /* 更紧凑的字间距 */
text-transform: uppercase;
margin-bottom: 2rem;
margin-top: 7rem;
position: relative;
z-index: 10;
}

/* 极致的粗细对比 */
.hero-title .light-line {
font-weight: 200; /* 极细体 (如果你的引入字体支持200，或者用300) */
display: block;
color: var(--text);
opacity: 0.9;
margin-bottom: -0.1em; /* 让两行字贴得更紧 */
}

.hero-title .heavy-line {
font-weight: 900; /* 极粗体 */
display: block;
background: var(--gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* 给文字增加微弱的发光效果，使其从3D场景中跳出来 */
filter: drop-shadow(0px 4px 24px rgba(42, 212, 255, 0.3)); 
}

.gradient-text {
background: var(--gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.hero {
position: relative;
height: 100vh;
min-height: 700px;
display: flex;
align-items: center;
overflow: hidden;
z-index: 0;
}

/* 新增：左侧平滑渐变遮罩，完美解决文字和3D模型重叠看不清的问题 */
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 60%; /* 遮罩覆盖左侧60%的区域 */
height: 100%;
/* 从深色平滑过渡到全透明 */
background: linear-gradient(90deg, var(--dark) 0%, rgba(2, 18, 28, 0.8) 30%, transparent 100%);
z-index: 5; /* 层级位于 3D Canvas (1) 之上，但在文字 (10) 之下 */
pointer-events: none; /* 不阻挡鼠标与 3D 场景的交互 */
}

/* 确保白天模式下也有遮罩 */
[data-theme="light"] .hero::before {
background: linear-gradient(90deg, var(--dark) 0%, rgba(240, 249, 255, 0.9) 40%, transparent 100%);
}

.hero-content {
position: relative;
z-index: 10;
max-width: 700px;

}

/* 调整 Hero 区域按钮的间距 */
.hero-cta {
display: flex;
gap: 24px; /* 这里是按钮之间的间距，你可以根据喜好调大到 32px 或调小到 16px */
flex-wrap: wrap; /* 确保在手机端如果屏幕太窄，按钮可以自动上下换行显示 */
align-items: center; 
}

.hero-subtitle {
font-size: 1.1rem;
color: var(--text-muted);
margin-bottom: 2.5rem;
max-width: 500px;
font-weight: 300;
letter-spacing: 0.5px;
}

.stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
color: var(--primary);
}

.stat-label {
font-size: 0.9rem;
color: var(--text-muted);
}

/* Canvas */
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
}

/* Sections */
section {
position: relative;
z-index: 5;
padding: 100px 0;
}

.section-header {
text-align: center;
margin-bottom: 60px;
}

.section-header h2 {
font-size: 2.8rem;
font-weight: 600;
margin-bottom: 16px;
}

.section-header p {
font-size: 1.1rem;
color: var(--text-muted);
max-width: 700px;
margin: 0 auto;
}

/* Features Grid */

.features{
padding-top: 140px;
}

.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}

.feature-card {
background: var(--card-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--border);
border-radius: 24px;
padding: 32px 24px;
transition: transform 0.2s;
}

.feature-card:hover {
transform: translateY(-5px);
border-color: var(--primary);
}

.feature-icon {
font-size: 2.5rem;
margin-bottom: 20px;
}

.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 12px;
}

.feature-card p {
color: var(--text-muted);
}

/* Islands Preview */
.islands-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
margin-bottom: 40px;
}

.island-preview-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 24px;
overflow: hidden;
transition: transform 0.2s;
cursor: pointer;
}

.island-preview-card:hover {
transform: translateY(-5px);
border-color: var(--primary);
}

.island-img {
height: 160px;
background-size: cover;
background-position: center;
}

.island-img.male {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><rect width="100" height="100" fill="%232ad4ff"/><circle cx="30" cy="40" r="10" fill="%23f5e6d3"/><circle cx="60" cy="60" r="15" fill="%23f5e6d3"/><circle cx="70" cy="30" r="8" fill="%23f5e6d3"/></svg>');
}
.island-img.ari {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="%234a9855"/><circle cx="40" cy="40" r="12" fill="%23f5e6d3"/><circle cx="65" cy="55" r="10" fill="%23f5e6d3"/></svg>');
}
.island-img.baa {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="%2388dd88"/><circle cx="50" cy="45" r="14" fill="%23f5e6d3"/><circle cx="30" cy="60" r="8" fill="%23f5e6d3"/></svg>');
}
.island-img.lhaviyani {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23ff9966"/><circle cx="55" cy="50" r="12" fill="%23f5e6d3"/><circle cx="35" cy="35" r="9" fill="%23f5e6d3"/></svg>');
}

.island-info {
padding: 20px;
}

.island-info h3 {
font-size: 1.4rem;
margin-bottom: 6px;
}

.island-info p {
color: var(--text-muted);
margin-bottom: 12px;
font-size: 0.9rem;
}

.island-tag {
display: inline-block;
padding: 4px 12px;
background: var(--dark-light);
border-radius: 30px;
font-size: 0.8rem;
color: var(--primary);
}

.center-cta {
text-align: center;
}

.btn-secondary {
background: transparent;
color: var(--primary);
border: 1px solid var(--primary);
}

.btn-secondary:hover {
background: rgba(42, 212, 255, 0.1);
}

/* Pricing */
.pricing{
    padding-top: 140px;
}

.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
align-items: stretch;
}

.pricing-card {
background: var(--card-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--border);
border-radius: 32px;
padding: 40px 30px;
position: relative;
transition: transform 0.2s;
}

.pricing-card {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 32px;
    padding: 40px 30px;
    position: relative;
    transition: transform 0.2s;
    overflow: visible; /* 改为 visible，让 popular-badge 可以超出显示 */
}

/* 如果只想让 featured 卡片溢出可见，可以单独设置 */
.pricing-card.featured {
    overflow: visible; /* 添加这行 */
}

.popular-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--primary);
color: var(--dark);
padding: 4px 20px;
border-radius: 30px;
font-size: 0.8rem;
font-weight: 600;
}

.pricing-header {
text-align: center;
margin-bottom: 30px;
}

.pricing-header h3 {
font-size: 1.8rem;
margin-bottom: 16px;
}

.price {
font-size: 3.5rem;
font-weight: 700;
color: var(--primary);
line-height: 1;
}

.pricing-features {
list-style: none;
margin-bottom: 30px;
}

.pricing-features li {
padding: 10px 0;
border-bottom: 1px solid var(--border);
color: var(--text-muted);
}

.pricing-features li:last-child {
border-bottom: none;
}

/* Testimonials */
.testimonials{
    padding-top: 270px;
    margin-top: 40px;
}

.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}

.testimonial-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 24px;
padding: 30px;
}

.testimonial-card p {
font-size: 1.1rem;
font-style: italic;
margin-bottom: 20px;
}

.testimonial-author {
display: flex;
flex-direction: column;
}

.author-name {
font-weight: 600;
color: var(--primary);
}

.author-location {
font-size: 0.9rem;
color: var(--text-muted);
}

/* CTA Section */
.cta-section {
text-align: center;
background: linear-gradient(135deg, #02121c, #0a2835);
position: relative;
    /* 我们之前把所有 section 设为了 z-index: 5，这里单独把它降到 0 */
    z-index: auto;
}

.cta-section h2 {
font-size: 3rem;
margin-bottom: 16px;
}

.cta-section p {
font-size: 1.2rem;
color: var(--text-muted);
margin-bottom: 32px;
}

.guarantee {
font-size: 0.9rem !important;
margin-top: 24px;
opacity: 0.7;
}

/* Footer */
footer {
background: #011016;
padding: 60px 0 30px;
border-top: 1px solid var(--border);
}

.footer-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}

.footer-logo {
display: flex;
align-items: center;
gap: 8px;
font-size: 1.5rem;
font-weight: 600;
}

.footer-links {
display: flex;
gap: 24px;
}

.footer-links a {
color: var(--text-muted);
text-decoration: none;
}

.footer-links a:hover {
color: var(--primary);
}

.footer-copyright {
color: var(--text-muted);
font-size: 0.9rem;
}

/* ========================================= */
/* 1. 全局大屏幕样式 (强制横向排列) */
/* ========================================= */
.hero-stats {
display: flex;
flex-direction: row; /* 强制横向排列 */
flex-wrap: nowrap; /* 强制不换行 */
align-items: center; /* 垂直方向居中对齐 */
gap: 48px; /* 间距拉开 */
margin-top: 2rem; /* 增加顶部间距 */
}

/* 让单个数据内的数字和标签也横向排列 (前卫感) */
.stat-item {
display: flex;
flex-direction: row; 
align-items: baseline; 
gap: 12px; 
}

.stat-number {
display: block;
font-size: 2.5rem; 
font-weight: 800;
color: var(--primary);
line-height: 1;
}

.stat-label {
font-size: 0.95rem;
color: var(--text-muted);
text-transform: uppercase; 
letter-spacing: 1px;
}

/* ========================================= */
/* 2. 手机端小屏幕样式 (必须放在最后) */
/* ========================================= */
/* Responsive */
@media (max-width: 768px) {
.navbar { padding: 12px 16px; }
.nav-links { display: none; }
.hero-title { font-size: 2.8rem; }
/* 手机端屏幕太小，恢复允许换行，并缩减间距 */
.hero-stats { 
flex-wrap: wrap; 
gap: 24px; 
}

.section-header h2 { font-size: 2rem; }
.pricing-card .featured { transform: scale(1); }
}


/* ========== 新增3D容器样式 ========== */

/* 通用canvas容器样式 */
.canvas-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
overflow: hidden;
}

.canvas-container canvas {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

/* Hero部分特定的canvas容器 */
#hero-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transform: translateX(40px); /* 向右移动40px */
}#hero-canvas canvas {
transform: translateX(40px);
}

/* Features部分装饰容器 */
.features-decor {
position: absolute;
width: 300px;
height: 300px;
z-index: 2;
pointer-events: none;
}

.decor-left {
top: 10%;
left: 0;
}

.decor-right {
bottom: 10%;
right: 0;
}

/* 波浪容器 */
.waves-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
z-index: 2;
pointer-events: none;
}

/* 宝石容器 */
.gems-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
}

/* 气泡容器 */
.bubbles-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
}

/* 星光容器 */
.stars-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
}

/* 确保每个section有相对定位来容纳绝对定位的3D元素 */
.features,
.islands-preview,
.pricing,
.testimonials,
.cta-section {
position: relative;
overflow: hidden;
}

/* 调整z-index确保内容在3D元素之上 */
.features .container,
.islands-preview .container,
.pricing .container,
.testimonials .container,
.cta-section .container {
position: relative;
z-index: 5;
}

.feature-card,
.island-preview-card,
.pricing-card,
.testimonial-card {
position: relative;
z-index: 6;
backdrop-filter: blur(5px);
background: rgba(10, 40, 55, 0.8);
}

/* 增强毛玻璃效果 */
.feature-card,
.pricing-card,
.testimonial-card {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}



/* ========== Section Canvas 样式 ========== */

/* 通用section canvas样式 */
.section-canvas {
    position: absolute;
    /* 让画布比父容器大 20% */
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    z-index: 1;
    pointer-events: none; 
    /* 此时父容器（如 .section）最好设置 overflow: hidden; 来隐藏多出来的画布 */
}

.section-canvas canvas {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

/* Hero部分特定的canvas容器 */
#hero-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

/* 确保每个section有相对定位来容纳绝对定位的3D元素 */
.features,
.islands-preview,
.pricing,
.testimonials,
.contact-section,
.cta-section {
position: relative;
overflow: hidden;
}

/* 调整z-index确保内容在3D元素之上 */
.features .container,
.islands-preview .container,
.pricing .container,
.testimonials .container,
.contact-section .container,
.cta-section .container {
position: relative;
z-index: 5;
}

.feature-card,
.island-preview-card,
.pricing-card,
.testimonial-card,
.contact-info,
.contact-form {
position: relative;
z-index: 6;
backdrop-filter: blur(5px);
background: rgba(10, 40, 55, 0.8);
}

/* Contact Section 样式 */
.contact-section {
padding: 100px 0;
padding-top: 270px;
}

.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
margin-top: 50px;
}

.contact-info {
background: var(--card-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--border);
border-radius: 32px;
padding: 40px;
}

.contact-info h3 {
font-size: 1.8rem;
margin-bottom: 30px;
color: var(--primary);
}

.contact-info p {
font-size: 1.1rem;
margin-bottom: 20px;
color: var(--text);
}

.contact-form {
background: var(--card-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--border);
border-radius: 32px;
padding: 40px;
display: flex;
flex-direction: column;
gap: 20px;
}

.contact-input,
.contact-textarea {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border);
border-radius: 16px;
padding: 15px 20px;
color: var(--text);
font-size: 1rem;
font-family: 'Inter', sans-serif;
}

.contact-input:focus,
.contact-textarea:focus {
outline: none;
border-color: var(--primary);
}

.contact-textarea {
min-height: 120px;
resize: vertical;
}

/* 响应式 */
@media (max-width: 768px) {
.contact-content {
grid-template-columns: 1fr;
}
}










/* ========== 纯CSS交互动效 ========== */

/* 1. 卡片悬停放大效果 */
.feature-card,
.pricing-card,
.testimonial-card,
.island-preview-card {
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
}

.feature-card:hover,
.pricing-card:hover,
.testimonial-card:hover,
.island-preview-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(42, 212, 255, 0.2);
border-color: var(--primary);
}

/* 卡片悬停时的光晕效果 */
.feature-card::after,
.pricing-card::after,
.testimonial-card::after,
.island-preview-card::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(42, 212, 255, 0.2) 0%, transparent 70%);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
pointer-events: none;
z-index: -1;
}

.feature-card:hover::after,
.pricing-card:hover::after,
.testimonial-card:hover::after,
.island-preview-card:hover::after {
width: 300px;
height: 300px;
}

/* 2. 按钮悬停效果 */
.btn {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
z-index: 1;
}

.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
z-index: -1;
}

.btn:hover::before {
width: 300px;
height: 300px;
}

.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(42, 212, 255, 0.3);
}

.btn-outline:hover {
background: rgba(42, 212, 255, 0.1);
border-color: var(--primary);
color: var(--primary);
}

/* 3. 导航栏滚动效果 */
.navbar {
transition: background 0.3s ease,
backdrop-filter 0.3s ease,
box-shadow 0.3s ease,
transform 0.3s ease;
}

/* 导航链接悬停效果 */
.nav-link {
position: relative;
transition: color 0.3s ease;
}

.nav-link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--primary);
transition: width 0.3s ease;
}

.nav-link:hover::after {
width: 100%;
}

/* 4. 数字增长动画 */
@keyframes countUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.stat-number {
display: inline-block;
animation: countUp 1s ease-out forwards;
animation-play-state: paused;
}

.hero-stats:hover .stat-number {
animation-play-state: running;
}

/* 5. 滚动渐显动画 */
.feature-card,
.pricing-card,
.testimonial-card,
.island-preview-card {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.6s ease forwards;
animation-play-state: paused;
}

@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}

/* 当元素进入视口时播放动画（需要配合JS，但这里用:hover演示） */
.features:hover .feature-card,
.pricing:hover .pricing-card,
.testimonials:hover .testimonial-card,
.islands-preview:hover .island-preview-card {
animation-play-state: running;
}

/* 6. 图片悬停放大效果 */
.island-img {
transition: transform 0.5s ease;
overflow: hidden;
}

.island-preview-card:hover .island-img {
transform: scale(1.1);
}

/* 7. 浮动动画 */
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}

.logo-icon {
animation: float 3s ease-in-out infinite;
}

/* 8. 脉动动画 */
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(42, 212, 255, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(42, 212, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(42, 212, 255, 0);
}
}

.btn-primary {
animation: pulse 2s infinite;
}

.btn-primary:hover {
animation: none;
}

/* 9. 渐变边框动画 */
.pricing-card.featured {
position: relative;
background: linear-gradient(135deg, rgba(42, 212, 255, 0.1), rgba(123, 104, 238, 0.1));
background-origin: border-box;
background-clip: padding-box, border-box;
border: 2px solid transparent;
}

.pricing-card.featured::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, #2ad4ff, #7b68ee, #2ad4ff);
border-radius: 32px;
z-index: -1;
background-size: 200% 200%;
animation: gradientMove 3s ease infinite;
}

@keyframes gradientMove {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

/* 10. 波浪效果 */
@keyframes wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1);
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(0.8);
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1);
}
}

/* 11. 旋转动画 */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

.feature-icon {
display: inline-block;
animation: spin 20s linear infinite;
}

.feature-card:hover .feature-icon {
animation: spin 3s linear infinite;
}

/* 12. 闪烁动画 */
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}



/* 13. 滑入动画 */
@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}

.hero-title {
animation: slideIn 1s ease-out;
}

/* 14. 文字闪烁效果 */
.gradient-text {
background-size: 200% 200%;
animation: gradientShift 5s ease infinite;
}

@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

/* 15. 卡片堆叠效果 */
.features-grid {
perspective: 1000px;
}

.feature-card {
transform-style: preserve-3d;
transition: all 0.3s ease;
}

.feature-card:hover {
transform: translateY(-10px) scale(1.02) rotateX(2deg) rotateY(2deg);
}

/* 16. 进度条效果 */
@keyframes progress {
from {
width: 0;
}
to {
width: 100%;
}
}

/* 17. 光效扫过 */
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s ease;
pointer-events: none;
}

.feature-card:hover::before {
left: 100%;
}

/* 18. 图标跳动 */
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}

.testimonial-card:hover .author-name {
animation: bounce 0.5s ease infinite;
}

/* 19. 文字渐显 */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

.hero-subtitle {
animation: fadeIn 1.5s ease-out 0.5s both;
}

.hero-cta {
animation: fadeIn 1.5s ease-out 1s both;
}

.hero-stats {
animation: fadeIn 1.5s ease-out 1.5s both;
}

/* 20. 卡片背景光效 */
.pricing-card {
position: relative;
overflow: hidden;
}

.pricing-card::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(42, 212, 255, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}



/* 白天模式下的动画调整 */
[data-theme="light"] .btn-primary {
animation: pulse 2s infinite;
--primary: #00b8a9;
}

[data-theme="light"] .feature-card::after {
background: radial-gradient(circle, rgba(0, 184, 169, 0.2) 0%, transparent 70%);
}

[data-theme="light"] .pricing-card.featured::before {
background: linear-gradient(135deg, #00b8a9, #3b9ae1, #00b8a9);
}

[data-theme="light"] .nav-link::after {
background: #00b8a9;
}

/* 卡片点击跳转提示 */
.feature-card::after {
content: '→';
position: absolute;
bottom: 20px;
right: 20px;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
font-size: 1.2rem;
color: var(--primary);
}

.feature-card:hover::after {
opacity: 1;
transform: translateX(5px);
}

/* 让 Testimonials 的 3D 画布边缘产生羽化渐隐效果，避免模型生硬切割 */
#testimonials-canvas {
    /* 核心：从中心向外，50%以内完全不透明，到 90% 处平滑过渡到全透明 */
    -webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 90%);
    mask-image: radial-gradient(ellipse at center, black 50%, transparent 90%);
}

/* 如果你想让所有独立 Section 的 3D 画布都有这个边缘渐隐效果，可以组合选择器：*/
#features-canvas,
#islands-canvas,
#pricing-canvas,
#testimonials-canvas,
#contact-canvas {
    -webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 90%);
    mask-image: radial-gradient(ellipse at center, black 50%, transparent 90%);
}

/* ========================================= */
/* 手机端样式：Islands 和 Pricing 横向滑动轮播 */
/* ========================================= */
@media (max-width: 768px) {
    
    /* 将原本的 Grid 网格改为横向 Flex 布局 */
    .islands-grid,
    .pricing-grid {
        display: flex;
        flex-wrap: nowrap;        /* 强制不换行 */
        overflow-x: auto;         /* 开启横向滚动 */
        overflow-y: hidden;       /* 隐藏纵向滚动 */
        scroll-snap-type: x mandatory; /* 开启横向滚动吸附效果 */
        
        /* 布局微调 */
        gap: 20px;
        padding-bottom: 20px;     /* 底部留白，防止卡片阴影或放大效果被裁切 */
        padding-inline: 10px;     /* 左右留一点内边距 */
        -webkit-overflow-scrolling: touch; /* 让 iOS 滑动更流畅（惯性滚动） */
        
        /* 隐藏滚动条，让界面看起来更像高级的 App (Firefox) */
        scrollbar-width: none; 
    }

    /* 隐藏 Chrome, Safari, Edge 的滚动条 */
    .islands-grid::-webkit-scrollbar,
    .pricing-grid::-webkit-scrollbar {
        display: none; 
    }

    /* 设定卡片在手机端的大小和吸附规则 */
    .island-preview-card,
    .pricing-card {
        /* flex: 0 0 85% 意思是让卡片固定占据屏幕 85% 的宽度 */
        /* 这样右边会露出下一个卡片的一个角，暗示用户这里可以横向滑动 */
        flex: 0 0 85%; 
        max-width: 320px;         /* 限制一下最大宽度 */
        scroll-snap-align: center; /* 滚动停止时，让卡片自动吸附在屏幕正中间 */
    }

    /* 修复 pricing-card 原本可能带有的 transform 放缩问题 */
    .pricing-grid {
        align-items: center; /* 确保高度不同的卡片垂直居中 */
    }
}

/* ========================================= */
/* 2. 手机端小屏幕样式 (必须放在最后) */
/* ========================================= */
/* Responsive */
@media (max-width: 768px) {
    /* ... 你原有的手机端代码 ... */

    /* 👇 新增：Features 竖向滑动轮播（显示约 3.5 个卡片） */
    .features-grid {
        display: flex;
        flex-direction: column;   /* 强制竖向排列 */
        flex-wrap: nowrap;        /* 强制不换行 */
        overflow-y: auto;         /* 开启竖向滚动 */
        overflow-x: hidden;       /* 隐藏横向滚动 */
        scroll-snap-type: y mandatory; /* 开启竖向滚动吸附 */
        
        /* 💡 核心：限制容器高度来控制显示“几个”卡片 */
        /* 假设每个卡片加上间距约 200px，3.5个大概是 700px。
           推荐使用视口高度(vh)，这里设置 70vh 左右通常能正好卡在第4个卡片的一半 */
        height: 70vh;             
        
        gap: 20px;
        padding-bottom: 20px;
        -webkit-overflow-scrolling: touch; /* iOS 流畅滑动 */
        
        /* 隐藏滚动条，视觉更高级 */
        scrollbar-width: none; 
    }

    /* 隐藏 Chrome/Safari 滚动条 */
    .features-grid::-webkit-scrollbar {
        display: none;
    }

    .feature-card {
        flex: 0 0 auto;           /* 防止卡片高度被挤压收缩 */
        scroll-snap-align: start; /* 滚动停止时，卡片顶部吸附到容器顶部 */
        /* 可选：如果你希望卡片高度固定，可以取消下面这行的注释 */
        /* min-height: 220px; */  
    }
}

/* ========================================= */
/* 手机端导航栏自适应调整 */
/* ========================================= */
@media (max-width: 768px) {
    /* 1. 导航栏容器：允许内部元素换行，减小两侧留白 */
    .navbar {
        padding: 10px 15px;
        flex-wrap: wrap; 
    }

    /* 2. 稍微缩小 Logo 文字以节省空间 */
    .logo-text {
        font-size: 1.2rem;
    }

    /* 3. 右侧操作区：缩小按钮之间的间距 */
    .nav-actions {
        gap: 8px;
    }

    /* 4. 调整白天/黑夜和墨镜图标按钮的大小 */
    .icon-btn {
        width: 36px;
        height: 36px;
        font-size: 1.1rem; /* 稍微缩小里面的 Emoji */
    }

    /* 5. 调整 Get Started 按钮：减小内边距和字号，使其变紧凑 */
    .nav-actions .btn-primary {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    /* 6. 解决拥挤的核心：将文字导航链接(Features/Islands等)换行到第二排 */
    .nav-links {
        order: 3; /* 让它排在 Logo 和 操作按钮 之后 */
        width: 100%; /* 强制占据新的一整行 */
        justify-content: center; /* 居中对齐 */
        margin-top: 10px;
        gap: 15px;
        font-size: 0.9rem;
    }
}

/* 针对屏幕特别窄的手机 (比如 iPhone SE，宽度 < 380px) 的极限优化 */
@media (max-width: 380px) {
    .nav-actions .btn-primary {
        display: none; /* 在极小屏幕下隐藏 Get Started 按钮，保留两个重要图标 */
    }
}