/* 养好娃 官网样式。
   设计令牌集中在 :root —— 与 App 的 design-spec/tokens.json 同源：暖米底、珊瑚橙主色、
   薄荷绿 / 湖蓝两条辅线、褐色正文。明暗两套：跟随系统 + 手动切换（data-theme 覆盖）。
   首页的"装修"（光斑、样机、萌宠、跑马灯）都在下半部分，长文页只用上半部分。 */

:root {
  --bg: #FFFAF4;
  --bg2: #FFF2E6;
  --ink: #5A3C2D;
  --sub: #826656;
  --weak: #946E59;
  --card: #FFFFFF;
  --line: #F6ECE3;
  --brand: #FF8A5B;
  --brand-2: #FFB27A;
  --brand-deep: #AA5427;
  --brand-soft: #FFEADB;
  --mint: #6FB3A0;
  --mint-deep: #3E7859;
  --mint-soft: #E4F2EC;
  --blue: #3C6F9A;
  --blue-soft: #E3EDF6;
  --amber: #BF7B17;
  --amber-soft: #FAEED8;
  --glow: rgba(255, 138, 91, .42);
  --grad: linear-gradient(100deg, #FF8A5B, #FFB27A 55%, #6FB3A0);
  --shadow: 0 12px 36px rgba(196, 122, 74, .12);
  --shadow-lg: 0 30px 70px rgba(196, 122, 74, .20);
  --glass: rgba(255, 255, 255, .72);
  --glass-line: rgba(255, 255, 255, .7);
  --radius: 16px;
  --maxw: 1040px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #221812; --bg2: #1B120D; --ink: #F5E9DF; --sub: #C7A992; --weak: #A98D77;
    --card: #2C201A; --line: #3F2F24;
    --brand: #FF9A70; --brand-2: #E0704A; --brand-deep: #FFB994; --brand-soft: #3A2A1F;
    --mint: #7FC3B0; --mint-deep: #8CCBA8; --mint-soft: #28352E;
    --blue: #7BA9D2; --blue-soft: #26313C; --amber: #F0B45A; --amber-soft: #3C3120;
    --glow: rgba(255, 154, 112, .35);
    --shadow: 0 12px 36px rgba(0,0,0,.5); --shadow-lg: 0 30px 70px rgba(0,0,0,.62);
    --glass: rgba(44, 32, 26, .62); --glass-line: rgba(255,255,255,.08);
  }
}
:root[data-theme="dark"] {
  --bg: #221812; --bg2: #1B120D; --ink: #F5E9DF; --sub: #C7A992; --weak: #A98D77;
  --card: #2C201A; --line: #3F2F24;
  --brand: #FF9A70; --brand-2: #E0704A; --brand-deep: #FFB994; --brand-soft: #3A2A1F;
  --mint: #7FC3B0; --mint-deep: #8CCBA8; --mint-soft: #28352E;
  --blue: #7BA9D2; --blue-soft: #26313C; --amber: #F0B45A; --amber-soft: #3C3120;
  --glow: rgba(255, 154, 112, .35);
  --shadow: 0 12px 36px rgba(0,0,0,.5); --shadow-lg: 0 30px 70px rgba(0,0,0,.62);
  --glass: rgba(44, 32, 26, .62); --glass-line: rgba(255,255,255,.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.75;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--brand-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
section { padding: 84px 0; position: relative; }

/* 顶部滚动进度条 */
.scroll-prog { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100;
               background: var(--grad); box-shadow: 0 0 12px var(--glow); }

/* 顶栏 */
nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
nav > .wrap { display: flex; align-items: center; gap: 20px; height: 62px; }
nav .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; color: var(--ink); }
nav .brand img { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 2px 10px var(--glow); }
nav .brand:hover { text-decoration: none; }
nav .spacer { flex: 1; }
nav a { font-size: 14px; font-weight: 600; color: var(--sub); }
nav a:hover { color: var(--brand-deep); text-decoration: none; }
.theme-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--card);
             color: var(--ink); font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
             transition: transform .15s ease, border-color .2s ease; }
