/**
 * whyvolo 设计组件层（whyvolo-core / ui 模块）
 *
 * 从首页抽出的共享设计语言：奶油底 + 暖金点缀、红色主按钮、深色正文、大留白、细网格/颗粒装饰、
 * 圆角卡片与柔和阴影、内联 SVG 图标、滚动淡入。首页（.wvh）与各内页共用。
 *
 * 用法：组件根节点加 class="wvk"（提供变量与基础重置），内部使用 wvk-* 组件类。
 * 不引用任何外部资源。改动本文件会同时影响首页，改完需对比首页截图。
 */

/* ---------- 0. 变量与基础重置 ---------- */
.wvk{--red:#E23744;--red-h:#C92A37;--red-soft:#FDECEE;--gold:#B8975A;--gold-d:#8A6D35;--gold-l:#E9DBC0;--ink:#1F2937;--ink-2: #374151;--mute:#6B7280;--cream:#FBF7F0;--line:#EEE6DA;--green:#15803D;--green-soft:#E7F6EC;--amber:#B45309;--amber-soft:#FEF3C7;--r-lg:24px;--r:18px;--r-sm:12px;--ease:cubic-bezier(.22,.61,.36,1);--sh:0 1px 2px rgba(31,41,55,.04), 0 8px 24px rgba(31,41,55,.06);--sh-h:0 2px 4px rgba(31,41,55,.04), 0 22px 44px rgba(31,41,55,.12);color:var(--ink);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}

.wvk *, .wvk *::before, .wvk *::after{box-sizing:border-box}
.wvk :is(h1,h2,h3,p,ul,ol){margin:0;padding:0}
.wvk :is(ul,ol){list-style:none}
.wvk a{text-decoration:none;color:inherit}
.wvk img{display:block;max-width:100%}
.wvk .wvk-i{flex:none;display:block}
.wvk :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:8px}

/* ---------- 1. 布局 ---------- */
.wvk-wrap{width:100%;max-width:1248px;margin:0 auto;padding:0 24px}

