/* Sogou Warm Official Style */
:root {
    --sw-bg: #FDFCF8; /* Warm White */
    --sw-orange: #FF5C00;
    --sw-text: #333333;
    --sw-text-light: #888888;
    --sw-card-bg: #FFFFFF;
    --sw-shadow: 0 8px 20px rgba(255, 92, 0, 0.06);
}

body {
    margin: 0;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    background-color: var(--sw-bg);
    color: var(--sw-text);
    line-height: 1.6;
}

.container { width: 1200px; margin: 0 auto; position: relative; }
a { text-decoration: none; color: inherit; transition: 0.3s; }

/* Navbar */
.sw-nav {
    height: 70px;
    background: rgba(253, 252, 248, 0.95);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

.nav-inner { height: 100%; display: flex; justify-content: space-between; align-items: center; }
.sw-logo { font-size: 24px; font-weight: bold; color: var(--sw-orange); display: flex; align-items: center; gap: 8px; }
.nav-links { display: flex; gap: 30px; }
.nav-item { font-size: 16px; color: var(--sw-text); }
.nav-item:hover { color: var(--sw-orange); }

/* Hero */
.sw-hero {
    padding: 80px 0 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-txt { width: 45%; }
.hero-title { font-size: 48px; line-height: 1.2; margin-bottom: 20px; color: #222; }
.hero-sub { font-size: 18px; color: var(--sw-text-light); margin-bottom: 40px; }
.btn-sw-dl {
    background: var(--sw-orange);
    color: white;
    padding: 12px 36px;
    border-radius: 30px;
    font-size: 18px;
    display: inline-block;
    box-shadow: 0 10px 20px rgba(255, 92, 0, 0.2);
}
.btn-sw-dl:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(255, 92, 0, 0.3); }

/* CSS Animation Stage */
.hero-anim-stage {
    width: 50%;
    height: 400px;
    position: relative;
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--sw-shadow);
    overflow: hidden;
    border: 4px solid #fff;
}

/* Feature Sections */
.sw-section { padding: 80px 0; }
.sw-section:nth-child(even) { background: #fff; } /* Alternating bg */

.feat-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}
.feat-box.reverse { flex-direction: row-reverse; }

.feat-txt { width: 40%; }
.feat-h2 { font-size: 32px; margin-bottom: 20px; color: #222; }
.feat-p { font-size: 16px; color: #666; margin-bottom: 30px; }

/* Illustration Containers */
.feat-img-box {
    width: 50%;
    height: 300px;
    background: var(--sw-bg);
    border-radius: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid #f0f0f0;
}

/* Animations Elements */
/* 1. Typing Dog */
.dog-head {
    width: 100px; height: 100px; background: #FFD54F; border-radius: 50%;
    position: relative; animation: bounce 2s infinite;
}
.dog-ears {
    position: absolute; top: -20px; width: 100%; display: flex; justify-content: space-between;
}
.ear { width: 30px; height: 50px; background: #FFCA28; border-radius: 20px; }
.dog-face {
    position: absolute; top: 30px; left: 20px; width: 60px;
}
.eye { width: 10px; height: 10px; background: #333; border-radius: 50%; display: inline-block; margin: 0 10px; }
.nose { width: 14px; height: 10px; background: #333; border-radius: 50%; margin: 5px auto; }

/* 2. Chat Bubbles */
.chat-bubble {
    background: #fff; padding: 10px 20px; border-radius: 20px 20px 20px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 10px;
    opacity: 0; animation: popUp 3s infinite;
}
.chat-bubble.r {
    background: #E3F2FD; border-radius: 20px 20px 0 20px; align-self: flex-end;
}

/* 3. Voice Wave */
.voice-wave { display: flex; gap: 5px; align-items: center; height: 60px; }
.bar { width: 8px; background: var(--sw-orange); border-radius: 4px; animation: wave 1s infinite ease-in-out; }

/* 4. Skin Cards */
.skin-card-mini {
    width: 80px; height: 60px; border-radius: 8px; background: #eee;
    margin: 5px; display: inline-block; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: 0.3s;
}
.skin-card-mini:hover { transform: scale(1.1); z-index: 10; }

/* Keyframes */
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes popUp { 0% { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wave { 0%, 100% { height: 10px; } 50% { height: 40px; } }
@keyframes typeWriter { from { width: 0; } to { width: 100%; } }

/* Footer */
.sw-footer { background: #333; color: #999; padding: 50px 0; text-align: center; font-size: 14px; }