:root{
  --ink:#19202a; --muted:#5d6b7a; --line:#e6ebf0; --bg:#f6f8fb; --card:#ffffff;
  --brand:#0F6E56; --brand-d:#0a5443; --brand-l:#E1F5EE;
  --accent:#0FB6C9; --accent2:#12996F;
  --grad:linear-gradient(120deg,#0F6E56,#0FB6C9);
  --glow:0 0 0 1px rgba(15,182,201,.25), 0 18px 50px rgba(10,84,67,.14);
  --r:12px; --r-lg:18px;
  --hero-bg:#070d16;
  /* Phase A · engineered Lab-Verdant tokens */
  --heat:#F59E0B; --heat-d:#C77800; --heat-bg:#FFF4E2;
  --mono:"JetBrains Mono","SFMono-Regular",ui-monospace,Consolas,monospace;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--sans);
  background:var(--bg);color:var(--ink);line-height:1.75;font-size:15px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{max-width:1140px;margin:0 auto;padding:0 5vw}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:8px 14px;border-radius:8px;z-index:99}

/* Nav */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line);transition:.25s}
header.site.scrolled{box-shadow:0 8px 30px rgba(7,13,22,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:.4px}
.logo .mark{width:32px;height:32px;border-radius:9px;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-size:16px;font-weight:700;box-shadow:0 6px 16px rgba(15,110,86,.35)}
.logo small{display:block;font-size:10.5px;font-weight:400;color:var(--muted);letter-spacing:.3px;line-height:1.1}
.logo img.logo-img{height:34px;width:auto;border-radius:9px;background:#fff;padding:2px 5px;object-fit:contain;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.menu{display:flex;gap:26px;align-items:center}
.menu a{font-size:14.5px;color:#334;position:relative;padding:4px 0;transition:.18s;white-space:nowrap}
.menu a:hover,.menu a.active{color:var(--brand)}
.menu a.active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:var(--grad);border-radius:2px}
.nav-cta{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:999px;
  font-size:14px;font-weight:500;border:1px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap}
.btn-p{background:var(--grad);color:#fff;box-shadow:0 8px 22px rgba(15,110,86,.28)}
.btn-p:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-o{background:#fff;color:var(--brand);border-color:var(--line)}
.btn-o:hover{border-color:var(--brand);color:var(--brand-d)}
.btn-lg{padding:13px 30px;font-size:15.5px}
.burger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink)}
/* Language switch in nav (D3 2026-10-09). Stays visible on all breakpoints:
   the mobile breakpoints hide .nav-cta .btn-o/.btn-p, leaving only this + burger. */
.lang-sw{font-size:13px;font-weight:600;letter-spacing:.3px;color:#334;text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;transition:.18s;white-space:nowrap}
.lang-sw:hover{color:var(--brand);border-color:var(--brand)}

/* Shared sections */
section{padding:66px 0}
/* Phase A · sec-end section gradient divider (Lab-Verdant "1px gradient hairline" concept) */
main>section:not(.hero):not(:last-child){position:relative}
main>section:not(.hero):not(:last-child)::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--accent) 50%,var(--line) 82%,transparent);opacity:.8}
main>section:not(.hero):not(:last-child)::before{content:"";position:absolute;left:50%;bottom:-4px;width:7px;height:7px;border-radius:50%;
  transform:translateX(-50%);background:var(--brand);box-shadow:0 0 0 4px rgba(15,110,86,.08),0 0 0 9px rgba(15,110,86,.03)}
/* Phase A · insertable section divider component (a standalone element used after Hero and other overflow:hidden sections to avoid clipping;
   shows normally on mobile: 1px height + 100% width gradient line + centered brand dot) */
