/* ==========================================================================
   LOJO — 蓝白主题 覆盖层
   --------------------------------------------------------------------------
   本站原始设计是「深色首屏 + 深色 CTA + 深色页脚」，本文件把这几块整体翻成
   浅色，并把主色统一到品牌蓝。**只在 style.css 之后加载**，靠同优先级
   后出现取胜；不改动 style.css 一个字节，回滚只需删掉页面里的那行 <link>。
   生成源：sp_theme/build_theme.py（与配色预览同源，改一处两边同步）
   ========================================================================== */


/* ===== 结构层：把原来的暗色区块整体翻成浅色 ===== */

/* 浅底上的次级文字。原设计的 --muted(4.1:1) / --faint(2.5:1) 是按"深色底"调的，
   翻浅之后小号标签会发虚。这里给一个 5.4:1 的次级色专门用在浅底上，
   并把 --faint 整体压深到 4.7:1 —— 它全部 6 个使用点都在浅底上
   （车型卡规格名 / 规格表空值 / 联系卡标签 / 360 卡头 / 360 空态 / 360 说明），
   改 token 一次到位，比逐个改选择器更不容易漏。 */
:root { --fg-2: #5C6B82; --faint: #67748A; }

/* 站点现在只有浅色一套，明确声明 color-scheme: light —— 否则系统处于深色模式的访客
   可能拿到「深色的原生控件（下拉框/滚动条/日期选择器）配白色页面」这种混搭。
   实测 Chrome 默认不会，但显式声明才是可靠做法。 */
:root { color-scheme: light; }

/* --- 顶部导航：原来靠深色 hero 衬托的白字，改成深字 --- */
/* ⚠️ logo 方块里的字形是 <use fill="currentColor">，而 .logo__mark 自己没写 color，
   于是继承了 body 的深色 —— 深蓝字形压在蓝绿渐变方块上，糊成一团。
   favicon.svg 里同一个字形路径写的是 fill="#fff"，可见本意就是白色。
   这是原有缺陷，顺手修掉。 */
.logo__mark                  { color: #fff; }
.header .logo__name          { color: var(--ink); }
.header .logo__sub           { color: var(--fg-2); }
.header .nav__link           { color: var(--body); }
.header .nav__link:hover     { color: var(--brand-600); }
.header .header__burger span { background: var(--ink); }
.header .btn--ghost          { --btn-fg: var(--ink); --btn-bd: var(--line-2); }
.header .btn--ghost:hover    { background: var(--bg-soft); }
/* 语言切换器：胶囊底原本是「白 10% 底 + 白 18% 边框」，浅底上等于没有。
   注意页眉和手机抽屉里各有一个（抽屉那个是 .lang--drawer，不在 .header 里），
   所以这里用不带 .header 前缀的选择器一次覆盖两处。 */
.lang                        { background: rgba(11,18,32,.045); border-color: rgba(11,18,32,.12); }
.lang__btn                   { color: var(--fg-2); }
.lang__btn:hover             { color: var(--ink); }
.lang__btn.is-on             { background: var(--ink); color: #fff; }

/* --- 首屏 hero --- */
.hero {
  background:
    radial-gradient(1100px 620px at 88% 6%, var(--hero-glow-1), transparent 62%),
    radial-gradient(900px 600px at 8% 96%, var(--hero-glow-2), transparent 60%),
    linear-gradient(168deg, #FFFFFF 0%, var(--hero-mid) 52%, var(--hero-end) 100%);
  color: var(--ink);
}
.hero::before {
  opacity: .9;
  background-image:
    linear-gradient(rgba(11,18,32,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,18,32,.05) 1px, transparent 1px);
}
.hero h1                 { color: var(--ink); }
.hero__lead              { color: var(--body); }
.hero__badge             { background: var(--brand-050); border-color: var(--brand-300); color: var(--brand-700); }
.hero__badge b           { color: var(--ink); }
.hero__badge svg         { color: var(--eco-600); }
.hero__kpis              { border-top-color: var(--line); }
.kpi + .kpi              { border-left-color: var(--line); }
.kpi__n                  { color: var(--ink); }
.kpi__l                  { color: var(--fg-2); }
.hero-slide__meta b      { color: var(--ink); }
.hero-slide__meta span   { color: var(--fg-2); }
/* --- 首屏车型展示位：默认无底色，鼠标移入 / 触控滑动时白色底"晕染"浮现 ---
   原设计是一张常驻的白色圆角卡。白车放白卡上对比最弱，且用户要的是
   "常态没底色、交互时才出现白色底 + 渐变过渡"，所以：
   常态 = 车本身 + 车下一圈落地影；交互 = 白色柔光从中心模糊放大淡入。 */
.hero-slide__stage {
  position: relative;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
/* 白色"晕染"层：默认透明 + 缩小 + 重度模糊；交互时放大、聚焦、淡入 */
.hero-slide__stage::before {
  content: "";
  position: absolute;
  inset: -4% -3%;
  background: linear-gradient(165deg, #FFFFFF 0%, #FDFEFF 60%, #F8FBFF 100%);
  border-radius: 40px;
  box-shadow: 0 26px 58px rgba(11, 18, 32, .10);
  filter: blur(26px);
  opacity: 0;
  transform: scale(.92);
  transition: opacity .5s var(--ease),
              transform .8s cubic-bezier(.22, 1, .36, 1),
              filter .8s var(--ease);
  will-change: opacity, transform, filter;
  z-index: 0;
  pointer-events: none;
}
/* 车下的落地影：常态就有，白车才"站得住"；本身也是从中心到透明的渐变 */
.hero-slide__stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1.5%;
  width: 74%;
  height: 5.5%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(11, 18, 32, .34) 0%, rgba(11, 18, 32, .18) 42%,
              rgba(11, 18, 32, .05) 68%, rgba(11, 18, 32, 0) 100%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}
.hero-slide__stage img {
  position: relative;
  z-index: 1;
  border-radius: 0;
  filter: drop-shadow(0 20px 22px rgba(11, 18, 32, .22));
}
/* 触发①：鼠标悬停整个轮播区（只在真正支持 hover 的设备上生效，
   否则触屏点一下会留下"粘住"的 :hover 状态） */
@media (hover: hover) {
  .hero-slider:hover .hero-slide.is-active .hero-slide__stage::before {
    opacity: 1; transform: scale(1); filter: blur(6px);
  }
}
/* 触发②：触控按下 / 滑动，由 assets/js/hero-glow.js 加 .is-glow */
.hero-slider.is-glow .hero-slide.is-active .hero-slide__stage::before {
  opacity: 1; transform: scale(1); filter: blur(6px);
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide__stage::before { transform: none; filter: blur(8px); transition: opacity .2s linear; }
}
.hero__glow               { background: radial-gradient(closest-side, var(--hero-glow-1), transparent 74%); }
.hero__dots button       { background: rgba(11,18,32,.16); }
.hero__dots button.is-active { background: var(--brand-600); }
.hero__scroll            { color: var(--fg-2); }
.hero__scroll i          { background: linear-gradient(180deg, rgba(11,18,32,.32), transparent); }
.hero .btn--ghost        { --btn-fg: var(--ink); --btn-bd: var(--line-2); }
.hero .btn--ghost:hover  { background: #fff; }

/* --- 子页面页头（about / models / contact / 404）--- */
.page-head {
  background:
    radial-gradient(800px 400px at 88% 4%, var(--hero-glow-1), transparent 62%),
    linear-gradient(160deg, #FFFFFF 0%, var(--hero-end) 100%);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.page-head h1            { color: var(--ink); }
.page-head p             { color: var(--body); }
.crumbs                  { color: var(--fg-2); }
.crumbs a                { color: var(--fg-2); }
.crumbs a:hover          { color: var(--brand-600); }

/* --- 品牌跑马灯 --- */
.ticker                  { background: var(--bg-soft); border-block-color: var(--line); }
.ticker__item            { color: var(--fg-2); }

/* --- 车型页：胶囊导航选中态 / 规格表表头 --- */
.model-nav a.is-active   { background: var(--brand-600); color: #fff; }
table.spec thead th      { background: var(--brand-600); }

/* --- 深色 section（关于页那一段） --- */
.section--dark                              { background: var(--bg-soft); color: var(--body); }
.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4        { color: var(--ink); }
.section--dark .eyebrow                     { color: var(--brand-600); }
.section--dark .lead                        { color: var(--fg-2); }
.section--dark .check-list li               { color: var(--body); }
/* 勾选图标原来是亮绿(#00C08B)，白底上只有 2.4:1；换成深一档的品牌绿 */
.section--dark .check-list svg              { color: var(--eco-600); }
.section--dark .stats                       { background: var(--line); }
.section--dark .stat                        { background: #fff; }
.section--dark .stat__n                     { color: var(--ink); }
.section--dark .stat__l                     { color: var(--fg-2); }
.section--dark .btn--ghost                  { --btn-fg: var(--ink); --btn-bd: var(--line-2); }
.section--dark .btn--ghost:hover            { background: #fff; }

/* --- CTA 横条 --- */
.cta-band {
  background:
    radial-gradient(700px 380px at 82% 12%, var(--hero-glow-1), transparent 60%),
    radial-gradient(600px 400px at 6% 96%, var(--hero-glow-2), transparent 60%),
    linear-gradient(140deg, var(--hero-mid), var(--hero-end));
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
}
.cta-band h2              { color: var(--ink); }
.cta-band p               { color: var(--fg-2); }
/* 原本是 --brand-300（浅蓝），配深底用的；浅底上只有 1.9:1。
   HTML 里还写着行内 style="color:#8FBCFF"（行内优先），那句已从页面里删掉，
   这里再加 !important 兜底，防止以后有人又把行内色写回来。 */
.cta-band .eyebrow,
.page-head .eyebrow       { color: var(--brand-600) !important; }
.cta-band .btn--ghost     { --btn-fg: var(--ink); --btn-bd: var(--line-2); }
.cta-band .btn--ghost:hover { background: #fff; }

/* --- 页脚 --- */
.footer                     { background: var(--bg-soft); color: var(--fg-2); border-top: 1px solid var(--line); }
.footer h4                  { color: var(--ink); }
.footer__links a            { color: var(--fg-2); }
.footer__links a:hover      { color: var(--brand-600); }
.footer__brand p            { color: var(--fg-2); }
.footer__addr               { color: var(--fg-2); }
.footer__addr strong        { color: var(--ink); }
.footer__addr .kr           { color: var(--fg-2); }
/* 原为白 8% 分隔线，浅底上完全看不见 */
.footer__bottom             { border-top-color: var(--line); color: var(--fg-2); }
.footer__legal a            { color: var(--fg-2); }
.footer__legal a:hover      { color: var(--brand-600); }
/* 页脚 logo 的文字颜色写成了行内 style，必须 !important 才盖得住 */
.footer .logo__name         { color: var(--ink) !important; }
.footer .logo__sub          { color: var(--fg-2) !important; }

/* --- 手机抽屉菜单 --- */
.drawer                     { background: #fff; }
.drawer__nav a              { color: var(--ink); border-bottom-color: var(--line); }
.drawer__meta               { color: var(--fg-2); }

/* --- 浅底上的小号标签 ---
   原来用 --faint(#98A5B8)，白底上只有 2.5:1，发虚。
   这里不再逐个改选择器，直接把 --faint 这个 token 压深（见上面 :root），
   一处生效覆盖它全部 6 个使用点。 */

/* ===== 蓝白主题 =====
   只动蓝；绿（--eco-*）保持品牌原值不动 —— 因为 logo 渐变、favicon、勾选图标
   用的都是「蓝→绿」，跟着改成青会让浏览器标签页的图标和页面里的 logo 对不上。 */
:root {
  --brand-700: #0A4AC7;
  --brand-600: #0B5CF0;
  --brand-500: #2A82FF;
  --brand-300: #8FBCFF;
  --brand-050: #EAF2FF;

  /* 品牌绿压深一档，白底上才看得清（原 #00C08B 只有 2.4:1） */
  --eco-600: #00A87A;
  --eco-500: #00C08B;
  --eco-050: #E4F8F1;

  --hero-glow-1: rgba(42,130,255,.20);
  --hero-glow-2: rgba(0,192,139,.14);
  --hero-mid:    #F5F9FF;
  --hero-end:    #EAF2FF;

  /* 首屏大标题的渐变：原来是「亮蓝→亮绿」，那是配深底的；
     白底上亮绿端只有 2.4:1，后半截会糊掉。压深两端，实测最浅端 ≥4:1。 */
  --grad-a: #0A4AC7;
  --grad-b: #1273D8;
  --grad-c: #0E8A63;

  --sh-brand: 0 10px 30px rgba(11,92,240,.24);
}
.text-grad { background: linear-gradient(96deg, var(--grad-a) 0%, var(--grad-b) 55%, var(--grad-c) 100%);
  -webkit-background-clip: text; background-clip: text; }