/* ============================================================
   AY Shield Risk Advisory — Design System CSS
   Forest green heritage brand · Penang, Malaysia · Est. 1997
   ============================================================ */

:root {
  --forest-900: #11201A;
  --forest-800: #16271A;
  --forest-700: #1A2E1C;
  --forest-600: #21381F;
  --forest-500: #2C4A2E;

  --cream-50:  #FBF8F1;
  --cream-100: #F6F1E6;
  --cream-200: #ECE4D2;
  --cream-300: #DED2B8;

  --gold-700: #9B7E33;
  --gold-600: #B6953F;
  --gold-500: #D67A0B;
  --gold-400: #D7BC6E;
  --gold-200: #E8D7A6;

  --orange-700: #C4540F;
  --orange-600: #D85E14;
  --orange-500: #EE6C1C;
  --orange-300: #F39A5E;

  --ink-900: #1C1A14;
  --ink-600: #4A463B;
  --ink-400: #847E6E;

  --bg:            var(--forest-700);
  --bg-deep:       var(--forest-900);
  --surface:       var(--forest-600);
  --surface-paper: var(--cream-100);
  --surface-paper-raised: var(--cream-50);

  --fg1: var(--cream-100);
  --fg2: rgba(246,241,230,0.72);
  --fg3: rgba(246,241,230,0.50);
  --fg-on-paper:   var(--ink-900);
  --fg-on-paper-2: var(--ink-600);
  --fg-on-paper-3: var(--ink-400);
  --accent:          var(--gold-500);
  --accent-on-paper: var(--gold-700);

  --hairline:      rgba(214,122,11,0.45);
  --hairline-soft: rgba(214,122,11,0.22);
  --divider-dark:  var(--forest-500);
  --border-paper:  var(--cream-300);
  --keyline:       var(--gold-500);

  --cta:       var(--orange-500);
  --cta-hover: var(--orange-600);
  --cta-press: var(--orange-700);
  --cta-fg:    var(--cream-50);
  --gold-cta-fg: var(--forest-800);

  --serif-display: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --sans-body:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --t-display: 600 clamp(52px,6.5vw,88px)/0.97 var(--serif-display);
  --t-h1:      600 clamp(38px,4.2vw,62px)/1.04 var(--serif-display);
  --t-h2:      600 clamp(28px,2.8vw,42px)/1.12 var(--serif-display);
  --t-h3:      600 24px/1.2 var(--serif-display);
  --t-quote:   500 italic clamp(22px,2.2vw,32px)/1.35 var(--serif-display);
  --t-lead:    400 18px/1.65 var(--sans-body);
  --t-body:    400 16px/1.65 var(--sans-body);
  --t-small:   400 14px/1.6 var(--sans-body);
  --t-caption: 500 12px/1.5 var(--sans-body);
  --t-eyebrow: 600 11.5px/1 var(--sans-body);
  --eyebrow-tracking: 0.18em;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --sp-9:96px; --sp-10:128px;

  --r-xs:2px; --r-sm:4px; --r-md:8px; --r-lg:14px; --r-pill:999px;

  --shadow-sm:   0 1px 3px rgba(17,32,26,0.20);
  --shadow-md:   0 8px 28px -6px rgba(17,32,26,0.38);
  --shadow-lg:   0 24px 64px -18px rgba(17,32,26,0.58);
  --shadow-gold: 0 6px 24px -6px rgba(214,122,11,0.48);

  --ease: cubic-bezier(0.22,0.61,0.36,1);
  --dur: 220ms;
}

/* ---- BASE ---- */
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--fg1);
  font-family:var(--sans-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection { background:var(--gold-500); color:var(--forest-800); }
button { font-family:inherit; }
img { max-width:100%; }

/* ---- LAYOUT ---- */
.wrap { max-width:1180px; margin:0 auto; padding:0 32px; }

/* ---- ANIMATION ---- */
[data-ani] { opacity:1; transform:none; }

@media (prefers-reduced-motion: no-preference) {
  /* Scroll-reveal: animate on entry */
  [data-ani].vis { animation: ani-up 0.55s var(--ease) both; }
  [data-ani][data-d="1"].vis { animation-delay:0.08s; }
  [data-ani][data-d="2"].vis { animation-delay:0.18s; }
  [data-ani][data-d="3"].vis { animation-delay:0.28s; }
  [data-ani][data-d="4"].vis { animation-delay:0.38s; }
  [data-ani][data-d="5"].vis { animation-delay:0.48s; }
  [data-ani][data-d="6"].vis { animation-delay:0.58s; }
  /* Already in viewport on load: instant, no animation */
  [data-ani].vis-now { animation:none!important; opacity:1!important; transform:none!important; }
}
@keyframes ani-up {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:none; }
}

/* ---- TYPOGRAPHY HELPERS ---- */
.eyebrow {
  font:var(--t-eyebrow); letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase; color:var(--gold-500); display:block;
}
.eyebrow-paper { color:var(--gold-700); }
.display { font:var(--t-display); letter-spacing:-0.02em; color:var(--fg1); margin:0; }
.h1 { font:var(--t-h1); letter-spacing:-0.015em; color:var(--fg1); margin:0; text-wrap:balance; }
.h2 { font:var(--t-h2); letter-spacing:-0.01em; color:var(--fg1); margin:0; text-wrap:balance; }
.h3 { font:var(--t-h3); color:var(--fg1); margin:0; }
.lead { font:var(--t-lead); color:var(--fg2); margin:0; text-wrap:pretty; }
.body-text { font:var(--t-body); color:var(--fg2); text-wrap:pretty; }
.on-paper { color:var(--ink-900); }
.on-paper-2 { color:var(--ink-600); }
.gold { color:var(--gold-500); }
.gold-paper { color:var(--gold-700); }
.orange { color:var(--orange-500); }

/* ---- GOLD RULE ---- */
.ay-rule { display:flex; align-items:center; gap:12px; }
.ay-rule::before { content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--hairline)); }
.ay-rule::after  { content:""; height:1px; flex:1; background:linear-gradient(270deg,transparent,var(--hairline)); }
.ay-rule-paper::before { background:linear-gradient(90deg,transparent,var(--cream-300)); }
.ay-rule-paper::after  { background:linear-gradient(270deg,transparent,var(--cream-300)); }
.ay-rule-dot { width:6px; height:6px; background:var(--gold-500); transform:rotate(45deg); flex:none; }
.ay-rule-dot-paper { background:var(--gold-700); }

