/* ==========================================================================
   广州力晟食品 · 品牌配色主题
   取色自公司 Logo：橙 #F39800 / 蓝 #004098
   - 浅色区：冷白偏蓝 + 极淡竖向渐变
   - 深色区：深海军蓝渐变，右上带橙色光晕
   - 强调：Logo 橙（按钮/链接/徽章），Logo 蓝（标题）
   加载顺序：style.css → polish.css → theme.css
   ========================================================================== */

:root{
  --paper:        #F4F7FC;
  --cream:        #EAF1FA;
  --line:         #D3DFEC;
  --ink:          #0E1F35;
  --body-text:    #23364E;
  --muted:        #56687D;
  --clay:         #E08200;
  --clay-deep:    #9A5B00;

  --brand-orange: #F39800;
  --brand-blue:   #004098;
  --brand-navy:   #0B2340;

  --grad-page:    linear-gradient(180deg, #F7FAFE 0%, #EFF4FB 100%);
  --grad-band:    linear-gradient(180deg, #EEF4FB 0%, #E8F0F9 100%);
  --grad-dark:    linear-gradient(160deg, #0C2544 0%, #123A66 55%, #091A30 100%);
  --grad-accent:  linear-gradient(135deg, #FFB238 0%, #F39800 55%, #D97C00 100%);
}

/* ---------- 页面整体：冷白蓝渐变 ---------- */
html{ background: #EFF4FB; }
body{
  background: var(--grad-page);
  color: var(--body-text);
}

/* ---------- 浅色分区：蓝调渐变 ---------- */
.section--paper,
.about, .pctr, .abstory, .abvalues, .home-entries{
  background: linear-gradient(180deg, #F7FAFE 0%, #F1F5FC 100%);
}
.section--cream,
.abfacts, .subnav, .group__head, .abtabs{
  background: linear-gradient(180deg, #EAF1FA 0%, #E3ECF7 100%);
}

/* ---------- 深色分区：海军蓝渐变 + 橙色光晕 ---------- */
.section--ink,
.bent, .bsect, .databar, .abintro, .site-footer{
  background: var(--grad-dark);
}
.bent, .abintro{
  background:
    radial-gradient(120% 120% at 88% 4%, rgba(243,152,0,.16) 0%, rgba(243,152,0,0) 58%),
    var(--grad-dark);
}
.section--ink{ position: relative; }

/* ---------- Banner：深蓝底 + 右侧橙光 ---------- */
.banner::before{
  background:
    radial-gradient(110% 130% at 90% 6%, rgba(243,152,0,.34) 0%, rgba(243,152,0,0) 58%),
    linear-gradient(120deg, rgba(8,20,36,.95) 0%, rgba(12,37,68,.84) 52%, rgba(9,26,48,.62) 100%);
}

/* ---------- 视频/图片占位块 ---------- */
.video-ph{
  background:
    radial-gradient(90% 120% at 82% 8%, rgba(243,152,0,.22) 0%, rgba(243,152,0,0) 62%),
    linear-gradient(150deg, #0C2544 0%, #123A66 58%, #091A30 100%);
  border-color: rgba(255,194,77,.5);
}

/* ---------- 按钮：主 CTA 走橙色渐变 ---------- */
.btn--solid{
  background-image: var(--grad-accent);
  background-color: var(--brand-orange);
  border-color: transparent;
  color: #0A1B30;
  font-weight: 600;
}
.btn--solid:hover{ filter: brightness(1.05); }
.btn--line{ border-color: rgba(14,31,53,.28); }

/* ---------- 右侧悬挂栏：橙/蓝呼应 ---------- */
.rail__icon{ color: var(--brand-blue); }
.rail__item:hover .rail__icon{ background: var(--brand-orange); color: #0A1B30; }
.rail .rail__label{ background: var(--brand-navy); color: #E8F0FA; }

/* ---------- 顶部导航：透明态与实底态 ---------- */
.site-header.is-scrolled::before,
.site-header:hover::before,
.site-header:focus-within::before{ background: rgba(244,247,252,.96); }
.site-header:not(.is-scrolled):not(:hover):not(:focus-within) .brand__logo{
  background: rgba(244,247,252,.94);
}

/* ---------- 徽章 / 数据 / 细节 ---------- */
.abbadge__mark{ border-color: rgba(243,152,0,.55); background: rgba(243,152,0,.10); color: #FFC24D; }
.databar__num{ color: #FFC24D; }
.pctr__rule, .abstory__title{ color: var(--brand-blue); }
.abstory__title{ color: var(--brand-blue); }
.pctr__more a{ color: var(--clay-deep); border-color: rgba(154,91,0,.45); }
.pctr__more a:hover{ background: var(--clay-deep); color: #fff; }
.pctr__media{ background: #E3ECF7; }
.abtabs__link{ background: #E3ECF7; color: #4A5B70; }
.abtabs__link.is-active{ background: var(--brand-orange); color: #0A1B30; }
.group__head{ border-color: #C6D5E6; }

/* 图片融合的暖底色同步换成冷底 */
.p-card__media, .feature__media{ background: #E7EFF8; }
.bent__media, .bcard__media{ background: #EAF1FA; }
.bent__media img, .bcard__media img{ mix-blend-mode: multiply; }

/* 选中态强调色 */
::selection{ background: var(--brand-orange); color: #0A1B30; }
:focus-visible{ outline-color: var(--brand-orange); }

/* ==========================================================================
   主题细化（第二遍）
   ========================================================================== */

/* 浅色区渐变再明显一点，形成"冷白 → 淡蓝"的层次 */
body{ background: linear-gradient(180deg, #F8FBFF 0%, #E9F1FA 55%, #F2F7FD 100%); background-attachment: fixed; }
.section--paper,
.about, .pctr, .abstory, .abvalues{
  background: linear-gradient(180deg, #F7FAFE 0%, #EDF3FB 100%);
}
.section--cream,
.abfacts, .subnav, .group__head{
  background: linear-gradient(180deg, #E8F0FA 0%, #DEE9F6 100%);
}

/* 标题用 Logo 蓝，强调用 Logo 橙 */
.pctr__title,
.abfacts__title,
.abvalues__title,
.bent__title{ color: var(--brand-blue); }
.bent__title{ color: #FFC24D; }        /* 深色区保持金色 */
.bent__sub{ color: var(--brand-orange); }
.abstory__title{ color: var(--brand-blue); }
.abvalues__sub{ color: var(--clay-deep); }

/* 卡片内文字改冷调 */
.pctr__form{ color: var(--clay-deep); }
.pctr__spec{ color: #5A6C81; }
.pctr__name{ color: var(--ink); }
.pctr__media{ background: #E3ECF7; }
.bent__cap b{ color: var(--ink); }
.bent__cap em{ color: #5A6C81; }

/* 右侧悬挂栏：图标用蓝色，悬停用橙色 */
.rail .rail__icon{ color: var(--brand-blue); }
.rail .rail__icon svg{
  filter: drop-shadow(0 0 2px rgba(244,247,252,.95)) drop-shadow(0 0 3px rgba(244,247,252,.7));
}
.rail .rail__item:hover .rail__icon{ background: var(--brand-orange); color: #0A1B30; }
.rail .rail__label{ background: var(--brand-navy); color: #E8F0FA; }

/* 页脚文字改冷色 */
.footer__nav a{ color: #B9CBE0; }
.footer__contact p{ color: #B9CBE0; }
.footer__addr{ color: #8FA3BC !important; }
.footer__k{ color: #7C8EA4; }

/* 深色区里的金色小标/数字保持暖色对比 */
.abintro__kicker{ color: #FFC24D; }
.abbadge__mark{ border-color: rgba(243,152,0,.5); background: rgba(243,152,0,.10); color: #FFC24D; }

/* 页脚与深色段之间的分隔线 */
.site-footer{ border-top-color: rgba(232,240,250,.14); }

/* 图片容器底色统一到冷白 */
.p-card__media, .feature__media, .pctr__media, .abstory__media, .video-ph + .bcard__media{ background: #E3ECF7; }

/* 选中态/焦点色 */
::selection{ background: var(--brand-orange); color: #0A1B30; }


/* 关键修正：产品页的 stage-dark 是「深色区」，不能被浅色 section 渐变覆盖 */
.stage-dark,
.section--cream.stage-dark,
.section.stage-dark{
  background:
    radial-gradient(110% 120% at 88% 6%, rgba(243,152,0,.14) 0%, rgba(243,152,0,0) 58%),
    linear-gradient(160deg, #0C2544 0%, #123A66 55%, #091A30 100%);
  color: #E8F0FA;
}
.stage-dark .p-card{ background: #FFFFFF; }
.stage-dark .p-card__name{ color: #0E1F35; }
.stage-dark .p-card__kicker{ color: #9A5B00; }
.stage-dark .p-card__spec{ color: #5A6C81; }
.stage-dark .spec-bar,
.stage-dark .spec-bar__item{ border-color: rgba(232,240,250,.28); }
.stage-dark .spec-bar__k{ color: #8FA3BC; }
.stage-dark .spec-bar__v{ color: #E8F0FA; }
.stage-dark .group__head{ border-color: rgba(232,240,250,.28); }
.stage-dark .group__title{ color: #F5F9FF; }
.stage-dark .group__count,
.stage-dark .group__desc{ color: #8FA3BC; }
.stage-dark .p-card__cta{ color: #FFC24D; }
.stage-dark .p-card:hover{ box-shadow: 0 24px 50px -30px rgba(0,0,0,.9); }


/* 二级导航条：夹在深色 banner 与深色内容之间，改成深色一体 */
.subnav{
  background: linear-gradient(180deg, #0B2138 0%, #0E2947 100%);
  border-bottom: 1px solid rgba(232,240,250,.12);
}
.subnav a, .subnav button{ color: #B9CBE0; }
.subnav a:hover, .subnav button:hover{ color: #FFFFFF; }
.subnav .is-active, .subnav [aria-current="true"]{
  color: #FFC24D;
  border-bottom-color: #F39800;
}
.subnav__in, .subnav ul{ border-color: rgba(232,240,250,.12); }

/* banner 橙色光晕收敛一点，边缘更干净 */
.banner::before{
  background:
    radial-gradient(80% 100% at 92% 0%, rgba(243,152,0,.26) 0%, rgba(243,152,0,0) 52%),
    linear-gradient(120deg, rgba(8,20,36,.96) 0%, rgba(11,32,58,.88) 48%, rgba(9,26,48,.70) 100%);
}


/* 主按钮：banner 里的实心按钮也要用橙色渐变（polish.css 的高优先级规则） */
.banner .btn--solid,
.btn--solid{
  background: linear-gradient(135deg, #FFB238 0%, #F39800 55%, #D97C00 100%);
  border-color: transparent;
  color: #0A1B30;
  font-weight: 600;
}
.banner .btn--solid:hover,
.btn--solid:hover{ filter: brightness(1.06); }

/* 联系页：照片加海军蓝叠色，压掉暖调，与全站统一 */
.contact__bg img{
  opacity: .42;
  filter: grayscale(.55) contrast(1.05);
  mix-blend-mode: luminosity;
}
.contact__bg::after{
  background:
    radial-gradient(90% 110% at 92% 0%, rgba(243,152,0,.16) 0%, rgba(243,152,0,0) 55%),
    linear-gradient(90deg, rgba(7,18,33,.97) 0%, rgba(10,29,52,.93) 46%, rgba(9,24,44,.74) 100%);
}
.contact{ background: #0B2340; }


/* 首页首屏：照片加一层冷调压制暖木色，与全站蓝调统一 */
.page-index .banner::before{
  background:
    radial-gradient(80% 100% at 92% 0%, rgba(243,152,0,.22) 0%, rgba(243,152,0,0) 50%),
    linear-gradient(180deg, rgba(11,35,64,.34) 0%, rgba(11,35,64,.18) 55%, rgba(11,35,64,.30) 100%),
    linear-gradient(90deg, rgba(8,20,36,.94) 0%, rgba(11,32,58,.82) 42%, rgba(9,26,48,.30) 82%);
}
.page-index .banner{
  background-color: #0B2340;
}


/* 首屏照片做成「海军蓝单色调」：亮度保留、色相统一到品牌蓝，暖木色不再抢戏 */
.page-index .banner{
  background-color: #0B2340;
  background-blend-mode: luminosity;
  background-size: cover;
  background-position: center 53%;
}
.page-index .banner::before{
  background:
    radial-gradient(80% 100% at 92% 0%, rgba(243,152,0,.20) 0%, rgba(243,152,0,0) 50%),
    linear-gradient(90deg, rgba(8,20,36,.92) 0%, rgba(11,32,58,.72) 42%, rgba(9,26,48,.18) 82%);
}


/* 首屏大图恢复原图本色（不做单色调），仅保留左侧压深保证文字可读 */
.page-index .banner{
  background-color: transparent;
  background-blend-mode: normal;
  background-image: url('../img/hero-steak.webp');
  background-position: center 53%;
  background-size: cover;
  min-height: clamp(520px, 40vw, 660px);
}
.page-index .banner::before{
  background:
    linear-gradient(90deg, rgba(11,26,48,.91) 0%, rgba(11,26,48,.79) 38%, rgba(11,26,48,.12) 80%),
    linear-gradient(180deg, rgba(11,26,48,.55) 0%, rgba(11,26,48,0) 35%);
}