.theme-btn:hover { transform: scale(1.08); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.nav-cta { display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: var(--bg) !important;
           padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.nav-cta:hover { opacity: .9; text-decoration: none; }

/* ── 首屏 ── */
.hero { position: relative; text-align: center; padding: 92px 0 70px; overflow: hidden;
        background: linear-gradient(180deg, var(--bg2), var(--bg)); }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); z-index: 0; pointer-events: none; }
.blob.a { width: 46vw; height: 46vw; max-width: 560px; max-height: 560px; background: var(--brand-2); opacity: .55; top: -16%; left: -8%; animation: drift1 16s ease-in-out infinite; }
.blob.b { width: 40vw; height: 40vw; max-width: 520px; max-height: 520px; background: var(--mint); opacity: .38; top: 6%; right: -10%; animation: drift2 19s ease-in-out infinite; }
.blob.c { width: 34vw; height: 34vw; max-width: 460px; max-height: 460px; background: var(--brand); opacity: .32; bottom: -18%; left: 36%; animation: drift1 23s ease-in-out infinite reverse; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw,4vw) scale(1.14); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5vw,-3vw) scale(1.1); } }
.dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
        background-image: radial-gradient(color-mix(in srgb, var(--brand) 35%, transparent) 1px, transparent 1px);
        background-size: 26px 26px;
        -webkit-mask-image: radial-gradient(700px 500px at 50% 30%, #000, transparent 75%);
        mask-image: radial-gradient(700px 500px at 50% 30%, #000, transparent 75%); }
.spotlight { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
             background: radial-gradient(360px 360px at var(--mx,50%) var(--my,40%), var(--glow), transparent 70%); }
.hero:hover .spotlight { opacity: 1; }
.floaters { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.floaters span { position: absolute; bottom: -8px; font-size: 22px; opacity: 0; animation: floatUp linear infinite; }
@keyframes floatUp { 0% { transform: translateY(0) rotate(0); opacity: 0; } 12% { opacity: .55; } 88% { opacity: .55; } 100% { transform: translateY(-92vh) rotate(26deg); opacity: 0; } }
.hero .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--brand-deep);
           background: color-mix(in srgb, var(--brand) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
           padding: 7px 15px; border-radius: 999px; box-shadow: var(--shadow); }
.app-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 200px; height: 200px; margin: 22px auto 0; }
.app-badge img { width: 132px; height: 132px; border-radius: 31px; box-shadow: var(--shadow-lg); position: relative; z-index: 1; animation: float 6s ease-in-out infinite; }
.app-badge .ring { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; transform: translate(-50%,-50%);
    border-radius: 50%; z-index: 0; background: conic-gradient(from 0deg, var(--brand), var(--brand-2), var(--mint), var(--brand));
    filter: blur(22px); opacity: .55; animation: spin 9s linear infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.hero h1 { font-size: clamp(50px, 9vw, 84px); font-weight: 900; letter-spacing: -2px; margin: 18px 0 2px; line-height: 1.05; }
.grad-text { background: var(--grad); background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
             -webkit-text-fill-color: transparent; animation: hue 8s linear infinite; }
@keyframes hue { to { background-position: 200% center; } }
.hero .tag { font-size: clamp(19px, 3.4vw, 26px); font-weight: 800; margin-top: 6px; }
.hero .pitch { font-size: 16.5px; color: var(--sub); max-width: 600px; margin: 16px auto 0; }
.cta-row { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.store-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 11px;
             background: var(--ink); color: var(--bg); padding: 13px 24px; border-radius: 16px;
             box-shadow: 0 10px 30px var(--glow); transition: transform .2s ease, box-shadow .2s ease; }
.store-btn .ic { font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.store-btn .ic svg { width: 22px; height: 22px; fill: currentColor; }
.store-btn .t { text-align: left; line-height: 1.15; } .store-btn .t small { display: block; font-size: 10.5px; opacity: .82; font-weight: 500; }
.store-btn .t b { font-size: 18px; font-weight: 700; }
.store-btn::after { content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: shine 5s ease-in-out infinite; }
@keyframes shine { 0%,55% { left: -130%; } 78%,100% { left: 150%; } }
.store-btn.alt { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
.store-btn.alt:hover { color: var(--ink); border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: var(--shadow); }
.store-btn.alt::after { display: none; }
.store-note { margin-top: 14px; font-size: 12.5px; color: var(--sub); max-width: 560px; }
.trust { margin-top: 14px; font-size: 13px; color: var(--sub); font-weight: 600; }

/* 首屏样机：一台手机 + 探头的问问 */
.stage { position: relative; margin: 52px auto 0; width: min(100%, 720px); display: flex; justify-content: center; align-items: flex-end; gap: 28px; }
.phone { width: 300px; background: var(--card); border: 1px solid var(--line); border-radius: 36px; padding: 16px 14px 20px;
         box-shadow: var(--shadow-lg); text-align: left; position: relative; }
.phone::before { content: ''; display: block; width: 92px; height: 8px; border-radius: 999px; background: var(--line); margin: 0 auto 14px; }
.ph-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ph-avatar { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--brand-2), var(--brand)); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.ph-head b { font-size: 15px; display: block; line-height: 1.2; } .ph-head small { font-size: 11.5px; color: var(--sub); }
.ph-card { background: var(--bg2); border-radius: 20px; padding: 14px; margin-bottom: 10px; }
.ph-card .ttl { font-size: 14px; font-weight: 800; margin-bottom: 2px; } .ph-card .hint { font-size: 11px; color: var(--weak); margin-bottom: 8px; }
.ph-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ph-row:first-of-type { border-top: 0; }
.ph-row .l b { display: block; font-size: 13px; } .ph-row .l small { font-size: 11px; color: var(--weak); }
.ph-step { display: inline-flex; gap: 6px; } .ph-step i { width: 28px; height: 28px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; }
.ph-check { width: 26px; height: 26px; border-radius: 50%; border: 1.6px solid var(--mint); background: var(--mint-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--mint-deep); font-size: 13px; font-weight: 800; }
.ph-slot { display: inline-flex; gap: 6px; } .ph-slot i { font-style: normal; font-size: 11.5px; padding: 4px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); }
.ph-slot i.on { background: var(--mint-soft); border-color: var(--mint); color: var(--mint-deep); font-weight: 700; }
.ph-moods { display: flex; gap: 6px; } .ph-moods i { flex: 1; text-align: center; font-style: normal; font-size: 18px; padding: 5px 0; border-radius: 10px; border: 1px solid var(--line); background: var(--card); }
.ph-moods i.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); }
.ph-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .ph-chips span { font-size: 11px; padding: 4px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--sub); }
.mascot { position: relative; width: 190px; flex: none; text-align: center; }
.mascot img { width: 170px; height: 170px; filter: drop-shadow(0 14px 22px rgba(196,122,74,.28)); animation: float 5s ease-in-out infinite; }
.mascot img.happy { display: none; position: absolute; left: 10px; top: 0; }
.mascot:hover img.idle { visibility: hidden; } .mascot:hover img.happy { display: block; }
.speech { position: absolute; left: -10px; top: -46px; background: var(--card); border: 1.5px solid color-mix(in srgb, var(--brand) 38%, var(--line));
          border-radius: 16px; padding: 9px 13px; font-size: 13px; font-weight: 700; color: var(--ink); box-shadow: var(--shadow); white-space: nowrap;
          opacity: 0; animation: pop .55s cubic-bezier(.22,1,.36,1) 1.1s forwards; }