/* ---- BUTTONS ---- */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  font:600 14px/1 var(--sans-body); letter-spacing:0.02em;
  border:none; border-radius:var(--r-pill);
  padding:14px 28px; cursor:pointer;
  transition:all var(--dur) var(--ease); text-decoration:none;
}
.btn:active { transform:translateY(1px); }
.btn-cta { background:var(--cta); color:var(--cta-fg); box-shadow:var(--shadow-gold); }
.btn-cta:hover { background:var(--cta-hover); box-shadow:0 8px 28px -6px rgba(214,122,11,0.5); }
.btn-cta:active { background:var(--cta-press); }
.btn-gold { background:var(--gold-500); color:var(--gold-cta-fg); }
.btn-gold:hover { background:var(--gold-400); }
.btn-ghost { background:transparent; color:var(--cream-100); border:1px solid var(--hairline); }
.btn-ghost:hover { background:rgba(214,122,11,.1); border-color:var(--gold-400); }
.btn-paper { background:var(--forest-700); color:var(--cream-100); }
.btn-paper:hover { background:var(--forest-800); }
.btn-wa { background:#25D366; color:#fff; }
.btn-wa:hover { background:#128C7E; }
.btn svg { width:16px; height:16px; }

/* ---- PILL BADGES ---- */
.pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:var(--r-pill);
  font:600 11px/1 var(--sans-body); letter-spacing:0.08em; text-transform:uppercase;
}
.pill-gold { background:rgba(214,122,11,0.14); color:var(--gold-400); border:1px solid var(--hairline); }
.pill-green { background:rgba(37,211,102,0.12); color:#25D366; border:1px solid rgba(37,211,102,0.28); }
.pill-red { background:rgba(239,68,68,0.12); color:#f87171; border:1px solid rgba(239,68,68,0.28); }
.pill-paper { background:var(--cream-200); color:var(--gold-700); border:1px solid var(--cream-300); }

/* ---- HEADER ---- */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0; transition:all 0.35s var(--ease);
}
.site-header.scrolled {
  background:rgba(22,39,26,.90); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline-soft); padding:14px 0;
  box-shadow:0 4px 32px rgba(17,32,26,0.35);
}
.hdr-row { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand-btn {
  display:flex; align-items:center; gap:12px; cursor:pointer;
  background:none; border:none; padding:0; text-decoration:none;
}
.brand-name-serif {
  font-family:var(--serif-display); font-weight:600; font-size:22px; line-height:1;
  color:var(--cream-100); letter-spacing:-0.01em;
}
.brand-name-serif span { color:var(--gold-500); font-style:italic; }
.brand-tag-text {
  display:block; font:600 8px/1 var(--sans-body); letter-spacing:0.3em;
  text-transform:uppercase; color:var(--gold-500); margin-top:4px;
}
.hdr-nav { display:flex; align-items:center; gap:24px; }
.nav-link {
  font:500 14px/1 var(--sans-body); color:var(--fg2); background:none; border:none;
  cursor:pointer; padding:4px 0; position:relative; transition:color var(--dur); text-decoration:none;
}
.nav-link:hover { color:var(--gold-400); }
.nav-link.is-active, .nav-link[aria-current="page"] { color:var(--gold-400); }
.lang-row { display:flex; align-items:center; gap:6px; }
.lang-btn {
  font:600 11px/1 var(--sans-body); letter-spacing:0.1em; text-transform:uppercase;
  background:none; border:none; cursor:pointer; padding:2px 3px;
  color:var(--fg3); transition:color var(--dur);
}
.lang-btn.is-active { color:var(--gold-500); }
.lang-btn:hover { color:var(--fg1); }
.lang-sep { color:var(--hairline); font-size:12px; }
.menu-toggle {
  display:none; background:none; border:1px solid var(--hairline-soft);
  border-radius:var(--r-md); padding:8px; cursor:pointer; color:var(--fg1); line-height:0;
}

/* Mobile menu */
.mobile-menu {
  position:fixed; inset:0; z-index:200;
  background:var(--forest-800); padding:24px 28px 40px;
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transition:opacity 0.28s var(--ease);
}
.mobile-menu.is-open { opacity:1; pointer-events:all; }
.mobile-close-btn {
  align-self:flex-end; background:none; border:none; cursor:pointer;
  color:var(--fg2); padding:4px; line-height:0;
  transition:color var(--dur);
}
.mobile-close-btn:hover { color:var(--gold-400); }
.mobile-nav-links { flex:1; display:flex; flex-direction:column; justify-content:center; gap:4px; }
.mobile-nav-btn {
  font-family:var(--serif-display); font-weight:600; font-size:clamp(32px,7vw,50px); line-height:1.2;
  color:var(--fg3); background:none; border:none; cursor:pointer;
  text-align:left; padding:8px 0; transition:color var(--dur);
}
.mobile-nav-btn:hover, .mobile-nav-btn.is-active { color:var(--gold-400); }
.mobile-footer-area { display:flex; flex-direction:column; gap:16px; }
.mobile-lang-row { display:flex; gap:16px; }
.mobile-lang-btn {
  font:600 14px/1 var(--sans-body); letter-spacing:0.1em; text-transform:uppercase;
  background:none; border:none; cursor:pointer; color:var(--fg3); transition:color var(--dur);
}
.mobile-lang-btn.is-active { color:var(--gold-500); }

@media (max-width:920px) {
  .hdr-nav { display:none; }
  .menu-toggle { display:flex; }
}

/* ---- HERO ---- */
.hero-sec {
  min-height:100vh; display:flex; align-items:center;
  background:radial-gradient(130% 80% at 50% -5%, var(--forest-600) 0%, var(--forest-700) 55%, var(--forest-900) 100%);
  padding:calc(var(--sp-10) + 30px) 0 var(--sp-9); position:relative; overflow:hidden;
}
.hero-kf {
  position:absolute; inset:28px; border:1px solid var(--hairline-soft); pointer-events:none;
}
.hero-kf::after {
  content:""; position:absolute; inset:7px; border:1px solid rgba(214,122,11,.1);
}
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.hero-text-col { display:flex; flex-direction:column; gap:28px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:10px; width:fit-content;
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  padding:8px 16px; background:rgba(214,122,11,.06);
}
.hero-badge-dot { width:6px; height:6px; background:var(--gold-500); border-radius:50%; }
.hero-ctas { display:flex; gap:14px; flex-wrap:wrap; margin-top:4px; }
.hero-trust { display:flex; gap:40px; padding-top:var(--sp-7); border-top:1px solid var(--hairline-soft); }
.hero-trust-item { display:flex; flex-direction:column; gap:4px; }
.hero-trust-n { font-family:var(--serif-display); font-weight:600; font-size:36px; line-height:1; color:var(--gold-500); }
.hero-trust-l { font:var(--t-caption); letter-spacing:0.1em; text-transform:uppercase; color:var(--fg3); }
.hero-img-col { position:relative; }
.hero-img-frame {
  aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--hairline-soft); box-shadow:var(--shadow-lg);
}
.hero-img-frame img { width:100%; height:100%; object-fit:cover; }
.hero-float-card {
  position:relative; z-index:2; margin-top:-56px; margin-left:16px; margin-right:16px;
  background:rgba(246,241,230,.97);
  border:1px solid var(--cream-300); border-radius:var(--r-lg); padding:22px 24px;
  box-shadow:var(--shadow-md);
}
.hero-float-quote { font:var(--t-quote); color:var(--forest-700); font-size:15px; line-height:1.5; margin:0 0 14px; }
.hero-float-author { display:flex; align-items:center; gap:12px; }
.hero-float-av {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:var(--forest-700); display:flex; align-items:center; justify-content:center;
  font-family:var(--serif-display); font-weight:600; font-size:12px; color:var(--gold-500);
}
.hero-float-name { font:600 12px/1.3 var(--sans-body); color:var(--ink-900); }
.hero-float-role { font:400 11px/1.3 var(--sans-body); color:var(--gold-700); margin-top:2px; }

/* ---- STATS STRIP ---- */
.stats-strip { background:var(--forest-800); border-top:1px solid var(--hairline-soft); border-bottom:1px solid var(--hairline-soft); }
.stats-row { display:flex; justify-content:center; }
.stat-cell { flex:1; max-width:300px; padding:36px 40px; text-align:center; position:relative; }
.stat-cell+.stat-cell::before { content:""; position:absolute; left:0; top:28px; bottom:28px; width:1px; background:var(--hairline-soft); }
.stat-n { font-family:var(--serif-display); font-weight:600; font-size:52px; line-height:1; color:var(--gold-500); display:block; }
.stat-k { font:var(--t-caption); letter-spacing:0.1em; text-transform:uppercase; color:var(--fg3); margin-top:8px; display:block; }

/* ---- SECTIONS ---- */
.sec { padding:var(--sp-9) 0; }
.sec-paper { background:var(--cream-100); color:var(--ink-900); }
.sec-deep { background:var(--forest-800); }
.sec-head { display:flex; flex-direction:column; gap:14px; margin-bottom:52px; }
.sec-head.centered { align-items:center; text-align:center; }

/* ---- COMPANY INTRO (paper) ---- */
.intro-split { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.intro-img { aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; position:relative; box-shadow:var(--shadow-md); }
.intro-img img { width:100%; height:100%; object-fit:cover; }
.intro-year-badge {
  position:absolute; bottom:20px; left:20px;
  background:rgba(246,241,230,.9); backdrop-filter:blur(8px);
  border:1px solid var(--cream-300); border-radius:var(--r-md); padding:16px 20px;
}
.intro-year-n { font-family:var(--serif-display); font-weight:600; font-size:42px; line-height:1; color:var(--forest-700); }
.intro-year-l { font:var(--t-caption); letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-400); margin-top:4px; }
.learn-more-link {
  display:inline-flex; align-items:center; gap:12px;
  font:600 12px/1 var(--sans-body); letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-600); background:none; border:none; cursor:pointer; padding:0;
  transition:color var(--dur);
}
.learn-more-link:hover { color:var(--gold-700); }
.learn-more-arrow {
  width:40px; height:40px; border-radius:50%; border:1px solid var(--cream-300);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--dur) var(--ease);
}
.learn-more-link:hover .learn-more-arrow { border-color:var(--gold-700); background:var(--cream-200); transform:translateX(3px); }

