/* HanaAgent 官网新版首页样式 */

@font-face{
    font-family:'LXGW Neo ZhiSong';
    src:url('assets/fonts/lxgw-neozhisong-subset.woff2') format('woff2');
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

:root{
    --bg:#F8F4ED;
    --bg-card:#FCFAF5;
    --sidebar-bg:#F4F0EA;
    --accent:#537D96;
    --accent-hover:#42657B;
    --text:#3B3D3F;
    --hana-text:#2B3A4E;
    --text-muted:#8a847a;
    --border:#E3DED2;
    --ease-soft:cubic-bezier(0.22,1,0.36,1);
}

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

body{
    font-family:'LXGW Neo ZhiSong',Georgia,'Songti SC','Noto Serif SC',serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
}

/* ═══ Hero ═══ */
.hero{
    position:relative;
    width:100%;
    height:100dvh;
    min-height:560px;
    overflow:hidden;
    background:#2B3A4E; /* 图片加载前的深色底，避免白闪 */
}
.hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    animation:hero-settle 2.2s var(--ease-soft) both;
}
@keyframes hero-settle{
    from{transform:scale(1.06);opacity:0.6}
    to{transform:scale(1);opacity:1}
}

/* 暗角：eased 缓动径向渐变 */
.hero-vignette{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:radial-gradient(ellipse 120% 105% at 50% 42%,
        rgba(27,40,54,0) 52%,
        rgba(27,40,54,0.05) 68%,
        rgba(27,40,54,0.12) 82%,
        rgba(27,40,54,0.22) 100%);
}

.topbar{
    position:absolute;
    top:0;left:0;right:0;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.2rem 1.8rem;
}
/* 语言切换：顶栏右侧，与 GitHub 图标中线对齐 */
.topbar-right .lang-nav{
    margin:0; /* 覆盖 footer 的 .lang-nav{margin-bottom:0.6rem} */
    font-size:0.74rem;
    color:rgba(255,255,255,0.75);
    text-shadow:0 1px 8px rgba(27,40,54,0.4);
    display:inline-flex;
    align-items:center;
    line-height:1;
}
.topbar-right .lang-nav a{color:rgba(255,255,255,0.75);text-decoration:none;border-bottom:none;transition:color 0.2s ease;display:inline-flex;align-items:center;line-height:1}
.topbar-right .lang-nav a:hover{color:#FFFFFF}
.topbar-right .lang-nav span{margin:0 0.35em;display:inline-flex;align-items:center;line-height:1}
.topbar-right .lang-nav .current{color:#FFFFFF}
.logo{
    display:flex;
    align-items:center;
    gap:0.55rem;
    text-decoration:none;
    border-bottom:none;
}
.logo-icon{
    width:34px;height:34px;border-radius:50%;display:block;
    box-shadow:0 1px 10px rgba(27,40,54,0.4);
}
.logo-wordmark{
    font-size:1.2rem;color:#FFFFFF;letter-spacing:0.04em;line-height:1;
    display:inline-block;padding:0.15em 0;
    text-shadow:0 1px 12px rgba(27,40,54,0.55);
}
.github-link{color:#FFFFFF;opacity:0.9;display:flex;border-bottom:none;transition:opacity 0.2s ease}
.github-link:hover{opacity:1}
.github-link svg{width:20px;height:20px;display:block;filter:drop-shadow(0 1px 8px rgba(27,40,54,0.5))}
.topbar-right{
    display:flex;
    align-items:center;
    gap:1.2rem;
}

.hero-copy{
    position:absolute;
    z-index:5;
    left:7%;
    top:50%;
    transform:translateY(-50%);
    max-width:36%;
    color:#FFFFFF;
    text-shadow:0 1px 16px rgba(27,40,54,0.55);
}
.hero-copy h1{
    font-size:clamp(1.9rem,3.6vw,2.9rem);
    font-weight:normal;
    letter-spacing:0.06em;
    line-height:1.55;
}
.hero-copy .en{
    margin-top:1.1rem;
    font-size:clamp(0.8rem,1.2vw,0.95rem);
    letter-spacing:0.18em;
    opacity:0.92;
}
.hero-copy .subtitle{
    margin-top:1.3rem;
    font-size:clamp(0.82rem,1.15vw,0.95rem);
    line-height:2;
    letter-spacing:0.04em;
    opacity:0.9;
    max-width:24em;
}
.hero-copy .cta{
    display:inline-block;
    margin-top:2.4rem;
    padding:0.6rem 1.7rem;
    font-size:0.88rem;
    letter-spacing:0.1em;
    color:#FFFFFF;
    border:1px solid rgba(255,255,255,0.75);
    border-radius:999px;
    text-decoration:none;
    text-shadow:none;
    backdrop-filter:blur(4px);
    background:rgba(255,255,255,0.08);
    transition:background 0.3s ease, transform 0.3s var(--ease-soft);
}
.hero-copy .cta:hover{
    background:rgba(255,255,255,0.22);
    transform:translateY(-1px);
}

/* hero 文字入场 */
.hero-anim{
    opacity:0;
    transform:translateY(18px);
    transition:opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft);
}
.hero-anim.in{
    opacity:1;
    transform:translateY(0);
}

.scroll-hint{
    position:absolute;
    bottom:1.6rem;right:1.8rem;z-index:5;
    color:rgba(255,255,255,0.85);
    font-size:0.72rem;letter-spacing:0.3em;
    text-shadow:0 1px 8px rgba(27,40,54,0.4);
    animation:hint-float 2.6s ease-in-out infinite;
}
@keyframes hint-float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(6px)}
}

