/* ============ product-graphic 图形商标查询(claude.ai/design 定稿实施) ============ */
/* 设计真源:design_handoff_one1_products/product-graphic.dc.html;token 见 docs/design.md v2 */

.pg{color:#17171C;background:#fff}
.pg .wrap{max-width:1216px;margin:0 auto;padding:0 24px}
.pg a{text-decoration:none}

@keyframes o1Beam{0%{transform:translateX(-130%) rotate(-16deg)}70%{transform:translateX(130%) rotate(-16deg)}100%{transform:translateX(130%) rotate(-16deg)}}
@keyframes o1Pulse{0%{box-shadow:0 0 0 0 rgba(52,24,240,.35)}70%{box-shadow:0 0 0 6px rgba(52,24,240,0)}100%{box-shadow:0 0 0 0 rgba(52,24,240,0)}}

/* ---------- Hero ---------- */
.pg-hero{position:relative;overflow:hidden}
.pg .pg-hero-in{position:relative;display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;column-gap:48px;padding:72px 24px 64px}
.pg-eyebrow{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:#3418F0}
.pg-hero h1{margin:26px 0 0;font-size:42px;font-weight:700;letter-spacing:.01em;line-height:1.3;white-space:nowrap}
.pg-sub{margin:22px 0 0;max-width:420px;font-size:15px;color:#55555E;line-height:2.1}
.pg-cta-row{display:flex;align-items:center;gap:30px;margin-top:38px}
.pg-btn-dark{display:flex;align-items:center;gap:10px;background:#0E0E12;color:#fff;font-size:14px;font-weight:600;padding:14px 28px;border-radius:999px;transition:background .15s ease,gap .15s ease}
.pg-btn-dark:hover{background:#26262E;color:#fff;gap:13px}
.pg-link-ul{font-size:14px;font-weight:600;color:#26262B;padding-bottom:3px;border-bottom:1.5px solid #26262B;transition:color .15s ease,border-color .15s ease}
.pg-link-ul:hover{color:#3418F0;border-color:#3418F0}

/* Hero 视觉:电路层 → 背景叠卡 → 主卡 → 反馈标签 */
.pg-vis{position:relative;height:420px}
.pg-circ,.pg-backs{position:absolute;inset:0;transition:transform .55s cubic-bezier(.22,.7,.25,1)}
.pg-dash1{position:absolute;left:4%;top:14%;width:34%;height:1px;border-top:1px dashed #C9C0F5}
.pg-dash2{position:absolute;right:6%;top:26%;width:26%;height:1px;border-top:1px dashed #C9C0F5;transform:rotate(-24deg)}
.pg-mote{position:absolute;left:14%;bottom:20%;width:5px;height:5px;border-radius:50%;background:#B9AEFF}
.pg-node{position:absolute}
.pg-node i{position:absolute;left:0;top:0;width:6px;height:6px;border-radius:50%;background:#C9C0F5;transform:translate(-50%,-50%) scale(1);transition:background .35s ease,transform .35s ease,box-shadow .35s ease}
.pg-node.lit i{background:#3418F0;transform:translate(-50%,-50%) scale(1.55);box-shadow:0 0 0 4px rgba(52,24,240,.14)}
.pg-node b{position:absolute;top:-12px;display:flex;align-items:center;gap:5px;background:#fff;border:1px solid #E2E2E9;border-radius:999px;padding:4px 11px;box-shadow:0 8px 20px rgba(20,20,50,.08);font-size:11px;font-weight:600;color:#17171C;white-space:nowrap;opacity:0;transform:translateY(5px);transition:opacity .35s ease .12s,transform .35s ease .12s;pointer-events:none}
.pg-node b::before{content:'';width:5px;height:5px;border-radius:50%;background:#3418F0;flex:none}
.pg-node.lit b{opacity:1;transform:none}
.pg-node.r b{right:14px}
.pg-node.l b{left:14px}
.pg-back1{position:absolute;left:50%;top:50%;width:296px;height:296px;transform:translate(-58%,-58%) rotate(-10deg);border:1px solid #E6E6EE;border-radius:20px;background:rgba(255,255,255,.55)}
.pg-back2{position:absolute;left:50%;top:50%;width:296px;height:296px;transform:translate(-42%,-44%) rotate(9deg);border:1px solid #E9E9F1;border-radius:20px;background:rgba(255,255,255,.4)}
.pg-card{position:absolute;left:50%;top:50%;width:300px;height:300px;transform:translate(-50%,-51%) rotate(-3deg);background:linear-gradient(155deg,#FFFFFF 55%,#F4F4F8);border-radius:20px;box-shadow:0 34px 70px rgba(20,20,50,.14),0 6px 18px rgba(20,20,50,.05);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:box-shadow .45s ease}
.pg-card.flash{box-shadow:0 34px 70px rgba(20,20,50,.14),0 6px 18px rgba(20,20,50,.05),0 0 0 2px rgba(82,56,248,.45),0 0 36px rgba(82,56,248,.3)}
.pg-beam{position:absolute;left:-30%;top:42%;width:160%;height:46px;background:linear-gradient(90deg,rgba(122,92,255,0) 8%,rgba(122,92,255,.28) 46%,rgba(52,24,240,.4) 52%,rgba(122,92,255,.28) 58%,rgba(122,92,255,0) 92%);filter:blur(2px);animation:o1Beam 4.6s ease-in-out infinite}
.pg-beam-core{position:absolute;left:-30%;top:50.2%;width:160%;height:2px;background:linear-gradient(90deg,rgba(122,92,255,0),#6A4DFF 50%,rgba(122,92,255,0));animation:o1Beam 4.6s ease-in-out -4.48s infinite}
.pg-tag{position:absolute;right:5%;top:8%;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #E2E2E9;border-radius:999px;padding:7px 14px;box-shadow:0 10px 26px rgba(20,20,50,.10);font-size:12px;font-weight:600;color:#17171C;opacity:0;transform:translateY(8px) scale(.96);transition:opacity .4s cubic-bezier(.22,.7,.25,1),transform .4s cubic-bezier(.22,.7,.25,1);pointer-events:none}
.pg-tag.show{opacity:1;transform:none}

/* ---------- 步骤条(走灯) ---------- */
.pg-steps{border-top:1px solid #E8E8ED}
.pg .pg-steps-in{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;column-gap:28px;padding:22px 24px}
.pg-step{display:flex;align-items:center;gap:12px}
.pg-step .n{font-size:12px;font-weight:700;color:#A5A5AE;transition:color .4s ease}
.pg-step.on .n{color:#3418F0}
.pg-step .t{font-size:13px;font-weight:700;color:#17171C;white-space:nowrap}
.pg-step .ln{flex:1;height:1px;background:#E4E4EA;position:relative}
.pg-step .ln i{position:absolute;right:18%;top:-3.5px;width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid #3418F0;opacity:0;transition:opacity .35s ease;animation:o1Pulse 2s ease-out infinite}
.pg-step.on .ln i{opacity:1}

/* ---------- 看见相似 ---------- */
.pg-sim{border-top:1px solid #E8E8ED;background:#FAFAFB}
.pg .pg-sim-in{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;column-gap:56px;padding:96px 24px}
.pg-h2{margin:0;font-size:31px;font-weight:700;letter-spacing:.01em}
.pg-lead{margin:22px 0 0;max-width:380px;font-size:14px;color:#8A8A94;line-height:2.1}
.pg-more{display:inline-flex;align-items:center;gap:7px;margin-top:26px;font-size:13px;font-weight:600;color:#3418F0}
.pg-sim-vis{position:relative;display:grid;grid-template-columns:1fr 200px 1fr;align-items:center;column-gap:8px}
.pg-bird{display:flex;justify-content:center;position:relative}
.pg-anchor{position:absolute;width:9px;height:9px;border-radius:50%;background:#fff;border:2.5px solid #C9C0F5;transform:scale(1);box-shadow:none;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.pg-anchor.on{border-color:#3418F0;transform:scale(1.45);box-shadow:0 0 0 4px rgba(52,24,240,.12)}
.pg-evid{display:flex;flex-direction:column;gap:22px;position:relative;padding:8px 0}
.pg-evid-line{position:absolute;left:-34px;right:-34px;top:50%;height:1px;border-top:1px dashed #C9C0F5;transform-origin:50% 50%}
.pg-evid-tag{position:relative;align-self:center;font-size:13px;font-weight:600;color:#A39BDD;text-align:center;background:#FAFAFB;padding:5px 16px;border-radius:999px;transition:background .4s ease,color .4s ease}
.pg-evid-tag.on{background:#EEEBFF;color:#3418F0}

/* ---------- 决策报告 ---------- */
.pg-report{border-top:1px solid #E8E8ED}
.pg .pg-report-in{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;column-gap:64px;padding:96px 24px 132px}
.pg-points{display:flex;flex-direction:column;gap:26px;margin-top:40px}
.pg-point{display:grid;grid-template-columns:26px 1fr;column-gap:14px;align-items:start}
.pg-point .t{font-size:15px;font-weight:700}
.pg-point .d{font-size:13px;color:#98989F;line-height:1.9;margin-top:6px}
.pg-paper{transform:rotate(-5deg);background:#FDFDFE;border-radius:8px;box-shadow:0 40px 80px rgba(25,25,60,.14),0 8px 20px rgba(25,25,60,.06),8px 8px 0 -1px #F0F0F4,9px 9px 0 0 #E4E4EA;padding:34px 40px 36px;max-width:560px;justify-self:center}
.pg-paper .hd{font-size:15px;font-weight:800;letter-spacing:.04em}
.pg-paper .hr{height:1px;background:#E8E8ED;margin:18px 0 20px}
.pg-paper .meta{display:grid;grid-template-columns:1fr 1fr;row-gap:16px}
.pg-paper .kv{display:flex;align-items:baseline;gap:14px}
.pg-paper .k{font-size:12px;color:#9A9AA4;flex:none}
.pg-paper .v{font-size:13px;font-weight:600}
.pg-paper .thumb{width:44px;height:44px;border:1px solid #E6E6EC;border-radius:8px;display:flex;align-items:center;justify-content:center}
.pg-paper .concl{display:grid;grid-template-columns:74px 1fr;column-gap:20px;align-items:start}
.pg-paper .risk{font-size:19px;font-weight:800;font-style:italic;color:#3418F0}
.pg-paper .rd{font-size:12px;color:#8A8A94;line-height:1.85;margin-top:8px}
.pg-paper .score-row{display:grid;grid-template-columns:74px 1fr;column-gap:20px;align-items:baseline;margin-top:22px}
.pg-paper .score{font-size:38px;font-weight:800;font-style:italic;color:#3418F0;letter-spacing:-.02em}
.pg-paper .evids{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.pg-paper .ev{display:flex;align-items:center;gap:6px;font-size:12px;color:#45454E}
.pg-paper .ev i{width:6px;height:6px;border-radius:50%;flex:none}

/* ---------- 数据可循 ---------- */
.pg-stats{border-top:1px solid #E8E8ED;background:#FAFAFB}
.pg .pg-stats-in{padding:84px 24px 88px}
.pg-stats h2{margin:0;text-align:center;font-size:27px;font-weight:700;letter-spacing:.02em}
.pg-stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:52px}
.pg-stat{text-align:center;padding:8px 20px}
.pg-stat.mid{border-left:1px solid #E4E4EA;border-right:1px solid #E4E4EA}
.pg-stat svg{margin:0 auto;display:block}
.pg-stat .big{margin-top:16px;font-size:30px;font-weight:800;color:#3418F0;letter-spacing:-.01em}
.pg-stat .big .u{font-size:19px}
.pg-stat .name{font-size:14px;font-weight:700;margin-top:10px}
.pg-stat .t2{margin-top:18px;font-size:20px;font-weight:800}
.pg-stat .d2{font-size:12px;color:#9A9AA4;margin-top:10px}

/* ---------- FAQ ---------- */
.pg-faq{border-top:1px solid #E8E8ED}
.pg-faq-in{max-width:880px;margin:0 auto;padding:88px 24px 96px}
.pg-faq h2{margin:0;text-align:center;font-size:29px;font-weight:700;letter-spacing:.02em}
.pg-faq-list{margin-top:40px}
.pg-faq-item{border-bottom:1px solid #E8E8ED}
.pg-faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 4px;cursor:pointer;background:none;border:0;width:100%;text-align:left;font-family:inherit;color:inherit;transition:opacity .2s ease}
.pg-faq-q:hover{opacity:.7}
.pg-faq-q .q{font-size:15px;font-weight:600}
.pg-faq-q svg{flex:none;transform:rotate(0deg);transition:transform .25s ease}
.pg-faq-item.open .pg-faq-q svg{transform:rotate(45deg)}
.pg-faq-a{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .3s ease}
.pg-faq-item.open .pg-faq-a{max-height:200px;opacity:1}
.pg-faq-a .a{padding:0 44px 22px 4px;font-size:13px;color:#8A8A94;line-height:1.95}

/* ---------- CTA ---------- */
.pg-cta{position:relative;overflow:hidden;background:#08080B}
.pg-cta .deco1{position:absolute;right:6%;top:50%;transform:translateY(-50%) rotate(-13deg);width:320px;height:190px;border:1px solid rgba(255,255,255,.09);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:52px;font-weight:800;color:rgba(255,255,255,.06);letter-spacing:-.02em}
.pg-cta .deco2{position:absolute;right:17%;top:58%;transform:rotate(-5deg);width:280px;height:166px;border:1px solid rgba(255,255,255,.06);border-radius:16px}
.pg-cta .dot1{position:absolute;right:9%;top:24%;width:5px;height:5px;border-radius:50%;background:rgba(138,118,255,.5)}
.pg-cta .dot2{position:absolute;right:30%;bottom:20%;width:4px;height:4px;border-radius:50%;background:rgba(138,118,255,.35)}
.pg .pg-cta-in{position:relative;padding:92px 24px 100px}
.pg-cta-h{font-size:40px;font-weight:700;color:#fff;letter-spacing:.01em}
.pg-cta-row2{display:flex;align-items:center;gap:34px;margin-top:42px}
.pg-btn-blue{display:flex;align-items:center;gap:9px;background:#3418F0;color:#fff;font-size:14px;font-weight:600;padding:14px 34px;border-radius:999px;box-shadow:0 12px 36px rgba(52,24,240,.4);transition:background .15s ease}
.pg-btn-blue:hover{background:#2B10D8;color:#fff}
.pg-link-w{display:flex;align-items:center;gap:8px;color:#fff;font-size:14px;font-weight:600;padding-bottom:3px;border-bottom:1.5px solid rgba(255,255,255,.4);transition:border-color .15s ease}
.pg-link-w:hover{color:#fff;border-color:#fff}

/* ---------- 响应式(设计稿为桌面定稿,以下为保守降级) ---------- */
@media (max-width:1080px){
  .pg .pg-hero-in{grid-template-columns:1fr;row-gap:44px;padding:52px 24px 44px}
  .pg-hero h1{white-space:normal;font-size:34px}
  .pg-vis{height:380px}
  .pg-steps-in{grid-template-columns:1fr 1fr;row-gap:14px}
  .pg-step .ln{display:none!important}
  .pg .pg-sim-in,.pg .pg-report-in{grid-template-columns:1fr;row-gap:48px;padding:64px 24px}
  .pg-paper{justify-self:start;transform:rotate(-2deg)}
  .pg-stats-grid{grid-template-columns:1fr;row-gap:36px}
  .pg-stat.mid{border-left:0;border-right:0;border-top:1px solid #E4E4EA;border-bottom:1px solid #E4E4EA;padding:36px 20px}
  .pg-cta-h{font-size:30px}
  .pg-cta .deco1,.pg-cta .deco2{display:none}
}
@media (max-width:560px){
  .pg-hero h1{font-size:27px}
  .pg-sim-vis{grid-template-columns:1fr;row-gap:20px}
  .pg-evid-line{display:none}
  .pg-paper{padding:26px 22px 28px}
  .pg-cta-row2{flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){
  .pg *{animation:none!important;transition:none!important}
}
