/*
 * 青柠首页页面级样式（front-page-qq.php 专用，仅首页 enqueue）
 * 依赖 qq.css 提供的 --qq-* 变量与基础组件；本文件仅含首页各版块样式。
 * 来源：website-redesign/index.html 的内联 <style>（保持一致，勿手改差异）。
 */
/* ============ Hero ============ */
.hero { position: relative; background: var(--qq-grad-hero); color: var(--qq-text-inv); overflow: hidden; }
.hero::after { content:""; position:absolute; inset:0; background-image:
    linear-gradient(var(--qq-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--qq-line-dark) 1px, transparent 1px);
    background-size: 46px 46px; mask-image: radial-gradient(900px 500px at 30% 20%, #000, transparent 75%); opacity:.6; }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: 84px 0 96px; }
.hero h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.05; letter-spacing: -.03em; }
.hero h1 .text-grad { display: inline-block; }
.hero p.lead { color: var(--qq-text-inv-2); font-size: 19px; margin-top: 22px; max-width: 540px; }
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 28px; margin-top: 30px; flex-wrap: wrap; }
.hero-meta .m .v { font-family: var(--qq-mono); font-size: 24px; font-weight: 700; color: #fff; }
.hero-meta .m .k { font-size: 13px; color: var(--qq-text-inv-2); }

/* Terminal panel */
.terminal { background: linear-gradient(160deg, rgba(17,26,43,.96), rgba(13,20,32,.98)); border: 1px solid rgba(163,230,53,.16);
    border-radius: 18px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset; overflow: hidden; }
.terminal-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--qq-line-dark); }
.terminal-bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.terminal-bar .t { margin-left: 10px; font-size: 12.5px; color: var(--qq-text-inv-2); font-family: var(--qq-mono); }
.terminal-body { padding: 20px; }
.term-blocks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tb { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 9px; font-size: 13px; font-weight: 600;
    background: rgba(255,255,255,.05); border: 1px solid var(--qq-line-dark); color: #dbe6f3; }
.tb.ind { border-color: rgba(56,189,248,.3); color: #7dd3fc; }
.tb.op { background: transparent; color: var(--qq-text-inv-2); }
.tb.buy { background: rgba(34,176,125,.16); border-color: rgba(34,176,125,.35); color: #4ade80; }
.tb.sell{ background: rgba(240,69,75,.14); border-color: rgba(240,69,75,.32); color: #fb7185; }
.term-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 18px 0; padding: 16px; border-radius: 12px;
    background: rgba(255,255,255,.03); border: 1px solid var(--qq-line-dark); }
.term-stats .v { font-family: var(--qq-mono); font-size: 22px; font-weight: 700; }
.term-stats .k { font-size: 11px; color: var(--qq-text-inv-2); margin-top: 2px; }
.term-chart { border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.02); border: 1px solid var(--qq-line-dark); }
.floating { position: absolute; z-index: 3; background: rgba(13,20,32,.9); border: 1px solid rgba(163,230,53,.25);
    border-radius: 12px; padding: 11px 15px; backdrop-filter: blur(8px); box-shadow: var(--qq-sh-lg); }
.floating .k { font-size: 11px; color: var(--qq-text-inv-2); }
.floating .v { font-family: var(--qq-mono); font-weight: 700; }

/* hero real-data strip */
.hero-realdata { margin-top: 18px; border-radius: 14px; padding: 16px 18px;
    background: rgba(13,20,32,.7); border: 1px solid var(--qq-line-dark); backdrop-filter: blur(6px); }
.hero-realdata .rd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.hero-realdata .rd-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.hero-realdata .rd-stats .v { font-family: var(--qq-mono); font-size: 22px; font-weight: 700; color: #fff; }
.hero-realdata .rd-stats .k { font-size: 11px; color: var(--qq-text-inv-2); margin-top: 2px; }
.hero-realdata .rd-foot { margin-top: 12px; font-size: 12px; color: var(--qq-text-inv-2); }
.hero-realdata .rd-foot b { color: var(--qq-lime-400); }

.trust { border-top: 1px solid var(--qq-line-dark); border-bottom: 1px solid var(--qq-line-dark); padding: 24px 0; position: relative; z-index: 2; }
.trust .qq-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.trust .t-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--qq-text-inv-2); }
.trust .t-item svg { width: 20px; height: 20px; color: var(--qq-lime-400); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; counter-reset: s; }
.step { position: relative; padding: 30px 24px; border-radius: 16px; background:#fff; border:1px solid var(--qq-border); }
.step::before { counter-increment: s; content: "0" counter(s); font-family: var(--qq-mono); font-size: 40px; font-weight: 800;
    color: var(--qq-lime-500); opacity: .28; position: absolute; top: 16px; right: 20px; }
.step .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--qq-lime-50); color: var(--qq-lime-700);
    display: grid; place-items: center; margin-bottom: 16px; }
.step h4 { font-size: 18px; } .step p { color: var(--qq-text-2); font-size: 14.5px; margin-top: 8px; }