.sec-end{position:relative;height:1px;margin:0;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--accent) 50%,var(--line) 82%,transparent);opacity:.85}
.sec-end::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 4px rgba(15,110,86,.08),0 0 0 9px rgba(15,110,86,.03)}
.sec-head{max-width:720px;margin-bottom:34px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{display:inline-block;font-size:12px;letter-spacing:.6px;color:#fff;
  background:var(--grad);padding:5px 13px;border-radius:999px;margin-bottom:14px;font-weight:500;
  box-shadow:0 6px 16px rgba(15,182,201,.25)}
h1{font-size:clamp(30px,4.6vw,50px);line-height:1.22;font-weight:700;letter-spacing:-.6px;margin-bottom:16px;font-family:var(--serif)}
h2{font-size:clamp(23px,3vw,32px);line-height:1.3;font-weight:700;letter-spacing:-.4px;margin-bottom:12px;font-family:var(--serif)}
h3{font-size:18px;font-weight:600;margin-bottom:8px}
.lead{font-size:16.5px;color:var(--muted);max-width:660px}
.sec-head.center .lead{margin-left:auto;margin-right:auto}
/* Phase A · section titles also use serif to reinforce the academic, refined feel (unlike Phase B's all-sans) */
.sec-head h2{font-family:var(--serif);font-weight:700;letter-spacing:-.2px}

/* ===== Fullscreen HERO ===== */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;min-height:100svh;max-height:920px;overflow:hidden;display:flex;
  align-items:center;color:#fff;background:var(--hero-bg);--ov:.55;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hero-hint.hide{opacity:0!important;animation:none!important}
.hero-hint{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:6;
  color:rgba(255,255,255,.78);font-size:12px;letter-spacing:1px;display:flex;align-items:center;gap:10px;
  pointer-events:none;animation:hintFade 5.4s ease-out forwards}
.hero-hint .arr{font-size:18px;animation:hintSlide 1.6s ease-in-out infinite alternate}
.hero-hint .arr.r{animation-delay:.8s}
@keyframes hintFade{0%,55%{opacity:1}100%{opacity:0}}
@keyframes hintSlide{0%{transform:translateX(0)}100%{transform:translateX(6px)}}
@keyframes hintSlideR{0%{transform:translateX(0)}100%{transform:translateX(-6px)}}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;display:flex;align-items:center}
.hero .slide.on{opacity:1}
.hero-vid,.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bg{background-size:cover;background-position:center}
.hero-grad{background:
  radial-gradient(120% 90% at 80% 10%, rgba(15,182,201,.30), transparent 55%),
  radial-gradient(120% 90% at 10% 90%, rgba(124,92,252,.28), transparent 55%),
  linear-gradient(120deg,#061018,#0c2436 60%,#081a14)}
.hero .slide::after{content:"";position:absolute;inset:0;background:rgba(6,11,20,var(--ov))}
/* Left dark scrim: on desktop the left half is slightly narrower (down to 50% opacity); a radial darkening at bottom-right masks the AI watermark */
.hero .slide::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(40% 28% at 100% 100%, rgba(4,9,16,.82) 0%, rgba(4,9,16,.40) 40%, transparent 75%),
    linear-gradient(95deg,rgba(4,9,16,.82) 0%,rgba(4,9,16,.55) 22%,rgba(4,9,16,.12) 42%,transparent 50%)}
.hero-grid-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask:radial-gradient(120% 80% at 30% 40%,#000,transparent 78%);
  mask:radial-gradient(120% 80% at 30% 40%,#000,transparent 78%)}
.hero-grad::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 70% 30%,rgba(15,182,201,.18),transparent 60%);
  animation:floatGlow 9s ease-in-out infinite alternate}
@keyframes floatGlow{0%{transform:translate(0,0)}100%{transform:translate(-6%,4%)}}
.hero-in{position:relative;z-index:4;width:100%;padding-left:5vw;padding-right:5vw}
.hero-cell{max-width:780px}
@media (min-width:1200px){
  .hero-in{padding-left:calc((100vw - 1180px)/2 + 0px);padding-right:calc((100vw - 1180px)/2 + 0px)}
}
.eyebrow.glow{background:rgba(255,255,255,.10);color:#dff7ee;border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);box-shadow:none}
.hero-h{font-size:clamp(34px,6.2vw,74px);line-height:1.06;font-weight:700;letter-spacing:-.6px;font-family:var(--serif);
  margin-bottom:18px;text-align:left;
  background:linear-gradient(92deg,#5ef0c8 0%,var(--accent) 38%,#a7f3d0 78%,var(--brand) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 18px rgba(15,182,201,.25))}
.hero-h .hl{background:none;color:inherit;-webkit-text-fill-color:transparent}
.hero-sub{font-size:clamp(15px,2vw,20px);color:rgba(255,255,255,.88);margin-bottom:30px;
  max-width:600px;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.hero-dots{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;display:flex;gap:10px}
.hero-dots.shift{left:auto;right:5vw;transform:none}
.dot{width:11px;height:11px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:transparent;
  cursor:pointer;padding:0;transition:.2s}
.dot.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px rgba(15,182,201,.8);width:26px;border-radius:6px}
/* Prev/next arrows: shown on desktop only, hidden on mobile (use swipe) */
.hero-arrow{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:50%;transform:translateY(-50%);
    z-index:6;width:40px;height:40px;border-radius:50%;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);
    color:#fff;font-size:24px;line-height:1;cursor:pointer;
    backdrop-filter:blur(8px);transition:.2s;
  }
  .hero-arrow:hover{background:rgba(15,182,201,.4);border-color:rgba(15,182,201,.7)}
  .hero-arrow-prev{left:14px}
  .hero-arrow-next{right:14px}
  /* Hide arrows on mobile (swipe to switch); the original comment claimed they were hidden but display:none was never written, so it is added here.
     Desktop shape differences are still handled by the min-width:769px block below. */
  @media (max-width:768px){
    .hero-arrow{display:none}
  }
  @media (min-width:769px){
    .hero-arrow{width:48px;height:48px;font-size:28px}
    .hero-arrow-prev{left:24px}
    .hero-arrow-next{right:24px}
    /* On desktop the arrows were vertically centered (top:50%) and overlapped the start of the title's second line (measured 28x48px).
       They now sit at the bottom of the hero, in the blank band below the CTA button, clear of every text line. */
    .hero-arrow{top:auto;bottom:96px;transform:none}
  }

/* Trust bar (dark tech strip) */
.trust{background:linear-gradient(120deg,#082b22,#0a4a3c);color:#fff;padding:30px 0;
  border-top:1px solid rgba(94,240,200,.18);border-bottom:1px solid rgba(94,240,200,.18)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.trust-item{position:relative}
.trust-item .t{font-size:16px;font-weight:700;margin-bottom:4px;letter-spacing:.3px;
  background:linear-gradient(92deg,#5ef0c8 0%,var(--accent) 50%,#a7f3d0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* Suffix: removed from the parent gradient, solid bright cyan, uniformly shadow-free (declared later so it wins over the B3 block .t .suf selectors) */
.trust-item .t .suf{font-size:.55em;background:none;-webkit-text-fill-color:var(--accent);color:var(--accent);
  -webkit-background-clip:initial;background-clip:initial;
  margin-left:1px;font-weight:800;
  text-shadow:none;filter:none}
/* Main-number glow (no filter, to avoid text-shadow bleed/distortion; the B3 block must win to drop the shadow) */
.trust-item .t .num{filter:none;text-shadow:none}
.trust-item .d{font-size:12.8px;opacity:.86;color:#cfeae0}
.trust-item::after{content:"";position:absolute;right:-11px;top:10%;height:80%;width:1px;background:rgba(94,240,200,.22)}
.trust-item:last-child::after{display:none}

/* Card grid (glassmorphism + glow) */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
  transition:.25s;display:flex;flex-direction:column;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg);padding:1px;
  background:linear-gradient(120deg,rgba(15,182,201,.0),rgba(15,182,201,.0));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.25s;pointer-events:none}
.card:hover{transform:translateY(-5px);border-color:rgba(15,182,201,.5);
  box-shadow:var(--glow)}
.card:hover::before{opacity:1;background:linear-gradient(120deg,var(--brand),var(--accent))}
.card .tag{font-size:11.5px;color:var(--brand);background:var(--brand-l);padding:3px 9px;
  border-radius:6px;display:inline-block;margin-bottom:11px;align-self:flex-start;font-weight:500}
.card p{color:var(--muted);font-size:14px;margin-bottom:12px;flex:1}
.card .more{color:var(--brand);font-size:14px;font-weight:500}
.card .more:hover{text-decoration:underline}

/* Product image card (homepage / shared): image + title first, details expand on hover */
.pcard{position:relative;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:transform .28s ease,
  box-shadow .28s ease,border-color .28s ease;will-change:transform}
.pcard:hover{transform:translateY(-6px);border-color:rgba(15,182,201,.55);box-shadow:0 18px 42px rgba(10,84,67,.16)}
.pcard::after{content:"";position:absolute;top:0;left:-120%;height:100%;width:60%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%);
  transform:skewX(-18deg);transition:left .65s ease;pointer-events:none;z-index:3}
.pcard:hover::after{left:130%}
.pcard-art{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:
    linear-gradient(135deg,var(--g1,var(--brand)) 0%,var(--g2,var(--accent)) 100%)}
.pcard-art::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:26px 26px;background-position:center;opacity:.55}
.pcard-art::after{content:"";position:absolute;left:-10%;top:-30%;width:60%;height:160%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.28) 0%,transparent 60%);
  filter:blur(20px)}
/* C12 product photo: once a cover image is uploaded it covers the gradient; object-fit:cover adapts to any slot ratio (4:3 / 16:10 / 16:9) */
.pcard-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block;
  background:linear-gradient(135deg,var(--g1,var(--brand)) 0%,var(--g2,var(--accent)) 100%)}
.pcard-art.has-img::before,.pcard-art.has-img::after{display:none}
.pcard-art.has-img .pcard-chip{position:absolute;left:12px;bottom:12px;z-index:3;transform:none;
  font-size:clamp(22px,2.4vw,30px);line-height:1.1;padding:5px 12px;border-radius:11px;
  background:rgba(8,35,30,.42);backdrop-filter:blur(4px);text-shadow:0 2px 6px rgba(0,0,0,.4)}
.pcard-art.has-img .pcard-chip small{display:none}
.pcard-chip{position:relative;z-index:2;font-weight:800;color:#fff;letter-spacing:-1px;
  font-size:clamp(40px,5.6vw,72px);line-height:1;text-shadow:0 6px 24px rgba(0,0,0,.25);
  transform:translateZ(0)}
.pcard-chip small{display:block;font-size:.32em;letter-spacing:1px;font-weight:600;color:#d1fae5;
  text-shadow:none;margin-top:10px;text-transform:uppercase}
.pcard-badge{position:absolute;top:12px;left:12px;z-index:4;padding:5px 11px;border-radius:999px;
  background:linear-gradient(135deg,var(--heat),var(--heat-d));color:#fff;font-size:11.5px;font-weight:600;
  backdrop-filter:blur(8px);box-shadow:0 2px 6px rgba(245,158,11,.3)}
.pcard-meta{padding:16px 20px 20px;display:flex;flex-direction:column}
.pcard-meta h3{font-size:17px;line-height:1.35;margin-bottom:6px;color:var(--ink)}
.pcard-extra{max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .25s ease .05s}
.pcard:hover .pcard-extra{max-height:260px;opacity:1}
.pcard-meta p{color:var(--muted);font-size:13.5px;margin:8px 0 12px;line-height:1.65}
.pcard-meta .more{align-self:flex-start;color:var(--brand);font-size:13.5px;font-weight:600}
.pcard-meta .more:hover{text-decoration:underline}

/* Product field table */
.prod{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:22px;
  transition:.22s}
.prod:hover{box-shadow:0 14px 36px rgba(10,84,67,.09);border-color:rgba(15,182,201,.4)}

/* In-page anchor landing feedback (A): highlight the target when a "related products" link jumps to a product detail,
   so it never looks unresponsive due to "target adjacent + identical layout + no feedback".
   header.site is sticky (.nav is 66px tall), so scroll-margin-top keeps the title clear of the header. */
.prod{scroll-margin-top:80px}
.prod:target,.prod.is-flash{border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(15,182,201,.18),0 14px 36px rgba(10,84,67,.10)}
.prod-head{padding:20px 24px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(225,245,238,.7),#fff);display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.prod-head h3{font-size:19px;margin-bottom:4px}
.prod-head .sub{font-size:13.5px;color:var(--muted)}
.prod-body{padding:6px 24px 20px}
/* Product detail "related products": after opening a product, show other items of the same category below the detail */
.rec-block{margin:18px 24px 26px;padding:18px 18px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.rec-h{font-size:14px;font-weight:800;color:var(--ink);font-family:var(--serif);margin:0 0 14px;display:flex;align-items:center;gap:8px}
.rec-h::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--grad)}
.rec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rec-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff;transition:border-color .2s,transform .2s}
.rec-card:hover{border-color:var(--brand);transform:translateY(-2px)}
.rec-art{height:84px;background:linear-gradient(135deg,var(--g1,var(--brand)),var(--g2,var(--accent)));opacity:.85}
.rec-name{font-size:14px;font-weight:600;padding:0 12px;color:var(--ink)}
.rec-sub{font-size:12px;color:var(--muted);padding:0 12px 12px;line-height:1.4}
.frow{display:grid;grid-template-columns:118px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.frow:last-child{border:none}
.frow .k{color:var(--muted);font-size:13.5px}
.frow .v{font-size:14.5px}
.frow .v em{font-style:normal;color:var(--brand-d);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.chip{font-size:12.5px;background:var(--bg);border:1px solid var(--line);padding:3px 10px;border-radius:999px;color:#3d4a58}

/* FAQ */
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden;transition:.2s}
.faq:hover{border-color:rgba(15,182,201,.4)}
.faq summary{padding:17px 22px;cursor:pointer;font-weight:600;font-size:15.5px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--brand);flex-shrink:0;font-weight:400;transition:.2s}
.faq[open] summary::after{content:"−";color:var(--accent)}
.faq summary:hover{background:var(--bg)}
.faq .a{padding:0 22px 20px;color:#3d4a58;font-size:14.5px}
.faq .a p{margin-bottom:10px}
.faq .a ul{margin:0 0 10px 20px}
.faq .a li{margin-bottom:5px}
.faq .a strong{color:var(--brand-d)}

/* Article body */
.pcover{display:block;width:100%;height:170px;object-fit:cover;object-position:center;border-radius:12px;margin-bottom:12px}
.acover{display:block;width:100%;height:300px;object-fit:cover;object-position:center;border-radius:14px;margin:6px 0 22px}
/* EN site: news cover source images carry Chinese titles, so use a brand gradient placeholder (same recipe as .pcard-art; see HANDOVER 20.18) */
.pcover-art,.acover-art{position:relative;overflow:hidden;border-radius:12px;
  background:linear-gradient(135deg,var(--brand) 0%,var(--accent) 100%)}
.pcover-art{height:170px;margin-bottom:12px}
.acover-art{height:300px;border-radius:14px;margin:6px 0 22px}
.pcover-art::before,.acover-art::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:26px 26px;background-position:center;opacity:.55}
.pcover-art::after,.acover-art::after{content:"";position:absolute;left:-10%;top:-30%;width:60%;height:160%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.28) 0%,transparent 60%);
  filter:blur(20px)}
