/* ============================================================
   SHANYUAN — Engineering Editorial Design System v4 (offline build)
   Reference: HANNOVER MESSE editorial-industrial style
   Tokens / base / 24 component modules / responsive
   ============================================================ */

:root{
  --ink:      #0B1220;   /* 墨蓝黑 */
  --ink-2:    #1B2530;
  --muted:    #5A6B7B;
  --faint:    #8B99A6;
  --red:      #E30613;   /* 信号红 */
  --red-dk:   #B50510;
  --line:     #E3E8EC;
  --mist:     #F3F5F7;
  --paper:    #FFFFFF;
  --wa:       #25D366;
  --head: "Archivo", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 4px;
  --max: 1500px;
  --shadow: 0 18px 44px rgba(11,18,32,.10);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--body); font-size:16px; line-height:1.7; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--head); color:var(--ink); margin:0; }
p{ margin:0; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }
.small{ font-size:.875rem; }

/* ============ 1. TOPBAR ============ */
.topbar{ background:var(--ink); color:rgba(255,255,255,.88); font-size:12.5px; }
.topbar-in{ max-width:var(--max); margin:0 auto; padding:8px 24px; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.topbar a{ color:rgba(255,255,255,.88); }
.topbar a:hover{ color:var(--red); }
.topbar .tb-left{ display:flex; gap:20px; align-items:center; }
.topbar .tb-right{ color:rgba(255,255,255,.55); }
.tb-wa::before{ content:""; display:inline-block; width:11px; height:11px; margin-right:6px; vertical-align:-1px; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2325D366"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.4A10 10 0 1 0 12 2zm5 14.3c-.2.6-1.2 1.1-1.7 1.2-.4 0-1 .1-1.6-.1-1.5-.4-3-1.7-4.9-3.7-1.8-1.9-2.8-3.6-3-4.4-.1-.5-.1-1.1 0-1.6.1-.5.6-1.2 1.2-1.7l.8-.7c.2-.2.5-.3.8-.2l.6.2c.2.1.4.3.6.7l.8 1.9c.1.2.1.5 0 .8l-.3.6c-.2.3-.4.5-.4.7-.1.2 0 .5.1.7.7 1.2 2 2.6 3.4 3.4.3.2.6.3.9.1l.7-.5c.2-.2.5-.3.8-.2l1.9.8c.4.1.6.4.7.6.1.2.1.6-.1 1z"/></svg>') center/contain no-repeat; }
.tb-mail::before{ content:""; display:inline-block; width:11px; height:11px; margin-right:6px; vertical-align:-1px; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2"><rect x="3" y="5" width="18" height="14" rx="1"/><path d="M4 7l8 6 8-6"/></svg>') center/contain no-repeat; }

/* ============ 2. HEADER ============ */
.header{ position:sticky; top:0; z-index:90; background:rgba(255,255,255,.97); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.header-in{ max-width:var(--max); margin:0 auto; padding:0 24px; height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ display:flex; align-items:center; gap:12px; }
.logo-img{ width:auto; height:44px; display:block; }
.logo-mark{ width:40px; height:40px; background:var(--ink); color:#fff; font-family:var(--head); font-weight:900; font-size:15px; display:flex; align-items:center; justify-content:center; border-radius:3px; letter-spacing:-.02em; }
.logo-txt{ font-family:var(--head); font-weight:900; font-size:21px; letter-spacing:-.01em; color:var(--ink); line-height:1; }
.logo-txt small{ display:block; font-family:var(--body); font-weight:600; font-size:9.5px; letter-spacing:.26em; color:var(--muted); margin-top:3px; text-transform:uppercase; }
.nav{ display:flex; align-items:center; gap:2px; }
.nav a{ font-family:var(--head); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); padding:10px 14px; position:relative; }
.nav a::after{ content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .18s ease; }
.nav a:hover::after, .nav a.active::after{ transform:scaleX(1); }
.nav a:hover, .nav a.active{ color:var(--red); }
.nav .has-sub{ position:relative; }
.nav .sub{ position:absolute; top:100%; left:0; min-width:230px; background:#fff; border:1px solid var(--line); border-top:2px solid var(--red); box-shadow:var(--shadow); padding:8px 0; opacity:0; visibility:hidden; transform:translateY(8px); transition:.18s ease; }
.nav .has-sub:hover .sub{ opacity:1; visibility:visible; transform:none; }
.nav .sub a{ display:block; padding:9px 18px; font-size:12px; letter-spacing:.04em; }
.nav .sub a::after{ display:none; }
.nav .sub a:hover{ color:var(--red); background:var(--mist); }
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--head); font-weight:700; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; padding:14px 26px; border-radius:var(--r); transition:.16s ease; cursor:pointer; border:1px solid transparent; }
.btn-red{ background:var(--red); color:#fff; }
.btn-red:hover{ background:var(--red-dk); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:var(--ink-2); }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-white{ background:#fff; color:var(--ink); }
.btn-white:hover{ background:#EFF1F3; }
.btn-wa{ background:var(--wa); color:#fff; }
.btn-wa:hover{ filter:brightness(.94); }
.btn-sm{ padding:10px 18px; font-size:11.5px; }
.header .btn{ padding:12px 22px; font-size:12px; }
.burger{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; }

/* ============ 3. HERO ============ */
.hero{ position:relative; background:var(--ink); color:#fff; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,18,32,.97) 0%, rgba(11,18,32,.86) 40%, rgba(11,18,32,.42) 72%, rgba(11,18,32,.25) 100%), url('IMG') center/cover no-repeat; }
.hero-in{ position:relative; max-width:var(--max); margin:0 auto; padding:clamp(64px,9vw,110px) 24px clamp(48px,6vw,72px); }
.hero-eyebrow{ display:inline-block; font-family:var(--head); font-weight:700; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--red); border:1px solid rgba(227,6,19,.55); padding:6px 12px; background:rgba(227,6,19,.08); border-radius:2px; }
.hero h1{ color:#fff; font-weight:900; letter-spacing:-.02em; line-height:1.03; font-size:clamp(2.1rem,5.2vw,3.9rem); max-width:920px; margin:20px 0 0; text-transform:uppercase; }
.hero .hero-sub{ color:rgba(255,255,255,.88); font-size:clamp(1rem,1.5vw,1.15rem); max-width:640px; margin:22px 0 0; line-height:1.65; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
.hero-meta{ margin-top:34px; display:flex; gap:30px; flex-wrap:wrap; }
.hero-meta .hm{ border-left:2px solid var(--red); padding-left:12px; }
.hero-meta b{ display:block; font-family:var(--head); font-weight:800; font-size:1.05rem; letter-spacing:.02em; }
.hero-meta span{ color:rgba(255,255,255,.62); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
/* hero 数据带 */
.statsband{ position:relative; background:var(--ink); color:#fff; border-top:1px solid rgba(255,255,255,.15); }
.statsband-in{ max-width:var(--max); margin:0 auto; padding:26px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.statsband b{ font-family:var(--head); font-weight:800; font-size:clamp(1.7rem,3vw,2.3rem); line-height:1; letter-spacing:-.01em; display:block; }
.statsband span{ display:block; margin-top:8px; color:rgba(255,255,255,.62); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
/* 页面级 hero */
.hero-page{ background:var(--ink); color:#fff; border-bottom:1px solid rgba(255,255,255,.1); }
.hero-page .wrap{ padding:clamp(46px,6vw,72px) 24px clamp(34px,4vw,50px); }
.hero-page h1{ color:#fff; font-weight:900; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(1.8rem,4vw,3rem); line-height:1.05; }
.hero-page p{ color:rgba(255,255,255,.8); max-width:720px; margin-top:14px; }

/* ============ 4. BREADCRUMB ============ */
.crumbs{ max-width:var(--max); margin:0 auto; padding:20px 24px 12px; display:flex; align-items:center; gap:10px; font-family:var(--head); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.crumbs a{ color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:7px; transition:color .18s ease; border-bottom:1px solid transparent; }
.crumbs a:hover{ color:var(--red); border-bottom-color:var(--red); }
.crumbs .crumb-home{ color:var(--ink); }
.crumbs .crumb-home .ico{ width:13px; height:13px; stroke:var(--red); }
.crumbs a.crumb-home:hover .ico{ stroke:var(--red); }
.crumbs .sep{ color:var(--line); font-size:13px; font-weight:400; line-height:1; transform:translateY(1px); }
.crumbs .cur{ color:var(--ink); font-weight:800; letter-spacing:.10em; }
@media (max-width:700px){ .crumbs{ font-size:11px; gap:7px; } .crumbs .crumb-home span{ display:none; } }
.crumbs a{ color:var(--faint); }
.crumbs a:hover{ color:var(--red); }
.crumbs span{ margin:0 8px; color:var(--line); }

/* ============ 5. SECTION ============ */
.sec{ padding:clamp(52px,7vw,84px) 0; }
.sec-mist{ background:var(--mist); }
.sec-ink{ background:var(--ink); color:#fff; }
.sec-ink h2{ color:#fff; }
.sec-ink p{ color:rgba(255,255,255,.78); }
.sec-head{ max-width:800px; margin-bottom:clamp(28px,4vw,44px); }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--head); font-weight:700; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--red); }
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--red); }
.sec-head.center .eyebrow::after{ content:""; width:26px; height:2px; background:var(--red); }
.sec-head h2{ margin:14px 0 0; font-weight:800; letter-spacing:-.015em; line-height:1.08; font-size:clamp(1.6rem,3.2vw,2.5rem); }
.sec-head p{ margin:14px 0 0; color:var(--muted); font-size:1.02rem; }
.sec-head.center p{ margin-left:auto; margin-right:auto; }

/* ============ 6. SPLIT ============ */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,70px); align-items:center; }
.split h2{ margin:12px 0 0; font-weight:800; letter-spacing:-.015em; line-height:1.1; font-size:clamp(1.5rem,2.8vw,2.2rem); }
.split p{ margin-top:16px; color:var(--muted); }
.split .btn-row{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; }
.ticks{ list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; }
.ticks li{ position:relative; padding-left:26px; color:var(--ink-2); font-size:.95rem; }
.ticks li::before{ content:""; position:absolute; left:0; top:.34em; width:14px; height:14px; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23E30613" stroke-width="3" stroke-linecap="round"><path d="M4 12.5l5 5L20 6.5"/></svg>') center/contain no-repeat; }
.ticks.one{ grid-template-columns:1fr; }

/* ============ 7. CARDS ============ */
.grid{ display:grid; gap:22px; }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.g2{ grid-template-columns:repeat(2,1fr); }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .18s ease, transform .18s ease; }
.card:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }
.card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--mist); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.card:hover .card-media img{ transform:scale(1.05); }
.card-tag{ position:absolute; top:12px; left:12px; background:rgba(11,18,32,.88); color:#fff; font-family:var(--head); font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:5px 9px; border-radius:2px; }
.card-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.card-body h3{ font-weight:800; font-size:1.16rem; letter-spacing:-.01em; }
.card-body p{ margin:9px 0 0; color:var(--muted); font-size:.93rem; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; }
.chip{ font-family:var(--head); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line); background:#fff; padding:4px 9px; border-radius:2px; }
.link-arw{ margin-top:auto; padding-top:16px; font-family:var(--head); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:8px; }
.link-arw::after{ content:"↗"; font-size:14px; transition:transform .15s ease; }
.link-arw:hover{ color:var(--red); }
.link-arw:hover::after{ transform:translate(3px,-3px); }

/* ============ 8. NUMBERS / FEATURES ============ */
.nums{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.num{ border-top:3px solid var(--ink); padding-top:16px; }
.num .n{ font-family:var(--head); font-weight:800; font-size:.95rem; color:var(--red); letter-spacing:.12em; }
.num h3{ margin:10px 0 0; font-weight:800; font-size:1.08rem; letter-spacing:-.01em; }
.num p{ margin:8px 0 0; color:var(--muted); font-size:.9rem; }

/* ============ 9. SPEC TABLE ============ */
.spec{ width:100%; border-collapse:collapse; font-size:.95rem; background:#fff; }
.spec th{ text-align:left; font-family:var(--head); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:12px 16px; border-bottom:2px solid var(--ink); background:var(--mist); }
.spec td{ padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.spec td:first-child{ font-family:var(--head); font-weight:600; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); width:38%; }
.spec tr:last-child td{ border-bottom:0; }

/* ============ 10. TIMELINE / PROCESS ============ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px 42px; counter-reset:step; }
.step{ position:relative; padding:22px 0 24px; border-top:2px solid var(--line); }
.step::before{ counter-increment:step; content:counter(step, decimal-leading-zero); font-family:var(--head); font-weight:900; font-size:1.05rem; color:var(--red); letter-spacing:-.02em; display:inline-block; margin-right:12px; }
.step b{ display:inline; font-family:var(--head); font-weight:800; font-size:1.04rem; letter-spacing:-.01em; color:var(--ink); }
.step span{ display:block; margin-top:10px; color:var(--muted); font-size:.88rem; line-height:1.6; }
.step:hover::before{ color:var(--red); }
.steps-4,.steps-6{ display:grid; counter-reset:step; }
.steps-4{ grid-template-columns:repeat(4,1fr); }
.steps-6{ grid-template-columns:repeat(6,1fr); gap:0 26px; }
.steps-6 .step{ padding:20px 0 22px; }
.steps-6 .step::after{ content:""; position:absolute; top:20px; bottom:20px; right:-13px; width:1px; background:var(--line); }
.steps-6 .step:last-child::after{ display:none; }
.steps-6 .step span{ font-size:.8rem; line-height:1.5; }

/* ============ 11. GALLERY ============ */
.gal-main{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--r); border:1px solid var(--line); background:var(--mist); }
.gal-main img{ width:100%; height:100%; object-fit:cover; }
.gal-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px; }
.gal-thumbs button{ border:2px solid transparent; border-radius:var(--r); overflow:hidden; padding:0; cursor:pointer; background:none; aspect-ratio:4/3; }
.gal-thumbs button.active{ border-color:var(--red); }
.gal-thumbs img{ width:100%; height:100%; object-fit:cover; }

/* ============ 12. FAQ ============ */
.faq{ max-width:1180px; display:grid; grid-template-columns:1fr 1fr; gap:12px 26px; align-items:start; }
.faq details{ border:1px solid var(--line); border-radius:var(--r); background:#fff; margin-bottom:0; overflow:hidden; height:fit-content; }
.faq summary{ list-style:none; cursor:pointer; padding:18px 22px; font-family:var(--head); font-weight:700; font-size:.98rem; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--head); font-size:1.3rem; color:var(--red); font-weight:700; transition:transform .2s ease; }
.faq details[open] summary::after{ content:"−"; }
.faq details[open] summary{ border-bottom:1px solid var(--line); }
.faq .faq-a{ padding:16px 22px 20px; color:var(--muted); font-size:.95rem; }
@media (max-width:900px){ .faq{ grid-template-columns:1fr; max-width:860px; } }

/* ============ 13. QUOTES ============ */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.quote{ border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; background:#fff; display:flex; flex-direction:column; }
.quote .q{ font-size:1rem; line-height:1.65; color:var(--ink-2); }
.quote .q::before{ content:"“"; font-family:var(--head); font-size:2.4rem; color:var(--red); line-height:0; display:block; margin-bottom:10px; }
.quote .who{ margin-top:auto; padding-top:18px; border-top:1px solid var(--line); font-family:var(--head); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.quote .who b{ display:block; color:var(--ink); font-size:12.5px; letter-spacing:.02em; text-transform:none; }

/* ============ 14. CERTS / LOGOS ============ */
.certs{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.cert{ border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:14px 20px; font-family:var(--head); font-weight:700; font-size:12.5px; letter-spacing:.06em; color:var(--ink-2); display:inline-flex; align-items:center; gap:10px; }
.cert::before{ content:""; width:22px; height:22px; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23E30613" stroke-width="2"><circle cx="12" cy="9" r="5.5"/><path d="M8.5 13.5L7 21l5-2.5L17 21l-1.5-7.5"/></svg>') center/contain no-repeat; }
.logos{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:center; opacity:.75; }
.logos span{ font-family:var(--head); font-weight:800; font-size:15px; letter-spacing:-.01em; color:var(--ink-2); padding:8px 16px; border:1px dashed var(--line); border-radius:2px; }

/* ============ 15. NEWS ============ */
.news{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.news-item{ border-top:2px solid var(--ink); padding-top:14px; }
.news-item time{ font-family:var(--head); font-size:11px; letter-spacing:.14em; color:var(--red); text-transform:uppercase; }
.news-item h3{ margin:10px 0 0; font-weight:800; font-size:1.08rem; letter-spacing:-.01em; line-height:1.3; }
.news-item p{ margin:8px 0 0; color:var(--muted); font-size:.9rem; }

/* ============ 16. DOWNLOADS ============ */
.dls{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.dl{ border:1px solid var(--line); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; background:#fff; }
.dl .dl-type{ font-family:var(--head); font-size:10.5px; font-weight:700; letter-spacing:.14em; color:var(--red); text-transform:uppercase; }
.dl h3{ margin:10px 0 0; font-weight:800; font-size:1.05rem; }
.dl p{ margin:8px 0 0; color:var(--muted); font-size:.88rem; }
.dl .btn{ margin-top:18px; align-self:flex-start; }

/* ============ 17. TOOL / CALCULATOR ============ */
.tool{ background:var(--ink); color:#fff; border-radius:var(--r); padding:clamp(26px,4vw,40px); }
.tool h3{ color:#fff; font-weight:800; font-size:1.25rem; }
.tool p{ color:rgba(255,255,255,.75); font-size:.92rem; margin-top:8px; }
.tool .tool-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; }
.tool label{ display:block; font-family:var(--head); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:6px; }
.tool select,.tool input{ width:100%; padding:11px 12px; border:1px solid rgba(255,255,255,.25); border-radius:var(--r); background:rgba(255,255,255,.08); color:#fff; font-family:var(--body); font-size:.95rem; }
.tool select option{ color:var(--ink); }
.tool .result{ margin-top:20px; padding:16px 20px; background:rgba(255,255,255,.08); border-left:3px solid var(--red); font-family:var(--head); font-size:1.1rem; }
.tool .result b{ color:#fff; }
.tool .result small{ display:block; color:rgba(255,255,255,.55); font-family:var(--body); font-size:.8rem; margin-top:4px; }

/* ============ 18. CTA BAND ============ */
.cta{ background:var(--red); color:#fff; padding:clamp(52px,7vw,76px) 0; text-align:center; position:relative; overflow:hidden; }
.cta::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(0,0,0,.22), rgba(0,0,0,0) 55%); }
.cta .wrap{ position:relative; }
.cta h2{ color:#fff; font-weight:900; text-transform:uppercase; letter-spacing:-.015em; font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.06; }
.cta p{ margin:12px 0 0; color:rgba(255,255,255,.9); }
.cta .cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:28px; }

/* ============ 18b. VIDEO CARDS (Plant in Action) ============ */
.vgrid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px; max-width:1180px; margin:0 auto; }
.vcard{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease; }
.vcard:hover{ transform:translateY(-4px); box-shadow:0 26px 60px rgba(11,18,32,.16); }
.vmedia{ position:relative; aspect-ratio:16/9; background:#0a1020; }
.vmedia video{ width:100%; height:100%; object-fit:cover; display:block; }
.vbadge{ position:absolute; top:12px; right:12px; background:rgba(10,16,32,.78); color:#fff; font-family:var(--head); font-weight:700; font-size:12px; letter-spacing:.08em; padding:5px 11px; border-radius:999px; backdrop-filter:blur(4px); }
.vcard figcaption{ padding:18px 22px 20px; border-top:1px solid var(--line); }
.vcard figcaption h3{ margin:0 0 6px; font-size:1.02rem; font-weight:800; color:var(--ink); }
.vcard figcaption p{ margin:0; font-size:.9rem; color:var(--ink-2); line-height:1.55; }
@media (max-width:900px){ .vgrid{ grid-template-columns:1fr; max-width:640px; } }

/* ============ 19. FORM ============ */
.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,3.5vw,38px); }
.form-card h3{ font-weight:800; font-size:1.2rem; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
.form-grid .full{ grid-column:1/-1; }
.form-card label{ display:block; font-family:var(--head); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.form-card input,.form-card select,.form-card textarea{ width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); font-family:var(--body); font-size:.95rem; color:var(--ink); background:#fff; }
.form-card input:focus,.form-card textarea:focus,.form-card select:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(11,18,32,.07); }
.form-card textarea{ min-height:130px; resize:vertical; }
.form-note{ margin-top:14px; font-size:.82rem; color:var(--faint); }

/* ============ 20. FOOTER ============ */
.footer{ background:var(--ink); color:rgba(255,255,255,.72); }
.footer-top{ max-width:var(--max); margin:0 auto; padding:clamp(44px,6vw,64px) 24px 36px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:34px; }
.footer h4{ color:#fff; font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px; }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ padding:4px 0; font-size:.9rem; }
.footer a:hover{ color:var(--red); }
.footer .f-brand p{ margin-top:14px; font-size:.88rem; color:rgba(255,255,255,.55); max-width:300px; }
.footer .f-contact li{ padding:6px 0; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); }
.footer-bottom-in{ max-width:var(--max); margin:0 auto; padding:20px 24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem; color:rgba(255,255,255,.45); }
.footer-bottom a{ color:rgba(255,255,255,.45); }
.footer-bottom a:hover{ color:var(--red); }

/* ============ 21. RICH TEXT ============ */
.prose{ max-width:820px; }
.prose h2{ margin:34px 0 14px; font-weight:800; font-size:1.5rem; letter-spacing:-.01em; }
.prose h3{ margin:26px 0 10px; font-weight:800; font-size:1.16rem; }
.prose p{ margin:0 0 16px; color:var(--ink-2); }
.prose ul{ margin:0 0 18px; padding-left:22px; }
.prose li{ margin-bottom:8px; color:var(--ink-2); }
.prose table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:.93rem; }
.prose th,.prose td{ border:1px solid var(--line); padding:11px 14px; text-align:left; vertical-align:top; }
.prose th{ background:var(--mist); font-family:var(--head); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.prose .note{ background:var(--mist); border-left:3px solid var(--red); padding:16px 20px; border-radius:var(--r); margin:18px 0; color:var(--ink-2); font-size:.94rem; }

/* ============ 22. TOC ============ */
.toc{ position:sticky; top:96px; border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:20px 22px; }
.toc h4{ font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.toc a{ display:block; padding:6px 0; font-size:.88rem; color:var(--ink-2); border-bottom:1px dashed var(--line); }
.toc a:last-child{ border-bottom:0; }
.toc a:hover{ color:var(--red); }

/* ============ 23. MAP / CONTACT LIST ============ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.cbox{ border:1px solid var(--line); border-radius:var(--r); padding:24px; background:#fff; }
.cbox .ic{ width:40px; height:40px; border-radius:50%; background:var(--mist); display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:14px; color:var(--red); }
.cbox h3{ font-weight:800; font-size:1.05rem; }
.cbox p{ margin:8px 0 0; color:var(--muted); font-size:.92rem; }
.cbox a{ color:var(--red); font-weight:600; }

/* ============ 24. RELATED / MISC ============ */
.related{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.related .card-media{ aspect-ratio:4/3; }
.anchor{ scroll-margin-top:96px; }
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:95; width:54px; height:54px; border-radius:50%; background:var(--wa); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.25); }
.wa-float svg{ width:28px; height:28px; fill:#fff; }
.top{ position:fixed; right:22px; bottom:88px; z-index:95; width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff; border:0; cursor:pointer; font-size:16px; opacity:0; visibility:hidden; transition:.2s; }
.top.show{ opacity:1; visibility:visible; }
body{ opacity:0; transition:opacity .25s ease; }
body.loaded{ opacity:1; }

/* ============ RESPONSIVE ============ */
@media (max-width:1280px){
  .steps-6{ grid-template-columns:repeat(3,1fr); gap:26px; row-gap:10px; }
  .steps-6 .step::after{ display:none; }
}
@media (max-width:1100px){
  .g4{ grid-template-columns:repeat(3,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:10px; }
  .steps-6{ grid-template-columns:repeat(2,1fr); row-gap:10px; }
  .steps-4{ grid-template-columns:repeat(2,1fr); row-gap:10px; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:980px){
  .nav{ display:none; }
  .burger{ display:block; }
  .nav.open{ display:flex; position:fixed; inset:72px 0 0 0; background:#fff; flex-direction:column; align-items:flex-start; padding:20px 24px; gap:6px; overflow:auto; z-index:89; border-top:1px solid var(--line); }
  .nav.open a{ display:block; width:100%; padding:13px 0; font-size:14px; border-bottom:1px solid var(--line); }
  .nav.open a::after{ display:none; }
  .nav.open .sub{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0 0 6px 16px; min-width:0; }
  .split{ grid-template-columns:1fr; }
  .g3,.g2,.news,.dls,.quotes,.related{ grid-template-columns:1fr 1fr; }
  .statsband-in{ grid-template-columns:repeat(2,1fr); }
  .form-grid{ grid-template-columns:1fr; }
  .tool .tool-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .header .btn{ display:none; }
}
@media (max-width:640px){
  .g3,.g2,.g4,.news,.dls,.quotes,.related,.nums{ grid-template-columns:1fr; }
  .steps,.steps-6,.steps-4{ grid-template-columns:1fr; row-gap:4px; }
  .ticks{ grid-template-columns:1fr; }
  .topbar .tb-right{ display:none; }
  .wrap{ padding:0 18px; }
  .footer-top{ grid-template-columns:1fr; gap:26px; }
}

/* ============ 25. NEWSROOM ============ */
.news-grid{ grid-template-columns:repeat(2,1fr); }
.ncard{ background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .18s ease, transform .18s ease; }
.ncard:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }
.ncard-media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--mist); }
.ncard-media img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.ncard:hover .ncard-media img{ transform:scale(1.05); }
.ncard-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.ncard-meta{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.ncard-date{ font-family:var(--head); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--red); border-left:3px solid var(--red); padding-left:8px; }
.ncard-tag{ font-family:var(--head); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--ink); padding:3px 8px; border-radius:2px; }
.ncard-body h3{ font-weight:800; font-size:1.14rem; letter-spacing:-.01em; line-height:1.32; }
.ncard-body h3 a{ color:var(--ink); }
.ncard-body h3 a:hover{ color:var(--red); }
.ncard-body p{ margin:9px 0 0; color:var(--muted); font-size:.92rem; }
/* article meta bar */
.nmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:16px 0 4px; border-top:1px solid var(--line); margin-top:-6px; font-family:var(--head); font-size:12px; letter-spacing:.05em; }
.nmeta-date time{ font-weight:800; color:var(--red); text-transform:uppercase; letter-spacing:.1em; }
.nmeta-author{ color:var(--ink-2); font-weight:600; }
.nmeta-tag{ background:var(--mist); border:1px solid var(--line); padding:3px 10px; border-radius:2px; font-weight:700; text-transform:uppercase; font-size:10.5px; letter-spacing:.08em; color:var(--ink-2); }
.nmeta-type{ color:var(--faint); text-transform:uppercase; font-size:10.5px; letter-spacing:.1em; }
/* article prose */
.article-prose{ max-width:880px; }
.article-prose figure{ margin:22px 0; }
.article-prose figure img{ border:1px solid var(--line); border-radius:var(--r); }
.article-prose figcaption{ margin-top:8px; font-size:.82rem; color:var(--faint); }
.article-prose blockquote{ margin:22px 0; padding:16px 22px; border-left:3px solid var(--red); background:var(--mist); border-radius:var(--r); color:var(--ink-2); }
.article-prose blockquote p:last-child{ margin-bottom:0; }
/* author / sources box */
.authbox{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 28px; display:grid; grid-template-columns:1.2fr 1fr; gap:28px; }
.authbox-who{ display:flex; flex-direction:column; gap:8px; }
.authbox-who b{ font-family:var(--head); font-weight:800; font-size:1.02rem; }
.authbox-who span{ color:var(--muted); font-size:.9rem; line-height:1.6; }
.authbox-src h4{ font-family:var(--head); font-weight:800; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.authbox-src ul{ list-style:none; margin:0; padding:0; }
.authbox-src li{ padding:6px 0; border-bottom:1px dashed var(--line); font-size:.88rem; display:flex; justify-content:space-between; gap:12px; }
.authbox-src li:last-child{ border-bottom:0; }
.authbox-src a{ color:var(--red); }
.authbox-src .src-date{ color:var(--faint); font-size:.8rem; white-space:nowrap; }
@media (max-width:900px){
  .news-grid{ grid-template-columns:1fr; }
  .authbox{ grid-template-columns:1fr; }
  .nmeta{ gap:10px; }
}