/* ═══ 分栏区 ═══ */
.sections{
    max-width:1180px;
    margin:0 auto;
    padding:clamp(3rem,8vh,6rem) 2rem 0;
}
.split{
    display:grid;
    grid-template-columns:1fr 2fr; /* 文字 1/3 · 图 2/3 */
    gap:clamp(2.5rem,5vw,4.5rem);
    align-items:center;
    padding:clamp(2.5rem,6vh,4.5rem) 0;
}
.split.flip{
    grid-template-columns:2fr 1fr; /* 图在左时依然占 2/3 */
}
.split + .split{
    border-top:1px solid var(--border);
}
.split.flip .col-text{order:2}
.split.flip .col-media{order:1}

.eyebrow{
    font-size:0.72rem;
    letter-spacing:0.25em;
    color:var(--accent);
    margin-bottom:0.9rem;
}
.badge{
    display:inline-block;
    vertical-align:middle;
    margin-left:0.5em;
    font-size:0.62rem;
    letter-spacing:0.1em;
    color:var(--text-muted);
    border:0.5px dashed var(--border);
    border-radius:3px;
    padding:1px 6px;
}
.split h2{
    font-size:clamp(1.5rem,2.6vw,2.1rem);
    font-weight:normal;
    letter-spacing:0.04em;
    color:var(--hana-text);
    margin-bottom:1rem;
}
.split .body{
    font-size:0.95rem;
    color:var(--text);
    max-width:38em;
}
.split .body.question{
    color:var(--hana-text);
    margin-bottom:0.7rem;
}

/* 01 屏：上下结构 + 原尺寸演示窗口 */
.stack{
    padding:clamp(2.5rem,6vh,4.5rem) 0;
}
.stack .row-head{
    max-width:600px;
    margin-bottom:2rem;
}
.stack .row-head h2{
    font-size:clamp(1.5rem,2.6vw,2.1rem);
    font-weight:normal;
    letter-spacing:0.04em;
    color:var(--hana-text);
    margin-bottom:1rem;
}
.stack .row-head .body{
    font-size:0.95rem;
    max-width:38em;
}
.demo-stage{
    position:relative;
    min-height:800px;
}
.demo-note{
    font-size:0.72rem;
    color:var(--text-muted);
    padding:0.4rem 0.2rem 0;
    letter-spacing:0.05em;
}
/* 卡片落点提示：一句旁注，箭头指回窗口 */
.demo-hint{
    position:absolute;
    left:calc(720px + 36px);
    right:0;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:0.6rem;
    pointer-events:none;
}
.demo-hint .hint-arrow{
    font-size:1.05rem;
    color:var(--accent);
    line-height:2.1;
}
.demo-hint .hint-text{
    font-size:1rem;
    line-height:2.1;
    color:var(--text-light);
    letter-spacing:0.06em;
}