.speech::after { content: ''; position: absolute; left: 48%; bottom: -9px; border: 8px solid transparent; border-top-color: var(--card); border-bottom: 0; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .stage { flex-direction: column; align-items: center; } .mascot { order: -1; width: 150px; } .mascot img { width: 130px; height: 130px; } .speech { left: 50%; transform: translateX(-50%); top: -40px; } }

/* ── 区块标题 ── */
.sec-title { text-align: center; font-size: clamp(28px, 5vw, 38px); font-weight: 900; letter-spacing: -1px; margin-bottom: 10px; }
.sec-sub { text-align: center; color: var(--sub); font-size: 15.5px; margin-bottom: 44px; max-width: 640px; margin-left: auto; margin-right: auto; }
h2 { font-size: clamp(22px, 3.4vw, 30px); margin-bottom: 8px; }
.section-lead { color: var(--sub); margin-bottom: 28px; }

/* ── 三条主线 ── */
.lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.line { border-radius: 24px; padding: 26px 24px; border: 1px solid var(--line); background: var(--card); position: relative; overflow: hidden;
        transition: transform .2s ease, box-shadow .2s ease; }
.line:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.line::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--c); }
.line .em { font-size: 34px; line-height: 1; margin-bottom: 12px; display: block; }
.line h3 { font-size: 20px; font-weight: 900; margin-bottom: 8px; color: var(--c-deep); }
.line ul { list-style: none; padding: 0; margin: 0 0 14px; } .line li { font-size: 14px; color: var(--sub); padding: 4px 0 4px 18px; position: relative; }
.line li::before { content: ''; position: absolute; left: 0; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.ages { display: flex; gap: 5px; flex-wrap: wrap; } .ages span { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--c-soft); color: var(--c-deep); font-weight: 700; }
.line.mint { --c: var(--mint); --c-deep: var(--mint-deep); --c-soft: var(--mint-soft); }
.line.blue { --c: var(--blue); --c-deep: var(--blue); --c-soft: var(--blue-soft); }
.line.brand { --c: var(--brand); --c-deep: var(--brand-deep); --c-soft: var(--brand-soft); }