/* Feature split */
.feat { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.feat .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color:#fff; margin-bottom: 14px; }

/* Strategy preview cards */
.strat-card { display: flex; flex-direction: column; gap: 14px; }
.strat-card .top { display: flex; justify-content: space-between; align-items: flex-start; }
.strat-card h4 { font-size: 17px; }
.strat-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 14px; background: var(--qq-bg-soft); border-radius: 12px; }
.strat-metrics .v { font-family: var(--qq-mono); font-size: 19px; font-weight: 700; }
.strat-metrics .k { font-size: 11px; color: var(--qq-text-3); }
.strat-foot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--qq-text-3); }

/* market widget */
.mkt { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; }
.mkt-panel { border-radius: 18px; overflow: hidden; border: 1px solid var(--qq-line-dark); background: linear-gradient(160deg,var(--qq-ink-800),var(--qq-ink-850)); }
.mkt-panel .head { display:flex; justify-content: space-between; align-items:center; padding: 16px 20px; border-bottom: 1px solid var(--qq-line-dark); }
.idx-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--qq-line-dark); }
.idx { background: var(--qq-ink-800); padding: 18px 20px; }
.idx .name { font-size: 13px; color: var(--qq-text-inv-2); } .idx .p { font-family: var(--qq-mono); font-size: 22px; font-weight: 700; color:#fff; margin: 4px 0; }

/* Agent block */
.agent-showcase { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; }
.agent-stream { height: 340px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.ag-msg { display: flex; animation: agin .4s ease; }
@keyframes agin { from { opacity:0; transform: translateY(8px);} to {opacity:1;transform:none;} }
.ag-user { justify-content: flex-end; }
.ag-bubble { max-width: 82%; padding: 12px 16px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; }
.ag-user .ag-bubble { background: var(--qq-grad-lime); color: #0a2c05; border-bottom-right-radius: 4px; font-weight: 600; }
.ag-agent .ag-bubble { background: rgba(255,255,255,.06); color: var(--qq-text-inv); border: 1px solid var(--qq-line-dark); border-bottom-left-radius: 4px; }
.ag-tool { align-items: center; gap: 8px; font-family: var(--qq-mono); font-size: 12.5px; color: var(--qq-lime-300); }
.ag-tool code { color: var(--qq-lime-300); }
.ag-tool-ico { width: 14px; height: 14px; border-radius: 4px; background: rgba(163,230,53,.2); border:1px solid rgba(163,230,53,.4); }

/* Pricing preview */
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.price-grid.pair { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
.price { border: 1px solid var(--qq-border); border-radius: 18px; padding: 30px; background:#fff; }
.price.hot { border-color: var(--qq-lime-500); box-shadow: var(--qq-sh-lime); position: relative; }
.price.hot .flag { position:absolute; top:-13px; left: 50%; transform: translateX(-50%); background: var(--qq-grad-lime); color:#0a2c05; font-size:12px; font-weight:800; padding:5px 14px; border-radius: 999px; }
.price .amt { font-family: var(--qq-mono); font-size: 40px; font-weight: 800; margin: 12px 0; }
.price .amt s { font-size: 16px; color: var(--qq-text-3); font-weight: 600; margin-left: 8px; }
.price ul { margin: 20px 0; display: grid; gap: 11px; }
.price li { display: flex; gap: 10px; font-size: 14.5px; color: var(--qq-text-2); }
.price li svg { width: 18px; height: 18px; color: var(--qq-lime-600); flex-shrink: 0; }

.cta-band { background: var(--qq-grad-hero); color:#fff; border-radius: 26px; padding: 64px; text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { font-size: clamp(28px,4vw,42px); }

@media (max-width: 960px){ .hero-inner,.mkt,.agent-showcase{grid-template-columns:1fr;} .steps,.feat,.price-grid,.price-grid.pair{grid-template-columns:1fr;} .floating{display:none;} }

/* ============================================================
 * WordPress 整合修正（本段仅首页加载，最后加载，优先级最高）
 * 主题 softsell-base.css 给 h1..h6/p 设了深色，会覆盖暗色区容器的浅色继承，
 * 导致 Hero 标题、数据背书区标题在暗底上发黑看不见；这里显式恢复浅色，
 * 并把半透明页头在白色页面底上加固为暗色。
 * ============================================================ */

/* 页头：白色页面底上 .72 透明会发灰，改为高不透明暗色，保证 logo/导航对比度 */
.qq-header { background: rgba(7, 11, 18, .92); }

/* Hero 暗色区标题与正文 */
.hero h1 { color: #fff; }
.hero h1 .text-grad { color: transparent; }
.hero p, .hero .lead { color: var(--qq-text-inv-2); }
.hero-meta .m .v { color: #fff; }

/* 通用暗色版块（数据背书 .section-dark、最终 CTA .cta-band）标题/正文恢复浅色 */
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: var(--qq-text-inv-2); }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--qq-text-inv-2); }

/* 暗色卡片（Agent 会话 / 终端面板）内标题浅色 */
.card-dark h1, .card-dark h2, .card-dark h3, .card-dark h4, .card-dark h5 { color: #fff; }