/* ═══ 内联 demo（原 card-demo，窗口原尺寸居左，右侧留白钉卡） ═══ */
#demo-stage #window {
    width: 720px; height: 720px;
    background: var(--bg-card); border-radius: 12px; overflow: hidden;
    box-shadow: 0 30px 90px rgba(20, 30, 15, 0.18), 0 4px 16px rgba(20, 30, 15, 0.1);
    display: flex; flex-direction: column; position: relative;
    border: 0.5px solid rgba(0,0,0,0.08);
}
#demo-stage #titlebar {
    flex: none; display: flex; align-items: center; gap: 14px;
    padding: 10px 14px;
    background: var(--bg-card); user-select: none;
    position: relative; z-index: 2;
}
#demo-stage #titlebar::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%;
    height: 16px; pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(252,250,245,1) 0%,
      rgba(252,250,245,0.82) 22%,
      rgba(252,250,245,0.55) 46%,
      rgba(252,250,245,0.28) 68%,
      rgba(252,250,245,0.09) 86%,
      rgba(252,250,245,0) 100%);
}
#demo-stage .traffic { display: flex; gap: 7px; }
#demo-stage .traffic i { width: 12px; height: 12px; border-radius: 50%; display: block; background: #E0D6C4; }
#demo-stage #titlebar .side-icon { color: var(--text-muted); width: 16px; height: 16px; }
#demo-stage #titlebar .doc-title { font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: 0.02em; }
#demo-stage #titlebar .crumb { font-size: 11.5px; color: var(--text-muted); }
#demo-stage #titlebar .right { margin-left: auto; display: flex; gap: 14px; align-items: center; }
#demo-stage #titlebar .right svg { width: 16px; height: 16px; color: var(--text-muted); }

#demo-stage #chatScroll { flex: 1; overflow-y: auto; padding: 26px 34px 30px; scroll-behavior: smooth; }
#demo-stage #chatScroll::-webkit-scrollbar { width: 5px; }
#demo-stage #chatScroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

#demo-stage .msg { display: flex; margin-bottom: 22px; }
#demo-stage .msg.user { justify-content: flex-end; }
#demo-stage .bubble { max-width: 82%; font-size: 14px; line-height: 1.75; }
#demo-stage .msg.hana { display: flex; gap: 12px; }
#demo-stage .hana-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(59,61,63,0.15);
    object-fit: cover;
}
#demo-stage .hana-main { flex: 1; min-width: 0; }
#demo-stage .hana-name { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
#demo-stage .msg.hana .bubble { max-width: 100%; color: var(--hana-text); }
#demo-stage .msg.user .bubble {
    background: #E8E4DB; border: 0.5px solid #DED9CC;
    border-radius: 6px; padding: 9px 13px;
    color: var(--text);
}
#demo-stage .stamp { font-size: 11px; color: var(--text-muted); margin: -14px 0 20px 2px; }

#demo-stage .md table { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 13px; }
#demo-stage .md th { font-family: Georgia, "Songti SC", serif; color: var(--text-muted); font-weight: 500; font-size: 12.5px; padding: 7px 12px; border-bottom: 0.5px solid var(--border); text-align: left; }
#demo-stage .md td { padding: 9px 12px; border-bottom: 0.5px solid var(--border); }
#demo-stage .md ul { margin: 8px 0 12px; padding-left: 20px; }
#demo-stage .md li { margin-bottom: 7px; }
#demo-stage .md p { margin: 10px 0; }
#demo-stage .md code {
    font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: rgba(59,61,63,0.05);
    border: 0.5px solid var(--border); border-radius: 3px; padding: 1px 5px;
}

#demo-stage .chat-card {
    display: block; width: 400px; max-width: 100%; margin: 10px 0;
    background: var(--bg-card); border: 0.5px solid var(--border);
    border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; position: relative;
}
#demo-stage .chat-card:hover { border-color: var(--text-muted); box-shadow: 0 2px 10px rgba(59,61,63,0.09); }
#demo-stage .chat-card.center { margin-left: auto; margin-right: auto; }
#demo-stage .chat-card iframe { display: block; width: 100%; border: none; pointer-events: auto; border-radius: 7.5px; }
#demo-stage .chat-card .pin-btn {
    position: absolute; right: 8px; top: 8px; width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); background: var(--bg-card);
    border: 0.5px solid var(--border); border-radius: 4px; cursor: pointer;
    opacity: 0; transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
}
#demo-stage .chat-card .pin-btn svg { width: 13px; height: 13px; }
#demo-stage .chat-card:hover .pin-btn { opacity: 1; }
#demo-stage .chat-card .pin-btn:hover { color: #FCFAF5; background: var(--text); border-color: var(--text); }
#demo-stage .chat-card .pin-mark {
    position: absolute; left: 8px; top: 8px; display: none; align-items: center; gap: 4px;
    font-size: 10.5px; color: var(--accent); background: var(--bg-card);
    border: 0.5px solid var(--border); border-radius: 3px; padding: 2px 7px; letter-spacing: 0.05em;
}
#demo-stage .chat-card.pinned .pin-mark { display: flex; }
#demo-stage .chat-card.pinned .pin-btn { display: none; }