/* ---- PARTNERS ---- */
.partners-frame {
  border:1px solid var(--hairline-soft); border-radius:var(--r-lg);
  padding:32px 0; position:relative; overflow:visible;
}
.partners-label {
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background:var(--forest-700); padding:6px 20px; white-space:nowrap;
  border:1px solid var(--hairline-soft); border-radius:var(--r-pill);
}
.partners-track { overflow:hidden; }
.partners-belt {
  display:flex; align-items:center; gap:64px; width:max-content;
  animation:scroll-l 20s linear infinite;
  will-change:transform;
}
.partners-belt:hover { animation-play-state:paused; }
@keyframes scroll-l { from{transform:translateX(0)} to{transform:translateX(calc(-100% / 6))} }
.partner-name {
  font-family:var(--serif-display); font-weight:600; font-size:26px;
  color:var(--fg3); user-select:none; transition:color var(--dur); white-space:nowrap;
}
.partner-name:hover { color:var(--gold-400); }
.partners-fade { position:absolute; top:0; bottom:0; width:100px; pointer-events:none; z-index:1; }
.partners-fade.left  { left:0;  background:linear-gradient(90deg, var(--bg), transparent); }
.partners-fade.right { right:0; background:linear-gradient(-90deg, var(--bg), transparent); }

/* ---- PROBLEM ---- */
.problem-cards { display:flex; flex-direction:column; gap:14px; }
.problem-card {
  display:flex; align-items:flex-start; gap:18px;
  background:var(--surface); border:1px solid var(--hairline-soft);
  border-radius:var(--r-lg); padding:24px 28px;
  transition:all var(--dur) var(--ease);
}
.problem-card:hover { border-left:3px solid rgba(239,68,68,0.6); transform:translateX(4px); }
.problem-icon {
  width:42px; height:42px; flex-shrink:0; border-radius:var(--r-md);
  background:rgba(239,68,68,.12); display:flex; align-items:center; justify-content:center;
  color:#f87171;
}
.problem-warn {
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.25);
  border-radius:var(--r-lg); padding:22px 28px; text-align:center; margin-top:14px;
  font:700 15px/1.4 var(--sans-body); color:#fca5a5;
}

/* ---- RISK HOOK ---- */
.risk-hook {
  background:var(--forest-800); padding:var(--sp-8) 0;
  border-top:1px solid var(--hairline-soft); border-bottom:1px solid var(--hairline-soft);
  text-align:center; position:relative; overflow:hidden;
}
.risk-hook-dots {
  position:absolute; inset:0; opacity:.06;
  background-image:radial-gradient(var(--gold-500) 1px, transparent 1px);
  background-size:36px 36px;
}
.risk-hook blockquote {
  font:var(--t-h2); color:var(--cream-100); margin:0;
  letter-spacing:-0.01em; text-wrap:balance;
}
.risk-hook blockquote em { font-style:italic; color:var(--gold-400); }
.risk-hook blockquote .danger { color:#f87171; font-style:normal; }

/* ---- INFOGRAPHICS ---- */
.infograph-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.infograph-card {
  background:var(--surface); border:1px solid var(--hairline-soft);
  border-radius:var(--r-lg); padding:36px 32px; text-align:center;
}
.infograph-big { font-family:var(--serif-display); font-weight:600; font-size:64px; line-height:1; color:var(--gold-500); display:block; }
.infograph-label { font:var(--t-body); color:var(--fg2); margin-top:10px; text-wrap:balance; }

/* ---- CLAIM STORY ---- */
.claim-story-wrap {
  background:var(--surface); border:1px solid var(--hairline-soft);
  border-radius:var(--r-lg); overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr;
}
.claim-img { position:relative; min-height:400px; }
.claim-img img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; filter:brightness(0.75); }
.claim-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(26,46,28,.7), transparent 70%);
}
.claim-img-content { position:relative; z-index:1; padding:40px; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.claim-content { padding:48px 44px; display:flex; flex-direction:column; justify-content:center; gap:24px; }
.claim-advisor {
  display:flex; align-items:center; gap:12px;
  background:rgba(214,122,11,.08); border:1px solid var(--hairline-soft);
  border-radius:var(--r-md); padding:16px 20px;
}
.claim-av {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:var(--gold-500); display:flex; align-items:center; justify-content:center;
  font-family:var(--serif-display); font-weight:600; font-size:14px; color:var(--forest-800);
}
.claim-facts { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.claim-fact { background:rgba(214,122,11,.06); border:1px solid var(--hairline-soft); border-radius:var(--r-md); padding:16px 18px; }
.claim-fact-icon { color:var(--gold-500); margin-bottom:10px; }
.claim-fact-h { font:600 13px/1 var(--sans-body); color:var(--fg1); margin-bottom:4px; }
.claim-fact-p { font:var(--t-small); color:var(--fg3); }

/* ---- CASE STUDIES HOME (paper) ---- */
.case-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.case-card {
  background:var(--cream-50); border:1px solid var(--cream-300);
  border-radius:var(--r-lg); overflow:hidden;
  transition:all var(--dur) var(--ease);
}
.case-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--gold-700); }
.case-card-img { aspect-ratio:16/9; overflow:hidden; position:relative; }
.case-card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s var(--ease); }
.case-card:hover .case-card-img img { transform:scale(1.06); }
.case-card-body { padding:28px 28px 24px; }
.case-amount { font-family:var(--serif-display); font-weight:600; font-size:38px; line-height:1; color:var(--forest-700); }
.case-link-btn {
  display:inline-flex; align-items:center; gap:8px;
  font:600 12px/1 var(--sans-body); letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-600); background:none; border:none; cursor:pointer; padding:0;
  margin-top:18px; transition:all var(--dur);
}
.case-link-btn:hover { color:var(--gold-700); gap:12px; }

/* ---- PRODUCT LINES ---- */
.products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.product-card {
  background:var(--surface); border:1px solid var(--hairline-soft);
  border-radius:var(--r-lg); padding:32px; cursor:pointer;
  transition:all var(--dur) var(--ease); display:flex; flex-direction:column; gap:16px;
}
.product-card:hover { border-color:var(--hairline); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.product-card-icon {
  width:48px; height:48px; border-radius:var(--r-md); background:rgba(214,122,11,.12);
  display:flex; align-items:center; justify-content:center; color:var(--gold-500);
}
.product-card-title { font:var(--t-h3); color:var(--cream-100); letter-spacing:-0.01em; }
.product-card-desc { font:var(--t-small); color:var(--fg2); flex:1; text-wrap:pretty; }
.product-card-more { display:flex; align-items:center; gap:6px; font:600 12px/1 var(--sans-body); letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-500); background:none; border:none; cursor:pointer; padding:0; transition:gap var(--dur); }
.product-card:hover .product-card-more { gap:10px; }

