/* Sogou 2026 Authentic Replica Style */
:root {
    --sa-orange: #FF5C00;
    --sa-orange-hover: #FF7A33;
    --sa-nav-bg: rgba(255, 255, 255, 0.95);
    --sa-footer-bg: #2d2d2d;
    --sa-text-main: #333333;
    --sa-text-sub: #888888;
}

body {
    margin: 0;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--sa-text-main);
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
}

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

/* Navbar (Sticky & Transparent) */
.sa-nav {
    height: 70px;
    background: var(--sa-nav-bg);
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 999;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    backdrop-filter: blur(10px);
}

.nav-inner {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sa-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 24px;
    font-weight: bold;
    color: var(--sa-orange);
}

.nav-links { display: flex; gap: 40px; }
.nav-link { font-size: 16px; color: var(--sa-text-main); padding: 24px 0; border-bottom: 2px solid transparent; }
.nav-link:hover, .nav-link.active { color: var(--sa-orange); border-bottom-color: var(--sa-orange); }

.nav-login { font-size: 14px; color: var(--sa-text-sub); }
.nav-login:hover { color: var(--sa-orange); }

/* Hero Banner (Full Screen Image + Text) */
.sa-banner {
    padding-top: 70px; /* Offset for fixed nav */
    height: 600px;
    background: #f8f8f8;
    position: relative;
    overflow: hidden;
}

.banner-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.banner-txt { width: 450px; padding-left: 50px; z-index: 2; }
.banner-title { font-size: 52px; line-height: 1.2; margin-bottom: 20px; font-weight: 400; color: #333; }
.banner-sub { font-size: 20px; color: var(--sa-text-sub); margin-bottom: 50px; font-weight: 300; }

.dl-area { display: flex; gap: 15px; }
.btn-sa-dl {
    background: var(--sa-orange);
    color: #fff;
    width: 180px;
    height: 50px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background 0.2s;
}
.btn-sa-dl:hover { background: var(--sa-orange-hover); }

.qr-box {
    width: 50px; height: 50px;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    position: relative;
    background: #fff;
}
.qr-box:hover .qr-hover { display: block; }

.qr-hover {
    display: none;
    position: absolute;
    bottom: 60px; left: 50%; transform: translateX(-50%);
    width: 140px; height: 140px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    padding: 10px;
    border-radius: 4px;
}
.qr-hover::after {
    content: ''; position: absolute; bottom: -6px; left: 50%; margin-left: -6px;
    border-width: 6px 6px 0; border-style: solid;
    border-color: #fff transparent transparent;
}

.banner-img {
    position: absolute;
    right: 0; bottom: 0;
    width: 800px;
    height: 100%;
    /* CSS Drawing: Abstract Phone/Laptop Composition */
    background: 
        radial-gradient(circle at 70% 60%, rgba(255,92,0,0.05) 0%, transparent 50%),
        linear-gradient(to right, #f8f8f8 0%, transparent 20%);
    z-index: 1;
}

/* Feature Grid (White Bg) */
.sa-features { padding: 80px 0; background: #fff; }
.sa-title { text-align: center; font-size: 36px; margin-bottom: 60px; font-weight: 400; }

.feat-row-sa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    margin-bottom: 100px;
}
.feat-row-sa:last-child { margin-bottom: 0; }
.feat-row-sa.reverse { flex-direction: row-reverse; }

.fr-txt { width: 400px; }
.fr-h3 { font-size: 30px; margin-bottom: 20px; font-weight: 400; }
.fr-p { font-size: 16px; color: var(--sa-text-sub); line-height: 1.8; margin-bottom: 30px; }
.fr-link { color: var(--sa-orange); border: 1px solid var(--sa-orange); padding: 8px 24px; border-radius: 20px; font-size: 14px; display: inline-block; }
.fr-link:hover { background: var(--sa-orange); color: #fff; }

.fr-img {
    width: 500px; height: 360px;
    background: #f5f5f5;
    border-radius: 10px;
    /* Placeholder style */
    display: flex; align-items: center; justify-content: center;
    font-size: 80px; color: #ddd;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Product Matrix (Gray Bg) */
.sa-products { background: #f9f9f9; padding: 80px 0; }
.prod-list {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.prod-card {
    width: 220px;
    background: #fff;
    text-align: center;
    padding: 40px 0;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}
.prod-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }

.pc-icon {
    width: 80px; height: 80px;
    margin: 0 auto 20px;
    /* CSS Icon Circle */
    border: 2px solid #eee;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
    color: #666;
}
.prod-card:hover .pc-icon { border-color: var(--sa-orange); color: var(--sa-orange); }

.pc-name { font-size: 18px; margin-bottom: 10px; color: #333; }
.pc-desc { font-size: 14px; color: #999; }

/* Footer */
.sa-footer { background: var(--sa-footer-bg); padding: 50px 0 30px; color: #999; font-size: 12px; }
.ft-top { display: flex; justify-content: center; gap: 40px; margin-bottom: 30px; border-bottom: 1px solid #444; padding-bottom: 30px; }
.ft-top a { color: #ccc; font-size: 14px; }
.ft-top a:hover { color: #fff; }
.ft-copy { text-align: center; line-height: 1.8; }