/* ===== Google广告投放解决方案 页专属样式 pages/google-adv.css ===== */
/* 命名空间 ga- = google-adv 的页面独创区块 */
/* 地基类(section/section-alt/sec-head/eyebrow/section-title/section-lead/btn族/form族/faq-list/cta-banner/inquiry-panel/anchor-row/oem-list/wrap/[data-rv])由 site.css 提供，此处不重定义 */
/* 共享解决方案块(cg-note/cg-chainline/cg-cta-grid/cg-contact/cg-form-2col/cg-fit)复用 solutions.css */
/* 差异化策略：石墨近黑底 + Google 品牌四色(蓝#4285F4/红#EA4335/黄#F9AB00/绿#34A853)语义编码， */
/*            明显区别于其他 solutions 页的蓝色系(cg-hero)与暖色日落系(aw-hero)首屏 */
/* 四色为 Google 品牌常量，不随后台 frontPrimaryColor 换肤；三阶段用 蓝→黄→绿 递进，红用于强调 */

:root{
  --g-blue:#4285F4;--g-red:#EA4335;--g-yellow:#F9AB00;--g-green:#34A853;
  --g-blue-d:#1a73e8;--g-red-d:#d93025;--g-yellow-d:#e37400;--g-green-d:#188038;
  --g-blue-l:#8ab4f8;--g-red-l:#f28b82;--g-yellow-l:#fdd663;--g-green-l:#81c995;
  --g-ink:#0f1621;--g-ink-2:#141d29;--g-line:rgba(255,255,255,.14);--g-wa:#25D366;
}