/* ---- INDUSTRIES ---- */
.ind-card {
  background:var(--cream-50); border:1px solid var(--cream-300);
  border-radius:var(--r-lg); padding:36px 32px;
  display:flex; flex-direction:column; gap:16px;
  position:relative; overflow:hidden;
  transition:all var(--dur) var(--ease);
}
.ind-card::before {
  content:''; position:absolute; top:0; left:0; width:3px; height:100%;
  background:linear-gradient(180deg,var(--gold-700),var(--gold-500));
}
.ind-card:hover { border-color:rgba(214,122,11,.4); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.ind-card-icon {
  width:52px; height:52px; border-radius:var(--r-md);
  background:rgba(164,92,8,.1); border:1px solid var(--cream-300);
  display:flex; align-items:center; justify-content:center; color:var(--gold-700); flex:none;
}
.ind-card-sub { font:var(--t-caption); letter-spacing:0.08em; color:var(--gold-700); margin:0; text-transform:uppercase; }
.ind-card-title { font:var(--t-h3); color:var(--ink-900); letter-spacing:-0.01em; margin-top:6px; }
.ind-card-desc { font:var(--t-small); color:var(--ink-500); flex:1; text-wrap:pretty; margin:0; }
.ind-pills { display:flex; flex-wrap:wrap; gap:6px; padding-top:14px; border-top:1px solid var(--cream-300); }

/* ---- SERVICES ---- */
.svc-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.svc-card {
  background:var(--forest-800); border:1px solid var(--hairline-soft);
  border-radius:var(--r-lg); padding:36px 32px;
  display:flex; flex-direction:column; gap:20px;
  transition:all var(--dur) var(--ease);
}
.svc-card:hover { border-color:var(--hairline); transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.svc-num { font:700 52px/1 var(--serif-display); color:rgba(214,122,11,.18); }
.svc-title { font:var(--t-h3); color:var(--cream-100); letter-spacing:-.01em; margin:0; }
.svc-sub { font:600 11px/1.4 var(--sans-body); letter-spacing:.08em; text-transform:uppercase; color:var(--gold-400); margin:4px 0 0; }
.svc-rule { height:1px; background:var(--hairline-soft); margin:4px 0; }
.svc-desc { font:var(--t-small); color:var(--fg2); text-wrap:pretty; margin:0; line-height:1.65; flex:1; }
@media (max-width:680px) { .svc-grid { grid-template-columns:1fr; } }

/* ---- SERVICE HERO CARD + SUPPORT GRID ---- */
.svc-hero-card {
  background:var(--forest-700); border:1px solid var(--hairline);
  border-left:3px solid var(--gold-500);
  border-radius:var(--r-lg); padding:52px 56px;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;
  margin-bottom:20px;
}
.svc-hero-left { display:flex; flex-direction:column; gap:14px; }
.svc-hero-num { font:700 88px/1 var(--serif-display); color:rgba(214,122,11,.2); }
.svc-hero-title { font:700 clamp(26px,2.6vw,40px)/1.1 var(--sans-body); color:var(--cream-100); letter-spacing:-.02em; }
.svc-hero-sub { font:600 11px/1.4 var(--sans-body); letter-spacing:.12em; text-transform:uppercase; color:var(--gold-400); }
.svc-hero-right { display:flex; flex-direction:column; gap:20px; padding-top:8px; }
.svc-hero-desc { font:400 17px/1.75 var(--sans-body); color:var(--fg2); margin:0; max-width:54ch; text-wrap:pretty; }
.svc-hero-flow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--hairline-soft); }
.svc-hero-flow-label { font:600 10px/1 var(--sans-body); letter-spacing:.14em; text-transform:uppercase; color:var(--fg3); white-space:nowrap; }
.svc-flow-step { font:600 11px/1 var(--sans-body); color:var(--gold-400); letter-spacing:.04em; }
.svc-flow-arrow { color:var(--fg3); font-size:13px; }

.svc-support-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.svc-support-card {
  background:var(--forest-800); border:1px solid var(--hairline-soft);
  border-radius:var(--r-lg); padding:28px 26px;
  display:flex; flex-direction:column; gap:12px;
  transition:all var(--dur) var(--ease);
}
.svc-support-card:hover { border-color:var(--hairline); transform:translateY(-2px); }
.svc-support-num { font:700 40px/1 var(--serif-display); color:rgba(214,122,11,.18); }
.svc-support-title { font:700 16px/1.2 var(--sans-body); color:var(--cream-100); letter-spacing:-.01em; }
.svc-support-sub { font:600 10px/1.3 var(--sans-body); letter-spacing:.1em; text-transform:uppercase; color:var(--gold-400); margin:0; }
.svc-support-desc { font:var(--t-small); color:var(--fg2); text-wrap:pretty; flex:1; margin:0; line-height:1.6; }
@media (max-width:900px) { .svc-hero-card { grid-template-columns:1fr; gap:28px; padding:36px 32px; } }
@media (max-width:680px) { .svc-support-grid { grid-template-columns:1fr; } }
.svc-rows { display:flex; flex-direction:column; }
.svc-row-item { display:grid; grid-template-columns:120px 1fr; gap:0 72px; padding:72px 0; border-top:1px solid var(--hairline-soft); align-items:start; }
.svc-row-item:last-child { border-bottom:1px solid var(--hairline-soft); }
.svc-row-num { font:700 96px/1 var(--serif-display); color:rgba(214,122,11,.14); text-align:right; padding-top:6px; user-select:none; }
.svc-row-body { display:flex; flex-direction:column; gap:28px; }
.svc-row-en { font:700 clamp(22px,2.2vw,34px)/1.1 var(--sans-body); color:var(--cream-100); letter-spacing:-.02em; }
.svc-row-cn { font:700 clamp(17px,1.7vw,24px)/1.3 var(--sans-body); color:var(--gold-400); margin-top:5px; }
.svc-row-sub { font:600 11px/1.4 var(--sans-body); letter-spacing:.12em; text-transform:uppercase; color:var(--fg3); margin:8px 0 0; }
.svc-row-desc-en { font:400 16px/1.78 var(--sans-body); color:var(--fg2); max-width:58ch; margin:0; }
.svc-row-desc-cn { font:400 15px/1.75 var(--sans-body); color:var(--fg3); max-width:52ch; margin:8px 0 0; }
.svc-callout { background:rgba(214,122,11,.05); border:1px solid var(--hairline-soft); border-left:2px solid var(--gold-500); padding:20px 24px; display:flex; flex-direction:column; gap:12px; }
.svc-callout-label { font:600 10px/1 var(--sans-body); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400); }
.svc-callout-list { display:flex; flex-direction:column; gap:9px; list-style:none; margin:0; padding:0; }
.svc-callout-list li { display:flex; align-items:flex-start; gap:10px; font:var(--t-small); color:var(--fg2); line-height:1.55; }
.svc-callout-diamond { width:5px; height:5px; background:var(--gold-500); transform:rotate(45deg); flex:none; margin-top:5px; }
@media (max-width:760px) {
  .svc-row-item { grid-template-columns:1fr; gap:12px; padding:48px 0; }
  .svc-row-num { font-size:56px; text-align:left; }
}

/* ---- INDUSTRY TRUST STRIP ---- */
.ind-trust-strip { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 32px; margin-top:16px; }
.ind-trust-item { display:flex; align-items:center; gap:9px; font:600 12px/1 var(--sans-body); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-600); }
.ind-trust-dot { width:5px; height:5px; background:var(--gold-700); transform:rotate(45deg); flex:none; }

/* ---- SPECIALITIES ---- */
.spec-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.spec-card {
  background:var(--forest-800); border:1px solid var(--hairline-soft);
  border-radius:var(--r-lg); padding:36px 32px;
  display:flex; flex-direction:column; gap:16px;
  position:relative; overflow:hidden;
  transition:all var(--dur) var(--ease);
}
.spec-card::before {
  content:''; position:absolute; top:0; left:0; width:3px; height:100%;
  background:linear-gradient(180deg,var(--gold-500),var(--gold-700));
}
.spec-card:hover { border-color:var(--hairline); transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.spec-card-icon {
  width:52px; height:52px; border-radius:var(--r-md);
  background:rgba(214,122,11,.1); border:1px solid var(--hairline-soft);
  display:flex; align-items:center; justify-content:center; color:var(--gold-500); flex:none;
}
.spec-card-who { font:var(--t-caption); letter-spacing:0.08em; color:var(--gold-400); margin:0; text-transform:uppercase; }
.spec-card-title { font:var(--t-h3); color:var(--cream-100); letter-spacing:-0.01em; }
.spec-card-desc { font:var(--t-small); color:var(--fg2); flex:1; text-wrap:pretty; margin:0; }
.spec-bullets { display:flex; flex-direction:column; gap:7px; margin:0; padding:14px 0 0; list-style:none; border-top:1px solid var(--hairline-soft); }
.spec-bullets li { display:flex; align-items:flex-start; gap:9px; font:var(--t-small); color:var(--fg2); }
.spec-bullet-dot { flex:none; width:5px; height:5px; background:var(--gold-500); transform:rotate(45deg); margin-top:6px; }
@media (max-width:680px) { .spec-grid { grid-template-columns:1fr; } }
/* ---- MOBILE CARD GRIDS: stack to 1 column (mobile only, desktop untouched) ---- */
@media (max-width:680px) {
  .infograph-grid,
  .case-cards-grid,
  .products-grid,
  .howwework-grid,
  .ind-overview-grid,
  .kb-grid,
  .people-grid,
  .guide-layout,
  .guide-items,
  .claims-steps,
  .form-2col,
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns:1fr !important; }
  .ind-overview-grid > div,
  .guide-items > div { border-right:none !important; }
  .guide-layout { gap:32px !important; }
  .guide-layout > div:first-child { position:static !important; top:auto !important; }
  .solutions-tabs { display:grid !important; grid-template-columns:1fr 1fr; width:100% !important; }
  .solutions-tab { padding:11px 8px !important; text-align:center; line-height:1.25; }
}