#demo-stage #inputBar {
    flex: none; margin: 0 14px 14px; border: 0.5px solid var(--border);
    border-radius: 10px; background: var(--bg-card);
    box-shadow: 0 1px 6px rgba(59,61,63,0.05);
}
#demo-stage #inputBar .draft { padding: 14px 16px 8px; font-size: 13.5px; line-height: 1.7; color: var(--text); max-height: 150px; overflow: hidden; }
#demo-stage #inputBar .row { display: flex; align-items: center; gap: 12px; padding: 8px 12px 10px; }
#demo-stage #inputBar .row svg { width: 16px; height: 16px; color: var(--text-muted); }
#demo-stage #inputBar .spacer { flex: 1; }
#demo-stage #inputBar .model-chip {
    display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-light);
    border: 0.5px solid var(--border); border-radius: 6px; padding: 4px 9px; background: var(--bg);
}
#demo-stage #inputBar .send {
    display: flex; align-items: center; gap: 6px; background: var(--accent); color: #FCFAF5;
    border: none; border-radius: 7px; padding: 7px 14px; font-size: 13px; cursor: default;
}

/* 钉住的卡片：相对演示区绝对定位，右侧留白区 */
#demo-stage .pinned-card {
    position: absolute; width: 400px; display: flex; flex-direction: column;
    background: var(--bg-card); border: 0.5px solid var(--border);
    border-radius: 14px; box-shadow: 0 18px 55px rgba(20,30,15,0.22), 0 3px 10px rgba(20,30,15,0.12);
    overflow: hidden; z-index: 50;
}
#demo-stage .pinned-card .body { overflow: hidden; border-radius: 13.5px; }
#demo-stage .pinned-card .body iframe { display: block; width: 100%; border: none; pointer-events: auto; border-radius: 13.5px; }
#demo-stage .pinned-card .drag-band {
    position: absolute; inset: 0 0 auto 0; height: 40px; z-index: 5; cursor: grab;
}
#demo-stage .pinned-card .drag-band:active { cursor: grabbing; }
#demo-stage .pinned-card .chrome-plate {
    position: absolute; right: 12px; top: 12px; z-index: 6;
    display: flex; align-items: center; gap: 2px; padding: 3px;
    background: rgba(252,250,245,0.82);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 0.5px solid var(--border); border-radius: 10px;
    box-shadow: 0 2px 10px rgba(59,61,63,0.12);
    opacity: 0; transition: opacity 0.15s;
}
#demo-stage .pinned-card:hover .chrome-plate { opacity: 1; }
#demo-stage .pinned-card .chrome-btn {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    color: var(--text-light); background: transparent;
    border: none; border-radius: 7px; cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
#demo-stage .pinned-card .chrome-btn:hover { color: var(--accent-hover); background: var(--accent-light); }
#demo-stage .pinned-card .chrome-btn svg { width: 15px; height: 15px; }

/* 飞行克隆（相对视口，瞬态） */
.flying {
    position: fixed; z-index: 100; pointer-events: none; overflow: hidden;
    background: #FCFAF5; border: 0.5px solid var(--accent);
    border-radius: 10px; box-shadow: 0 18px 60px rgba(59,61,63,0.3);
    transition: top 0.55s var(--ease-soft), left 0.55s var(--ease-soft),
                width 0.55s var(--ease-soft), height 0.55s var(--ease-soft),
                border-radius 0.55s var(--ease-soft);
}
.flying iframe { width: 100%; height: 100%; border: none; pointer-events: none; border-radius: 9.5px; }

/* 图侧 */
.live-demo{
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 20px 50px -18px rgba(43,58,78,0.18);
    background:#EDEAE2;
}
.live-demo iframe{
    display:block;
    width:100%;
    height:520px;
    border:none;
}
.demo-note{
    font-size:0.72rem;
    color:var(--text-muted);
    padding:0.6rem 1rem;
    background:var(--bg-card);
    border-top:1px solid var(--border);
}

/* 实拍截图：PNG 自带圆角与阴影，直接贴，不包任何框 */
.shot-frame{
    background:transparent;
}
.shot-frame img{display:block;width:100%}
/* 04 安全页的截图是直角位图，由我们补圆角与阴影 */
.shot-frame.framed{
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 20px 50px -16px rgba(27,40,54,0.35);
}