.article{max-width:760px;margin:0 auto}
.article h2{font-size:25px;margin-top:38px}
.article h3{font-size:18.5px;margin-top:26px}
.article p{margin-bottom:15px;color:#3d4a58}
.article ul,.article ol{margin:0 0 18px 22px}
.article li{margin-bottom:8px;color:#3d4a58}
.article table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px;background:#fff;
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
.article th{background:var(--brand-l);text-align:left;padding:10px 13px;font-size:13.5px}
.article td{padding:10px 13px;border-top:1px solid var(--line)}
.article blockquote{border-left:3px solid var(--brand);background:#fff;padding:14px 18px;
  margin:18px 0;border-radius:0 8px 8px 0;color:#3d4a58}
.meta{font-size:13px;color:var(--muted);margin-bottom:26px;padding-bottom:14px;border-bottom:1px solid var(--line)}

/* CTA (neon card) */
.cta{background:linear-gradient(120deg,rgba(225,245,238,.9),rgba(225,247,251,.9));
  border:1px solid rgba(15,182,201,.22);border-radius:var(--r-lg);padding:46px;text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-60px;top:-90px;
  background:radial-gradient(circle,rgba(15,182,201,.18),transparent 70%)}
.cta h2{margin-bottom:10px}
.cta p{color:var(--muted);margin-bottom:22px}

/* Product series tabs (Dogs & Cats / Small Pets) */
.cat-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.cat-tabs button{font-family:inherit;font-size:14px;padding:9px 20px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:.18s;white-space:nowrap}
.cat-tabs button:hover{border-color:var(--brand);color:var(--brand)}
.cat-tabs button.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(15,110,86,.22)}

/* FAQ category filter + search */
.faq-filter{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:22px}
.faq-tabs{display:flex;flex-wrap:wrap;gap:8px}
.faq-tabs button{font-family:inherit;font-size:13.5px;padding:8px 16px;border-radius:999px;background:transparent;border:1px solid var(--line);color:var(--ink);cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:6px}
.faq-tabs button:hover{border-color:var(--brand);color:var(--brand)}
.faq-tabs button.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(15,110,86,.2)}
.faq-tabs button .n{font-size:11.5px;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.08);font-weight:600}
.faq-tabs button.on .n{background:rgba(255,255,255,.22);color:#fff}
.faq-search{position:relative;display:flex;align-items:center;flex:1;min-width:240px;max-width:380px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 14px;transition:.2s}
.faq-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,182,201,.18)}
.faq-search .ico{font-size:14px;color:var(--muted);margin-right:8px}
.faq-search input{flex:1;border:0;background:transparent;outline:none;padding:11px 0;font-size:14px;color:var(--ink);font-family:inherit}
.faq-search input::placeholder{color:#94a3b8}
.faq-search .faq-clear{display:none;border:0;background:rgba(0,0,0,.08);color:#475569;width:22px;height:22px;border-radius:50%;font-size:16px;line-height:1;cursor:pointer;margin-left:8px;align-items:center;justify-content:center}
.faq-search .faq-clear:hover{background:rgba(0,0,0,.18)}
.faq-item{display:block}
.faq-item .hot{display:inline-flex;align-items:center;gap:3px;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;background:linear-gradient(135deg,var(--heat),var(--heat-d));color:#fff;vertical-align:middle;letter-spacing:.3px;box-shadow:0 2px 6px rgba(245,158,11,.28)}
.faq-item .trend{display:inline-flex;align-items:center;gap:3px;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;vertical-align:middle;letter-spacing:.3px;font-family:var(--mono)}
.faq-item .trend.up{background:rgba(15,110,86,.1);color:var(--brand);border:1px solid rgba(15,110,86,.25)}
.faq-item .trend.new{background:rgba(18,153,111,.1);color:var(--accent2);border:1px solid rgba(18,153,111,.28)}
.faq-empty{text-align:center;padding:48px 16px;color:var(--muted);font-size:14.5px;border:1px dashed var(--line);border-radius:var(--r);background:#fafbfc}
.faq-empty a{color:var(--brand);text-decoration:underline;margin-left:4px}
.faq summary .ctg-tag{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;letter-spacing:.5px;padding:3px 9px;border-radius:6px;margin-right:10px;vertical-align:middle;border:1px solid transparent;white-space:nowrap}
.ctg-dog-cat{background:rgba(15,182,201,.1);color:#0e7490;border-color:rgba(15,182,201,.25)}
.ctg-small-pet{background:rgba(245,158,11,.12);color:#b45309;border-color:rgba(245,158,11,.3)}
.ctg-general{background:rgba(100,116,139,.12);color:#475569;border-color:rgba(100,116,139,.28)}

/* GEO report page styles */
.kvgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px;background:#fafbfc;border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;margin:14px 0 18px}
.kv{display:flex;gap:10px;font-size:14px;line-height:1.7}
.kv .k{font-weight:600;color:var(--ink);min-width:130px;flex-shrink:0}
.kv .v{color:var(--muted)}
.tier-table{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:14px 0}
.tier-row{display:grid;grid-template-columns:80px 2fr 2fr 90px 2.4fr;gap:0;align-items:stretch;border-bottom:1px solid var(--line);font-size:13.5px}
.tier-row:last-child{border-bottom:0}
.tier-row>div{padding:14px 14px;border-right:1px solid var(--line);display:flex;align-items:center}
.tier-row>div:last-child{border-right:0}
.tier-row.tier-h{background:#f1f5f9;font-weight:600;color:var(--ink);font-size:13px}
.t-badge{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;font-weight:800;font-size:15px;color:#fff;font-family:var(--mono)}
.t-badge.s{background:linear-gradient(135deg,#ef4444,#f97316)}
.t-badge.a{background:linear-gradient(135deg,#0ea5e9,var(--accent))}
.t-badge.b{background:linear-gradient(135deg,#12996F,#4ECBA6)}
.t-badge.c{background:linear-gradient(135deg,#64748b,#94a3b8)}
.pc-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:14px 0}
.pc-check{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:0 1px 0 rgba(0,0,0,.02);position:relative;overflow:hidden}
.pc-check::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)}
.pc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.pc-head h3{font-size:16.5px;margin:0;color:var(--ink)}
.pc-chip-mini{font-size:11.5px;font-weight:600;color:#0e7490;background:rgba(15,182,201,.1);padding:3px 8px;border-radius:6px;border:1px solid rgba(15,182,201,.22)}
.pc-rows{list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.7;color:var(--ink)}
.pc-rows li{padding:6px 0;border-bottom:1px dashed var(--line)}
.pc-rows li:last-child{border-bottom:0}
.pc-rows strong{color:var(--ink);font-weight:600;margin-right:4px}
table.list.tight{font-size:13.5px}
table.list.tight th,table.list.tight td{padding:11px 14px}
.ordlist{padding-left:22px;line-height:1.85}
.ordlist li{margin:6px 0}
@media (max-width:900px){
  .kvgrid,.pc-list{grid-template-columns:1fr}
  .tier-row{grid-template-columns:60px 1.5fr 1.5fr 70px 1.8fr;font-size:12.5px}
}
@media (max-width:560px){
  .tier-row{grid-template-columns:1fr}
  .tier-row>div{border-right:0;border-bottom:1px dashed var(--line)}
}

/* Footer */
footer.site{background:#0a121c;color:#b9c6d1;padding:52px 0 26px;font-size:14px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px;margin-bottom:34px}
footer.site h4{color:#fff;font-size:14.5px;margin-bottom:14px;font-weight:600}
footer.site a{color:#b9c6d1}
footer.site a:hover{color:#fff}
footer.site li{margin-bottom:8px;list-style:none}
footer.site ul{padding:0;margin:0}
.foot-logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:18px;margin-bottom:12px}
.foot-logo .mark{width:30px;height:30px;border-radius:8px;background:var(--grad);display:grid;
  place-items:center;font-size:15px}
.foot-logo img.logo-img{height:30px;width:auto;border-radius:8px;background:#fff;padding:2px 5px;object-fit:contain}
.foot-bot{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;font-size:12.8px;color:#8fa2b1;
  display:flex;justify-content:center;gap:16px;flex-wrap:wrap;text-align:center}
footer.site .foot-lang{color:#cfd6df;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1px}
footer.site .foot-lang:hover{color:#fff;border-color:#fff}
.entity{background:rgba(255,255,255,.05);border-radius:10px;padding:14px 16px;font-size:13px;
  line-height:1.7;margin-top:14px;color:#a9b8c5}

.callout-box{border-left:3px solid var(--brand);background:var(--brand-l);padding:16px 20px;
  border-radius:0 10px 10px 0;margin:18px 0}

/* Inner page hero image */
.ph{padding:72px 0 40px;background:linear-gradient(180deg,#06231b,#0d3b2e 70%,var(--bg));
  border-bottom:1px solid var(--line)}
.ph .eyebrow{background:rgba(255,255,255,.12);color:#dff7ee;border:none}
.ph h1{color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.ph .lead{color:rgba(255,255,255,.85)}

/* Scroll reveal (VoiceRise style: rise from below + scale + staggered within a group) */
.reveal{opacity:0;transform:translateY(48px) scale(.985);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--reveal-delay,0s);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}

/* ===== Tablet: two-column cards + hamburger menu ===== */
/* Breakpoint 1024: the full desktop nav needs ~970px; the old 900px value left a 900-970px
   "squeeze gap" - the desktop menu showed but did not fit, and flex-shrink crushed each item to
   one character wide, wrapping every glyph into a fake vertical layout. Raising it to 1024 removes that gap. */
@media(max-width:1024px){
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero-grid-overlay{opacity:.32}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    padding:10px 5vw;gap:2px;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(0,0,0,.06)}
  .menu.open{display:flex}
  .menu a{padding:14px 2px;font-size:15.5px;border-bottom:1px solid var(--line)}
  .menu a:last-child{border-bottom:none}
  .burger{display:block}
  .nav-cta .btn-o{display:none}
  .trust-grid{grid-template-columns:1fr 1fr}
  .trust-item::after{display:none}
}

/* ===== Mobile: a layout designed for "reading habits" (not a shrunken PC) ===== */
@media(max-width:768px){
  body{font-size:16px;line-height:1.8}
  .wrap{padding:0 18px}
  section{padding:46px 0}
  .ph{padding:84px 0 40px}
  .btn{min-height:44px}
  /* Only shrink the hero CTA: no forced 100% width, so the button doesn't become a long color bar covering the poster; keep a large tap area */
  .hero .btn-lg{width:auto;min-width:200px;padding:14px 26px;justify-content:center;display:inline-flex;
    margin-left:auto;margin-right:auto}
  .hero-cell{text-align:center}
  .hero-cell .hero-sub{margin-left:auto;margin-right:auto;text-align:left}

  /* Fullscreen Hero: use svh to avoid mobile URL-bar height jumps; gradient darkening keeps text readable */
  .hero{min-height:100svh}
  .hero-cell{max-width:100%}
  .hero-h{font-size:clamp(30px,8.6vw,46px);line-height:1.12;text-shadow:0 3px 22px rgba(0,0,0,.5)}
  .hero-sub{font-size:15px;margin-bottom:22px}
  /* Lifted above the dots: both used to be centered at the same bottom offset and visually overlapped */
  /* Mobile hero scrim: bottom-left "dark layer + radial" combo masks the watermark and color blocks; the right side fully reveals the poster */
  .hero .slide::before{background:
    radial-gradient(56% 32% at 100% 100%, rgba(4,9,16,.88) 0%, rgba(4,9,16,.45) 40%, transparent 72%),
    linear-gradient(180deg,rgba(4,9,16,.78) 0%,rgba(4,9,16,.30) 35%,rgba(4,9,16,.12) 55%,transparent 75%)}

  .eyebrow{font-size:11px;padding:4px 11px}
  h1{font-size:clamp(28px,7vw,40px)}
  h2{font-size:clamp(21px,5vw,28px)}
  .sec-head{margin-bottom:24px}
  .lead{font-size:15.5px}

  /* Cards: single column + more whitespace + large tap area */
  .grid-3,.grid-2{grid-template-columns:1fr;gap:16px}
  .card{padding:20px}
  .card p{font-size:15px}

  /* Trust bar: 2x2 on mobile (two per row, two rows), section cards centered */
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:14px 10px;text-align:center}
  .trust-item{padding:13px 12px;background:rgba(255,255,255,.06);border-radius:10px}
  .trust-item .t{font-size:15px}
  .trust-item .d{font-size:13px}

  /* Product fields: stacked, label above and value below */
  .prod-head{flex-direction:column;gap:6px;padding:18px}
  .prod-body{padding:6px 18px 18px}
  .frow{grid-template-columns:1fr;gap:3px;padding:12px 0}
  .frow .k{font-size:13px}
  .frow .v{font-size:15px}

  .cta{padding:32px 22px}
  .cta h2{font-size:21px}

  /* Nav: hide the top CTA button on mobile, move everything into the hamburger menu */
  .nav-cta .btn-p{display:none}
  /* Space-saving nav: shorter bar height + expanded menu as a 2-column grid (two per row) to cut vertical usage */
  .nav{height:56px;gap:12px}
  .logo{font-size:17px}
  .logo .mark{width:28px;height:28px;font-size:14px}
  .menu.open{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;padding:12px 18px}
  .menu a{padding:11px 2px;font-size:14.5px;min-height:42px;display:flex;align-items:center}

  /* Footer: 2 columns on mobile (brand block spans the top row, Products|Help Center / Contact|Follow Us)
     + the Follow column shows only the official-account card (Channels etc. hidden, per the requirement)
     + headings and all list content centered (matching the page alignment) */
  .foot-grid{grid-template-columns:1fr 1fr;gap:20px 16px}.foot-grid>div:first-child{grid-column:1/-1}
  .foot-grid>div{text-align:center}
  /* Center list content: set text-align on ul/li/a explicitly and make a inline-block so centering holds */
  .foot-grid>div>ul{list-style:none;padding:0;margin:0}
  .foot-grid>div>ul>li{text-align:center}
  .foot-grid>div>ul>li>a{display:inline-block;text-align:center}
  .foot-grid>div h4{justify-content:center}
  .foot-logo{justify-content:center}
  .entity{text-align:center}
  /* Mobile "Follow Us": stack the official-account card, enlarge the QR for scanning, remove the card border */
  .foot-grid .ch-card{flex-direction:column;align-items:center;text-align:center;padding:14px 6px;border:0;background:transparent}
  .foot-grid .ch-qr{width:132px;height:132px;margin:0 auto;box-shadow:none}
  /* Mobile "Contact Us": label on its own centered line, phone/email/hours on a new line so the phone number doesn't break mid-way */
  .c-rows{margin:0;padding:0}
  .c-rows .c-row{display:block;text-align:center;margin:10px 0;line-height:1.6}
  .c-rows .c-label{display:block;color:#fff;font-weight:600;margin-bottom:2px}
  .c-rows .c-val{display:inline-block;color:#cfd6df}

  /* News cover */
  .pcover{height:180px}
  .acover{height:200px}
  .pcover-art{height:180px}
  .acover-art{height:200px}

  /* Article body: more comfortable mobile reading metrics */
  .article{font-size:16.5px;line-height:1.85}
  .article h2{font-size:22px;margin-top:30px}
  .article h3{font-size:18px;margin-top:22px}
  .article p{font-size:16px;line-height:1.85}
  /* Tables scroll horizontally on mobile to avoid squeezing text */
  .article table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    white-space:nowrap;font-size:13.5px;border-radius:8px}
  .article th,.article td{white-space:nowrap;padding:9px 12px}
}

/* ===== Extra-small screens ===== */
@media(max-width:560px){
  .foot-bot{flex-direction:column;gap:6px}
  .hero-dots{display:none}
  .ph h1{font-size:clamp(24px,6.6vw,32px)}
  .grid-3{grid-template-columns:1fr}
  .section{padding:40px 0}
  .cta{padding:28px 18px}
}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-grad::before{animation:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   Phase B visual upgrade (isolated branch phase-b)
   B1 product Bento grid / B2 Hero SVG decor / B3 Trust big-number cards / B4 mobile Sticky CTA
   ============================================================ */

/* ---- B1: homepage product Bento grid ---- */
.pcard-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(210px,auto);
  grid-auto-flow:row dense;
  gap:20px;
}
.pcard-grid .pcard[data-size="large"]{grid-column:span 2;grid-row:span 2}
.pcard-grid .pcard[data-size="wide"]{grid-column:span 2;grid-row:span 1}
.pcard-grid .pcard[data-size="tall"]{grid-column:span 1;grid-row:span 2}
.pcard-grid .pcard[data-size="standard"]{grid-column:span 1;grid-row:span 1}
/* Enhanced visuals inside large blocks: show more detail, expanded summary by default */
.pcard-grid .pcard[data-size="large"] .pcard-art{aspect-ratio:16/10}
.pcard-grid .pcard[data-size="large"] .pcard-meta h3{font-size:21px}
.pcard-grid .pcard[data-size="large"] .pcard-extra{max-height:300px;opacity:1}
.pcard-grid .pcard[data-size="large"]:hover .pcard-extra{max-height:300px}
@media (max-width:1024px){
  .pcard-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(200px,auto)}
  /* Tablet/narrow still keeps "1 large + 4 small": the large card spans the full row (2 columns), the rest take 1 column each in 2x2 */
  .pcard-grid .pcard[data-size="large"]{grid-column:span 2;grid-row:span 1}
  .pcard-grid .pcard[data-size="wide"],
  .pcard-grid .pcard[data-size="tall"]{grid-column:span 1;grid-row:span 1}
}
@media (max-width:640px){
  .pcard-grid{grid-template-columns:repeat(2,1fr);gap:12px;grid-auto-rows:auto}
  /* Mobile keeps "1 large + 4 small": the large card spans the row, 4 small cards in 2x2, placeholder cards sized like small cards */
  .pcard-grid .pcard[data-size="large"]{grid-column:span 2;grid-row:span 1}
  .pcard-grid .pcard[data-size="wide"],
  .pcard-grid .pcard[data-size="tall"],
  .pcard-grid .pcard[data-size="standard"],
  .pcard-grid .pcard-placeholder{grid-column:span 1;grid-row:span 1}
  /* Compact: large card uses a wide ratio, small cards 4/3, collapse descriptions, tighten padding */
  .pcard-art{aspect-ratio:4/3}
  .pcard-grid .pcard[data-size="large"] .pcard-art{aspect-ratio:16/10}
  .pcard-grid .pcard[data-size="large"] .pcard-meta h3{font-size:17px}
  .pcard-extra{max-height:0!important;opacity:0!important;margin:0!important}
  .pcard-meta{padding:13px 14px 15px}
  .pcard-meta h3{font-size:15.5px}
  .pcard-chip{font-size:clamp(30px,8.5vw,46px)}
  .pcard-cat{margin-bottom:28px}
  .pcard-cat-head{margin-bottom:13px;font-size:17px}
  /* The "featured extension" strip below a category stays compact on mobile (shorter image height, still a single prominent column) */
  .pcard-wide-row .pcard[data-size="wide"] .pcard-art{aspect-ratio:16/9}
}

/* ---- Phase B2: products grouped by category (1 large + 4 small) + placeholder cards + wide extension ---- */
.pcard-area{margin-top:8px}
.pcard-cat{margin-bottom:44px}
.pcard-cat:last-child{margin-bottom:0}
.pcard-cat-head{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:19px;font-weight:800;color:var(--ink);font-family:var(--serif)}
.pcard-cat-dot{width:10px;height:10px;border-radius:3px;background:var(--grad);box-shadow:0 0 0 4px rgba(15,182,201,.14)}
.pcard-cat-n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:var(--brand-l);color:var(--brand);font-size:13px;font-weight:700}
/* large / wide cards show the summary by default to avoid empty space */
.pcard-open .pcard-extra{max-height:300px;opacity:1}
/* Wide featured extension below a category: horizontal card */
.pcard-wide-row{margin-top:22px}
.pcard-wide-row .pcard{display:grid;grid-template-columns:300px 1fr;align-items:stretch;border-radius:var(--r-lg);overflow:hidden}
.pcard-wide-row .pcard .pcard-art{aspect-ratio:auto;height:auto;min-height:210px}
.pcard-wide-row .pcard .pcard-meta{justify-content:center;padding:24px 28px}
.pcard-wide-row .pcard .pcard-meta h3{font-size:20px}
@media (max-width:640px){.pcard-wide-row .pcard{grid-template-columns:1fr}}
/* Placeholder card: new product coming soon (enhanced visuals: brand-color glow + "Coming soon" chip + large emoji) */
.pcard-placeholder{border:1.5px dashed #67E8F9;background:linear-gradient(135deg,#ECFEFF,#CFFAFE);box-shadow:none;cursor:default;position:relative;overflow:hidden}
.pcard-placeholder:hover{transform:none;border-color:#06B6D4;box-shadow:none}
.pcard-placeholder::before{content:'';position:absolute;inset:-40%;background:radial-gradient(circle,rgba(15,182,201,.10),transparent 60%);pointer-events:none}
.pcard-placeholder .pcard-art{background:linear-gradient(135deg,#E0F7FA,#B2EBF2);position:relative}
.pcard-placeholder .pcard-art::before,.pcard-placeholder .pcard-art::after{display:none}
.pcard-placeholder .pcard-badge,.pcard-placeholder .pcard-chip{display:none}
.pcard-placeholder .ph-chip{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:rgba(245,158,11,.95);color:#fff;font-size:11px;font-weight:600;border-radius:20px;letter-spacing:.5px;z-index:3;box-shadow:0 2px 6px rgba(245,158,11,.4)}
.pcard-placeholder .ph-chip .ph-dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
.pcard-placeholder .ph-emoji{position:relative;z-index:2;font-size:42px;color:#0891B2;filter:drop-shadow(0 2px 4px rgba(8,145,178,.25))}
.pcard-placeholder .ph-emoji-shadow{position:absolute;font-size:88px;color:rgba(8,145,178,.06);bottom:8px;right:12px;z-index:1;transform:rotate(-12deg)}
.pcard-placeholder .pcard-meta{align-items:center;text-align:center}
.pcard-placeholder .ph-title{color:#0E7490;font-size:17px;font-weight:700;margin-bottom:2px}
.pcard-placeholder .ph-sub{color:#0891B2;font-size:12.5px;margin:6px 0 0;line-height:1.5}
/* On mobile the placeholder card is a small cell (1 column); decorative elements scale down to avoid overflow */
@media (max-width:640px){
  .pcard-placeholder .ph-emoji{font-size:30px}
  .pcard-placeholder .ph-emoji-shadow{font-size:54px;bottom:4px;right:6px}
  .pcard-placeholder .ph-title{font-size:14.5px}
  .pcard-placeholder .ph-sub{font-size:11px;margin:4px 0 0;line-height:1.4}
  .pcard-placeholder .ph-chip{top:8px;left:8px;padding:3px 8px;font-size:10px}
}

/* ---- B2: Hero SVG molecule decor (light strokes + screen blend glow on the dark Hero) ---- */
.hero-deco{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:.55;mix-blend-mode:screen;
  animation:heroFloat 26s ease-in-out infinite;
}
.hero-deco img{width:100%;height:100%;object-fit:cover}
@keyframes heroFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(-10px,7px) scale(1.03)}
  50%{transform:translate(6px,-5px) scale(.98)}
  75%{transform:translate(-4px,9px) scale(1.02)}
}
@media (max-width:768px){
  .hero-deco{opacity:.32;animation:none}
  /* Lower hero height on mobile: the sticky header (~64px) + sticky-cta (~64px) both take space,
     so cap the hero at 78svh to keep the body (eyebrow+h1+sub+button) fully within one viewport */
  .hero{height:78svh;min-height:460px;max-height:680px}
  .hero-h{font-size:clamp(28px,7.6vw,40px);margin-bottom:14px}
  .hero-sub{font-size:15px;margin-bottom:22px}
  .hero-dots{bottom:18px;gap:14px}
  .dot{width:14px;height:14px}
  .dot.on{width:32px}
}

/* ---- B3: Trust big-number metric cards (large text on dark, unified bright-cyan tone, no shadow) ---- */
.trust-item .t{
  font-family:var(--serif);
  font-size:clamp(34px,4.4vw,52px);
  font-weight:800;line-height:1.1;letter-spacing:-1px;
  /* Main number: bright-cyan to light-cyan to bright-cyan gradient, tonally unified with the suffix */
  background:linear-gradient(92deg,var(--accent) 0%,#5ef0c8 50%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  margin-bottom:6px;
  display:flex;align-items:baseline;justify-content:center;gap:1px;
  text-shadow:none;filter:none;
}
/* Suffix (unit): same solid bright cyan as the main number, no shadow/glow at all,
   so the four values "items / + / % / 0K+" stay visually identical */
.trust-item .t .suf{
  font-size:.55em;font-weight:700;
  background:none;
  -webkit-text-fill-color:var(--accent);color:var(--accent);
  -webkit-background-clip:initial;background-clip:initial;
  margin-left:1px;text-shadow:none;filter:none;
}
.trust-item .d{font-size:13px;opacity:.95;color:#e6f6ee;line-height:1.5}
.trust-item .d strong{display:block;font-size:15px;color:#fff;margin-bottom:2px;font-weight:700}
@media (max-width:640px){
  .trust-item{padding:16px 14px;background:rgba(255,255,255,.05);border-radius:12px}
  .trust-item .t{font-size:30px}
  .trust-item .t .suf{font-size:.5em}
  .trust-item .d{font-size:12px;color:#e6f6ee}
  .trust-item .d strong{font-size:13.5px}
}

/* ---- B4: mobile Sticky CTA (shown only at 768px and below, hidden on desktop) ---- */
.sticky-cta{display:none}
@media (max-width:768px){
  .sticky-cta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:1200;
    background:var(--grad);
    box-shadow:0 -6px 24px rgba(0,0,0,.28);
    padding:11px 14px 13px;
    animation:stickyUp .42s ease-out;
  }
  body{padding-bottom:64px}
  body.cta-hidden{padding-bottom:0}
}
.sticky-cta-inner{display:flex;align-items:center;gap:12px;max-width:1180px;margin:0 auto}
.sticky-cta-txt{flex:1;color:#fff;line-height:1.3;min-width:0}
.sticky-cta-txt strong{display:block;font-size:14px;font-weight:700}
.sticky-cta-txt span{display:block;font-size:11.5px;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-cta-btn{
  flex:0 0 auto;background:#fff;color:var(--brand)!important;text-decoration:none!important;
  font-weight:700;font-size:13px;padding:9px 16px;border-radius:999px;white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.2);transition:transform .15s ease;
}
.sticky-cta-btn:active{transform:scale(.95)}
.sticky-cta-close{
  flex:0 0 auto;width:26px;height:26px;border:none;border-radius:50%;
  background:rgba(255,255,255,.22);color:#fff;font-size:14px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
@keyframes stickyUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

@media (prefers-reduced-motion: reduce){
  .hero-deco,.sticky-cta{animation:none}
}

/* ===== Footer Follow Us (official account / Channels) =====
   The 5-column layout applies to desktop only; mobile uses a 2x2 layout inside the 768px media query (brand block spans the top row) */
@media (min-width:769px){
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.1fr 1fr}
}
/* "Contact Us" row: label / value side by side on PC; on mobile they stack within the 768px media query */
.c-rows{margin:0;padding:0;list-style:none}
.c-rows .c-row{list-style:none;margin:6px 0}
.c-rows .c-label{color:#fff;font-weight:600;margin-right:6px}
.c-rows .c-val{color:#cfd6df}
.c-rows .c-stack .c-label{display:block;margin-right:0}
.c-rows .c-stack .c-val{display:inline-block}
.ch-cards{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.ch-card{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.14);
  border-radius:10px;background:rgba(255,255,255,.04);text-decoration:none;transition:.16s}
.ch-card:hover{border-color:var(--accent);background:rgba(255,255,255,.08)}
.ch-card.ch-nolink{cursor:default}
.ch-card.ch-nolink:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
.ch-qr{width:52px;height:52px;flex-shrink:0;border-radius:8px;background:#fff center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:22px;
  border:0;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ch-meta{display:flex;flex-direction:column;line-height:1.4}
.ch-meta b{color:#fff;font-size:14px;font-weight:600}
.ch-meta i{color:#9fb0bf;font-style:normal;font-size:12px}

/* Hide non-official-account channel cards (Channels etc.) on mobile (placed after .ch-card{display:flex}
   and raising specificity to two classes so it can truly override display:flex) */
@media (max-width:768px){
  .foot-grid .ch-mobile-hide{display:none !important}
}

/* ===== About page test-report gallery ===== */
.cert-gallery{margin-top:18px}
.cert-card{overflow:hidden}
.cert-img{height:170px;background:#eef1f4 center/cover no-repeat;border-radius:8px;margin-bottom:12px}
.cert-no{font-size:12.5px;color:var(--brand-d);font-weight:600;margin:4px 0 2px}
.cert-note{font-size:13px;color:var(--muted);margin:0}

/* ===== Homepage Editor's Picks ===== */
.rec-strip{background:linear-gradient(180deg,#f6fbf9,#fff);padding:40px 0 8px}
.rec-lab{display:inline-block;font-size:13px;font-weight:700;color:var(--brand-d);
  background:var(--brand-l);padding:5px 14px;border-radius:999px;margin-bottom:18px}
.rec-row{grid-auto-rows:1fr}
@media (max-width:768px){.rec-grid{grid-template-columns:repeat(2,1fr);gap:12px}.rec-block{margin:16px 18px 22px}}
@media (max-width:640px){.ch-cards{flex-direction:row}.ch-card{flex:1}}

/* News list: category filter + whole-card clickable + back from detail (2026-09-23) */
.ncard{text-decoration:none;color:inherit;cursor:pointer}
.ncard .more{margin-top:auto}
.ntabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.ntab{border:1px solid var(--line);background:rgba(255,255,255,.92);color:inherit;border-radius:999px;padding:8px 18px;font-size:14px;cursor:pointer;transition:.2s;font-family:inherit}
.ntab:hover{border-color:rgba(15,182,201,.5)}
.ntab.is-on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(15,182,201,.25)}
.backlink{margin:0 0 14px}
.backlink a{color:var(--brand);font-size:14px;text-decoration:none}
.backlink a:hover{text-decoration:underline}
a.eyebrow{text-decoration:none}
.article-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.article-top .backlink{margin:0}

/* Note/disclaimer text (the original inline style was stripped by sanitize; only a class takes effect): contrast 4.90:1 meets WCAG AA */
.note{color:#667280}