/* ── 功能网格 ── */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.feat, .card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 26px 24px;
               transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.feat:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.feat .ic { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
            font-size: 28px; background: color-mix(in srgb, var(--brand) 14%, var(--card)); box-shadow: inset 0 0 0 1px var(--line);
            animation: icoFloat 3.6s ease-in-out infinite; }
@keyframes icoFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-5deg); } }
.grid .feat:nth-child(2) .ic { animation-delay: .3s; } .grid .feat:nth-child(3) .ic { animation-delay: .6s; }
.grid .feat:nth-child(4) .ic { animation-delay: .9s; } .grid .feat:nth-child(5) .ic { animation-delay: 1.2s; } .grid .feat:nth-child(6) .ic { animation-delay: 1.5s; }
.feat h3, .card h3 { font-size: 18px; font-weight: 800; margin: 16px 0 6px; }
.card h3 { margin-top: 0; }
.feat p, .card p { font-size: 14px; color: var(--sub); }

/* ── 问问 ── */
.wenwen { background: color-mix(in srgb, var(--brand) 6%, var(--bg2)); }
.ww { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; }
.ww-fig { text-align: center; position: relative; }
.ww-fig img { width: 240px; height: 240px; filter: drop-shadow(0 18px 28px rgba(196,122,74,.3)); animation: float 5s ease-in-out infinite; transition: transform .25s ease; cursor: pointer; }
.ww-fig img.happy { display: none; }
.ww-fig.happy img.idle { display: none; } .ww-fig.happy img.happy { display: inline; }
.ww-fig .cap { font-size: 12.5px; color: var(--sub); margin-top: 6px; }
.chat { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 24px; padding: 18px; box-shadow: var(--shadow-lg); backdrop-filter: blur(14px); }
.chat-head { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.chat-head img { width: 34px; height: 34px; } .chat-head b { font-size: 14px; } .chat-head small { font-size: 11.5px; color: var(--sub); display: block; font-weight: 500; }
.bubble { padding: 10px 14px; border-radius: 16px; font-size: 13.5px; max-width: 88%; margin-bottom: 10px; opacity: 0; animation: pop .55s cubic-bezier(.22,1,.36,1) forwards; }
.bubble.me { background: var(--brand); color: #fff; margin-left: auto; border-bottom-right-radius: 5px; font-weight: 600; animation-delay: .3s; }
.bubble.ai { background: color-mix(in srgb, var(--brand) 10%, var(--card)); border: 1px solid var(--line); border-bottom-left-radius: 5px; animation-delay: 1s; }
.bubble.ai b { color: var(--brand-deep); }
.ctx { font-size: 12px; color: var(--sub); border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ctx span { padding: 2px 9px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.ctx span.on { color: var(--mint-deep); border-color: var(--mint); } .ctx span.off { text-decoration: line-through; opacity: .7; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.pill { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 700; }
@media (max-width: 760px) { .ww { grid-template-columns: 1fr; } .ww-fig img { width: 180px; height: 180px; } }

/* ── 技能包跑马灯 ── */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
           mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.track { display: flex; gap: 12px; width: max-content; animation: scroll 34s linear infinite; }
.track.rev { animation-direction: reverse; animation-duration: 40s; margin-top: 12px; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }
.stag { flex: none; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 11px 20px;
        font-size: 14.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; box-shadow: var(--shadow); }
.stag.free { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); color: var(--brand-deep); }
.note { text-align: center; color: var(--sub); font-size: 13.5px; margin-top: 26px; }

/* ── 定价 ── */
.pricing .tier { color: var(--brand-deep); font-weight: 800; font-size: 13px; letter-spacing: .02em; margin-bottom: 6px; }
.pricing .card.featured { border: 1.5px solid var(--brand); box-shadow: var(--shadow-lg); position: relative; transform: translateY(-6px); }
.pricing .card.featured::before { content: attr(data-badge); position: absolute; top: -12px; right: 18px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.pricing .card .big { font-size: 26px; font-weight: 900; margin: 2px 0 8px; letter-spacing: -.5px; }

/* ── 隐私 ── */
.privacy { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line);
           border-radius: 30px; padding: 56px 30px; text-align: center; box-shadow: var(--shadow-lg); }
.privacy::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: .6;
    background: radial-gradient(500px 260px at 50% -10%, var(--glow), transparent 70%); }
.privacy > * { position: relative; z-index: 1; }
.privacy h2 { font-size: clamp(24px, 4.5vw, 32px); font-weight: 900; margin-bottom: 12px; }
.privacy p { color: var(--sub); max-width: 620px; margin: 0 auto; font-size: 15px; }

/* ── 界面样张（CSS 样机）── */
.screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.scr { background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 14px 12px 16px; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; }
.scr:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.scr .cap { text-align: center; font-size: 12.5px; color: var(--sub); margin-top: 10px; font-weight: 600; }
.glance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.gl { background: var(--bg2); border-radius: 14px; padding: 10px 9px; }
.gl .k { width: 26px; height: 26px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-bottom: 8px; }
.gl small { display: block; font-size: 10.5px; color: var(--weak); } .gl b { display: block; font-size: 20px; letter-spacing: -.5px; line-height: 1.1; } .gl b i { font-style: normal; font-size: 10px; color: var(--sub); margin-left: 2px; }
.gl .n { font-size: 10px; color: var(--weak); margin-top: 2px; }
.rowcard { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 9px 10px; margin-top: 8px; font-size: 12.5px; }
.rowcard .k { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.rowcard b { display: block; font-size: 12.5px; } .rowcard small { font-size: 10.5px; color: var(--weak); }
.radar { width: 100%; height: auto; display: block; }
.nextcard { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; border-radius: 18px; padding: 14px; }
.nextcard small { font-size: 11px; opacity: .9; } .nextcard b { display: block; font-size: 17px; margin: 2px 0 6px; }
.nextcard .btns { display: flex; gap: 6px; } .nextcard .btns span { font-size: 11px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.22); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.tile { background: var(--bg2); border-radius: 14px; padding: 10px; font-size: 12px; } .tile .k { font-size: 16px; margin-bottom: 4px; } .tile small { display: block; font-size: 10px; color: var(--weak); }

/* ── FAQ ── */
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; float: right; color: var(--sub); }
.faq details[open] summary::after { content: "－"; }
.faq p { color: var(--sub); margin-top: 10px; }

/* ── 表格 ── */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { font-weight: 800; }

/* ── 长文 ── */
.prose { padding: 48px 0 72px; max-width: 760px; }
.prose h1 { font-size: clamp(26px, 4vw, 38px); margin: 6px 0 14px; }
.prose h2 { margin: 34px 0 10px; }
.prose h3 { margin: 24px 0 8px; font-size: 18px; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre { margin: 14px 0; }
.prose ul, .prose ol { padding-left: 22px; }
.prose blockquote { border-left: 3px solid var(--brand); padding-left: 14px; color: var(--sub); }
.prose code { background: var(--bg2); padding: 2px 6px; border-radius: 6px; font-size: .92em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.prose pre { background: var(--bg2); padding: 16px; border-radius: 12px; overflow-x: auto; border: 1px solid var(--line); }
.prose pre code { background: none; padding: 0; }
.kicker { color: var(--brand-deep); font-weight: 800; font-size: 13px; letter-spacing: 1px; }
.lead { color: var(--sub); font-size: 17px; }
.badge { display: inline-block; background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; font-size: 12px; color: var(--sub); }
.pager { display: flex; gap: 18px; margin-top: 40px; }
.postlist { list-style: none; padding: 0; }
.postlist li { border-bottom: 1px solid var(--line); }
.postlist a { display: block; padding: 18px 0; color: var(--ink); }
.postlist a:hover { text-decoration: none; } .postlist a:hover strong { color: var(--brand-deep); }
.postlist .d { display: block; font-size: 12px; color: var(--sub); }
.postlist strong { display: block; font-size: 18px; margin: 4px 0; }
.postlist .s { color: var(--sub); font-size: 15px; }

/* ── 页脚 ── */
footer { border-top: 1px solid var(--line); padding: 48px 0 110px; text-align: center; color: var(--sub); font-size: 14px; }
footer a { color: var(--sub); }
.foot-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 18px; color: var(--ink); margin-bottom: 14px; }
.foot-logo img { width: 40px; height: 40px; border-radius: 11px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-bottom: 12px; }
.foot-links a { font-weight: 700; }
.foot-note { font-size: 12.5px; margin-top: 14px; line-height: 1.8; }

/* ── 会闲逛、可拖动的问问（页脚角落，照吃好饭的青团团）── */
#pet { position: fixed; left: 4%; bottom: 18px; width: 96px; height: 96px; z-index: 55; cursor: grab; user-select: none;
       touch-action: none; transition: left 3s cubic-bezier(.4,.05,.4,1), top 3s cubic-bezier(.4,.05,.4,1); will-change: left, top; }
#pet.dragging { cursor: grabbing; transition: none; }
#pet img { position: relative; z-index: 1; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 8px 12px rgba(196,122,74,.3)); transition: transform .2s ease; }
#pet.flip img { transform: scaleX(-1); }
#pet img.happy { display: none; } #pet.happy img.idle { display: none; } #pet.happy img.happy { display: block; }
/* 「点我」贴在头顶：图的顶部是叶子，标签要**整个**在叶尖之上，并且层级压在图片上
   （标签在 DOM 里排在 img 前面，不给 z-index 会被叶子盖住，2026-09-07 用户截图指出）。 */
#pet .pet-hint { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 2;
    font-size: 11px; font-weight: 700; color: #fff; background: var(--brand); padding: 3px 9px; border-radius: 999px;
    box-shadow: var(--shadow); animation: bob 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } }
.pet-bubble { position: fixed; z-index: 56; width: 250px; max-width: calc(100vw - 24px); background: var(--glass); border: 1px solid var(--glass-line);
    border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow-lg); backdrop-filter: blur(16px);
    opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.pet-bubble.show { opacity: 1; transform: none; pointer-events: auto; }
.pet-bubble p { font-size: 13.5px; color: var(--ink); margin-bottom: 10px; padding-right: 14px; }
.pet-bubble .pet-cta { display: inline-flex; width: 100%; justify-content: center; background: var(--ink); color: var(--bg); padding: 9px 14px; border-radius: 12px; font-size: 13px; font-weight: 700; }
.pet-bubble .pet-cta:hover { color: var(--bg); text-decoration: none; opacity: .9; }
.pet-bubble .pet-close { position: absolute; top: 8px; right: 10px; font-size: 15px; color: var(--sub); cursor: pointer; line-height: 1; }
@media (max-width: 640px) { #pet { width: 76px; height: 76px; } }

/* ── 入场 ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }
.feat.reveal, .line.reveal, .scr.reveal, .pricing .card.reveal { transition-delay: calc(var(--i, 0) * .08s); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .blob, .app-badge img, .app-badge .ring, .floaters span, .feat .ic, .mascot img, .ww-fig img, .pet-hint, .track, .store-btn::after, .grad-text { animation: none !important; }
}

@media (max-width: 900px) { .grid, .lines, .screens { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  section { padding: 56px 0; }
  nav .hide-sm { display: none; }
  .grid, .lines, .screens { grid-template-columns: 1fr; }
  .pricing .card.featured { transform: none; }
  .phone { width: min(300px, 100%); }
}