/* ============================================
   尚宝文化传媒工作室 — 官方网站样式
   设计风格：现代商务 + 深色高级感
   ============================================ */

:root {
    --color-primary: #6C5CE7;
    --color-primary-light: #A29BFE;
    --color-primary-dark: #4834D4;
    --color-accent: #00CEC9;
    --color-accent-light: #55EFC4;
    --color-gold: #FDCB6E;
    --color-dark: #0D1117;
    --color-dark-2: #161B22;
    --color-dark-3: #21262D;
    --color-surface: #1A1F2E;
    --color-surface-2: #242B3D;
    --color-white: #FFFFFF;
    --color-text: #C9D1D9;
    --color-text-muted: #8B949E;
    --color-border: rgba(255,255,255,0.08);
    --font-sans: 'Outfit', 'Noto Sans SC', 'PingFang SC', sans-serif;
    --font-cn: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem;
    --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 8rem;
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px;
    --transition-fast: 0.2s ease;
    --transition-base: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 40px rgba(108,92,231,0.15);
}

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

html { scroll-behavior:smooth; font-size:16px; scroll-padding-top:80px; }

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-dark);
    line-height: 1.8;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; transition:color var(--transition-fast); }
ul, ol { list-style:none; }
button { border:none; background:none; cursor:pointer; font-family:inherit; }

/* --- 加载遮罩 --- */
.loader {
    position:fixed; inset:0; z-index:10000;
    background: var(--color-dark);
    display:flex; align-items:center; justify-content:center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
.loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader-content { text-align:center; }
.loader-logo {
    width: 80px; height: 80px; object-fit:contain; margin:0 auto 1rem;
    animation: loaderPulse 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(108,92,231,0.4));
}
.loader-text {
    font-family: var(--font-sans);
    color: var(--color-text-muted);
    font-size: 0.9rem; letter-spacing: 0.5em; margin-top:0.5rem; font-weight:300;
}
.loader-bar {
    width:200px; height:2px; background:rgba(255,255,255,0.06);
    margin:1.5rem auto 0; border-radius:2px; overflow:hidden;
}
.loader-bar-inner {
    width:0; height:100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius:2px; animation: loaderProgress 2s ease-in-out forwards;
}
@keyframes loaderPulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.08);opacity:0.7;} }
@keyframes loaderProgress { 0%{width:0;} 100%{width:100%;} }