/* ============ 1. Hero：石墨底 + Google 四色母题（差异化首屏） ============ */
.ga-hero{position:relative;overflow:hidden;color:#fff;background:
  radial-gradient(88% 78% at 88% 4%,rgba(66,133,244,.22),transparent 46%),
  radial-gradient(78% 70% at 4% 98%,rgba(52,168,83,.17),transparent 48%),
  radial-gradient(66% 60% at 82% 94%,rgba(249,171,0,.13),transparent 46%),
  linear-gradient(150deg,#111a26 0%,#0f1621 52%,#0b111a 100%)}
.ga-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(118deg,rgba(255,255,255,.045) 0 1px,transparent 1px 14px);-webkit-mask-image:radial-gradient(circle at 78% 12%,#000,transparent 76%);mask-image:radial-gradient(circle at 78% 12%,#000,transparent 76%)}
.ga-hero:after{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;background:linear-gradient(90deg,var(--g-blue) 0 25%,var(--g-red) 25% 50%,var(--g-yellow) 50% 75%,var(--g-green) 75% 100%)}
.ga-hero .wrap{position:relative;z-index:1}
.ga-hero h1,.ga-hero h2,.ga-hero h3,.ga-hero h4{color:#fff}
.ga-hero .eyebrow{color:var(--g-blue-l);opacity:1}
.ga-hero-inner{align-items:center;display:grid;gap:3.2rem;grid-template-columns:1.05fr .95fr;padding:5.2rem 0 4.8rem}
.ga-hero-copy{min-width:0}
.ga-hero-title{color:#fff;font-size:clamp(2rem,4vw,3.05rem);font-weight:800;letter-spacing:-.02em;line-height:1.16;margin:0 0 1.1rem}
.ga-c-blue{color:var(--g-blue-l)}.ga-c-red{color:var(--g-red-l)}.ga-c-yellow{color:var(--g-yellow-l)}.ga-c-green{color:var(--g-green-l)}
.ga-hero-sub{color:rgba(255,255,255,.82);font-size:1.05rem;line-height:1.75;margin:0 0 1.6rem;max-width:36rem}
.ga-hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.7rem}
.ga-hero .btn{min-height:46px}
.ga-hero .btn-primary{background:#fff;border-color:transparent;box-shadow:0 12px 30px rgba(0,0,0,.34);color:var(--g-blue-d)}
.ga-hero .btn-primary:hover{background:#f4f8ff;box-shadow:0 16px 36px rgba(0,0,0,.42);color:#174ea6}
.ga-hero .btn-ghost{background:rgba(255,255,255,.08);border-color:var(--g-line);color:#fff}
.ga-hero .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;box-shadow:none;color:#fff}
.ga-hero-points{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;list-style:none;margin:0;padding:0}
.ga-hero-points li{align-items:center;color:rgba(255,255,255,.72);display:flex;font-size:.86rem;gap:.5rem}
.ga-hero-points li:before{background:var(--g-green);content:"";flex-shrink:0;height:8px;transform:rotate(45deg);width:8px}
.ga-hero-points li:nth-child(2):before{background:var(--g-blue)}
.ga-hero-points li:nth-child(3):before{background:var(--g-yellow)}
.ga-hero-points li:nth-child(4):before{background:var(--g-red)}

/* Hero 可视化：全链路获客闭环玻璃控制台 */
.ga-console{background:rgba(255,255,255,.06);border:1px solid var(--g-line);border-radius:var(--radius);backdrop-filter:blur(10px);box-shadow:0 24px 60px rgba(0,0,0,.34);overflow:hidden;padding:1.9rem 1.8rem;position:relative}
.ga-console-bar{align-items:center;display:flex;gap:6px;margin-bottom:1.1rem}
.ga-console-bar i{border-radius:50%;height:9px;width:9px}
.ga-console-bar i:nth-child(1){background:var(--g-red)}.ga-console-bar i:nth-child(2){background:var(--g-yellow)}.ga-console-bar i:nth-child(3){background:var(--g-green)}
.ga-console-bar span{color:rgba(255,255,255,.6);font-size:.72rem;font-weight:800;letter-spacing:.14em;margin-left:.5rem;text-transform:uppercase}
.ga-console-title{color:rgba(255,255,255,.62);font-size:.74rem;font-weight:800;letter-spacing:.12em;margin:0 0 1.2rem;text-transform:uppercase}
.ga-cnode{align-items:center;background:rgba(255,255,255,.05);border:1px solid var(--g-line);border-radius:var(--radius-sm);display:flex;gap:.85rem;padding:.8rem 1rem;transition:border-color .25s ease,background .25s ease,transform .25s ease}
.ga-cnode:hover{background:rgba(255,255,255,.1);transform:translateX(4px)}
.ga-cnode-ic{align-items:center;border-radius:9px;color:#fff;display:flex;flex-shrink:0;height:34px;justify-content:center;width:34px}
.ga-cnode.is-blue .ga-cnode-ic{background:rgba(66,133,244,.24);border:1px solid rgba(138,180,248,.5);color:var(--g-blue-l)}
.ga-cnode.is-red .ga-cnode-ic{background:rgba(234,67,53,.22);border:1px solid rgba(242,139,130,.5);color:var(--g-red-l)}
.ga-cnode.is-yellow .ga-cnode-ic{background:rgba(249,171,0,.2);border:1px solid rgba(253,214,99,.5);color:var(--g-yellow-l)}
.ga-cnode.is-green .ga-cnode-ic{background:rgba(52,168,83,.22);border:1px solid rgba(129,201,149,.5);color:var(--g-green-l)}
.ga-cnode-tx b{color:#fff;display:block;font-size:.94rem;font-weight:700;line-height:1.35}
.ga-cnode-tx span{color:rgba(255,255,255,.62);font-size:.79rem}
.ga-csep{color:rgba(255,255,255,.42);display:flex;justify-content:center;line-height:1;padding:.28rem 0}
.ga-console-foot{border-top:1px solid var(--g-line);color:rgba(255,255,255,.78);font-size:.84rem;line-height:1.6;margin-top:1.2rem;padding-top:1.05rem}
.ga-console-foot b{color:var(--g-green-l)}

/* ============ 2. 为什么 Google 广告见效最快：三色顶线特征条 ============ */
.ga-why{display:grid;gap:1.3rem;grid-template-columns:repeat(3,1fr)}
.ga-why-item{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);border-top:3px solid var(--pc,var(--accent));box-shadow:var(--shadow-sm);padding:1.9rem 1.7rem;transition:box-shadow .3s ease,transform .3s ease}
.ga-why-item:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.ga-why-item.w1{--pc:var(--g-blue)}.ga-why-item.w2{--pc:var(--g-red)}.ga-why-item.w3{--pc:var(--g-green)}
.ga-why-ic{align-items:center;background:color-mix(in srgb,var(--pc) 12%,#fff);border:1px solid color-mix(in srgb,var(--pc) 26%,transparent);border-radius:12px;color:var(--pc);display:flex;height:46px;justify-content:center;margin-bottom:1.1rem;width:46px}
.ga-why-item h3{font-size:1.12rem;margin:0 0 .55rem}
.ga-why-item p{color:var(--muted);font-size:.92rem;line-height:1.72;margin:0}

/* ============ 3. 三大阶段递进（核心）：蓝→黄→绿 色阶递进 ============ */
.ga-phases{align-items:stretch;display:grid;gap:1.1rem;grid-template-columns:1fr auto 1fr auto 1fr}
.ga-phase{--pc:var(--g-blue-d);--pcb:var(--g-blue);background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden;padding:2rem 1.7rem 1.8rem;position:relative;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.ga-phase:hover{border-color:color-mix(in srgb,var(--pcb) 48%,var(--line));box-shadow:0 18px 44px color-mix(in srgb,var(--pcb) 15%,transparent);transform:translateY(-4px)}
.ga-phase:before{background:linear-gradient(90deg,var(--pcb),color-mix(in srgb,var(--pcb) 30%,transparent) 92%);content:"";height:4px;left:0;position:absolute;right:0;top:0}
.ga-phase.p2{--pc:var(--g-yellow-d);--pcb:var(--g-yellow);background:color-mix(in srgb,var(--g-yellow) 3%,#fff)}
.ga-phase.p3{--pc:var(--g-green-d);--pcb:var(--g-green);background:color-mix(in srgb,var(--g-green) 5%,#fff);border-color:color-mix(in srgb,var(--g-green) 40%,transparent)}
.ga-phase-no{-webkit-text-stroke:1.4px color-mix(in srgb,var(--pcb) 46%,transparent);color:transparent;display:block;font-family:var(--font-display);font-size:2.5rem;font-weight:800;line-height:1;margin-bottom:.4rem}
.ga-phase-kicker{color:var(--pc);display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;margin-bottom:.5rem;text-transform:uppercase}
.ga-phase h3{font-size:1.24rem;font-weight:800;margin:0 0 .35rem}
.ga-phase-role{color:var(--pc);font-size:.9rem;font-weight:700;margin:0 0 .85rem}
.ga-phase-lead{color:var(--muted);font-size:.92rem;line-height:1.72;margin:0 0 1.2rem}
.ga-phase-list{border-top:1px solid color-mix(in srgb,var(--pcb) 18%,var(--line));display:grid;gap:.7rem;list-style:none;margin:0;padding:1.15rem 0 0}
.ga-phase-list li{align-items:flex-start;color:var(--paper-soft);display:flex;font-size:.9rem;gap:.6rem;line-height:1.55}
.ga-phase-list li:before{color:var(--pc);content:"\2713";flex-shrink:0;font-weight:800}
.ga-phase-chip{background:color-mix(in srgb,var(--pcb) 12%,#fff);border:1px solid color-mix(in srgb,var(--pcb) 30%,transparent);border-radius:999px;color:var(--pc);display:inline-block;font-size:.76rem;font-weight:700;margin-top:1.2rem;padding:.34rem .9rem}
.ga-phase-arrow{align-self:center;color:color-mix(in srgb,var(--g-yellow) 60%,var(--muted));display:flex;justify-content:center}

/* ============ 4. 服务流程 Flow：五步色环节点 + 连接轨 ============ */
.ga-flow{display:grid;gap:1.1rem;grid-template-columns:repeat(5,1fr);position:relative}
.ga-fstep{position:relative}
.ga-fnode{align-items:center;background:#fff;border:2px solid var(--pcb,var(--g-blue));border-radius:50%;color:var(--pc,var(--g-blue-d));display:flex;font-family:var(--font-display);font-size:1.05rem;font-weight:800;height:52px;justify-content:center;margin:0 auto 1rem;position:relative;width:52px;z-index:1}
.ga-fstep:not(:last-child):after{background:linear-gradient(90deg,var(--pcb,var(--g-blue)),var(--line-strong));content:"";height:2px;left:calc(50% + 26px);position:absolute;top:26px;width:calc(100% - 52px);z-index:0}
.ga-fstep.f1{--pc:var(--g-blue-d);--pcb:var(--g-blue)}.ga-fstep.f2{--pc:var(--g-red-d);--pcb:var(--g-red)}
.ga-fstep.f3{--pc:var(--g-yellow-d);--pcb:var(--g-yellow)}.ga-fstep.f4{--pc:var(--g-green-d);--pcb:var(--g-green)}
.ga-fstep.f5{--pc:var(--g-blue-d);--pcb:var(--g-blue)}
.ga-fstep-body{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);height:calc(100% - 62px);padding:1.5rem 1.3rem;text-align:center;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.ga-fstep:hover .ga-fstep-body{border-color:color-mix(in srgb,var(--pcb) 45%,var(--line));box-shadow:var(--shadow-md);transform:translateY(-4px)}
.ga-fstep-body h3{font-size:1.02rem;margin:0 0 .5rem}
.ga-fstep-body p{color:var(--muted);font-size:.86rem;line-height:1.66;margin:0}

/* ============ 5. 能力矩阵：广告类型紧凑瓷砖 ============ */
.ga-subhead{align-items:center;display:flex;gap:.7rem;margin:0 0 1.2rem}
.ga-subhead i{background:var(--g-blue);border-radius:3px;flex-shrink:0;height:18px;width:4px}
.ga-subhead h3{font-size:1.14rem;margin:0}
.ga-subhead.alt i{background:var(--g-green)}
.ga-adtypes{display:grid;gap:1rem;grid-template-columns:repeat(5,1fr);margin-bottom:2.6rem}
.ga-adtype{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.5rem 1.2rem;text-align:center;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.ga-adtype:hover{border-color:color-mix(in srgb,var(--pcb) 45%,var(--line));box-shadow:var(--shadow-md);transform:translateY(-4px)}
.ga-adtype.t1{--pcb:var(--g-blue);--pc:var(--g-blue-d)}.ga-adtype.t2{--pcb:var(--g-red);--pc:var(--g-red-d)}
.ga-adtype.t3{--pcb:var(--g-yellow);--pc:var(--g-yellow-d)}.ga-adtype.t4{--pcb:var(--g-green);--pc:var(--g-green-d)}
.ga-adtype.t5{--pcb:var(--g-blue);--pc:var(--g-blue-d)}
.ga-adtype-ic{align-items:center;background:color-mix(in srgb,var(--pcb) 12%,#fff);border:1px solid color-mix(in srgb,var(--pcb) 26%,transparent);border-radius:12px;color:var(--pc);display:flex;height:46px;justify-content:center;margin:0 auto .9rem;width:46px}
.ga-adtype h4{font-size:1rem;margin:0 0 .4rem}
.ga-adtype p{color:var(--muted);font-size:.82rem;line-height:1.6;margin:0}

/* ============ 6. 信任背书：石墨深色压阵带 + 四色徽章 + 数据 ============ */
.ga-trust{padding:96px 0;background:
  radial-gradient(80% 70% at 12% 8%,rgba(66,133,244,.18),transparent 46%),
  radial-gradient(72% 66% at 92% 92%,rgba(52,168,83,.15),transparent 48%),
  linear-gradient(150deg,#111a26 0%,#0f1621 55%,#0b111a 100%);color:#fff;overflow:hidden;position:relative}
.ga-trust:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--g-blue) 0 25%,var(--g-red) 25% 50%,var(--g-yellow) 50% 75%,var(--g-green) 75% 100%)}
.ga-trust .section-title,.ga-trust h2,.ga-trust h3{color:#fff}
.ga-trust .eyebrow{color:var(--g-yellow-l)}
.ga-trust .section-lead{color:rgba(255,255,255,.74)}
.ga-badges{display:grid;gap:1.1rem;grid-template-columns:repeat(3,1fr);margin-top:.5rem}
.ga-badge{background:rgba(255,255,255,.05);border:1px solid var(--g-line);border-radius:var(--radius);padding:1.6rem 1.5rem;transition:background .3s ease,border-color .3s ease,transform .3s ease}
.ga-badge:hover{background:rgba(255,255,255,.09);border-color:color-mix(in srgb,var(--pcb) 55%,transparent);transform:translateY(-3px)}
.ga-badge.b1{--pcb:var(--g-blue);--pcl:var(--g-blue-l)}.ga-badge.b2{--pcb:var(--g-green);--pcl:var(--g-green-l)}
.ga-badge.b3{--pcb:var(--g-yellow);--pcl:var(--g-yellow-l)}.ga-badge.b4{--pcb:var(--g-red);--pcl:var(--g-red-l)}
.ga-badge.b5{--pcb:var(--g-blue);--pcl:var(--g-blue-l)}.ga-badge.b6{--pcb:var(--g-green);--pcl:var(--g-green-l)}
.ga-badge-ic{align-items:center;background:color-mix(in srgb,var(--pcb) 22%,transparent);border:1px solid color-mix(in srgb,var(--pcb) 45%,transparent);border-radius:11px;color:var(--pcl);display:flex;height:44px;justify-content:center;margin-bottom:1rem;width:44px}
.ga-badge h3{font-size:1.06rem;margin:0 0 .45rem}
.ga-badge p{color:rgba(255,255,255,.68);font-size:.88rem;line-height:1.68;margin:0}
.ga-stats{border-top:1px solid var(--g-line);display:grid;gap:1.4rem;grid-template-columns:repeat(4,1fr);margin-top:2.6rem;padding-top:2.2rem}
.ga-stat{text-align:center}
.ga-stat-num{color:var(--pcl,#fff);font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;line-height:1.1}
.ga-stat.s1 .ga-stat-num{color:var(--g-blue-l)}.ga-stat.s2 .ga-stat-num{color:var(--g-green-l)}
.ga-stat.s3 .ga-stat-num{color:var(--g-yellow-l)}.ga-stat.s4 .ga-stat-num{color:var(--g-red-l)}
.ga-stat-label{color:rgba(255,255,255,.72);font-size:.86rem;font-weight:600;margin-top:.4rem}
.ga-trust-cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.4rem}
.ga-wa{align-items:center;background:var(--g-wa);border:1.5px solid var(--g-wa);border-radius:var(--radius-sm);color:#06341d;display:inline-flex;font-size:.95rem;font-weight:700;gap:.5rem;justify-content:center;min-height:46px;padding:.7rem 1.6rem;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.ga-wa:hover{box-shadow:0 12px 28px rgba(37,211,102,.34);transform:translateY(-2px)}
.ga-trust .btn-ghost{background:rgba(255,255,255,.08);border-color:var(--g-line);color:#fff}
.ga-trust .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;box-shadow:none;color:#fff}

/* ============ 7. 适合哪些企业：三卡 + 勾选行 ============ */
.ga-fitcards{display:grid;gap:1.3rem;grid-template-columns:repeat(3,1fr);margin-bottom:2.4rem}
.ga-fitcard{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.ga-fitcard:hover{border-color:color-mix(in srgb,var(--pcb) 45%,var(--line));box-shadow:var(--shadow-md);transform:translateY(-4px)}
.ga-fitcard.k1{--pcb:var(--g-blue);--pc:var(--g-blue-d)}.ga-fitcard.k2{--pcb:var(--g-yellow);--pc:var(--g-yellow-d)}.ga-fitcard.k3{--pcb:var(--g-green);--pc:var(--g-green-d)}
.ga-fitcard-top{align-items:center;background:color-mix(in srgb,var(--pcb) 7%,#fff);border-bottom:1px solid var(--line);display:flex;gap:.85rem;padding:1.4rem 1.6rem}
.ga-fitcard-ic{align-items:center;background:#fff;border:1px solid color-mix(in srgb,var(--pcb) 30%,transparent);border-radius:12px;color:var(--pc);display:flex;flex-shrink:0;height:46px;justify-content:center;width:46px}
.ga-fitcard-top h3{font-size:1.1rem;margin:0}
.ga-fitcard-body{padding:1.4rem 1.6rem 1.7rem}
.ga-fitcard-body p{color:var(--muted);font-size:.92rem;line-height:1.72;margin:0}
.ga-checks{display:grid;gap:.8rem 1.5rem;grid-template-columns:1fr 1fr;list-style:none;margin:0;padding:0}
.ga-check{align-items:flex-start;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-sm);display:flex;gap:.7rem;padding:1rem 1.2rem;transition:border-color .3s ease}
.ga-check:hover{border-color:color-mix(in srgb,var(--g-blue) 42%,var(--line))}
.ga-check-ic{align-items:center;background:color-mix(in srgb,var(--g-green) 14%,#fff);border-radius:50%;color:var(--g-green-d);display:flex;flex-shrink:0;font-size:.76rem;font-weight:800;height:24px;justify-content:center;width:24px}
.ga-check p{color:var(--paper-soft);font-size:.92rem;line-height:1.55;margin:0}

/* ============ 8. 底部 CTA：联系方式行（复用 cg-cta-grid/inquiry-panel） ============ */
.ga-cta-btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.ga-form-note{color:var(--muted);font-size:.78rem;margin-top:.6rem}

/* ============ 响应式塌缩 ============ */
@media (max-width:1024px){
  .ga-hero-inner{gap:2.4rem;grid-template-columns:1fr;padding:3.8rem 0 3.2rem}
  .ga-why,.ga-badges,.ga-fitcards{grid-template-columns:1fr 1fr}
  .ga-adtypes{grid-template-columns:repeat(3,1fr)}
  .ga-phases{gap:.9rem;grid-template-columns:1fr}
  .ga-phase-arrow{display:none}
  .ga-flow{grid-template-columns:repeat(3,1fr);gap:1.4rem}
  .ga-fstep:not(:last-child):after{display:none}
  .ga-stats{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .ga-why,.ga-badges,.ga-fitcards,.ga-checks{grid-template-columns:1fr}
  .ga-adtypes{grid-template-columns:1fr 1fr}
  .ga-flow{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .ga-adtypes,.ga-flow,.ga-stats{grid-template-columns:1fr}
  .ga-hero-actions .btn{width:100%}
  .ga-fstep-body{height:auto}
}
@media (prefers-reduced-motion:reduce){
  .ga-why-item:hover,.ga-phase:hover,.ga-fstep:hover .ga-fstep-body,.ga-adtype:hover,.ga-badge:hover,.ga-fitcard:hover,.ga-cnode:hover{transform:none}
}