:root {
    --cream: #FFF7ED;
    --rust: #9A3412;
    --apricot: #FDBA74;
    --peach: #FFEDD5;
    --ink: #431407;
    --soft: #7C2D12;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: Georgia, "Songti SC", "SimSun", serif;
    background: var(--cream);
    color: var(--ink);
    line-height: 1.75;
}

p, li, nav, .btn, .deck, .eyebrow {
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.shell {
    width: min(1080px, calc(100% - 36px));
    margin: 0 auto;
}

.site-header { padding: 18px 0 8px; }

.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid var(--apricot);
    border-radius: 999px;
    padding: 10px 22px;
    box-shadow: 0 8px 24px rgba(154, 52, 18, 0.06);
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--rust);
    font-weight: 700;
    text-decoration: none;
    font-family: "Segoe UI", "PingFang SC", sans-serif;
}

.brand svg { width: 28px; height: 28px; }

nav { display: flex; gap: 18px; }

nav a {
    color: var(--soft);
    text-decoration: none;
    font-size: 14px;
}

nav a:hover { color: var(--rust); }

.hero-banner { padding: 28px 0 10px; }

.banner-canvas {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #FFEDD5 0%, #FED7AA 42%, #FFF7ED 100%);
    border-radius: 32px;
    padding: 56px 48px 48px;
    border: 1px solid var(--apricot);
    min-height: 360px;
}

.blob {
    position: absolute;
    border-radius: 50%;
    background: rgba(253, 186, 116, 0.55);
}

.b1 { width: 180px; height: 180px; right: 8%; top: -40px; }
.b2 { width: 120px; height: 120px; right: 22%; bottom: -30px; background: rgba(154, 52, 18, 0.08); }

.eyebrow {
    color: var(--rust);
    font-size: 13px;
    letter-spacing: 0.14em;
    font-weight: 700;
    margin-bottom: 12px;
}

.banner-canvas h1 {
    position: relative;
    max-width: 16em;
    font-size: clamp(30px, 4.4vw, 44px);
    line-height: 1.25;
    margin-bottom: 16px;
}

.banner-canvas p {
    position: relative;
    max-width: 40em;
    margin-bottom: 10px;
    color: var(--soft);
}

.btn {
    position: relative;
    display: inline-block;
    margin-top: 14px;
    background: var(--rust);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    padding: 12px 26px;
    font-weight: 700;
}

.btn:hover { background: #7C2D12; }

.block { padding: 58px 0; }

.block.sand { background: #FFEDD5; }

.block h2 {
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.35;
    margin-bottom: 10px;
}

.deck { color: var(--soft); margin-bottom: 26px; max-width: 40em; }

.scene-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.warm-card {
    background: #fff;
    border-radius: 24px;
    padding: 28px;
    border: 1px solid var(--apricot);
}

.warm-card.work { box-shadow: 10px 10px 0 rgba(253, 186, 116, 0.5); }
.warm-card.chat { box-shadow: 10px 10px 0 rgba(154, 52, 18, 0.12); }

.warm-card svg {
    width: 40px;
    height: 40px;
    color: var(--rust);
    margin-bottom: 10px;
}

.warm-card h3 { font-size: 22px; margin-bottom: 8px; }
.warm-card p { color: var(--soft); margin-bottom: 10px; }
.warm-card ul { padding-left: 18px; color: var(--soft); }
.warm-card li { margin-bottom: 6px; }

.scene-head {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
}

.tri-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.tri-cards article {
    background: #fff;
    border-radius: 20px;
    padding: 22px;
    border: 1px dashed var(--rust);
}

.tri-cards h3 { color: var(--rust); margin-bottom: 8px; }
.tri-cards p { color: var(--soft); }

.soft-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.soft-list article {
    background: #fff;
    border-radius: 18px;
    padding: 20px;
}

.soft-list h3 { font-size: 18px; margin-bottom: 8px; }
.soft-list p { color: var(--soft); }

.plain { padding-left: 20px; color: var(--soft); }
.plain li { margin-bottom: 8px; }

.lock-panel {
    background: #fff;
    border-radius: 28px;
    padding: 32px;
    border: 2px solid var(--apricot);
}

.lock-panel p { color: var(--soft); margin-bottom: 10px; }

.browser-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 18px;
}

.browser-row article {
    background: #fff;
    border-radius: 16px;
    padding: 18px;
}

.browser-row h3 { font-size: 17px; margin-bottom: 8px; }
.browser-row p { color: var(--soft); }

.dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dual article {
    border-radius: 24px;
    padding: 26px;
}

.dual article:first-child {
    background: #FFEDD5;
    border: 1px solid var(--apricot);
}

.dual article:last-child {
    background: #fff;
    border: 2px solid var(--rust);
}

.dual h3 { margin-bottom: 8px; }
.dual p, .dual li { color: var(--soft); }
.dual ul { margin-top: 10px; padding-left: 18px; }

.bound { padding-left: 22px; color: var(--soft); }
.bound li { margin-bottom: 8px; }

.flag-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.flag {
    display: inline-block;
    position: relative;
    width: 36px;
    height: 42px;
    margin-bottom: 10px;
}

.flag i {
    position: absolute;
    inset: 0 0 10px 0;
    background: var(--rust);
    color: #fff;
    font-style: normal;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", sans-serif;
}

.flag::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    border-left: 18px solid var(--rust);
    border-right: 18px solid var(--rust);
    border-bottom: 10px solid transparent;
}

.flag-steps strong { display: block; margin-bottom: 6px; }
.flag-steps p { color: var(--soft); font-size: 14px; }

.faq-soft {
    display: grid;
    gap: 12px;
}

.faq-soft article {
    background: #fff;
    border-radius: 18px;
    padding: 18px 20px;
    border: 1px solid #FED7AA;
}

.faq-soft h3 { font-size: 17px; margin-bottom: 8px; color: var(--rust); }
.faq-soft p { color: var(--soft); }

.site-footer {
    background: #7C2D12;
    color: #FFEDD5;
    padding: 36px 0;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
}

.site-footer p { margin-bottom: 8px; font-size: 14px; }

@media (max-width: 880px) {
    .header-bar { border-radius: 20px; flex-direction: column; gap: 10px; }
    .banner-canvas { padding: 32px 22px; }
    .scene-pair, .tri-cards, .soft-list, .browser-row, .dual, .flag-steps {
        grid-template-columns: 1fr;
    }
}

#news .news-list { display: grid; gap: 14px; }
#news article { background: #fff; border: 1px solid var(--apricot); border-radius: 20px; padding: 18px 20px; }
#news h3 { margin: 0 0 6px; color: var(--rust); font-size: 17px; }
#news time { color: var(--soft); font-size: 13px; }
#news p { margin: 8px 0 0; color: var(--ink); font-size: 14px; }