/* --- 导航栏 --- */
.navbar {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    padding:1rem 0; transition:all var(--transition-base);
}
.navbar.scrolled {
    background:rgba(13,17,23,0.92);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    padding:0.6rem 0; box-shadow:0 4px 30px rgba(0,0,0,0.4);
    border-bottom:1px solid var(--color-border);
}
.nav-container {
    max-width:1200px; margin:0 auto; padding:0 2rem;
    display:flex; align-items:center; justify-content:space-between;
}
.nav-logo { display:flex; align-items:center; gap:0.6rem; z-index:1001; }
.nav-logo-img { width:36px; height:36px; object-fit:contain; border-radius:8px; }
.nav-logo-text {
    font-family:var(--font-cn); font-size:1.1rem; font-weight:700;
    color:var(--color-white); letter-spacing:0.05em;
}
.nav-links { display:flex; align-items:center; gap:0.3rem; }
.nav-link {
    font-size:0.9rem; color:rgba(255,255,255,0.6); padding:0.5rem 1rem;
    border-radius:var(--radius-sm); transition:all var(--transition-fast);
    position:relative; letter-spacing:0.03em;
}
.nav-link::after {
    content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
    width:0; height:2px; background:var(--color-primary); border-radius:2px;
    transition:width var(--transition-base);
}
.nav-link:hover, .nav-link.active { color:var(--color-white); }
.nav-link.active::after, .nav-link:hover::after { width:50%; }
.nav-toggle { display:none; flex-direction:column; gap:5px; z-index:1001; padding:4px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--color-white); transition:all var(--transition-fast); border-radius:2px; }
.nav-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.active span:nth-child(2) { opacity:0; }
.nav-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* --- 英雄区 --- */
.hero {
    position:relative; height:100vh; min-height:700px; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background: var(--color-dark);
}
.hero-bg-shapes { position:absolute; inset:0; overflow:hidden; }
.shape {
    position:absolute; border-radius:50%; filter:blur(80px); opacity:0.15;
    animation: floatShape 20s ease-in-out infinite;
}
.shape-1 { width:600px; height:600px; background:var(--color-primary); top:-200px; right:-100px; }
.shape-2 { width:500px; height:500px; background:var(--color-accent); bottom:-150px; left:-100px; animation-delay:-7s; }
.shape-3 { width:400px; height:400px; background:var(--color-gold); top:50%; left:50%; transform:translate(-50%,-50%); animation-delay:-14s; opacity:0.08; }
@keyframes floatShape {
    0%,100%{ transform:translate(0,0) scale(1); }
    33%{ transform:translate(30px,-30px) scale(1.05); }
    66%{ transform:translate(-20px,20px) scale(0.95); }
}
.hero-content {
    position:relative; z-index:2; text-align:center; padding:0 2rem;
    animation: heroFadeIn 1.2s ease 0.3s both;
}
@keyframes heroFadeIn { from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);} }
.hero-badge {
    display:inline-block; font-size:0.8rem; color:var(--color-primary-light);
    letter-spacing:0.3em; padding:0.5rem 1.5rem;
    border:1px solid rgba(108,92,231,0.3); border-radius:100px;
    margin-bottom:2rem; backdrop-filter:blur(10px);
    background:rgba(108,92,231,0.08);
}
.hero-title { font-family:var(--font-cn); font-weight:900; color:var(--color-white); margin-bottom:1.5rem; }
.hero-title-line {
    display:block; font-size:clamp(2.5rem,7vw,5rem); letter-spacing:0.15em;
    background:linear-gradient(135deg, var(--color-white) 0%, var(--color-primary-light) 50%, var(--color-accent) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero-subtitle {
    font-size:clamp(0.9rem,2vw,1.2rem); color:var(--color-primary-light);
    letter-spacing:0.4em; margin-bottom:0.8rem; font-weight:300;
}
.hero-desc {
    font-size:1rem; color:var(--color-text-muted);
    letter-spacing:0.08em; margin-bottom:2.5rem; max-width:600px; margin-left:auto; margin-right:auto;
}
.hero-cta {
    display:inline-flex; align-items:center; gap:0.5rem;
    padding:0.9rem 2.2rem;
    background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color:var(--color-white); font-size:0.95rem; letter-spacing:0.15em;
    border-radius:var(--radius-md); transition:all var(--transition-base);
    box-shadow:0 4px 20px rgba(108,92,231,0.3);
}
.hero-cta:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(108,92,231,0.5); }
.hero-cta svg { transition:transform var(--transition-fast); }
.hero-cta:hover svg { transform:translate(3px,-3px); }
.hero-scroll-hint {
    position:absolute; bottom:3rem; left:50%; transform:translateX(-50%); z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:0.5rem;
    color:rgba(255,255,255,0.3); font-size:0.75rem; letter-spacing:0.15em;
    animation:heroFadeIn 1.2s ease 1.2s both;
}
.scroll-mouse { width:22px; height:36px; border:2px solid rgba(255,255,255,0.2); border-radius:11px; position:relative; }
.scroll-dot {
    position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:3px; height:8px; background:var(--color-primary); border-radius:3px;
    animation:scrollDot 2s ease-in-out infinite;
}
@keyframes scrollDot { 0%,100%{top:6px;opacity:1;} 50%{top:18px;opacity:0.3;} }

/* --- 通用区块 --- */
.container { max-width:1200px; margin:0 auto; padding:0 2rem; }
.section { padding:var(--space-3xl) 0; }
.section-header { text-align:center; margin-bottom:var(--space-xl); }
.section-tag {
    display:inline-block; font-size:0.75rem; color:var(--color-primary-light);
    letter-spacing:0.3em; padding:0.35rem 1.2rem;
    border:1px solid rgba(108,92,231,0.3); border-radius:100px;
    margin-bottom:1rem; font-weight:500;
}
.section-title {
    font-family:var(--font-cn); font-size:clamp(1.8rem,4vw,2.5rem);
    font-weight:700; color:var(--color-white); letter-spacing:0.1em;
}
.section-divider { display:flex; align-items:center; justify-content:center; gap:1rem; margin:1rem 0; }
.section-divider::before, .section-divider::after {
    content:''; width:60px; height:1px;
    background:linear-gradient(90deg, transparent, var(--color-primary), transparent);
}
.divider-ornament { width:8px; height:8px; background:var(--color-primary); border-radius:50%; }
.section-desc { font-size:1rem; color:var(--color-text-muted); max-width:600px; margin:0.5rem auto 0; }

/* --- 关于我们 --- */
.about { background:var(--color-dark); }
.about-grid { display:grid; grid-template-columns:1.2fr 0.8fr; gap:var(--space-xl); align-items:center; }
.about-heading {
    font-family:var(--font-cn); font-size:1.5rem; color:var(--color-white);
    margin-bottom:1.5rem; letter-spacing:0.05em;
}
.about-text p { font-size:0.95rem; color:var(--color-text-muted); margin-bottom:1rem; line-height:2; text-align:justify; }
.about-tags { display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:2rem; padding-top:2rem; border-top:1px solid var(--color-border); }
.about-tag {
    display:inline-flex; align-items:center; gap:0.3rem;
    font-size:0.85rem; color:var(--color-text-muted); padding:0.45rem 1rem;
    background:var(--color-surface); border:1px solid var(--color-border);
    border-radius:100px; transition:all var(--transition-fast);
}
.about-tag:hover { border-color:rgba(108,92,231,0.4); color:var(--color-primary-light); background:rgba(108,92,231,0.08); }

.about-visual { display:flex; align-items:center; justify-content:center; }
.about-logo-showcase {
    position:relative; width:280px; height:280px;
    display:flex; align-items:center; justify-content:center;
}
.about-logo-img {
    width:120px; height:120px; object-fit:contain; position:relative; z-index:2;
    filter:drop-shadow(0 0 30px rgba(108,92,231,0.3));
}
.about-logo-ring {
    position:absolute; inset:0; border:1px solid rgba(108,92,231,0.15);
    border-radius:50%; animation:ringRotate 20s linear infinite;
}
.about-logo-ring::before {
    content:''; position:absolute; top:-4px; left:50%; width:8px; height:8px;
    background:var(--color-primary); border-radius:50%;
}
.about-logo-ring-2 {
    inset:30px; border-color:rgba(0,206,201,0.12);
    animation-direction:reverse; animation-duration:15s;
}
.about-logo-ring-2::before { background:var(--color-accent); }
@keyframes ringRotate { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

/* --- 服务项目 --- */
.services { background:var(--color-dark-2); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.service-card {
    background:var(--color-surface); border-radius:var(--radius-lg);
    padding:2rem; border:1px solid var(--color-border);
    transition:all var(--transition-base); position:relative; overflow:hidden;
}
.service-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--color-primary), var(--color-accent));
    opacity:0; transition:opacity var(--transition-base);
}
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-glow); border-color:rgba(108,92,231,0.3); }
.service-card:hover::before { opacity:1; }
.service-icon {
    width:56px; height:56px; border-radius:var(--radius-md);
    background:linear-gradient(135deg, rgba(108,92,231,0.15), rgba(0,206,201,0.1));
    display:flex; align-items:center; justify-content:center;
    margin-bottom:1.2rem; color:var(--color-primary-light);
    border:1px solid rgba(108,92,231,0.15);
}
.service-card h3 {
    font-family:var(--font-cn); font-size:1.3rem; color:var(--color-white);
    margin-bottom:0.8rem; letter-spacing:0.05em;
}
.service-card p { font-size:0.9rem; color:var(--color-text-muted); line-height:1.8; margin-bottom:1rem; }
.service-list li {
    font-size:0.85rem; color:var(--color-text-muted); padding:0.3rem 0 0.3rem 1.2rem;
    position:relative; line-height:1.6;
}
.service-list li::before {
    content:''; position:absolute; left:0; top:0.65rem;
    width:6px; height:6px; border-radius:50%;
    background:var(--color-primary); opacity:0.6;
}

