/* 全局基础样式：字体、颜色变量与常用过渡（用于增强一致性与可读性） */
:root {
    /* 主要色系（企业化：稳重、可信赖） */
    --color-primary: #0f4c81; /* 深海蓝 */
    --color-primary-600: #0b3a66;
    --color-secondary: #d68227; /* 橙黄点缀 */
    --color-muted: #6b7280; /* 中性灰（用于副文本） */
    --color-dark: #0f1724; /* 用于主体文本/页脚 */
    --color-surface: #ffffff; /* 卡片背景 */
    --color-bg: #f6f8fa; /* 页面背景 */
    --color-accent: #00a8e8;

    /* 尺寸与节奏 */
    --radius-sm: 6px;
    --radius-md: 10px;
    --container-max: 1400px;
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    color: var(--color-dark);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 卡片与图片平滑过渡（更适合企业展示，悬浮微升，不夸张） */
.product-card img {
    transition: transform 0.32s cubic-bezier(.2,.9,.3,1), opacity 0.2s ease;
    will-change: transform, opacity;
    border-radius: 6px;
}

/* 小工具类：文字阴影与缩放（从内联 tailwind-style 移植） */
.text-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.hover-scale { transition: transform 0.5s ease; }
.product-card:hover .hover-scale { transform: scale(1.05); }

/* 标题与引导文本（企业化规范） */
h1, .hero-title { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 800; color: var(--color-dark); letter-spacing: -0.02em; }
h2, h3, h4 { font-family: 'Montserrat', system-ui, sans-serif; color: var(--color-dark); }
.lead { color: var(--color-muted); font-size: 1.05rem; line-height: 1.6; }

/* 容器宽度统一 */
.container { max-width: var(--container-max); }

/* 卡片基准样式 */
.card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 18px rgba(15,23,36,0.06);
    transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(15,23,36,0.08); }

/* 按钮统一样式（主/次） */
.btn-primary {
    background-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
    padding: 0.55rem 1.15rem;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(15,76,129,0.08);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(15,76,129,0.10); background-color: var(--color-primary-600); }
.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid rgba(15,76,129,0.08);
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

/* 更低调的 card-hover（替换原来较夸张的效果） */
.card-hover { overflow: hidden; border-radius: var(--radius-sm); }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(15,23,36,0.06); }

.fallback-btn {
    display: inline-block;
    padding: 0.48rem 1rem;
    border-radius: 8px;
}

/* 统一 section 间距：使用明确的响应式节奏，避免冲突 */
.section-padding { padding: 4rem 1rem; }

@media (min-width: 768px) {
    .section-padding { padding: 6rem 1rem; }
}

@media (min-width: 1400px) {
    .section-padding { padding: 7rem 0; }
}

/* Logo K 样式，用于把 K 放大 */
.logo-k {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.8rem;
    display: inline-block;
    color: var(--color-primary);
    margin-right: -0.06rem;
}
.logo-rest { font-weight: 700; font-size: 1rem; color: var(--color-primary); }

/* Navbar 美化：阴影、收缩态、导航链接下划线动画（兼容没有 Tailwind @apply 的情况） */
#navbar {
    backface-visibility: hidden;
}
#navbar .container {
    transition: padding 220ms ease, box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease;
}
#navbar.scrolled .container {
    padding-top: 0.45rem; /* 更紧凑 */
    padding-bottom: 0.45rem;
    box-shadow: 0 8px 30px rgba(15,76,129,0.08);
    border-color: rgba(15,76,129,0.04);
    background-color: rgba(255,255,255,0.95);
}

.nav-link {
    position: relative;
    padding-bottom: 6px;
    color: #374151; /* fallback */
}
.nav-link { font-size: 1rem; padding-left: 0.5rem; padding-right: 0.5rem; }

@media (min-width: 768px) {
    /* 加大桌面导航字体并保持适当间距以符合企业展示 */
    .nav-link { font-size: 1.125rem; padding-left: 0.75rem; padding-right: 0.75rem; }
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--color-primary);
    transition: width 260ms ease;
}
.nav-link:hover::after,
.nav-link:focus::after {
    width: 100%;
}

/* 更圆润的 CTA */
.btn-primary.rounded-full { border-radius: 9999px; padding-left: 1.05rem; padding-right: 1.05rem; }


/* 更紧凑的产品卡样式 */
.product-card h3 { font-size: 0.98rem; }
.product-card .p-4 { padding-top: .85rem; padding-bottom: .85rem; }

/* Contact area custom grid: make left column wider on md+ screens */
.contact-grid {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: 60% 40%;
    }
}

/* 表单、输入、选择框风格（企业站常用） */
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    border: 1px solid #e6e9ef;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: #fff;
    transition: box-shadow .12s ease, border-color .12s ease;
}
input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 6px 18px rgba(15,76,129,0.06); border-color: var(--color-primary); }

/* 页脚风格统一 */
.bg-dark { background-color: var(--color-dark); }
footer p, footer a, footer li { color: #cbd5e1; }

/* 进度条样式 */
.progress-35 {
    width: 35%;
}

.progress-25 {
    width: 25%;
}

.progress-20 {
    width: 20%;
}

.progress-15 {
    width: 15%;
}

.progress-5 {
    width: 5%;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .btn-primary,
    .btn-secondary {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 加载动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

/* Slider slide base style (used by workshop & reviews sliders) */
.slide {
    position: relative; /* ensure slide content contributes to layout height */
    transition: opacity 420ms cubic-bezier(.2,.9,.3,1);
    will-change: opacity;
}

/* Reviews dots active state */
#reviews-dots button.active {
    background-color: var(--color-primary) !important;
}

/* Customer Reviews typography — align with global section styles */
/* reviews-slider wrapper spacing handled by section-padding and container rules */

#reviews-slider .card h4 {
    /* author name — match other section subheadings */
    font-size: 1.125rem; /* 18px */
    line-height: 1.3;
}

#reviews-slider .card p.text-sm,
#reviews-slider .card .text-gray-500 {
    /* author title/meta */
    font-size: 0.95rem; /* ~15px */
    color: var(--color-muted);
}

#reviews-slider .card p.text-gray-600,
#reviews-slider .card p {
    /* review body — match lead/body copy */
    font-size: 1rem; /* 16px */
    line-height: 1.6;
    color: #374151; /* slightly stronger than gray-600 for readability */
}

/* Ensure the review card inner spacing doesn't make the card visually larger than other cards */
#reviews-slider .max-w-3xl.p-8 { padding: 2rem; }

/* Enterprise polish: focus styles, button hierarchy, card consistency */
/* Visible focus ring for keyboard users */
.focus-ring:focus,
.btn-primary:focus,
button:focus,
a:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(15,76,129,0.12);
    border-radius: 8px;
}

/* Use focus-visible (where supported) to avoid showing ring on mouse click */
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { box-shadow: none; }

/* Slightly stronger primary CTA for enterprise look */
.btn-primary {
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-600));
    box-shadow: 0 10px 30px rgba(15,76,129,0.12);
}

/* Product card: consistent min-height so grid looks uniform */
.product-card { min-height: 220px; display: flex; flex-direction: column; }
.product-card .p-4 { flex: 1; }

/* Make product images a fixed aspect ratio box */
.product-card .h-44 { height: 180px; }

/* Make skip link visible on focus (Tailwind provides sr-only but we ensure a fallback) */
.sr-only.focus:not(.sr-only) { position: static; transform: none; clip: auto; width: auto; height: auto; margin: 0; }