/* ============================================
 * 懒狗输入法官网 - 二次元可爱狗狗风 v8
 * 🐶 暖色调 · 圆角 · 可爱 · 简洁
 * ============================================ */

/* === Reset === */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100% }
body { font-family:'PingFang SC','Microsoft YaHei','Hiragino Sans GB','Noto Sans CJK SC','WenQuanYi Micro Hei',sans-serif; background:#FFF8F0; color:#4A3728; line-height:1.7; overflow-x:hidden; min-height:100vh }
body.en { font-family:'Segoe UI','SF Pro Display',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif }
a { color:inherit; text-decoration:none }
img { max-width:100%; height:auto }
ul,ol { list-style:none }

/* === CSS Variables === */
:root {
  --bg: #FFF8F0; --bg2: #FFF0E0; --bg3: #FFE4CC;
  --primary: #FF8C42; --secondary: #FFB347; --pink: #FFB5C2;
  --brown: #8B5E3C; --dark: #4A3728; --muted: #A08670;
  --white: #FFFFFF; --card: #FFFFFF; --shadow: 0 4px 20px rgba(255,140,66,0.12);
  --radius: 20px; --radius-sm: 12px;
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* === No particles canvas on non-home pages - hide it === */
#particles-canvas { display:none }

/* === Navigation === */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 1.5rem; background:rgba(255,248,240,0.95); backdrop-filter:blur(10px); border-bottom:2px solid #FFE4CC; transition:var(--transition) }
.navbar.scrolled { background:#FFFFFF; box-shadow:0 2px 20px rgba(255,140,66,0.1) }
.nav-brand { font-size:1.2rem; font-weight:700; color:var(--primary); display:flex; align-items:center; gap:0.5rem; letter-spacing:1px }
.nav-links { display:flex; gap:1.5rem; align-items:center }
.nav-links a { color:var(--muted); font-size:0.95rem; transition:color var(--transition); position:relative; font-weight:500 }
.nav-links a:hover,.nav-links a.active { color:var(--primary) }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); width:0; height:3px; background:var(--primary); border-radius:2px; transition:width var(--transition) }
.nav-links a:hover::after,.nav-links a.active::after { width:60% }
.lang-btn { background:var(--bg2); border:2px solid var(--primary); color:var(--primary); padding:0.4rem 1rem; border-radius:25px; cursor:pointer; font-size:0.85rem; transition:var(--transition); font-family:inherit; font-weight:600 }
.lang-btn:hover { background:var(--primary); color:#FFF; transform:translateY(-1px) }
.mobile-menu { display:none; background:none; border:none; color:var(--primary); font-size:1.5rem; cursor:pointer }

/* === Hero === */
.hero { position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:4rem 1.5rem 3rem; background:linear-gradient(180deg, #FFF8F0 0%, #FFF0E0 50%, #FFE4CC 100%) }
.hero-inner { max-width:800px; position:relative; z-index:10 }
.hero-badge { display:inline-block; padding:0.5rem 1.5rem; background:var(--primary); color:#FFF; border-radius:25px; font-size:0.95rem; margin-bottom:1.5rem; font-weight:600; letter-spacing:1px; box-shadow:0 4px 15px rgba(255,140,66,0.3) }
.hero h1 { font-size:clamp(2.5rem,5vw,4.5rem); font-weight:900; color:var(--brown); margin-bottom:0.5rem; letter-spacing:2px }
.hero h1 .en { display:block; font-size:clamp(1.2rem,2.5vw,1.8rem); margin-top:0.5rem; color:var(--primary); font-weight:600 }
.hero .slogan { font-size:clamp(1.3rem,2.5vw,1.8rem); font-weight:600; color:var(--primary); margin-bottom:0.5rem; letter-spacing:2px }
.hero .slogan-en { font-size:1rem; color:var(--muted); margin-bottom:1.2rem }
.hero .subtitle { font-size:1rem; color:var(--muted); margin-bottom:2.5rem; max-width:650px; margin-left:auto; margin-right:auto; line-height:1.9 }

/* === Buttons === */
.btn { display:inline-flex; align-items:center; justify-content:center; padding:0.9rem 2.5rem; border-radius:30px; font-size:1.05rem; font-weight:700; cursor:pointer; transition:var(--transition); letter-spacing:1px; font-family:inherit; border:none }
.btn-primary { background:var(--primary); color:#FFF; box-shadow:0 4px 20px rgba(255,140,66,0.35) }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(255,140,66,0.45); background:#FF7A2E }
.btn-outline { background:transparent; border:2px solid var(--primary); color:var(--primary) }
.btn-outline:hover { background:var(--primary); color:#FFF; transform:translateY(-2px) }
.btn-group { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap }

/* === Sections === */
.section { position:relative; z-index:1; padding:3rem 1.5rem; max-width:1200px; margin:0 auto }
.section-alt { background:var(--bg2); border-top:2px solid #FFE4CC; border-bottom:2px solid #FFE4CC }
.section-alt .section { max-width:1200px; padding:3rem 1.5rem }
.section-title { font-size:clamp(1.8rem,3vw,2.5rem); font-weight:700; text-align:center; margin-bottom:0.5rem; color:var(--brown) }
.section-subtitle { text-align:center; color:var(--muted); margin-bottom:3rem; font-size:1.05rem }

/* === Value Cards === */
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2rem }
.card { background:var(--card); border:2px solid #FFE4CC; border-radius:var(--radius); padding:2rem 1.8rem; text-align:center; transition:var(--transition); position:relative; overflow:hidden }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--primary),var(--pink)); opacity:0; transition:opacity var(--transition) }
.card:hover { transform:translateY(-6px); border-color:var(--primary); box-shadow:var(--shadow) }
.card:hover::before { opacity:1 }
.card-icon { font-size:2.5rem; margin-bottom:0.8rem }
.card h3 { font-size:1.2rem; margin-bottom:0.6rem; color:var(--brown) }
.card p { color:var(--muted); font-size:0.95rem; line-height:1.8 }

/* === Feature Items === */
.feature { display:flex; align-items:center; gap:3rem; padding:2.5rem 0; max-width:1200px; margin:0 auto; border-bottom:2px solid #FFE4CC }
.feature:last-child { border-bottom:none }
.feature:nth-child(even) { flex-direction:row-reverse }
.feature-visual { flex:1; display:flex; justify-content:center }
.feature-phone { width:220px; height:400px; background:var(--card); border:2px solid #FFE4CC; border-radius:30px; position:relative; overflow:hidden; box-shadow:var(--shadow) }
.feature-screen { position:absolute; inset:10px; bottom:60px; background:var(--bg); border-radius:20px; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:12px }
.feature-info { flex:1 }
.feature-no { font-size:0.8rem; color:var(--primary); text-transform:uppercase; letter-spacing:2px; margin-bottom:0.5rem; font-weight:700 }
.feature-info h3 { font-size:1.8rem; margin-bottom:0.8rem; font-weight:700; color:var(--brown) }
.feature-info p { color:var(--muted); font-size:1rem; line-height:1.9 }

/* === Platform Cards === */
.platforms { display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; margin-top:2rem }
.p-card { text-align:center; padding:1.8rem 1.5rem; border-radius:var(--radius); min-width:120px; transition:var(--transition); background:var(--card) }
.p-card.available { border:2px solid #4CAF50; box-shadow:0 0 20px rgba(76,175,80,0.1) }
.p-card.available:hover { box-shadow:0 0 30px rgba(76,175,80,0.2); transform:translateY(-4px) }
.p-card.coming { border:2px solid #FFE4CC; opacity:0.6 }
.p-icon { font-size:2rem; margin-bottom:0.5rem }
.p-name { font-size:0.9rem; color:var(--dark) }
.p-status { font-size:0.7rem; margin-top:0.3rem; font-weight:600 }
.p-status.avail { color:#4CAF50 }
.p-status.csoon { color:var(--muted) }

/* === Download Cards === */
.dl-cards { display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; margin-top:2rem }
.dl-card { background:var(--card); border:2px solid #FFE4CC; border-radius:20px; padding:2rem 1.8rem; min-width:260px; transition:var(--transition); box-shadow:var(--shadow) }
.dl-card:hover { border-color:var(--primary); transform:translateY(-4px) }
.dl-icon { font-size:2.5rem; margin-bottom:0.8rem; text-align:center }
.dl-card h3 { font-size:1.2rem; margin-bottom:0.3rem; text-align:center; color:var(--brown) }
.dl-ver { color:var(--muted); font-size:0.85rem; text-align:center; margin-bottom:0.2rem }
.dl-size { color:var(--muted); font-size:0.8rem; text-align:center; margin-bottom:1.2rem }
.dl-req { font-size:0.75rem; color:var(--muted); margin-top:1rem; text-align:left }

/* === FAQ === */
.faq { max-width:750px; margin:2rem auto 0 }
.faq-item { border-bottom:2px solid #FFE4CC; padding:1.2rem 0 }
.faq-q { font-size:1.1rem; color:var(--brown); cursor:pointer; font-weight:600; display:flex; justify-content:space-between; align-items:center }
.faq-q::after { content:'🐾'; font-size:1.2rem; transition:var(--transition) }
.faq-q.open::after { content:'🐶' }
.faq-a { color:var(--muted); font-size:0.95rem; margin-top:0.8rem; line-height:1.8; display:none }
.faq-q.open+.faq-a { display:block }

/* === Footer === */
.footer { position:relative; z-index:1; padding:2.5rem 1.5rem; border-top:2px solid #FFE4CC; text-align:center; background:var(--bg) }
.footer-links { display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; margin-bottom:1.5rem }
.footer-links a { color:var(--muted); font-size:0.9rem; transition:color var(--transition); font-weight:500 }
.footer-links a:hover { color:var(--primary) }
.footer p { color:var(--muted); font-size:0.8rem }
.footer .tagline { color:var(--primary); font-size:0.75rem; margin-top:0.5rem }

/* === Page Header === */
.page-header { position:relative; z-index:1; padding:7rem 2rem 2rem; text-align:center }
.page-header h1 { font-size:2.5rem; color:var(--brown); margin-bottom:0.5rem }
.page-header p { color:var(--muted); font-size:1.1rem }

/* === Feature Detail (for sub-pages) === */
.feature-detail { display:flex; gap:2rem; align-items:flex-start; padding:2rem 0; border-bottom:2px solid #FFE4CC }
.feature-detail:last-child { border-bottom:none }
.fd-icon { font-size:2.2rem; min-width:60px; text-align:center }
.fd-content h3 { font-size:1.2rem; color:var(--brown); margin-bottom:0.5rem }
.fd-content p { color:var(--muted); font-size:0.9rem; line-height:1.8 }
.fd-content ul { margin-top:0.8rem; padding-left:1.2rem }
.fd-content ul li { color:var(--muted); font-size:0.85rem; margin-bottom:0.3rem; position:relative; padding-left:1rem }
.fd-content ul li::before { content:'🐾'; color:var(--primary); position:absolute; left:0; font-size:0.7rem }

/* === Usecase hero === */
.usecase-hero{display:flex;align-items:center;gap:3rem;padding:2rem 0;border-bottom:2px solid #FFE4CC}
.usecase-hero:last-child{border-bottom:none}
@media(max-width:768px){.usecase-hero{flex-direction:column!important;text-align:center}.usecase-hero>div{flex:1!important;min-width:100%!important}}

/* === Privacy / Content pages === */
.privacy-content { max-width:800px; margin:0 auto }
.privacy-content h2 { font-size:1.4rem; color:var(--brown); margin:2rem 0 0.8rem }
.privacy-content p { color:var(--muted); font-size:0.95rem; line-height:1.9; margin-bottom:0.8rem }
.privacy-content ul { padding-left:1.5rem; margin-bottom:1rem }
.privacy-content ul li { color:var(--muted); font-size:0.9rem; margin-bottom:0.3rem }

/* === Chat Bubbles === */
.chat-bubble { padding:8px 14px; border-radius:14px; font-size:11px; margin:3px 0; max-width:85% }
.chat-bubble.other { background:#F5F0EB; color:var(--dark); border-bottom-left-radius:4px; align-self:flex-start }
.chat-bubble.me { background:var(--primary); color:#FFF; border-bottom-right-radius:4px; align-self:flex-end }

/* === Tags === */
.tag { display:inline-block; padding:3px 10px; border-radius:12px; font-size:10px; font-weight:700 }
.tag-cyan, .tag-primary { background:rgba(255,140,66,0.15); color:var(--primary) }
.tag-green { background:rgba(76,175,80,0.15); color:#4CAF50 }
.tag-magenta, .tag-pink { background:rgba(255,181,194,0.3); color:#E8607A }

/* === Animations === */
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.fade-up { opacity:1; transform:translateY(0); transition:all 0.7s cubic-bezier(0.4,0,0.2,1) }
.fade-up.animate { opacity:0; transform:translateY(30px) }
.fade-up.visible { opacity:1; transform:translateY(0) }

/* === Responsive === */
@media(max-width:1024px) { .cards-3{grid-template-columns:repeat(2,1fr)} .feature{flex-direction:column!important;text-align:center} .feature-visual{margin-bottom:2rem} }
@media(max-width:768px) { .nav-links{display:none} .mobile-menu{display:block} .nav-links.open{display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:#FFF;padding:1.5rem;gap:1rem;border-bottom:2px solid #FFE4CC;box-shadow:0 10px 30px rgba(0,0,0,0.05)} .cards-3{grid-template-columns:1fr} .hero{min-height:auto;padding:5rem 1rem 1.5rem} .hero h1{font-size:2rem} .hero .subtitle{font-size:0.9rem;line-height:1.7;margin-bottom:1.5rem} .hero .slogan{font-size:1.3rem} .hero .slogan-en{font-size:0.9rem;margin-bottom:0.8rem} .hero-badge{font-size:0.85rem;padding:0.4rem 1rem;margin-bottom:1rem} .btn-group .btn{padding:0.8rem 2rem;font-size:0.95rem;width:100%;max-width:300px} .dl-cards{flex-direction:column;align-items:center} .platforms{gap:0.8rem} .section{padding:2rem 1rem} .page-header{padding:5rem 1rem 2rem} .feature-detail{flex-direction:column;text-align:center} }
@media(max-width:480px) { .navbar{padding:0 1rem} .hero{padding:4.5rem 0.8rem 2rem} .card{padding:1.5rem 1rem} body{overflow-x:hidden} }

/* === 狗狗装饰 === */
.section::after{content:'🐾 🐾 🐾';display:block;text-align:center;font-size:1.2rem;opacity:0.3;margin-top:2rem;letter-spacing:1rem}
.footer::before{content:'🐶';display:block;text-align:center;font-size:2rem;margin-bottom:1rem;animation:bounceDog 2s ease-in-out infinite}
@keyframes bounceDog{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.page-header::after{content:'🐾';display:block;text-align:center;font-size:1.5rem;opacity:0.4;margin-top:0.5rem}

/* === 🐶 二次元装饰系统 === */

/* 卡片悬停喵爪效果 */
.card { position:relative; overflow:hidden }
.card::after{content:'';position:absolute;bottom:-20px;right:-20px;width:60px;height:60px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ctext y='45' x='5' font-size='45'%3E🐾%3C/text%3E%3C/svg%3E") no-repeat;opacity:0;transition:all 0.3s ease;transform:rotate(-15deg)}
.card:hover::after{opacity:0.15;bottom:0;right:0}

/* 区块标题左侧小狗 */
.section-title{position:relative;display:inline-block;left:50%;transform:translateX(-50%)}
.section-title::before{content:'🐶';position:absolute;left:-2.5rem;top:50%;transform:translateY(-50%);font-size:1.8rem;animation:bounceDog 1.5s ease-in-out infinite}
.section-title::after{content:'';position:absolute;right:-2.5rem;top:50%;transform:translateY(-50%);font-size:1.8rem}

/* 底部爪印装饰行 */
.section:nth-child(odd)::after{content:'🐾  🐶  🐾  🦴  🐾  🐶  🐾';display:block;text-align:center;font-size:1.1rem;opacity:0.3;margin-top:1.5rem;letter-spacing:0.8rem}

/* 卡片标题小骨头 */
.card h3::before{content:'🦴 ';font-size:0.9rem}

/* 导航栏底部装饰 */
.navbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--pink),var(--primary));border-radius:0 0 2px 2px;opacity:0.5}

/* 按钮悬浮小狗 */
.btn-primary{position:relative}
.btn-primary::after{content:'🐶';position:absolute;right:-5px;top:-5px;font-size:1rem;opacity:0;transition:all 0.3s ease}
.btn-primary:hover::after{opacity:1;right:8px}

/* 页面header装饰 */
.page-header{position:relative}
.page-header::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:4px;background:var(--primary);border-radius:2px}
.page-header::after{content:'🐾';display:block;text-align:center;font-size:1.5rem;opacity:0.3;margin-top:0.5rem}

/* 交替背景狗狗图案 */
.section-alt{position:relative}
.section-alt::before{content:'🐶';position:absolute;right:2rem;top:2rem;font-size:5rem;opacity:0.04;pointer-events:none;animation:bounceDog 3s ease-in-out infinite}

/* feature-detail 前的小狗标记 */
.feature-detail .fd-icon::before{content:''} 
.feature-detail:nth-child(odd)::before{content:'🐾';position:absolute;left:-0.5rem;top:50%;font-size:1.5rem;opacity:0.2;pointer-events:none}

/* 移动端适配 */
@media(max-width:768px){
  .section-title::before,.section-title::after{display:none}
  .section::after{font-size:0.7rem;letter-spacing:0.3rem}
}