/* Product modal */
.prod-modal {
  background:var(--forest-700); border:1px solid var(--hairline-soft);
  border-radius:var(--r-lg); width:100%; max-width:840px;
  max-height:90vh; display:flex; flex-direction:column;
  animation:rise-in 0.25s var(--ease);
}
@keyframes rise-in { from{opacity:0;transform:translateY(14px)} }
.prod-modal-hdr {
  padding:28px 32px; background:var(--forest-800);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  border-bottom:1px solid var(--hairline-soft);
}
.prod-modal-body { padding:24px 32px; overflow-y:auto; flex:1; }
.prod-modal-ftr {
  padding:18px 32px; background:var(--forest-800);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  border-top:1px solid var(--hairline-soft);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.prod-item-card {
  background:var(--surface); border:1px solid var(--hairline-soft);
  border-radius:var(--r-md); padding:18px 22px;
  margin-bottom:10px; transition:border-color var(--dur);
}
.prod-item-card:hover { border-color:var(--hairline); }
.prod-benefit { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; background:rgba(214,122,11,.1); border:1px solid var(--hairline-soft); border-radius:var(--r-pill); font:600 11px/1 var(--sans-body); color:var(--gold-400); }
.modal-close-btn {
  position:absolute; top:14px; right:14px; background:rgba(214,122,11,.1);
  border:1px solid var(--hairline-soft); border-radius:var(--r-md); padding:7px; cursor:pointer; color:var(--fg2); line-height:0; transition:all var(--dur);
}
.modal-close-btn:hover { background:rgba(214,122,11,.2); color:var(--fg1); }

/* ---- VISION MISSION (paper) ---- */
.vm-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.vm-block { display:flex; flex-direction:column; gap:20px; }
.vm-body { font:400 18px/1.7 var(--sans-body); color:var(--ink-600); text-wrap:pretty; }
.values-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:40px; }
.value-card {
  background:var(--cream-50); border:1px solid var(--cream-300);
  border-radius:var(--r-lg); padding:24px 16px; text-align:center;
  transition:all var(--dur) var(--ease);
}
.value-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.value-icon {
  width:42px; height:42px; border-radius:var(--r-md); background:var(--cream-200);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-600); margin:0 auto 14px;
}
.value-title { font:600 14px/1.2 var(--sans-body); color:var(--ink-900); margin-bottom:6px; }
.value-desc { font:var(--t-small); color:var(--ink-400); }

/* ---- CTA BAND ---- */
.cta-band {
  background:radial-gradient(110% 130% at 50% 0%, var(--forest-600), var(--forest-900) 75%);
  padding:var(--sp-9) 0; position:relative; overflow:hidden;
}
.cta-band-kf { position:absolute; inset:32px; border:1px solid var(--hairline-soft); pointer-events:none; }
.cta-band-kf::after { content:""; position:absolute; inset:7px; border:1px solid rgba(214,122,11,.09); }
.cta-inner { text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px; position:relative; }
.cta-acts { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.cta-phone { font-family:var(--serif-display); font-weight:600; font-size:32px; line-height:1; color:var(--cream-100); transition:color var(--dur); }
.cta-phone:hover { color:var(--gold-400); }
.cta-phone-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; }

/* ---- FOOTER ---- */
.site-footer { background:var(--forest-900); border-top:1px solid var(--hairline-soft); padding:56px 0 32px; }
.ftr-top { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--hairline-soft); }
.ftr-col h4 { font:600 11px/1 var(--sans-body); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-500); margin:0 0 18px; }
.ftr-link {
  display:block; font:400 14px/1.4 var(--sans-body); color:var(--fg2);
  text-decoration:none; margin:0 0 11px; background:none; border:none; cursor:pointer;
  text-align:left; padding:0; transition:color var(--dur);
}
.ftr-link:hover { color:var(--gold-400); }
.ftr-about-text { font:400 14px/1.6 var(--sans-body); color:var(--fg3); margin-top:12px; }
.ftr-social { display:flex; gap:10px; margin-top:20px; }
.social-ic {
  width:36px; height:36px; border-radius:50%;
  background:var(--surface); border:1px solid var(--hairline-soft);
  display:flex; align-items:center; justify-content:center;
  font:600 10px/1 var(--sans-body); color:var(--fg3); text-decoration:none;
  transition:all var(--dur);
}
.social-ic:hover { background:var(--gold-500); color:var(--forest-800); border-color:var(--gold-500); }
.ftr-bottom { display:flex; justify-content:space-between; padding-top:22px; font:400 12px/1 var(--sans-body); color:var(--fg3); flex-wrap:wrap; gap:12px; }

/* ---- INNER PAGES ---- */
.page-hero {
  padding:calc(var(--sp-10) + 32px) 0 var(--sp-8);
  background:radial-gradient(130% 80% at 50% -5%, var(--forest-600), var(--forest-700) 60%, var(--forest-800));
  position:relative; overflow:hidden;
}
.page-hero-kf { position:absolute; inset:24px; border:1px solid var(--hairline-soft); pointer-events:none; }
.solutions-tabs { display:flex; gap:4px; background:var(--surface); border:1px solid var(--hairline-soft); border-radius:var(--r-pill); padding:4px; width:fit-content; }
.solutions-tab { padding:10px 24px; border-radius:var(--r-pill); font:600 13px/1 var(--sans-body); border:none; cursor:pointer; transition:all var(--dur); background:none; color:var(--fg2); }
.solutions-tab.is-active { background:var(--gold-500); color:var(--forest-800); }