/* --- 视差带 --- */
.parallax-band {
    position:relative; height:300px;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    background:linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-dark) 50%, #0a3d3c 100%);
}
.parallax-overlay { position:absolute; inset:0; background:rgba(13,17,23,0.3); }
.parallax-content { position:relative; z-index:1; text-align:center; padding:0 2rem; }
.parallax-content h2 {
    font-family:var(--font-cn); font-size:clamp(1.6rem,4vw,2.5rem);
    color:var(--color-white); letter-spacing:0.2em; margin-bottom:0.8rem;
}
.parallax-content p { font-size:1rem; color:var(--color-primary-light); letter-spacing:0.3em; font-weight:300; }

/* --- 核心优势 --- */
.advantage { background:var(--color-dark); }
.advantage-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.advantage-item {
    padding:2rem 1.5rem; border-radius:var(--radius-lg);
    background:var(--color-surface); border:1px solid var(--color-border);
    transition:all var(--transition-base); text-align:center;
}
.advantage-item:hover { transform:translateY(-6px); border-color:rgba(108,92,231,0.3); box-shadow:var(--shadow-glow); }
.advantage-number {
    font-family:var(--font-sans); font-size:3rem; font-weight:900;
    background:linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    line-height:1; margin-bottom:1rem;
}
.advantage-item h4 { font-family:var(--font-cn); font-size:1.1rem; color:var(--color-white); margin-bottom:0.8rem; letter-spacing:0.05em; }
.advantage-item p { font-size:0.85rem; color:var(--color-text-muted); line-height:1.8; }