/* 06 全平台：桌面图在后，手机图圆角 + 阴影叠在前 */
.platform-stack{
    position:relative;
    padding-bottom:10%; /* 给手机图留出底部探出的空间 */
}
.p-desktop{
    display:block;
    width:100%;
}
.p-mobile{
    position:absolute;
    right:-4%;
    bottom:0;
    height:92%;   /* 与桌面图高度齐平 */
    width:auto;
    border-radius:12px;
    box-shadow:0 24px 50px -8px rgba(27,40,54,0.45);  /* 垫在下方的主阴影 */
}
.platform-icons{
    display:flex;
    gap:1.1rem;
    justify-content:center;
    margin-top:1.4rem;
    color:var(--text-muted);
}
/* 06 屏：图标作为媒体主体，放大 */
.platform-icons.big{
    margin-top:0;
    gap:2.2rem;
}
.platform-icons.big .p-icon{
    width:44px;
    height:44px;
    color:var(--text-light);
}
.platform-icons .p-icon{
    display:inline-flex;
    width:22px;height:22px;
    transition:color 0.2s ease;
}
.platform-icons .p-icon:hover{color:var(--accent)}
.platform-icons .p-icon svg{width:100%;height:100%;display:block}

.shot-placeholder{
    border:1.5px dashed #C9C2B2;
    border-radius:14px;
    aspect-ratio:3/2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0.7rem;
    text-align:center;
    padding:2rem;
    background:var(--bg-card);
    color:var(--text-muted);
    transition:border-color 0.3s ease;
}
.split:hover .shot-placeholder{border-color:var(--accent)}
.ph-icon{font-size:1.6rem;opacity:0.6}
.ph-title{font-size:0.85rem;letter-spacing:0.1em;color:var(--accent)}
.ph-desc{font-size:0.75rem;line-height:1.7;max-width:26em}

/* ═══ CTA ═══ */
.cta-section{
    text-align:center;
    padding:clamp(4rem,10vh,7rem) 2rem;
    border-top:1px solid var(--border);
    margin-top:clamp(2rem,6vh,4rem);
}
.cta-section h2{
    font-size:clamp(1.5rem,2.8vw,2.2rem);
    font-weight:normal;
    letter-spacing:0.05em;
    color:var(--hana-text);
}
.cta-sub{
    margin-top:0.8rem;
    font-size:0.85rem;
    color:var(--text-muted);
    letter-spacing:0.12em;
}
.cta-buttons{
    margin-top:2.2rem;
    display:flex;
    gap:1rem;
    justify-content:center;
    flex-wrap:wrap;
}
.btn-primary{
    display:inline-block;
    padding:0.7rem 2rem;
    background:var(--accent);
    color:#FCFAF5;
    border-radius:999px;
    text-decoration:none;
    font-size:0.9rem;
    letter-spacing:0.08em;
    transition:background 0.3s ease, transform 0.3s var(--ease-soft);
}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-ghost{
    display:inline-block;
    padding:0.7rem 2rem;
    border:1px solid var(--border);
    border-radius:999px;
    text-decoration:none;
    color:var(--text);
    font-size:0.9rem;
    letter-spacing:0.08em;
    transition:border-color 0.3s ease, transform 0.3s var(--ease-soft);
}
.btn-ghost:hover{border-color:var(--accent);transform:translateY(-1px)}

/* ═══ footer ═══ */
footer{
    max-width:1180px;
    margin:0 auto;
    padding:2rem 2rem 2.5rem;
    border-top:1px solid var(--border);
    font-size:0.78rem;
    color:var(--text-muted);
    line-height:2;
}
footer a{color:inherit}
.lang-nav{margin-bottom:0.6rem}
.lang-nav span{margin:0 0.4em;color:#d8d2c4}
.lang-nav .current{color:var(--text)}
footer ul{list-style:none;margin-bottom:0.4rem}
footer .note{font-size:0.72rem;color:#b0aa9e}

/* ═══ 滚动显现动效 ═══ */
.reveal-group{
    opacity:0;
    transform:translateY(26px);
    transition:opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
}
.reveal-group.visible{
    opacity:1;
    transform:translateY(0);
}
/* 同一屏内文字栏与图栏轻微错时 */
.split .col-media.reveal-group{transition-delay:0.12s}
.split.flip .col-media.reveal-group{transition-delay:0s}
.split.flip .col-text.reveal-group{transition-delay:0.12s}

@media(prefers-reduced-motion:reduce){
    .hero-bg{animation:none}
    .hero-anim{opacity:1;transform:none;transition:none}
    .scroll-hint{animation:none}
    .reveal-group{opacity:1;transform:none;transition:none}
}

/* ═══ 窄屏 ═══ */
@media(max-width:820px){
    .split{grid-template-columns:1fr;gap:1.6rem}
    .split.flip .col-text{order:1}
    .split.flip .col-media{order:2}
    .hero-copy{left:8%;max-width:64%;top:40%}
    .live-demo iframe{height:420px}
}