/* ---------- 2. 标题 ---------- */
.wvk-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px!important;color:var(--gold-d);font-size:13px;font-weight:600;letter-spacing:.16em}
.wvk-eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.wvk-eyebrow-gold{color:#D9BE86}

.wvk .wvk-h1, .wvk .wvk-h2, .wvk .wvk-h3{color:var(--ink);font-family:inherit}
.wvk-ph{display:inline-block}
.wvk .wvk-h1{font-size:clamp(38px,5.2vw,66px);font-weight:750;line-height:1.14;letter-spacing:-.035em}
.wvk-h1 em, .wvk-h2 em{font-style:normal;background:linear-gradient(100deg,var(--red) 10%,#EE6A55 60%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.wvk .wvk-h2{font-size:clamp(28px,3.4vw,42px);font-weight:700;line-height:1.22;letter-spacing:-.02em}
.wvk .wvk-h3{font-size:19px;font-weight:650;line-height:1.4;letter-spacing:-.01em}
.wvk-sub{margin-top:16px!important;max-width:560px;text-wrap:pretty;color:var(--mute);font-size:17px}
.wvk-head{margin-bottom:56px}

.wvk-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;margin-bottom:26px!important;border:1px solid rgba(184,151,90,.35);border-radius:999px;background:rgba(255,255,255,.55);color:var(--gold-d);font-size:13px;font-weight:600;letter-spacing:.08em}
.wvk-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(226,55,68,.14)}

/* ---------- 3. 按钮 ---------- */
.wvk .wvk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border:1px solid transparent;border-radius:999px;font-size:16px;font-weight:600;line-height:1;letter-spacing:.02em;white-space:nowrap;cursor:pointer;transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s ease, color .2s ease, border-color .2s ease}
.wvk .wvk-btn .wvk-i{transition:transform .25s var(--ease)}
.wvk .wvk-btn:hover .wvk-i{transform:translateX(3px)}
.wvk .wvk-btn-primary{background:var(--red);color:#fff;box-shadow:0 10px 24px -8px rgba(226,55,68,.55)}
.wvk .wvk-btn-primary:hover{background:var(--red-h);color:#fff;transform:translateY(-1px);box-shadow:0 14px 28px -8px rgba(226,55,68,.6)}
.wvk .wvk-btn-ghost{background:rgba(255,255,255,.6);border-color:rgba(31,41,55,.18);color:var(--ink)}
.wvk .wvk-btn-ghost:hover{background:#fff;border-color:var(--ink);color:var(--ink)}
.wvk .wvk-btn-gold{background:linear-gradient(135deg,#D9BE86,var(--gold));color:#1A1F2B;box-shadow:0 12px 30px -10px rgba(184,151,90,.7)}
.wvk .wvk-btn-gold:hover{color:#1A1F2B;transform:translateY(-1px);box-shadow:0 16px 34px -10px rgba(184,151,90,.85)}
.wvk .wvk-btn-dark{background:var(--ink);color:#fff}
.wvk .wvk-btn-dark:hover{background:#0F172A;color:#fff}
.wvk .wvk-btn-sm{min-height:42px;padding:0 20px;font-size:14px}
.wvk .wvk-btn-block{display:flex;width:100%}

/* 文字链接（下划线） */
.wvk .wvk-more{display:inline-flex;align-items:center;gap:6px;flex:none;padding:10px 0;color:var(--ink);font-size:15px;font-weight:600;border-bottom:1px solid currentColor}
.wvk .wvk-more:hover{color:var(--red)}
.wvk .wvk-more:hover .wvk-i{transform:translateX(3px)}
.wvk-more .wvk-i{transition:transform .25s var(--ease)}

/* ---------- 4. 标签、价格、头像占位 ---------- */
.wvk-tags{display:flex;gap:4px;overflow:hidden}
.wvk-tag{flex:none;padding:1px 8px;border-radius:6px;background:var(--cream);color:var(--gold-d);font-size:12px;font-weight:600;line-height:20px}
.wvk-tag-more{background:#F3F4F6;color:var(--mute)}

.wvk-price{color:var(--mute);font-size:13px;white-space:nowrap}
.wvk-price b{color:var(--ink);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.wvk .wvk-ava-ph{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#E9DBC0,#C9A96B);color:#fff;font-weight:700;text-shadow:0 1px 2px rgba(138,109,53,.35)}

/* ---------- 5. 卡片 ---------- */
.wvk-card{padding:28px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh)}

/* ---------- 6. 背景装饰：细网格（向四周淡出）+ 颗粒 + 光斑 ---------- */
.wvk-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.wvk-bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(138,109,53,.09) 1px,transparent 1px), linear-gradient(90deg,rgba(138,109,53,.09) 1px,transparent 1px);background-size:56px 56px;background-position:center top;-webkit-mask-image:radial-gradient(ellipse 70% 65% at var(--grid-at,60% 40%),#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 65% at var(--grid-at,60% 40%),#000 20%,transparent 75%)}
.wvk-bg::after{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wvk-blob{position:absolute;border-radius:50%;filter:blur(60px)}
.wvk-blob-a{width:620px;height:620px;right:-140px;top:-220px;background:radial-gradient(circle,rgba(217,190,134,.75),rgba(217,190,134,0) 70%)}
.wvk-blob-b{width:520px;height:520px;left:-200px;bottom:-260px;background:radial-gradient(circle,rgba(246,214,190,.8),rgba(246,214,190,0) 70%)}
.wvk-blob-c{width:360px;height:360px;right:22%;bottom:-120px;background:radial-gradient(circle,rgba(226,55,68,.12),rgba(226,55,68,0) 70%)}

/* ---------- 7. 动效 ---------- */
@keyframes wvk-up{from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none}}

/* 滚动淡入（仅在 JS 启用且未要求减少动效时） */
.wvk-anim .wvk-reveal{opacity:0;translate:0 22px;transition:opacity .8s var(--ease), translate .8s var(--ease);transition-delay:calc(var(--d,0) * 70ms)}
.wvk-anim .wvk-reveal.is-in{opacity:1;translate:0 0}

@media (prefers-reduced-motion: reduce){
	.wvk *, .wvk *::before, .wvk *::after{animation:none!important;transition:none!important}
	.wvk .wvk-reveal{opacity:1!important;translate:none!important}
}

/* ---------- 8. 响应式 ---------- */
@media (max-width: 960px){
	.wvk-head{margin-bottom:44px}
}

@media (max-width: 600px){
	.wvk{font-size:15px}
	.wvk-wrap{padding:0 20px}
	.wvk .wvk-h1{font-size:36px;letter-spacing:-.03em}
	.wvk-kicker{margin-bottom:20px!important}
	.wvk-head{margin-bottom:36px}
	.wvk-sub{font-size:15px}
	.wvk .wvk-h3{font-size:17px}
}