/* ---- CONTACT FORM ---- */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.form-row { margin-bottom:18px; }
.form-label { display:block; font:600 11px/1 var(--sans-body); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-600); margin-bottom:7px; }
.form-input, .form-select, .form-textarea {
  width:100%; background:var(--cream-50); border:1px solid var(--cream-300); border-radius:var(--r-md);
  padding:12px 14px; font:400 15px/1 var(--sans-body); color:var(--ink-900);
  transition:border-color var(--dur), box-shadow var(--dur);
}
.form-textarea { min-height:110px; resize:vertical; line-height:1.6; font-size:15px; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(214,122,11,.18);
}
.form-success { text-align:center; padding:40px 20px; }
.form-success-icon { width:60px; height:60px; border-radius:50%; background:rgba(31,138,91,.12); color:#1F8A5B; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }

/* ---- WHATSAPP FAB ---- */
.wa-fab {
  position:fixed; bottom:32px; right:32px; z-index:150;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 32px rgba(37,211,102,.45);
  text-decoration:none; transition:transform var(--dur) var(--ease), box-shadow var(--dur);
}
.wa-fab:hover { transform:scale(1.1); box-shadow:0 12px 44px rgba(37,211,102,.55); }

/* ---- NAV DROPDOWN ---- */
.nav-dropdown { position:relative; display:flex; align-items:center; }
.nav-dropdown-menu {
  display:none; position:absolute; top:100%; left:50%;
  transform:translateX(-50%);
  background:var(--forest-800); border:1px solid var(--hairline-soft);
  border-radius:var(--r-md); min-width:195px;
  padding:10px 6px 6px;
  flex-direction:column; gap:2px; box-shadow:var(--shadow-lg); z-index:200;
}
.nav-dropdown:hover .nav-dropdown-menu { display:flex; }
.nav-dropdown-item {
  padding:10px 14px; border-radius:6px;
  font:600 12px/1 var(--sans-body); letter-spacing:.04em;
  text-align:left; background:none; border:none; cursor:pointer;
  color:var(--fg2); transition:all var(--dur); display:flex; align-items:center; gap:9px;
}
.nav-dropdown-item:hover { background:rgba(214,122,11,.12); color:var(--cream-100); }
.nav-dropdown-item svg { color:var(--gold-500); flex:none; }

/* ---- RESPONSIVE ---- */
@media (max-width:860px) {
  .values-grid-4 { grid-template-columns:repeat(2,1fr) !important; }
  .hero-grid, .intro-split, .claim-story-wrap, .vm-grid, .contact-grid { grid-template-columns:1fr; gap:40px; }
  .products-grid, .infograph-grid { grid-template-columns:1fr 1fr; }
  .case-cards-grid { grid-template-columns:1fr; }
  .values-grid { grid-template-columns:repeat(3,1fr); }
  .ftr-top { grid-template-columns:1fr 1fr; }
  .stats-row { flex-wrap:wrap; }
  .hero-img-col { order:-1; max-width:400px; margin:0 auto; }
}
@media (max-width:600px) {
  .values-grid-4 { grid-template-columns:1fr !important; }
  .wrap { padding:0 20px; }
  .products-grid, .infograph-grid, .values-grid { grid-template-columns:1fr; }
  .ftr-top { grid-template-columns:1fr; }
  .hero-ctas { flex-direction:column; }
  .hero-trust { gap:24px; }
  .cta-acts { flex-direction:column; align-items:center; }
}

/* ── routing ── */
.page{display:none}.page.active{display:block}
/* ── bilingual ── */
.cn-only{display:none}
body.lang-cn .cn-only{display:revert}
body.lang-cn .en-only{display:none!important}

/* ═══════════════ LIGHT THEME OVERRIDES · 2026-07-07 ═══════════════
   亮色改版：令牌翻转。深色只保留 footer / CTA band / mobile menu（品牌压底）。 */
:root{
  --bg:var(--cream-50); --bg-deep:var(--cream-100);
  --surface:#FFFFFF;
  --fg1:var(--ink-900); --fg2:rgba(28,26,20,.72); --fg3:rgba(28,26,20,.52);
  --accent:var(--gold-700);
  --hairline:rgba(164,92,8,.38); --hairline-soft:rgba(164,92,8,.18);
  --divider-dark:var(--cream-300); --keyline:var(--gold-700);
  --gold-400:#9B7E33; --gold-500:#8A6F2C;   /* 亮底上的金色文字要加深才够对比 */
  --shadow-sm:0 1px 3px rgba(17,32,26,.08);
  --shadow-md:0 8px 28px -6px rgba(17,32,26,.12);
  --shadow-lg:0 24px 64px -18px rgba(17,32,26,.16);
  --shadow-gold:0 6px 24px -6px rgba(214,122,11,.30);
}
/* 底部全亮化（2026-07-07 第二轮：footer/CTA band/手机菜单也走亮色） */
.cta-band{background:radial-gradient(110% 130% at 50% 0%, #FFFFFF, var(--cream-200) 75%)}
.cta-phone{color:var(--ink-900)}
.cta-phone:hover{color:var(--gold-700)}
.site-footer{background:var(--cream-200);border-top:1px solid var(--hairline-soft)}
.mobile-menu{background:rgba(251,248,241,.98)}
.mobile-nav-btn,.mobile-lang-btn{color:var(--fg1)}
::selection{background:#D67A0B;color:#F2E3CE}
/* header 亮玻璃 */
.site-header.scrolled{background:rgba(251,248,241,.92);backdrop-filter:blur(14px);box-shadow:0 4px 24px rgba(17,32,26,.08);border-bottom:1px solid var(--hairline-soft)}
.brand-name-serif{color:var(--fg1)}
.nav-dropdown-menu{background:#FFFFFF;border:1px solid var(--cream-300);box-shadow:var(--shadow-md)}
/* hero 亮化 + typography-first */
.hero-sec{background:radial-gradient(130% 80% at 50% -5%, #FFFFFF 0%, var(--cream-50) 55%, var(--cream-200) 100%)}
@media(min-width:861px){.hero-grid{grid-template-columns:1.15fr .85fr}}
@media(max-width:860px){
  .hero-img-col{order:2;max-width:none}
  .ind-strip-row{flex-direction:column;align-items:flex-start}
  .ind-strip-row .ind-strip-sep{display:none}
}
.hero-img-col{display:flex;align-items:center}
.hero-float-card{margin:0;background:#FFFFFF;padding:36px 38px;border-left:3px solid #D67A0B}
.hero-float-quote{font-size:clamp(19px,1.8vw,24px);line-height:1.5}
.hero-float-av{width:44px;height:44px;object-fit:cover}
.page-hero{background:radial-gradient(130% 80% at 50% -5%, #FFFFFF, var(--cream-50) 60%, var(--cream-200))}
/* 组件硬编码修正 */
.svc-title{color:var(--fg1)}
.solutions-tab.is-active{background:#D67A0B;color:#F2E3CE}
.btn-gold{background:#D67A0B;color:#F2E3CE}
.btn-gold:hover{background:#D7BC6E}
.btn-ghost{color:var(--fg1);border-color:var(--hairline)}
.btn-ghost:hover{background:rgba(164,92,8,.08);border-color:var(--gold-700)}
.form-input,.form-select,.form-textarea{background:#FFFFFF;color:var(--ink-900);border-color:var(--cream-300)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--ink-400)}
.hero-badge{background:rgba(164,92,8,.07)}
.hero-badge-dot{background:var(--gold-700)}
.hero-trust-n{color:var(--gold-700)}
.wa-fab{box-shadow:0 8px 32px rgba(37,211,102,.35)}
/* 深色卡片 → 亮色（CSS 类背景，令牌翻不到的） */
.svc-card,.svc-hero-card,.svc-support-card,.spec-card{background:#FFFFFF;border-color:var(--cream-300)}
.svc-hero-card{background:var(--cream-100);border-left:3px solid #D67A0B}
.svc-title,.svc-hero-title,.svc-support-title,.svc-row-en,.product-card-title,.spec-card-title{color:var(--fg1)}
.stats-strip,.sec-deep,.partners-label,.risk-hook{background:var(--cream-100)}
.risk-hook blockquote{color:var(--forest-700)}
.nav-dropdown-item:hover{color:var(--fg1);background:rgba(164,92,8,.08)}
.prod-modal{background:#FFFFFF;border-color:var(--cream-300)}
.prod-modal-hdr,.prod-modal-ftr{background:var(--cream-100);border-color:var(--cream-300)}

/* ═══════════════ EDITORIAL LAYER · 2026-07-07 ═══════════════
   动效 + 排版升级：大字揭幕 / 跑马灯 / 数字滚动 / 颗粒 / 描边字 */
:root{ --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; }

/* 纸感颗粒（全站，极淡） */
body::after{
  content:""; position:fixed; inset:-50%; pointer-events:none; z-index:2000;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.035; mix-blend-mode:multiply;
}

/* 等宽微标签 */
.micro{font:500 10.5px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-400)}
.micro b{color:var(--gold-700); font-weight:500}

/* Hero 大字 + 逐行揭幕 */
.hero-display{font:600 clamp(42px,6vw,92px)/1.04 var(--serif-display); letter-spacing:-.025em; color:var(--fg1); margin:0; text-wrap:balance}
.hero-display em{font-style:italic; color:var(--gold-700)}
.reveal-line{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.reveal-line>span{display:inline-block; transform:translateY(115%)}
@media (prefers-reduced-motion: no-preference){
  .reveal-line>span{animation:lineUp 1s cubic-bezier(.19,1,.22,1) both}
  .hero-fade{opacity:0; animation:fadeUp .9s cubic-bezier(.19,1,.22,1) both}
  @keyframes lineUp{to{transform:none}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
}

/* 跑马灯 */
.marquee{overflow:hidden; display:flex; user-select:none}
.marquee-track{display:flex; align-items:center; gap:44px; padding-right:44px; flex-shrink:0; min-width:100%;
  animation:marq 30s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-100%)}}
.marquee a{display:flex; align-items:center; gap:14px; font:500 12px/1 var(--sans-body); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-600); text-decoration:none; white-space:nowrap; transition:color var(--dur)}
.marquee a:hover{color:var(--gold-700)}
.marquee .mq-dot{width:5px; height:5px; background:var(--gold-600); transform:rotate(45deg); flex-shrink:0}
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none} .marquee{flex-wrap:wrap} }

/* 滚动揭幕升级：更远的位移 + 奢侈 easing */
@media (prefers-reduced-motion: no-preference){
  [data-ani].vis{animation:ani-up .85s cubic-bezier(.19,1,.22,1) both}
}
@keyframes ani-up{from{opacity:0; transform:translateY(30px)}to{opacity:1; transform:none}}

/* CTA 箭头轻推 + 磁性过渡 */
.btn{will-change:transform}
.btn-cta svg{transition:transform .35s cubic-bezier(.19,1,.22,1)}
.btn-cta:hover svg{transform:translateX(4px)}

/* Footer 巨型描边字 */
.ftr-wordmark{
  font:600 clamp(72px,12vw,180px)/0.95 var(--serif-display); letter-spacing:-.02em; text-align:center;
  color:transparent; -webkit-text-stroke:1.5px rgba(164,92,8,.32); padding:40px 0 8px; user-select:none;
}

/* 内页 hero 标题入场 */
@media (prefers-reduced-motion: no-preference){
  .page-hero h1, .page-hero .eyebrow, .page-hero .lead{opacity:0; animation:fadeUp .9s cubic-bezier(.19,1,.22,1) both}
  .page-hero .eyebrow{animation-delay:.05s}
  .page-hero h1{animation-delay:.15s}
  .page-hero .lead{animation-delay:.3s}
}

/* hero 底部 scroll 提示 */
.scroll-hint{position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font:500 9.5px/1 var(--mono); letter-spacing:.3em; color:var(--ink-400); text-transform:uppercase}
.scroll-hint::after{content:""; display:block; width:1px; height:26px; background:linear-gradient(var(--gold-600),transparent);
  margin:10px auto 0; animation:hintDrop 1.8s cubic-bezier(.19,1,.22,1) infinite}
@keyframes hintDrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:860px){.scroll-hint{display:none}}

/* ═══════════ THE FINE PRINT · 概念层 v2 · 2026-07-07 ═══════════
   创意母题：顾问的笔在保单上留下的痕迹 —— 划线 / 印章 / 批注 / 账本线 */

/* 手绘金笔划线（hero 关键词，自己画出来） */
.pen-wrap{position:relative; display:inline-block}
.pen-underline{position:absolute; left:-2%; bottom:-.02em; width:104%; height:.14em; overflow:visible; pointer-events:none}
.pen-underline path{fill:none; stroke:#B6953F; stroke-width:3; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:.9}
@media (prefers-reduced-motion: no-preference){
  .pen-underline path{stroke-dasharray:100; stroke-dashoffset:100; animation:penDraw .85s cubic-bezier(.65,0,.35,1) 1.15s forwards}
}
@keyframes penDraw{to{stroke-dashoffset:0}}

/* 旋转印章（EST. 1997 环形文字） */
.seal{position:absolute; top:-64px; right:-26px; width:116px; height:116px; z-index:3; filter:drop-shadow(0 4px 14px rgba(17,32,26,.10))}
.seal text{font:500 10px var(--mono); letter-spacing:.32em; fill:var(--gold-700); text-transform:uppercase}
.seal .seal-spin{transform-origin:60px 60px; animation:sealSpin 28s linear infinite}
.seal .seal-core{fill:var(--gold-600)}
@keyframes sealSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.seal .seal-spin{animation:none}}
@media (max-width:860px){.seal{display:none}}

/* Field Note 批注卡（quote 卡文档化） */
.hero-float-card{transform:rotate(-1.4deg); transition:transform .55s cubic-bezier(.19,1,.22,1)}
.hero-float-card:hover{transform:rotate(0deg)}
.hero-float-card::before{content:"\201C"; position:absolute; top:-34px; left:18px; font:600 120px/1 var(--serif-display); color:rgba(164,92,8,.18); pointer-events:none}
.doc-head{display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--cream-300); padding-bottom:11px; margin-bottom:16px; padding-right:60px}

/* 账本双细线（hero 数字行） */
.hero-trust{border-top:3px double var(--hairline)}

/* 导航下划线自左画出 */
.hdr-nav .nav-link{background-image:linear-gradient(var(--gold-700),var(--gold-700)); background-repeat:no-repeat; background-size:0% 1px; background-position:0 92%; transition:background-size .4s cubic-bezier(.19,1,.22,1), color var(--dur)}
.hdr-nav .nav-link:hover, .hdr-nav .nav-link.is-active, .hdr-nav .nav-link[aria-current="page"]{background-size:100% 1px}

/* 索引编号列表（四件事 · 替代卡片网格） */
.sec-head-split{display:flex; justify-content:space-between; align-items:flex-end; gap:28px; margin-bottom:40px}
@media (max-width:860px){.sec-head-split{flex-direction:column; align-items:flex-start}}
.index-list{border-top:1px solid var(--hairline)}
.index-row{display:grid; grid-template-columns:104px 1.05fr 1.35fr 56px; gap:34px; align-items:center;
  padding:36px 10px; border-bottom:1px solid var(--hairline-soft); text-decoration:none;
  transition:background .4s cubic-bezier(.19,1,.22,1), padding .4s cubic-bezier(.19,1,.22,1)}
.index-row:hover{background:#FFFFFF; padding-left:22px}
.ix-num{font:600 58px/1 var(--serif-display); color:rgba(164,92,8,.16); -webkit-text-stroke:1px rgba(164,92,8,.55); transition:color .4s}
.index-row:hover .ix-num{color:var(--gold-600)}
.ix-title{font:600 27px/1.15 var(--serif-display); letter-spacing:-.01em; color:var(--ink-900); margin:0}
.ix-sub{font:600 10.5px/1.5 var(--sans-body); letter-spacing:.13em; text-transform:uppercase; color:var(--gold-700); margin:7px 0 0}
.ix-desc{font:var(--t-small); color:var(--fg2); margin:0; text-wrap:pretty}
.ix-arrow{font-size:24px; color:var(--gold-700); opacity:0; transform:translateX(-8px); transition:all .4s cubic-bezier(.19,1,.22,1)}
.index-row:hover .ix-arrow{opacity:1; transform:none}
.ix-tag{padding:4px 12px; border:1px solid var(--gold-600); border-radius:var(--r-pill); font:700 9px/1 var(--sans-body);
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-700); background:rgba(164,92,8,.07); white-space:nowrap}
@media (max-width:860px){
  .index-row{grid-template-columns:56px 1fr; gap:16px; padding:26px 4px}
  .ix-num{font-size:34px}
  .ix-desc{grid-column:2}
  .ix-arrow{display:none}
  .index-row:hover{padding-left:4px}
}

/* 全场宣言（逐词浮现） */
.manifesto{padding:120px 0; background:var(--cream-200); border-top:1px solid var(--hairline-soft); border-bottom:1px solid var(--hairline-soft)}
.mani-line{font:500 italic clamp(32px,4.8vw,68px)/1.22 var(--serif-display); letter-spacing:-.01em; color:var(--ink-900); margin:0; text-wrap:balance}
.mani-line .w{display:inline-block}
.mani-line .w.gold{color:var(--gold-700)}
@media (prefers-reduced-motion: no-preference){
  [data-view] .w{opacity:0; transform:translateY(30px) rotate(1deg); filter:blur(6px);
    transition:opacity .7s, transform .85s, filter .85s; transition-timing-function:cubic-bezier(.19,1,.22,1);
    transition-delay:calc(var(--i)*95ms)}
  [data-view].in .w{opacity:1; transform:none; filter:none}
}

/* CTA 四角对位标记（印刷 register marks） */
.cta-band .reg{position:absolute; width:14px; height:14px; pointer-events:none; z-index:1}
.cta-band .reg::before,.cta-band .reg::after{content:""; position:absolute; background:var(--gold-600); opacity:.5}
.cta-band .reg::before{left:50%; top:0; width:1px; height:100%}
.cta-band .reg::after{top:50%; left:0; height:1px; width:100%}

/* ════════════════════════════════════════════════════════════
   SPEC ALIGNMENT · 2026-08-05
   对齐 AY Shield Design System（03 - Resources/Brand/design-system/）
   ① 色值换成规范值  ② footer + CTA band 恢复绿锚
   规范原则：warm cream is the ground, deep green anchors
             (hero / footer / table headers), gold is accent.
   纯追加覆盖层，不改上面任何规则。
   ════════════════════════════════════════════════════════════ */
:root {
  /* 绿 — 规范主绿 #1C3A2A */
  --forest-900:#12271B; --forest-800:#17311F; --forest-700:#1C3A2A;
  --forest-600:#234534; --forest-500:#2A523C;
  /* 米 — 规范主米 #F7F4EF */
  --cream-50:#FFFFFF; --cream-100:#F7F4EF; --cream-200:#EFEAE0; --cream-300:#E2DBCC;
  /* 墨 — 规范暖绿墨 #20362A（不再用暖褐墨） */
  --ink-900:#20362A; --ink-600:rgba(28,58,42,.62); --ink-400:rgba(28,58,42,.42);
  /* 金 — 规范值（浅底上用深金保对比） */
  --gold-700:#8A6B22; --gold-600:#A9822B; --gold-300:#DCC178;
  /* 状态色 — 规范新增 */
  --ok:#2F7A4D; --warn:#B4801F; --bad:#A33B2E;
}
/* 浅底上的金色文字：对齐规范的深金梯度 */
:root { --gold-400:#A9822B; --gold-500:#8A6B22; }


/* ── 深绿只做「小地方」：文字 / 图标 / 线，不成块（2026-08-05 Yong-En 定） ──
   规范里绿是 anchor，但本站按 Yong-En 的要求只用在细节层：
   标题、卡片标题、卡片图标线条。背景一律不动，cream 保持主导。 */
.h2, .h3, h2.h2, .h1, .ix-title, .mani-line,
.ind-card-title, .value-title, .svc-title, .svc-hero-title,
.svc-support-title, .product-card-title, .spec-card-title{
  color: var(--forest-700);
}
/* hero 那句大字不动（它有自己的墨色 + 金色斜体设计） */
.hero-display, .hero-display em{ color:inherit; }

/* 卡片 / 列表图标线条：墨黑 → 深绿 */
.ix-card svg[stroke="currentColor"],
.ind-card svg[stroke="currentColor"],
.value-item svg[stroke="currentColor"],
.svc-card svg[stroke="currentColor"]{ color: var(--forest-600); }


/* ════════════════════════════════════════════════════════════════════
   RETRO PALETTE · 2026-08-11
   对齐 03 - Resources/Brand/design-system/（08-10 复古定案）
     主绿 #1C3A2A · 二号绿 #3C5633 · 复古米 #F2E3CE · CTA 橘 #D67A0B
   🔴 金 #C8A84B 全系统退役 —— --gold-* 令牌在这里重指到橘，
      上面 1000 行的旧引用自动跟着换，别再新写 --gold-*。
   本块 = ① 色值 token ② footer / CTA band / 表头绿锚 ③ 纸纹底
   纯追加，整块删掉即回滚（同批还 sed 过 rgba 金色字面量，见 git diff）。
   ════════════════════════════════════════════════════════════════════ */
:root{
  /* ── 绿 ── */
  --forest-900:#14291D; --forest-800:#183221; --forest-700:#1C3A2A;
  --forest-600:#3C5633; --forest-500:#4A6740;
  --sage:#3C5633;                  /* 二号绿：表头 / 次级块，绝不当主锚 */

  /* ── 米（复古暖纸） ── */
  --cream-50:#F8F0E2; --cream-100:#F2E3CE; --cream-200:#EAD8BE; --cream-300:#DCC7A6;

  /* ── 墨：暖绿墨，不用暖褐 ── */
  --ink-900:#20362A; --ink-600:rgba(32,54,42,.68); --ink-400:rgba(32,54,42,.46);

  /* ── 橘：唯一强调色 ── */
  --orange-700:#A45C08; --orange-600:#BE6B09; --orange-500:#D67A0B; --orange-300:#E8A452;
  --amber-deep:#A45C08;            /* 米底上的大字/eyebrow：#D67A0B 配米只有 2.5:1，不够 */

  /* ── 金令牌 → 橘（退役兼容层） ── */
  --gold-700:#A45C08; --gold-600:#BE6B09; --gold-500:#D67A0B;
  --gold-400:#A45C08; --gold-300:#E8A452; --gold-200:#E8A452;

  /* ── 派生 ── */
  --bg:var(--cream-100); --bg-deep:var(--cream-200);
  --surface:#FDF9F2;               /* 卡片：纯白在复古米上会跳，压成暖白 */
  --surface-paper:var(--cream-100); --surface-paper-raised:var(--cream-50);
  --fg1:var(--ink-900); --fg2:rgba(32,54,42,.72); --fg3:rgba(32,54,42,.52);
  --fg-on-paper:var(--ink-900); --fg-on-paper-2:var(--ink-600); --fg-on-paper-3:var(--ink-400);
  --accent:var(--amber-deep); --accent-on-paper:var(--amber-deep);
  --hairline:rgba(214,122,11,.38); --hairline-soft:rgba(214,122,11,.18);
  --keyline:var(--orange-500); --divider-dark:var(--cream-300); --border-paper:var(--cream-300);
  --cta:#D67A0B; --cta-hover:#BE6B09; --cta-press:#A45C08;
  --cta-fg:var(--cream-100); --gold-cta-fg:var(--cream-100);
  --shadow-gold:0 6px 24px -6px rgba(214,122,11,.30);
}

/* ── 纯白面 → 暖白 / 复古米（07-07 亮化层里硬写的 #FFFFFF） ── */
.svc-card,.svc-support-card,.spec-card,.prod-modal,.nav-dropdown-menu,
.form-input,.form-select,.form-textarea,.hero-float-card{ background:var(--surface); }
.svc-hero-card{ background:var(--cream-100); }
.hero-sec{ background:radial-gradient(130% 80% at 50% -5%, var(--cream-50) 0%, var(--cream-100) 55%, var(--cream-200) 100%); }
.page-hero{ background:radial-gradient(130% 80% at 50% -5%, var(--cream-50), var(--cream-100) 60%, var(--cream-200)); }
.site-header.scrolled{ background:rgba(242,227,206,.93); }
.mobile-menu{ background:rgba(242,227,206,.98); }
.stats-strip,.sec-deep,.partners-label,.risk-hook,
.prod-modal-hdr,.prod-modal-ftr{ background:var(--cream-100); }

/* ── 橘做行动色：按钮 / 标签 / 描边，不做大面积填充 ── */
.btn-gold,.solutions-tab.is-active{ background:var(--orange-500); color:var(--cream-100); }
.btn-gold:hover{ background:var(--orange-600); }
.hero-float-card{ border-left-color:var(--orange-500); }
.svc-hero-card{ border-left-color:var(--orange-500); }
::selection{ background:var(--orange-500); color:var(--cream-100); }

/* ════ 绿锚 ① footer ════
   令牌就地翻转 —— footer 里内联 style 的 var() 自动跟着变，不用逐页改 9 份 HTML */
.site-footer{
  background:var(--forest-700);
  border-top:1px solid rgba(214,122,11,.35);
  --ink-900:#F2E3CE;
  --fg1:#F2E3CE; --fg2:rgba(242,227,206,.72); --fg3:rgba(242,227,206,.58);
  --gold-700:var(--orange-300); --gold-500:var(--orange-300); --gold-400:var(--orange-300);
  --hairline:rgba(242,227,206,.34); --hairline-soft:rgba(242,227,206,.16);
  --surface:rgba(242,227,206,.07);
}
.site-footer .ftr-link:hover{ color:var(--orange-300); }
.site-footer .social-ic:hover{ background:var(--orange-500); color:var(--cream-100); border-color:var(--orange-500); }
.ftr-wordmark{ -webkit-text-stroke:1.5px rgba(242,227,206,.20); }

/* ════ 绿锚 ② CTA band（app.js 注入） ════ */
.cta-band{
  background:radial-gradient(110% 130% at 50% 0%, #26472F, #14291D 78%);
  --ink-900:#F2E3CE;
  --fg1:#F2E3CE; --fg2:rgba(242,227,206,.74); --fg3:rgba(242,227,206,.56);
  --gold-700:var(--orange-300); --gold-500:var(--orange-300); --gold-400:var(--orange-300);
  --hairline:rgba(242,227,206,.34); --hairline-soft:rgba(242,227,206,.16);
}
.cta-band .h1,.cta-band .h2,.cta-band .cta-phone{ color:var(--cream-100); }
.cta-band .lead{ color:rgba(242,227,206,.74); }
.cta-band .cta-phone:hover{ color:var(--orange-300); }
.cta-band .reg::before,.cta-band .reg::after{ background:var(--orange-500); }
.cta-band-kf{ border-color:rgba(242,227,206,.16); }
.cta-band-kf::after{ border-color:rgba(214,122,11,.20); }

/* ════ 绿锚 ③ 数据表表头 = 二号绿 ════
   表头是内联 background:var(--bg-deep) + color:var(--fg3)，同样用令牌翻转接管 */
thead{ --bg-deep:var(--sage); --fg3:rgba(242,227,206,.82); }

/* ════ 纸纹底（全站）════
   ⚠️ baseFrequency 必须高（.6–.9）。调到 .05 会糊成一团团云斑，像水渍不像纸。
   z-index:1 → 压在内容之上、header(100)/颗粒(2000) 之下；multiply 才有纤维感。 */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  mix-blend-mode:multiply; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
}