/* --- 案例展示 --- */
.cases { background:var(--color-dark-2); }
.cases-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.case-card {
    background:var(--color-surface); border-radius:var(--radius-lg);
    padding:2rem; border:1px solid var(--color-border);
    transition:all var(--transition-base); position:relative;
}
.case-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-glow); border-color:rgba(108,92,231,0.3); }
.case-icon { font-size:2.5rem; margin-bottom:1rem; }
.case-card h4 { font-family:var(--font-cn); font-size:1.15rem; color:var(--color-white); margin-bottom:0.6rem; }
.case-card p { font-size:0.9rem; color:var(--color-text-muted); line-height:1.8; margin-bottom:1rem; }
.case-tag {
    display:inline-block; font-size:0.75rem; color:var(--color-primary-light);
    padding:0.25rem 0.8rem; border:1px solid rgba(108,92,231,0.3);
    border-radius:100px; letter-spacing:0.05em;
}

/* --- 联系信息 --- */
.contact { background:var(--color-dark); }
.contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.contact-card {
    text-align:center; padding:2.5rem 2rem; background:var(--color-surface);
    border-radius:var(--radius-lg); border:1px solid var(--color-border);
    transition:all var(--transition-base);
}
.contact-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-glow); border-color:rgba(108,92,231,0.3); }
.contact-icon {
    width:56px; height:56px; border-radius:50%;
    background:linear-gradient(135deg, var(--color-primary), var(--color-accent));
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 1.2rem; color:var(--color-white);
}
.contact-card h4 { font-family:var(--font-cn); font-size:1.1rem; color:var(--color-white); margin-bottom:0.8rem; }
.contact-card p { font-size:0.9rem; color:var(--color-text-muted); line-height:1.6; }

/* --- 页脚 --- */
.footer { background:var(--color-dark-2); color:var(--color-text-muted); border-top:1px solid var(--color-border); }
.footer-top { padding:var(--space-xl) 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; }
.footer-logo { display:flex; align-items:center; gap:0.6rem; margin-bottom:1.2rem; }
.footer-logo-img { width:32px; height:32px; object-fit:contain; border-radius:6px; }
.footer-logo-text { font-family:var(--font-cn); font-size:1rem; color:var(--color-white); letter-spacing:0.05em; font-weight:600; }
.footer-desc { font-size:0.85rem; line-height:1.8; max-width:360px; }
.footer-links-group h5 { color:var(--color-white); font-size:1rem; margin-bottom:1.2rem; letter-spacing:0.05em; font-weight:600; }
.footer-links-group ul li { margin-bottom:0.6rem; }
.footer-links-group ul li a { font-size:0.85rem; color:rgba(255,255,255,0.4); transition:all var(--transition-fast); }
.footer-links-group ul li a:hover { color:var(--color-primary-light); padding-left:4px; }
.footer-bottom { padding:1.5rem 0; border-top:1px solid var(--color-border); text-align:center; }
.footer-bottom p { font-size:0.8rem; letter-spacing:0.08em; color:rgba(255,255,255,0.25); }
.footer-icp { margin-top:0.5rem; }
.footer-icp a { color:rgba(255,255,255,0.25); transition:color var(--transition-fast); }
.footer-icp a:hover { color:var(--color-primary-light); }

/* --- 回到顶部 --- */
.back-to-top {
    position:fixed; bottom:2rem; right:2rem; width:44px; height:44px; border-radius:50%;
    background:var(--color-surface-2); color:var(--color-primary-light);
    display:flex; align-items:center; justify-content:center; z-index:999;
    opacity:0; visibility:hidden; transform:translateY(20px);
    transition:all var(--transition-base); box-shadow:var(--shadow-md);
    border:1px solid var(--color-border);
}
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover { background:var(--color-primary); color:var(--color-white); transform:translateY(-2px); }

/* --- 动画类 --- */
[data-animate] { opacity:0; transform:translateY(40px); transition:opacity 0.8s ease, transform 0.8s ease; }
[data-animate="slide-right"] { transform:translateX(-40px); }
[data-animate="slide-left"] { transform:translateX(40px); }
[data-animate="slide-up"] { transform:translateY(40px); }
[data-animate="zoom"] { transform:scale(0.95); }
[data-animate].animated { opacity:1; transform:translate(0) scale(1); }

/* --- 响应式 --- */
@media (max-width:1024px) {
    .advantage-grid { grid-template-columns:repeat(2,1fr); }
    .services-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
    html { font-size:15px; }
    .nav-toggle { display:flex; }
    .nav-links {
        position:fixed; top:0; right:0; width:280px; height:100vh;
        background:rgba(13,17,23,0.98); backdrop-filter:blur(20px);
        flex-direction:column; justify-content:center; gap:0.5rem; padding:2rem;
        transform:translateX(100%); transition:transform var(--transition-base);
    }
    .nav-links.open { transform:translateX(0); }
    .nav-link { font-size:1.1rem; padding:0.8rem 1rem; }
    .about-grid { grid-template-columns:1fr; gap:2rem; }
    .about-visual { order:-1; }
    .about-logo-showcase { width:200px; height:200px; }
    .about-logo-img { width:80px; height:80px; }
    .about-tags { justify-content:center; }
    .cases-grid { grid-template-columns:1fr; }
    .contact-grid { grid-template-columns:1fr; gap:1rem; }
    .footer-grid { grid-template-columns:1fr; gap:2rem; }
    .section { padding:var(--space-2xl) 0; }
    .advantage-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
    .hero-title-line { letter-spacing:0.08em; }
    .hero-badge { font-size:0.7rem; letter-spacing:0.15em; }
    .advantage-grid { grid-template-columns:1fr; }
    .about-tags { gap:0.5rem; }
}