/* ══ /performance-marketing/ — page CSS. Shared section styles purged from digital-marketing.css + seo.css + smo.css (metrics) + ppc.css + pm.css ══ */
.dmh { position: relative; overflow: hidden; height: 634px; padding: 64px 0 60px; display: flex; align-items: center; color: #fff; background: linear-gradient(160deg, #0c0c0e 0%, #141416 55%, #1b1b1e 100%); }
.dmh::before, .dmh::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.dmh::before { width: 760px; height: 760px; right: -260px; top: -320px; background: radial-gradient(circle, rgba(242,102,41,.16), transparent 65%); }
.dmh::after { width: 560px; height: 560px; left: -260px; bottom: -320px; background: radial-gradient(circle, rgba(242,102,41,.08), transparent 65%); }
.dmh .container { position: relative; z-index: 1; }
.dmh-grid { display: grid; grid-template-columns: 58fr 42fr; gap: 40px; align-items: center; }
.dmh .dmh-h1 { margin: 0 0 18px; font-size: 48px; line-height: 1.2; font-weight: 700; letter-spacing: -0.5px; color: #fff; text-transform: none; }
.dmh-acc { color: #f26629; }
.dmh .dmh-sub { display: block; margin-top: 12px; font-size: 26px; line-height: 1.3; letter-spacing: 0; color: rgba(255,255,255,.9); }
.dmh-lead { margin: 0 0 24px; max-width: 600px; font-size: 18px; line-height: 1.667; color: rgba(255,255,255,.72); }
.dmh-lead strong { color: #fff; }
.dmh-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.dmh-btns a { margin: 0 !important; }
.dmh-right { position: relative; height: 470px; }
.dm-g { position: absolute; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (max-width: 1199px) { .dmh-right { transform: scale(.88); transform-origin: center right; } }
@media (max-width: 991px) { .dmh { height: auto; padding: 48px 0 44px; } .dmh-grid { grid-template-columns: 1fr; gap: 24px; } .dmh .dmh-h1 { font-size: 36px; } .dmh .dmh-sub { font-size: 22px; } .dmh-right { transform: none; max-width: 470px; width: 100%; margin: 0 auto; } }
@media (max-width: 576px) { .dmh .dmh-h1 { font-size: 26px; line-height: 1.25; } .dmh .dmh-sub { font-size: 19px; margin-top: 8px; } .dmh-lead { font-size: 16px; } .dmh-btns a { flex: 1 1 100%; text-align: center; } .dmh-right { height: 470px; transform: scale(.78); transform-origin: top center; width: 128%; margin: 0 -14% -104px; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .dmh *, .dmh *::before, .dmh *::after { animation: none !important; } }
.dm-stack { list-style: none; margin: 0 0 28px; padding: 0; max-width: 520px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dm-stack li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-left: 3px solid #f26629; }
.dm-stack .fa { font-size: 15px; color: #f26629; }
.dm-stack span { font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.6); }
.dm-stack b { display: block; font-size: 15px; font-weight: 800; letter-spacing: .04em; color: #fff; }
@keyframes dmSpin { to { transform: rotate(360deg); } }
@keyframes dmPulse { 50% { box-shadow: 0 0 0 18px rgba(242,102,41,.06), 0 20px 50px -10px rgba(242,102,41,.7); } }
@keyframes dmFlow { to { left: 110%; } }
@media (max-width: 576px) { .dm-stack { grid-template-columns: 1fr; } }
.dmd { position: relative; padding: 80px 0; background: #f7f8fb; }
.dmd-head { margin-bottom: 40px; text-align: center; }
.dmd .subtitle_text { display: inline-flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 400; line-height: 1.5; color: #f26629; }
.dmd .subtitle_text::before, .dmd .subtitle_text::after { content: ''; width: 40px; height: 2px; border-radius: 2px; background: #f26629; }
.dmd h2 { margin: 0 0 12px; font-size: 24px; font-weight: 700; line-height: 1.35; letter-spacing: 0; color: #3c4858; }
.dmd p { margin: 0 0 16px; font-size: 16px; line-height: 1.667; color: #5b6472; }
.dmd p strong { color: #3c4858; }
.dmd-tag { display: inline-flex; padding: 6px 14px; border-radius: 30px; font-size: 14px; font-weight: 600; color: #f26629; background: rgba(242,102,41,.08); }
.dmd-svc { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dmd-svc li { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #eceff4; transition: border-color .25s, transform .25s, box-shadow .25s; }
.dmd-svc li:hover { border-color: rgba(242,102,41,.4); transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(242,102,41,.5); }
.dmd-svc li > .fa { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: #f26629; background: rgba(242,102,41,.1); }
.dmd-svc b { display: block; font-size: 16px; font-weight: 700; line-height: 1.35; color: #3c4858; }
.dmd-svc small { display: block; font-size: 14px; line-height: 1.45; color: #7a8391; }
.dmd-svc em, .dmd-c-t em { position: absolute; top: 10px; right: 12px; padding: 2px 8px; border-radius: 20px; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: #f26629; }
.dmd-svc li.is-new { border-color: rgba(242,102,41,.35); background: #fff8f4; }
@media (max-width: 576px) { .dmd { padding: 60px 0; } .dmd-head { margin-bottom: 30px; } .dmd .subtitle_text { font-size: 16px; } .dmd h2 { font-size: 20px; } }
.dmd-a-box { display: grid; grid-template-columns: 300px 1fr; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid #eceff4; box-shadow: 0 24px 60px rgba(23,59,90,.07); }
.dmd-a-nav { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: #fbfbfd; border-right: 1px solid #eceff4; }
.dmd-a-tab { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid transparent; border-radius: 16px; background: transparent; text-align: left; cursor: pointer; transition: background .25s, border-color .25s, box-shadow .25s; }
.dmd-a-tab .fa { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; color: #8a93a2; background: #eef1f6; transition: background .25s, color .25s; }
.dmd-a-tab b { display: block; font-size: 18px; font-weight: 700; color: #3c4858; }
.dmd-a-tab small { display: block; font-size: 14px; color: #8a93a2; }
.dmd-a-tab:hover { background: #fff; border-color: #eceff4; }
.dmd-a-tab.is-on { background: #fff; border-color: rgba(242,102,41,.35); box-shadow: 0 14px 30px -18px rgba(242,102,41,.6); }
.dmd-a-tab.is-on .fa { color: #fff; background: #f26629; }
.dmd-a-pans { padding: 44px 48px; }
.dmd-a-pan { display: none; }
.dmd-a-pan.is-on { display: block; animation: dmdIn .4s ease both; }
@keyframes dmdIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dmd-svc--a { grid-template-columns: repeat(3, 1fr); margin-top: 8px; }
@media (max-width: 991px) { .dmd-a-box { grid-template-columns: 1fr; } .dmd-a-nav { flex-direction: row; border-right: 0; border-bottom: 1px solid #eceff4; overflow-x: auto; } .dmd-a-tab { flex: 1 0 auto; } .dmd-a-pans { padding: 32px; } .dmd-svc--a { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .dmd-a-nav { padding: 12px; gap: 6px; } .dmd-a-tab { padding: 10px; gap: 8px; flex-direction: column; text-align: center; } .dmd-a-tab small { display: none; } .dmd-a-tab b { font-size: 15px; } .dmd-a-tab .fa { width: 36px; height: 36px; font-size: 14px; } .dmd-a-pans { padding: 24px 20px; } .dmd-svc--a { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .dmd-a-pan.is-on { animation: none; } }
@keyframes dmtRun { to { transform: translateX(-50%); } }
.dmc { padding: 80px 0; background: #f7f8fb; }
.dmc-head { max-width: 860px; margin: 0 auto 40px; text-align: center; }
.dmc .subtitle_text { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 8px; font-size: 18px; font-weight: 400; line-height: 1.5; color: #f26629; }
.dmc .subtitle_text::before, .dmc .subtitle_text::after { content: ''; width: 40px; height: 2px; border-radius: 2px; background: #f26629; }
.dmc .dmc-title { margin: 0 0 14px; font-size: 38px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: #3c4858; background: none; -webkit-text-fill-color: currentColor; }
.dmc-hl { color: #f26629; }
.dmc .dmc-sub { margin: 0; font-size: 18px; line-height: 1.667; color: #5b6472; }
.dmc h3 { margin: 0 0 8px; font-size: 24px; font-weight: 700; line-height: 1.35; letter-spacing: 0; color: #3c4858; }
.dmc h3 span { color: #f26629; }
.dmc p { margin: 0 0 16px; font-size: 16px; line-height: 1.667; color: #5b6472; }
.dmc-badge { display: inline-flex; padding: 6px 14px; border-radius: 30px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #f26629; }
.dmc-flag { width: 40px; height: 27px; border-radius: 5px; object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.dmc-site { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 30px; font-size: 14px; font-weight: 600; }
.dmc-site .fa { font-size: 12px; color: #f26629; }
.dmc-lbl { display: block; margin: 0 0 10px; font-size: 12px; line-height: 1.5; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a93a2; }
.dmc-st { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.dmc-st div { padding: 14px 16px; border-radius: 14px; background: #fff4ee; }
.dmc-st b { display: block; font-size: 28px; font-weight: 800; line-height: 1.2; color: #f26629; }
.dmc-st small { display: block; font-size: 13px; line-height: 1.4; color: #5b6472; }
.dmc-kw { list-style: none; margin: 0 0 18px; padding: 0; }
.dmc-kw li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eceff4; font-size: 15px; color: #3c4858; }
.dmc-kw li > span { flex: 1; min-width: 0; }
.dmc-rk { flex-shrink: 0; min-width: 40px; padding: 4px 8px; border-radius: 20px; text-align: center; font-style: normal; font-size: 13px; font-weight: 800; }
.dmc-rk.r1 { color: #fff; background: #f26629; }
.dmc-rk.r2 { color: #f26629; background: rgba(242,102,41,.12); }
.dmc-rk.r4 { color: #5b6472; background: #eef1f6; }
.dmc-bar { flex: 0 0 120px; height: 6px; border-radius: 6px; background: #eef1f6; overflow: hidden; }
.dmc-bar b { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ffb48f, #f26629); }
.dmc-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #f26629; text-decoration: none; transition: gap .2s; }
.dmc-link:hover { gap: 12px; color: #e05a1f; text-decoration: none; }
.dmc-more { margin-top: 40px; text-align: center; }
.dmc-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 8px; font-size: 15px; font-weight: 700; color: #fff; background: #f26629; text-decoration: none; box-shadow: 0 14px 30px -14px rgba(242,102,41,.8); transition: gap .2s, background .2s; }
.dmc-btn:hover { gap: 14px; color: #fff; background: #e05a1f; text-decoration: none; }
@media (max-width: 991px) { .dmc .dmc-title { font-size: 30px; } }
@media (max-width: 576px) { .dmc { padding: 60px 0; } .dmc-head { margin-bottom: 30px; } .dmc .subtitle_text { font-size: 16px; } .dmc .dmc-title { font-size: 22px; line-height: 1.45; } .dmc .dmc-sub { font-size: 16px; } .dmc h3 { font-size: 20px; } .dmc-bar { display: none; } .dmc-more { margin-top: 30px; } }
.dmc-a .dmc-head { max-width: 980px; }
.dmc-a-list { display: grid; gap: 22px; }
.dmc-a-c { display: grid; grid-template-columns: 1fr 1fr; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid #eceff4; box-shadow: 0 20px 50px rgba(23,59,90,.08); }
.dmc-a-c:nth-child(even) .dmc-a-photo { order: 2; }
.dmc-a-photo { position: relative; min-height: 340px; padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; background-size: cover; color: #fff; overflow: hidden; }
.dmc-a-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,12,14,.25), rgba(12,12,14,.88) 75%); }
.dmc-a-photo--plain { background: linear-gradient(140deg, #1b1b1e 0%, #2a1a12 60%, #4a2410 100%); }
.dmc-a-photo--plain::before { background: radial-gradient(circle at 80% 25%, rgba(242,102,41,.35), transparent 55%); }
.dmc-a-photo > * { position: relative; }
.dmc-a-ic { position: absolute !important; right: 30px; top: 50%; margin-top: -60px; font-size: 110px; color: rgba(242,102,41,.18); }
.dmc-a-photo .dmc-flag { position: absolute; top: 22px; right: 24px; }
.dmc-a-cap h3 { color: #fff; font-size: 24px; }
.dmc-a-cap h3 span { color: #ffb48f; }
.dmc .dmc-a-cap p { margin-bottom: 12px; color: rgba(255,255,255,.8); }
.dmc-a-cap .dmc-site { color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }
.dmc-a-data { padding: 24px 28px; }
.dmc-a-c .dmc-st { margin-bottom: 14px; }
.dmc-a-c .dmc-st div { padding: 10px 14px; }
.dmc-a-c .dmc-st b { font-size: 24px; }
.dmc-a-c .dmc-lbl { margin-bottom: 4px; }
.dmc-a-c .dmc-kw { margin-bottom: 12px; }
.dmc-a-c .dmc-kw li { padding: 6px 0; font-size: 14px; }
.dmc-a-c .dmc-rk { min-width: 36px; padding: 2px 6px; font-size: 12px; }
.dmc-flag--in { position: relative; display: inline-block; background: linear-gradient(#ff9933 0 33.3%, #fff 33.3% 66.6%, #138808 66.6%); }
.dmc-flag--in i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; border: 1.5px solid #000080; }
.dmc-a .dmc-more { margin-top: 32px; }
.dmc-a4-dots { display: none; }
.dmc-a4-dots i { width: 8px; height: 8px; border-radius: 8px; background: #d9dee6; transition: width .25s, background .25s; }
.dmc-a4-dots i.is-on { width: 22px; background: #f26629; }
@media (max-width: 991px) { .dmc-a-photo { min-height: 300px; } .dmc-a-cap h3 { font-size: 20px; } .dmc-a-c .dmc-bar { display: none; } .dmc-a-data { padding: 20px 22px; } }
@media (max-width: 767px) { .dmc-a-list { display: flex; gap: 14px; margin: 0 -15px; padding: 4px 15px 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .dmc-a-list::-webkit-scrollbar { display: none; } .dmc-a-c { flex: 0 0 86%; grid-template-columns: 1fr; scroll-snap-align: center; } .dmc-a-c:nth-child(even) .dmc-a-photo { order: 0; } .dmc-a-photo { min-height: 250px; padding: 18px; } .dmc-a-photo .dmc-flag { top: 18px; right: 18px; } .dmc-a-cap h3 { font-size: 18px; } .dmc-a-ic { font-size: 80px; margin-top: -50px; } .dmc-a4-dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; } }
@keyframes dmiIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dmsPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 70% { box-shadow: 0 0 0 16px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.dpr { position: relative; overflow: hidden; padding: 80px 0; color: #fff; background: linear-gradient(160deg, #0c0c0e 0%, #141416 55%, #1b1b1e 100%); }
.dpr::before { content: ''; position: absolute; width: 700px; height: 700px; top: -320px; right: -240px; border-radius: 50%; background: radial-gradient(circle, rgba(242,102,41,.16), transparent 65%); pointer-events: none; }
.dpr .container { position: relative; }
.dpr-head { text-align: center; max-width: 900px; margin: 0 auto 40px; }
.dpr .subtitle_text { display: block; font-size: 18px; font-weight: 600; color: #f26629 !important; margin-bottom: 7px; }
.dpr .dpr-title { font-size: 38px; line-height: 1.3; font-weight: 700; color: #fff; margin: 0; }
.dpr-hl { color: #f26629; }
.dpr p { font-size: 16px; line-height: 1.667em; color: rgba(255,255,255,.66); margin: 0; }
.dpr h3 { font-size: 20px; line-height: 1.35; font-weight: 700; color: #fff; margin: 0 0 8px; }
.dpr-k { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #f26629; }
@media (max-width: 991px) { .dpr .dpr-title { font-size: 30px; line-height: 40px; } }
@media (max-width: 576px) { .dpr { padding: 60px 0; } .dpr-head { margin-bottom: 30px; } .dpr .dpr-title { font-size: 22px; line-height: 32px; } .dpr .subtitle_text { font-size: 16px; } .dpr h3 { font-size: 19px; } }
.dpr-a-box { max-width: 1120px; margin: 0 auto; padding: 34px 40px 40px; border-radius: 26px; background: #18181b; border: 1px solid rgba(255,255,255,.07); }
.dpr-a-bar { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); margin-bottom: 30px; }
.dpr-a-bar::before, .dpr-a-fill { content: ''; position: absolute; top: 25px; left: 8.33%; height: 2px; background: rgba(255,255,255,.1); }
.dpr-a-bar::before { right: 8.33%; }
.dpr-a-fill { z-index: 1; width: 0; background: #f26629; box-shadow: 0 0 10px rgba(242,102,41,.7); transition: width .5s ease; }
.dpr-a-b { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 4px; border: 0; background: none; cursor: pointer; text-align: center; }
.dpr-a-b b { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: rgba(255,255,255,.5); background: #232327; border: 2px solid rgba(255,255,255,.1); transition: all .3s; }
.dpr-a-b span { font-size: 11px; font-weight: 800; color: rgba(255,255,255,.4); }
.dpr-a-b em { font-style: normal; font-size: 14px; font-weight: 600; line-height: 1.35; color: rgba(255,255,255,.55); transition: color .3s; }
.dpr-a-b.is-done b { color: #f26629; border-color: #f26629; }
.dpr-a-b.is-on b { color: #fff; background: #f26629; border-color: #f26629; box-shadow: 0 0 0 7px rgba(242,102,41,.18), 0 10px 24px rgba(242,102,41,.4); }
.dpr-a-b.is-on em { color: #fff; }
.dpr-a-p { display: none; grid-template-columns: 160px 1fr; gap: 36px; align-items: center; padding: 30px 34px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.dpr-a-p.is-on { display: grid; animation: dprIn .45s ease both; }
@keyframes dprIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dpr-a-big { font-size: 110px; font-weight: 900; line-height: 1; text-align: center; color: transparent; -webkit-text-stroke: 2px rgba(242,102,41,.55); }
.dpr-a-p h3 { font-size: 26px; }
.dpr-a .dpr-a-p p { font-size: 17px; max-width: 640px; }
@media (max-width: 991px) { .dpr-a-box { padding: 26px; } .dpr-a-b em { display: none; } .dpr-a-p { grid-template-columns: 110px 1fr; gap: 24px; } .dpr-a-big { font-size: 76px; } }
@media (max-width: 576px) { .dpr-a-box { padding: 20px 14px; } .dpr-a-b b { width: 40px; height: 40px; font-size: 14px; } .dpr-a-bar::before, .dpr-a-fill { top: 19px; } .dpr-a-p { grid-template-columns: 1fr; gap: 10px; padding: 22px 18px; } .dpr-a-big { font-size: 56px; text-align: left; } .dpr-a-p h3 { font-size: 20px; } .dpr-a .dpr-a-p p { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .dpr-a-p.is-on { animation: none; } }
@keyframes dmxIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dme { padding: 80px 0; background: #f7f8fb; border-top: 1px solid #eef1f6; }
.dme .dme-p { font-size: 17px; line-height: 1.85em; color: #5a6475; margin: 0; }
.dme .dme-p strong { color: #3c4858; font-weight: 700; }
.dme-lbl { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #f26629; }
.dme-facts { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dme-facts li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; background: #f7f8fb; font-size: 14px; font-weight: 600; color: #3c4858; }
.dme-facts .fa { color: #f26629; }
.dme .dme-rev { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: #8590a2; }
@media (max-width: 576px) { .dme { padding: 60px 0; } .dme .dme-p { font-size: 16px; } .dme-facts li { font-size: 13px; padding: 7px 12px; } }
.dme-a-card { position: relative; max-width: 1080px; margin: 0 auto; padding: 40px 48px; border-radius: 26px; background: #fff; border: 1px solid #eceff4; box-shadow: 0 20px 50px rgba(23,59,90,.06); overflow: hidden; }
.dme-a-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(#f26629, #ffb48f); }
.dme-a-links { margin-top: 26px; padding-top: 24px; border-top: 1px dashed #e3e7ee; }
.dme-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.dme-pills a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 100px; background: #fff4ee; border: 1px solid #ffd9c5; font-size: 14px; font-weight: 700; color: #3c4858 !important; text-decoration: none !important; transition: all .25s; }
.dme-pills a .fa { color: #f26629; }
.dme-pills em { font-size: 11px; color: #f26629; transition: transform .25s; }
.dme-pills a:hover { background: #f26629; border-color: #f26629; color: #fff !important; }
.dme-pills a:hover .fa, .dme-pills a:hover em { color: #fff; }
.dme-pills a:hover em { transform: translateX(3px); }
@media (max-width: 576px) { .dme-a-card { padding: 28px 22px; } .dme-pills a { font-size: 13px; padding: 9px 14px; } }

/* ══ shared helpers (testimonials / FAQ spacing, same as /digital-marketing/) ══ */
section.testimonial-home.section-padding { padding-top: 80px !important; padding-bottom: 80px !important; }
section.defaultptb60.faqsection { padding-top: 80px !important; padding-bottom: 80px !important; }
.dm-testi-meta { font-size: 12px; color: #888; margin: 2px 0 0; font-style: italic; }
.testimonial-home h2.mainheadingtitle, .faqsection.homefaq .main-heading-box h2.mainheadingtitle { margin: 0; }
@media (max-width: 576px) { section.testimonial-home.section-padding, section.defaultptb60.faqsection { padding-top: 60px !important; padding-bottom: 60px !important; } }

/* ══ hero scene: search results climb ══ */
.sx-serp { position: absolute; inset: 0; }
.sx-s-box { left: 0; right: 30px; top: 6px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 100px; }
.sx-s-box .fa { color: #f26629; }
.sx-s-type { overflow: hidden; white-space: nowrap; font-size: 15px; font-weight: 600; color: #fff; border-right: 2px solid #f26629; width: 0; animation: sxType 8s steps(21) infinite; }
@keyframes sxType { 0%, 4% { width: 0; } 30%, 100% { width: 21ch; } }
.sx-s-box em { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: #f26629; }
.sx-s-list { left: 0; right: 70px; top: 84px; height: 250px; padding: 14px; }
.sx-s-r { position: absolute; left: 14px; right: 14px; height: 50px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.05); }
.sx-s-r b { display: block; font-size: 12px; color: rgba(255,255,255,.55); font-weight: 600; }
.sx-s-r span { display: block; height: 8px; width: 60%; margin-top: 6px; border-radius: 4px; background: rgba(255,255,255,.14); }
.sx-s-r i { position: absolute; right: 12px; top: 18px; width: 40px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); }
.sx-s-r:nth-child(2) { top: 14px; animation: sxDown 8s ease-in-out infinite; }
.sx-s-r:nth-child(3) { top: 72px; animation: sxDown 8s ease-in-out infinite; }
.sx-s-r:nth-child(4) { top: 130px; animation: sxDown 8s ease-in-out infinite; }
.sx-s-r--you { top: 188px; z-index: 2; background: rgba(242,102,41,.16); border: 1px solid rgba(242,102,41,.6); animation: sxUp 8s ease-in-out infinite; }
.sx-s-r--you b { color: #ffb48f; } .sx-s-r--you span { width: auto; height: auto; margin-top: 3px; background: none; font-size: 12px; line-height: 1.2; font-weight: 700; color: #fff; white-space: nowrap; }
@keyframes sxUp { 0%, 35% { transform: none; } 60%, 92% { transform: translateY(-174px); box-shadow: 0 14px 30px rgba(242,102,41,.35); } 100% { transform: none; } }
@keyframes sxDown { 0%, 35% { transform: none; } 60%, 92% { transform: translateY(58px); opacity: .7; } 100% { transform: none; } }
.sx-s-rank { right: 0; top: 120px; width: 120px; padding: 14px; text-align: center; }
.sx-s-rank small, .sx-s-chart small { display: block; font-size: 11px; color: rgba(255,255,255,.55); }
.sx-s-rank strong { position: relative; display: block; height: 44px; margin-top: 4px; }
.sx-s-p { position: absolute; left: 0; right: 0; font-size: 36px; font-weight: 900; line-height: 44px; color: #fff; opacity: 0; animation: sxP 8s infinite; }
.sx-s-p:nth-child(2) { animation-delay: 1.6s; } .sx-s-p:nth-child(3) { color: #f26629; animation-name: sxP3; }
@keyframes sxP { 0%, 2% { opacity: 1; } 18%, 100% { opacity: 0; } }
.sx-s-p:first-child { animation-name: sxP1; } @keyframes sxP1 { 0%, 38% { opacity: 1; } 44%, 100% { opacity: 0; } }
.sx-s-p:nth-child(2) { animation-name: sxP2; animation-delay: 0s; } @keyframes sxP2 { 0%, 42% { opacity: 0; } 46%, 54% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes sxP3 { 0%, 56% { opacity: 0; } 60%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
.sx-s-chart { left: 40px; bottom: 0; width: 260px; padding: 14px 16px 10px; }
.sx-s-chart svg { display: block; width: 100%; height: 70px; margin-top: 6px; }
.sx-s-line { fill: none; stroke: #f26629; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: sxDraw 8s ease-in-out infinite; }
.sx-s-area { fill: rgba(242,102,41,.15); }
@keyframes sxDraw { 0%, 20% { stroke-dashoffset: 260; } 70%, 100% { stroke-dashoffset: 0; } }
.sx-s-snip { right: 10px; bottom: 30px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13px; font-weight: 700; color: #fff; }
.sx-s-snip .fa { color: #f5b544; }
@media (max-width: 991px) { .sx-hero .dmh-right { height: 440px; } }
@media (max-width: 576px) { .sx-hero .dmh-right { height: 400px; } .sx-s-list { right: 0; } .sx-s-rank { top: auto; bottom: 90px; } .sx-s-chart { left: 0; width: 220px; } }
@media (prefers-reduced-motion: reduce) { .sx-serp * { animation: none !important; } .sx-s-type { width: 21ch; } .sx-s-p:nth-child(3) { opacity: 1; } .sx-s-line { stroke-dashoffset: 0; } }

/* ══ section base ══ */
.sx { position: relative; overflow: hidden; padding: 80px 0; background: #fff; }
.sx-head { text-align: center; max-width: 900px; margin: 0 auto 40px; }
.sx .subtitle_text { display: block; font-size: 18px; font-weight: 400; color: #f26629 !important; margin-bottom: 7px; }
.sx .sx-title { font-size: 38px; line-height: 1.3; font-weight: 700; color: #3c4858; margin: 0 0 14px; }
.sx-hl { color: #f26629; }
.sx .sx-sub { font-size: 18px; line-height: 1.667em; color: #5a6475; margin: 0; }
.sx p { font-size: 16px; line-height: 1.667em; color: #5a6475; margin: 0; }
.sx h3 { font-size: 20px; line-height: 1.35; font-weight: 700; color: #3c4858; margin: 0 0 8px; }
.sx ul { list-style: none; padding: 0; margin: 0; }
.sx-ic { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: #f26629; background: #fff4ee; }
.sx-k { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #f26629; }
.sx .sx-src, .sx .sx-note { margin-top: 24px; font-size: 13px; line-height: 1.5; color: #8590a2; text-align: center; }
.sx-src a { color: #f26629; text-decoration: none; } .sx-src a:hover { text-decoration: underline; }
@media (max-width: 991px) { .sx .sx-title { font-size: 30px; line-height: 40px; } }
@media (max-width: 576px) { .sx { padding: 60px 0; } .sx-head { margin-bottom: 30px; } .sx .sx-title { font-size: 22px; line-height: 32px; } .sx .subtitle_text, .sx .sx-sub { font-size: 16px; } .sx h3 { font-size: 19px; } }

/* ══ how search works ══ */
.sx-how { background: #f7f8fb; }
.sx-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: s; }
.sx-how-c { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 28px; border-radius: 22px; background: #fff; border: 1px solid #eceff4; transition: transform .3s, box-shadow .3s; }
.sx-how-c:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(23,59,90,.09); }
.sx-how-c:not(:last-child)::after { content: '\2192'; position: absolute; right: -18px; top: 50px; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; background: #f26629; box-shadow: 0 0 0 5px #f7f8fb; }
.sx-how-n { position: absolute; top: 20px; right: 26px; font-size: 46px; font-weight: 900; line-height: 1; color: #f1f3f7; }
.sx-how-c h3 { margin: 0; }
.sx .sx-how-we { margin-top: auto; padding-top: 14px; border-top: 1px dashed #e3e7ee; font-size: 15px; color: #3c4858; } .sx-how-we b { color: #f26629; }
@media (max-width: 991px) { .sx-how-grid { grid-template-columns: 1fr; } .sx-how-c:not(:last-child)::after { content: '\2193'; right: auto; left: 50%; top: auto; bottom: -18px; margin-left: -17px; } }

/* ══ services ══ */
.sx-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sx-svc-c { display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; border-radius: 22px; background: #fff; border: 1px solid #eceff4; border-top: 3px solid #f26629; transition: transform .3s, box-shadow .3s; }
.sx-svc-c:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(23,59,90,.09); }
.sx-svc-c h3 { margin: 4px 0 0; }
.sx-svc-c ul { margin-top: auto; padding-top: 14px; border-top: 1px dashed #e3e7ee; display: grid; gap: 8px; }
.sx-svc-c li, .sx-pil-p li, .sx-tl-i li, .sx-plan li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: #3c4858; }
.sx-svc-c li .fa, .sx-tl-i li .fa, .sx-plan li .fa { margin-top: 4px; font-size: 12px; color: #22a861; }
@media (max-width: 991px) { .sx-svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .sx-svc-grid { grid-template-columns: 1fr; } .sx-svc-c { padding: 24px 20px; } }

/* ══ pillars (dark) ══ */
.sx-pil { color: #fff; background: linear-gradient(160deg, #0c0c0e 0%, #141416 55%, #1b1b1e 100%); }
.sx-pil::before { content: ''; position: absolute; width: 700px; height: 700px; top: -320px; left: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(242,102,41,.14), transparent 65%); pointer-events: none; }
.sx-pil .container { position: relative; }
.sx-pil .sx-title, .sx-pil h3 { color: #fff; } .sx-pil .sx-sub, .sx-pil p { color: rgba(255,255,255,.66); }
.sx-pil-box { border-radius: 26px; background: #18181b; border: 1px solid rgba(255,255,255,.07); overflow: hidden; }
.sx-pil-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid rgba(255,255,255,.07); }
.sx-pil-t { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px 12px; border: 0; border-bottom: 3px solid transparent; background: transparent; font-size: 16px; font-weight: 700; color: rgba(255,255,255,.55); cursor: pointer; transition: all .25s; }
.sx-pil-t .fa { color: #f26629; }
.sx-pil-t:hover { color: #fff; } .sx-pil-t.is-on { color: #fff; background: rgba(242,102,41,.08); border-bottom-color: #f26629; }
.sx-pil-p { display: none; grid-template-columns: 340px 1fr; gap: 40px; padding: 36px 40px; } .sx-pil-p.is-on { display: grid; animation: sxIn .45s ease both; }
@keyframes sxIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sx-pil-l h3 { font-size: 28px; }
.sx-pil-p ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sx-pil-p li { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
.sx-pil-p li .fa { margin-top: 4px; font-size: 12px; color: #f26629; }
.sx-cwv { display: grid; grid-template-columns: auto repeat(3, 1fr); align-items: center; gap: 14px; margin-top: 22px; padding: 20px 24px; border-radius: 20px; background: rgba(242,102,41,.08); border: 1px dashed rgba(242,102,41,.4); }
.sx-cwv .sx-k { margin: 0; }
.sx-cwv div { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
.sx-cwv b { font-size: 18px; font-weight: 900; color: #f26629; } .sx-cwv span:not(.sx-k) { font-size: 18px; font-weight: 800; color: #fff; } .sx-cwv small { grid-column: 1 / -1; font-size: 12px; color: rgba(255,255,255,.55); }
.sx-pil .sx-cwv p { grid-column: 1 / -1; font-size: 12px; color: rgba(255,255,255,.45); } .sx-cwv a { color: #ff9a66; text-decoration: none; }
@media (max-width: 991px) { .sx-pil-p { grid-template-columns: 1fr; gap: 20px; padding: 28px; } .sx-cwv { grid-template-columns: 1fr 1fr 1fr; } .sx-cwv .sx-k { grid-column: 1 / -1; } }
@media (max-width: 576px) { .sx-pil-t { flex-direction: column; gap: 6px; font-size: 13px; padding: 14px 6px; } .sx-pil-p { padding: 22px 18px; } .sx-pil-p ul { grid-template-columns: 1fr; } .sx-pil-l h3 { font-size: 21px; } .sx-cwv { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sx-pil-p.is-on { animation: none; } }

/* ══ SEO vs AEO vs GEO table ══ */
.sx-aeo { background: linear-gradient(180deg, #fff 0%, #fff7f2 100%); }
.sx-tbl { overflow-x: auto; border-radius: 22px; background: #fff; border: 1px solid #eceff4; box-shadow: 0 20px 50px rgba(23,59,90,.07); }
.sx-tbl table { width: 100%; min-width: 760px; border-collapse: collapse; }
.sx-tbl th, .sx-tbl td { padding: 18px 22px; text-align: left; vertical-align: top; font-size: 15px; line-height: 1.55; border-bottom: 1px solid #eef1f6; }
.sx-tbl tr:last-child th, .sx-tbl tr:last-child td { border-bottom: 0; }
.sx-tbl thead th { font-size: 13px; font-weight: 600; color: #8590a2; background: #fafbfd; }
.sx-tbl thead th span { display: block; margin-bottom: 2px; font-size: 22px; font-weight: 900; color: #3c4858; }
.sx-tbl thead th:nth-child(2) span { color: #f26629; }
.sx-tbl tbody th { width: 170px; font-weight: 800; color: #3c4858; }
.sx-tbl td { color: #5a6475; }

/* ══ timeline ══ */
.sx-tl { background: #f7f8fb; }
.sx-tl-list { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sx-tl-list::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: linear-gradient(90deg, #ffd2bd, #f26629); }
.sx-tl-i { position: relative; padding-top: 38px; }
.sx-tl-dot { position: absolute; top: 2px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid #f26629; }
.sx-tl-i h3 { margin-bottom: 14px; }
.sx-tl-i ul { display: grid; gap: 8px; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid #eceff4; }
.sx .sx-tl-see { margin-top: 12px; font-size: 14px; font-weight: 600; color: #3c4858; }
.sx-quote { display: flex; gap: 18px; align-items: flex-start; max-width: 900px; margin: 36px auto 0; padding: 24px 28px; border-radius: 20px; background: #3c4858; }
.sx-quote .fa { font-size: 24px; color: #f26629; }
.sx .sx-quote p { color: rgba(255,255,255,.85); font-size: 17px; } .sx-quote b { color: #fff; }
.sx-quote a { display: block; margin-top: 8px; font-size: 13px; color: #ffb48f; text-decoration: none; }
.sx-quote div, .sx-quote > p { flex: 1; }
@media (max-width: 991px) { .sx-tl-list { grid-template-columns: 1fr 1fr; row-gap: 30px; } .sx-tl-list::before { display: none; } }
@media (max-width: 576px) { .sx-tl-list { grid-template-columns: 1fr; } .sx-quote { flex-direction: column; padding: 22px 20px; } }

/* ══ tools (dark) ══ */
.sx-tools { color: #fff; background: #121214; }
.sx-tools .sx-title { color: #fff; } .sx-tools .sx-sub { color: rgba(255,255,255,.62); }
.sx-tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sx-tool { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px; background: #1b1b1e; border: 1px solid rgba(255,255,255,.08); transition: border-color .3s, transform .3s; }
.sx-tool:hover { border-color: rgba(242,102,41,.5); transform: translateY(-3px); }
.sx-tool-i { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #f26629, #ff9a66); }
.sx-tool b { display: block; font-size: 15px; color: #fff; } .sx-tool small { font-size: 13px; color: rgba(255,255,255,.55); }
.sx-tools .sx-note { color: rgba(255,255,255,.4); }
@media (max-width: 991px) { .sx-tool-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .sx-tool-grid { grid-template-columns: 1fr; } }

/* ══ how to choose ══ */
.sx-ch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sx-ch-c { padding: 30px 30px; border-radius: 22px; border: 1px solid #eceff4; }
.sx-ch-c h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.sx-ch-c ul { display: grid; gap: 12px; }
.sx-ch-c li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; color: #3c4858; }
.sx-ch-c li .fa { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.sx-ch-c--g { background: #f3fbf6; border-color: #d6f0e0; } .sx-ch-c--g h3 .fa { color: #22a861; } .sx-ch-c--g li .fa { background: #22a861; }
.sx-ch-c--b { background: #fff6f3; border-color: #ffdccc; } .sx-ch-c--b h3 .fa { color: #e0452b; } .sx-ch-c--b li .fa { background: #e0452b; }
@media (max-width: 991px) { .sx-ch-grid { grid-template-columns: 1fr; } }
@media (max-width: 576px) { .sx-ch-c { padding: 24px 20px; } }

/* ══ plans ══ */
.sx-plans { background: #f7f8fb; }
.sx-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.sx-plan { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 32px 28px; border-radius: 24px; background: #fff; border: 1px solid #eceff4; transition: transform .3s, box-shadow .3s; }
.sx-plan:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(23,59,90,.1); }
.sx-plan.is-pop { background: #1b1b1e; border-color: #1b1b1e; box-shadow: 0 26px 56px rgba(0,0,0,.25); }
.sx-plan.is-pop h3 { color: #fff; } .sx-plan.is-pop p { color: rgba(255,255,255,.66); } .sx-plan.is-pop li { color: rgba(255,255,255,.85); } .sx-plan.is-pop .sx-ic { background: rgba(242,102,41,.15); }
.sx-plan-pop { position: absolute; top: 20px; right: 20px; padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 800; color: #fff; background: #f26629; }
.sx-plan h3 { margin: 6px 0 0; }
.sx-plan ul { display: grid; gap: 10px; margin: 8px 0 18px; padding-top: 16px; border-top: 1px dashed #e3e7ee; }
.sx-plan.is-pop ul { border-color: rgba(255,255,255,.12); }
.sx-plan-btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: 12px; font-size: 15px; font-weight: 700; color: #f26629 !important; background: #fff4ee; text-decoration: none !important; transition: all .25s; }
.sx-plan-btn:hover, .sx-plan.is-pop .sx-plan-btn { color: #fff !important; background: #f26629; }
@media (max-width: 991px) { .sx-plan-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
@media (max-width: 576px) { .sx-plan { padding: 26px 20px; } }

/* ══ typography lock (audit 27 Oct 2026) — homepage scale: H2 38/30/22·700·1.3, eyebrow 18/16, lead 18/16, card H3 20, body 16·1.667 ══ */
.faqsection.homefaq .main-heading-box h2.mainheadingtitle { font-size: 38px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: normal; }
.dmd .subtitle_text, .dpr .subtitle_text, .dmc .subtitle_text, .sx .subtitle_text, .testimonial-home .subtitle_text { font-size: 18px !important; font-weight: 400 !important; line-height: 1.5 !important; color: #f26629 !important; }
.sx-pil-l h3 { font-size: 28px; }
@media (max-width: 991px) { .faqsection.homefaq .main-heading-box h2.mainheadingtitle { font-size: 30px !important; line-height: 40px !important; } }
@media (max-width: 576px) {
  .faqsection.homefaq .main-heading-box h2.mainheadingtitle { font-size: 22px !important; line-height: 32px !important; }
  .dmd .subtitle_text, .dpr .subtitle_text, .dmc .subtitle_text, .sx .subtitle_text, .testimonial-home .subtitle_text { font-size: 16px !important; }
  .dmc-a-cap h3 { font-size: 20px; }
}

/* ══ body-text lock (audit 27 Oct 2026): paragraphs 16/1.667, lists 15/1.5, captions 13–15 ══ */
.dpr .dpr-a-p p, .dme .dme-p { font-size: 16px !important; line-height: 1.667em !important; }
.sx-ch-c li, .sm-pl-side li, .sx-svc-c li, .sx-tl-i li, .sx-plan li, .sx-pil-p li, .dms-serv li { font-size: 15px !important; line-height: 1.5 !important; }

/* ══ H3 scale (27 Oct 2026, same as /aeo-services/ and /geo-services/): panel 24/22/20 · card 20/19/18 · tab H2 24/22/20 ══ */
.sx-pil-l h3, .sm-pl-main h3, .pp-sec-p h3, .dpr-a-p h3 { font-size: 24px !important; line-height: 1.35 !important; }
.sx-how-c h3, .sx-svc-c h3, .sx-tl-i h3, .sx-ch-c h3, .sx-plan h3, .sm-met-c h3, .sm-mix-c h3, .pp-lev-i h3, .pp-auc-c h3 { font-size: 20px !important; line-height: 1.4 !important; }
.sx-tl-see { font-size: 16px !important; line-height: 1.6 !important; }
.testimonial-home .main-heading-box, .faqsection .main-heading-box { margin-bottom: 40px !important; }
@media (max-width: 991px) {
  .sx-pil-l h3, .sm-pl-main h3, .pp-sec-p h3, .dpr-a-p h3, .dmd-a-pan h2 { font-size: 22px !important; }
  .sx-how-c h3, .sx-svc-c h3, .sx-tl-i h3, .sx-ch-c h3, .sx-plan h3, .sm-met-c h3, .sm-mix-c h3, .pp-lev-i h3, .pp-auc-c h3 { font-size: 19px !important; }
}
@media (max-width: 576px) {
  .sx-pil-l h3, .sm-pl-main h3, .pp-sec-p h3, .dpr-a-p h3, .dmd-a-pan h2 { font-size: 20px !important; }
  .sx-how-c h3, .sx-svc-c h3, .sx-tl-i h3, .sx-ch-c h3, .sx-plan h3, .sm-met-c h3, .sm-mix-c h3, .pp-lev-i h3, .pp-auc-c h3 { font-size: 18px !important; }
  .testimonial-home .main-heading-box, .faqsection .main-heading-box { margin-bottom: 30px !important; }
}
@media (max-width: 991px) { .dmc .dmc-title { line-height: 40px !important; } }
@media (max-width: 576px) { .dmc .dmc-title { line-height: 32px !important; } }
.sx .sx-quote p, .pp-calc-sec .pp-calc-d { font-size: 16px !important; }

/* metrics */
.sm-met-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sm-met-c { display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; border-radius: 22px; background: #fff; border: 1px solid #eceff4; transition: transform .3s, box-shadow .3s; }
.sm-met-c:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(23,59,90,.09); }
.sm-met-c h3 { margin: 4px 0 0; }
.sm-met-c code { display: block; padding: 10px 14px; border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.5; color: #c2541f; background: #fff4ee; white-space: normal; }
@media (max-width: 991px) { .sm-met-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .sm-met-grid { grid-template-columns: 1fr; } .sm-met-c { padding: 24px 20px; } }



/* ══ /ppc-services/ sections ══ */
/* hero: campaign dashboard, before → after values */
.pp-hero .dmh-right { position: relative; }
.pp-scene { position: absolute; inset: 0; }
.pp-dash { left: 0; right: 0; top: 0; padding: 20px 22px; }
.pp-dash-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.pp-dash-h b { font-size: 14px; color: #fff; } .pp-dash-h span { font-size: 11px; color: rgba(255,255,255,.5); padding: 3px 10px; border-radius: 100px; background: rgba(255,255,255,.06); }
.pp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pp-kpis > div { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.05); }
.pp-kpis small { display: block; font-size: 11px; color: rgba(255,255,255,.55); }
.pp-kpis strong { position: relative; display: block; height: 30px; margin-top: 2px; }
.pp-v { position: absolute; left: 0; font-size: 22px; font-weight: 900; line-height: 30px; color: #fff; }
.pp-v--a { animation: ppA 8s infinite; } .pp-v--b { color: #ff9a66; opacity: 0; animation: ppB 8s infinite; }
@keyframes ppA { 0%, 40% { opacity: 1; transform: none; } 48%, 92% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; } }
@keyframes ppB { 0%, 42% { opacity: 0; transform: translateY(8px); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.pp-chart { display: block; width: 100%; height: 90px; margin-top: 14px; }
.pp-line { fill: none; stroke: #f26629; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; animation: ppDraw 8s ease-in-out infinite; }
.pp-area { fill: rgba(242,102,41,.14); }
@keyframes ppDraw { 0%, 30% { stroke-dashoffset: 340; } 70%, 100% { stroke-dashoffset: 0; } }
.pp-budget { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pp-budget small { font-size: 11px; color: rgba(255,255,255,.55); white-space: nowrap; }
.pp-budget span { flex: 1; height: 6px; border-radius: 100px; background: rgba(255,255,255,.1); overflow: hidden; } .pp-budget span i { display: block; width: 62%; height: 100%; background: rgba(255,255,255,.4); }
.pp-budget b { font-size: 11px; color: #ffb48f; white-space: nowrap; }
.pp-chip { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.pp-chip > .fa { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; background: #f26629; }
.pp-chip b { display: block; font-size: 13px; color: #fff; } .pp-chip small { display: block; font-size: 11px; color: rgba(255,255,255,.55); }
.pp-chip--1 { left: 0; top: 318px; animation: ppF 6s ease-in-out infinite; }
.pp-chip--2 { right: 0; top: 318px; animation: ppF 7s ease-in-out infinite .6s; }
.pp-chip--3 { left: 50%; top: 392px; margin-left: -90px; width: 180px; animation: ppIn 8s ease-in-out infinite; }
@keyframes ppF { 50% { transform: translateY(-6px); } }
@keyframes ppIn { 0%, 50% { opacity: 0; transform: translateY(10px); } 58%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.pp-ill { position: absolute; right: 0; bottom: -6px; margin: 0; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.35); }
@media (max-width: 991px) { .pp-hero .dmh-right { height: 470px; } }
@media (max-width: 576px) { .pp-hero .dmh-right { height: 470px; } .pp-dash { padding: 16px; } .pp-v { font-size: 17px; } .pp-chip--1, .pp-chip--2 { width: 48%; } .pp-chip--1 { left: 0; } .pp-chip b { font-size: 12px; } .pp-chip small { display: none; } .pp-chip--3 { top: 380px; } }
@media (prefers-reduced-motion: reduce) { .pp-scene * { animation: none !important; } .pp-v--a { opacity: 0; } .pp-v--b { opacity: 1; } .pp-line { stroke-dashoffset: 0; } .pp-chip--3 { opacity: 1; } }

/* auction */
.pp-eq { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.pp-eq > div { flex: 1 1 150px; max-width: 220px; padding: 18px; border-radius: 18px; text-align: center; background: #fff; border: 1px solid #eceff4; }
.pp-eq b { display: block; font-size: 18px; color: #3c4858; } .pp-eq small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: #8590a2; }
.pp-eq em { align-self: center; font-style: normal; font-size: 26px; font-weight: 900; color: #f26629; }
.pp-eq .pp-eq-r { background: #3c4858; border-color: #3c4858; } .pp-eq .pp-eq-r b { color: #fff; } .pp-eq .pp-eq-r small { color: rgba(255,255,255,.7); }
.pp-auc-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; }
.pp-auc-c { padding: 30px; border-radius: 22px; background: #fff; border: 1px solid #eceff4; }
.pp-auc-c h3 { margin-bottom: 10px; }
.pp-qs { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.pp-qs li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: #f7f8fb; }
.pp-qs li > span { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; background: #f26629; }
.pp-qs b { display: block; font-size: 15px; color: #3c4858; } .pp-qs small { font-size: 14px; line-height: 1.5; color: #5a6475; }
.pp-auc-c--dk { background: #1b1b1e; border-color: #1b1b1e; } .pp-auc-c--dk h3 { color: #fff; }
.pp-auc-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.pp-auc-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.85); }
.pp-auc-list .fa { margin-top: 4px; font-size: 12px; color: #f26629; }
@media (max-width: 991px) { .pp-auc-grid { grid-template-columns: 1fr; } .pp-eq em { display: none; } }
@media (max-width: 576px) { .pp-auc-c { padding: 24px 18px; } .pp-eq > div { flex-basis: 45%; padding: 14px; } .pp-eq .pp-eq-r { flex-basis: 100%; max-width: none; } }

/* ROAS levers (dark) */
.pp-lev-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; counter-reset: none; }
.pp-lev-i { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 26px 26px 24px; border-radius: 20px; background: #18181b; border: 1px solid rgba(255,255,255,.07); transition: border-color .3s, transform .3s; }
.pp-lev-i:hover { border-color: rgba(242,102,41,.45); transform: translateY(-4px); }
.pp-lev-n { position: absolute; top: 18px; right: 22px; font-size: 40px; font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.1); }
.pp-lev-ic { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: #f26629; background: rgba(242,102,41,.12); border: 1px solid rgba(242,102,41,.3); }
.pp-lev-i h3 { color: #fff; padding-right: 40px; }
.sx-pil .pp-lev-i p { color: rgba(255,255,255,.66); }
.pp-lev-out { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 12px; border-radius: 100px; font-size: 13px; font-weight: 700; color: #ffb48f; background: rgba(242,102,41,.1); }
.pp-lev-out .fa { font-size: 11px; }
@media (max-width: 991px) { .pp-lev-list { grid-template-columns: 1fr; } }
@media (max-width: 576px) { .pp-lev-i { grid-template-columns: 1fr; gap: 12px; padding: 22px 18px; } .pp-lev-ic { width: 46px; height: 46px; } }

/* calculator */
.pp-calc-sec { background: linear-gradient(180deg, #fff 0%, #fff7f2 100%); }
.pp-calc { max-width: 1080px; margin: 0 auto; padding: 32px; border-radius: 26px; background: #fff; border: 1px solid #eceff4; box-shadow: 0 24px 60px rgba(23,59,90,.08); }
.pp-calc-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-bottom: 24px; border-bottom: 1px dashed #e3e7ee; }
.pp-calc-in label { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.pp-calc-in span { font-size: 13px; font-weight: 700; color: #3c4858; }
.pp-calc-in input { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid #e3e7ee; background: #f7f8fb; font-size: 16px; font-weight: 700; color: #3c4858; }
.pp-calc-in input:focus { outline: 0; border-color: #f26629; background: #fff; box-shadow: 0 0 0 3px rgba(242,102,41,.15); }
.pp-calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.pp-calc-col { padding: 22px; border-radius: 18px; background: #f7f8fb; }
.pp-calc-col--b { background: #1b1b1e; } .pp-calc-col--b .sx-k { color: #ff9a66; }
.pp-calc-col dl { margin: 10px 0 0; display: grid; gap: 10px; }
.pp-calc-col dl div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(60,72,88,.08); }
.pp-calc-col--b dl div { border-color: rgba(255,255,255,.08); }
.pp-calc-col dt { font-size: 14px; font-weight: 500; color: #5a6475; } .pp-calc-col dd { margin: 0; font-size: 16px; font-weight: 800; color: #3c4858; font-variant-numeric: tabular-nums; }
.pp-calc-col--b dt { color: rgba(255,255,255,.6); } .pp-calc-col--b dd { color: #fff; }
.pp-calc-col .pp-calc-big { border: 0; padding: 4px 0 0; } .pp-calc-big dd { font-size: 28px; color: #f26629 !important; }
.pp-calc-d { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 20px 0 0 !important; font-size: 17px !important; color: #3c4858 !important; }
.pp-calc-d .fa { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; background: #22a861; }
.pp-calc-d b { color: #22a861; }
@media (max-width: 991px) { .pp-calc-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .pp-calc { padding: 20px 16px; } .pp-calc-in, .pp-calc-out { grid-template-columns: 1fr; } .pp-calc-d { font-size: 15px !important; text-align: left; } }

/* sector playbooks */
.pp-sec { background: #f7f8fb; }
.pp-sec-box { display: grid; grid-template-columns: 300px 1fr; border-radius: 24px; background: #fff; border: 1px solid #eceff4; overflow: hidden; box-shadow: 0 20px 50px rgba(23,59,90,.06); }
.pp-sec-tabs { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-right: 1px solid #eceff4; background: #fafbfd; }
.pp-sec-t { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 0; border-radius: 12px; background: transparent; text-align: left; font-size: 15px; font-weight: 700; color: #5a6475; cursor: pointer; transition: all .25s; }
.pp-sec-t .fa { width: 20px; text-align: center; color: #f26629; }
.pp-sec-t:hover { background: #fff; color: #3c4858; } .pp-sec-t.is-on { color: #fff; background: #3c4858; } .pp-sec-t.is-on .fa { color: #ffb48f; }
.pp-sec-pans { padding: 36px 40px; }
.pp-sec-p { display: none; } .pp-sec-p.is-on { display: block; animation: sxIn .45s ease both; }
.pp-sec-p h3 { font-size: 24px; margin-bottom: 18px; }
.pp-sec-p dl { margin: 0; display: grid; gap: 14px; }
.pp-sec-p dl div { padding: 18px 20px; border-radius: 16px; background: #f7f8fb; }
.pp-sec-p dt { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #f26629; }
.pp-sec-p dd { margin: 0; font-size: 16px; line-height: 1.6; color: #3c4858; }
@media (max-width: 991px) { .pp-sec-box { grid-template-columns: 1fr; } .pp-sec-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #eceff4; } .pp-sec-t { flex-shrink: 0; white-space: nowrap; } .pp-sec-pans { padding: 28px; } }
@media (max-width: 576px) { .pp-sec-pans { padding: 22px 18px; } .pp-sec-p h3 { font-size: 20px; } }

/* small budget checklist */
.pp-sb-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pp-sb-list li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid #eceff4; transition: border-color .3s; }
.pp-sb-list li:hover { border-color: #ffd0b8; }
.pp-sb-n { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #f26629; background: #fff4ee; }
.pp-sb-list b { display: block; font-size: 16px; color: #3c4858; } .pp-sb-list small { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: #5a6475; }
@media (max-width: 991px) { .pp-sb-list { grid-template-columns: 1fr; } }

/* ══ /performance-marketing/ — own sections (pmgen.py) ══ */

/* hero: the performance engine (channels -> smart bidding core -> results, with a feedback loop) */
.pm-hero .dmh-right { position: relative; }
.pm-scene { position: absolute; inset: 0; }
.pm-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pm-w { fill: none; stroke: rgba(242,102,41,.55); stroke-width: 2; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; animation: pmFlow 1.6s linear infinite; }
.pm-w--out { stroke: rgba(255,255,255,.45); }
.pm-w--back { stroke: rgba(255,180,143,.5); stroke-dasharray: 3 7; animation-direction: reverse; animation-duration: 2.4s; }
@keyframes pmFlow { to { stroke-dashoffset: -28; } }
.pm-ch { position: absolute; left: 0; width: 33%; white-space: nowrap; display: flex; align-items: center; gap: 10px; padding: 11px 12px; transform: translateY(-50%); }
.pm-ch > .fa { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; background: #f26629; }
.pm-ch b { display: block; font-size: 13px; color: #fff; line-height: 1.3; } .pm-ch small { display: block; font-size: 11px; color: rgba(255,255,255,.55); }
.pm-ch--0 { top: 13.8%; } .pm-ch--1 { top: 36.7%; } .pm-ch--2 { top: 59.5%; } .pm-ch--3 { top: 82.4%; }
.pm-ch--0, .pm-ch--2 { animation: pmBob 6s ease-in-out infinite; } .pm-ch--1, .pm-ch--3 { animation: pmBob 7s ease-in-out infinite .8s; }
@keyframes pmBob { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 6px)); } }
.pm-core { position: absolute; left: 59%; top: 50%; width: 128px; height: 128px; transform: translate(-50%, -50%); }
.pm-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(242,102,41,.6); animation: pmSpin 14s linear infinite; }
.pm-ring--2 { inset: -16px; border: 1px solid rgba(242,102,41,.25); animation: pmPulse 2.8s ease-out infinite; }
@keyframes pmSpin { to { transform: rotate(360deg); } }
@keyframes pmPulse { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.18); opacity: 0; } }
.pm-core-in { position: absolute; inset: 12px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle at 30% 25%, #ff8a50, #f26629 60%, #c8461a); box-shadow: 0 0 40px rgba(242,102,41,.45); }
.pm-core-in .fa { font-size: 20px; color: #fff; margin-bottom: 4px; animation: pmSpin 6s linear infinite; }
.pm-core-in b { font-size: 12px; color: #fff; line-height: 1.2; } .pm-core-in small { font-size: 10px; color: rgba(255,255,255,.85); }
.pm-out { position: absolute; right: 0; width: 25%; padding: 12px 14px; white-space: nowrap; transform: translateY(-50%); }
.pm-out--a { top: 26.2%; } .pm-out--b { top: 73.8%; }
.pm-out small { display: block; font-size: 11px; color: rgba(255,255,255,.55); }
.pm-out strong { position: relative; display: block; height: 30px; margin-top: 2px; }
.pm-v { position: absolute; left: 0; top: 0; font-size: 22px; font-weight: 900; line-height: 30px; color: #fff; white-space: nowrap; animation: pmA 8s infinite; }
.pm-v--b { color: #f26629; opacity: 0; animation-name: pmB; }
@keyframes pmA { 0%, 40% { opacity: 1; transform: none; } 50%, 90% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }
@keyframes pmB { 0%, 40% { opacity: 0; transform: translateY(8px); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.pm-loop { position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); }
.pm-loop .fa { color: #ffb48f; animation: pmSpin 3s linear infinite; }
@media (max-width: 991px) { .pm-hero .dmh-right { height: 470px; } }
@media (max-width: 576px) {
  .pm-hero .dmh-right { height: 400px; } .pm-ch { width: 36%; padding: 8px; gap: 8px; } .pm-ch > .fa { flex-basis: 28px; width: 28px; height: 28px; font-size: 12px; }
  .pm-ch b { font-size: 11px; } .pm-ch small { display: none; } .pm-core { width: 92px; height: 92px; } .pm-core-in b { font-size: 10px; } .pm-core-in small { display: none; }
  .pm-out { width: 28%; padding: 8px 10px; } .pm-v { font-size: 16px; } .pm-loop { left: 0; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .pm-scene *, .pm-scene *::before { animation: none !important; } .pm-v--b { opacity: 0; } }

/* smart optimisation — dark band */
.sx.pm-ml { background: linear-gradient(160deg, #0c0c0e, #141416 55%, #1b1b1e); position: relative; overflow: hidden; }
.sx.pm-ml::before { content: ''; position: absolute; left: -160px; top: -160px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(242,102,41,.16), transparent 70%); pointer-events: none; }
.pm-ml .container { position: relative; z-index: 1; }
.pm-ml .sx-title, .pm-ml h3 { color: #fff; } .pm-ml .sx-sub, .pm-ml p { color: rgba(255,255,255,.7); }
.pm-ml-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; margin-bottom: 30px; }
.pm-loop-d { position: relative; height: 340px; }
.pm-ld-ring { position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; margin: -125px 0 0 -125px; border-radius: 50%; border: 2px dashed rgba(242,102,41,.55); animation: pmSpin 30s linear infinite; }
.pm-ld-c { position: absolute; left: 50%; top: 50%; width: 150px; transform: translate(-50%, -50%); text-align: center; }
.pm-ld-c b { display: block; font-size: 18px; color: #fff; } .pm-ld-c small { display: block; margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.6); }
.pm-ld-n { position: absolute; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 30px; background: #1f1f23; border: 1px solid rgba(242,102,41,.4); white-space: nowrap; transform: translate(-50%, -50%); }
.pm-ld-n .fa { color: #f26629; } .pm-ld-n b { font-size: 13px; color: #fff; }
.pm-ld-n--0 { left: 50%; top: 8%; } .pm-ld-n--1 { left: 86%; top: 50%; } .pm-ld-n--2 { left: 50%; top: 92%; } .pm-ld-n--3 { left: 14%; top: 50%; }
.pm-ml-never { padding: 30px; border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
.pm-ml-never .sx-k { color: #ffb48f; }
.pm-ml-never h3 { margin: 8px 0 18px; font-size: 24px; line-height: 1.35; }
.pm-ml-never ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pm-ml-never li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: rgba(255,255,255,.88); }
.pm-ml-never li .fa { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #f26629; background: rgba(242,102,41,.16); }
.pm-ml-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pm-ml-c { padding: 26px 24px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); transition: border-color .3s, transform .3s, background .3s; }
.pm-ml-c:hover { border-color: rgba(242,102,41,.5); background: rgba(255,255,255,.07); transform: translateY(-4px); }
.pm-ml-ic { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-bottom: 16px; border-radius: 14px; font-size: 20px; color: #fff; background: linear-gradient(135deg, #f26629, #ff9a62); }
.pm-ml-c h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.35; }
.pm-ml-c p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; }
.pm-ml-src { font-size: 13px; font-weight: 700; color: #ffb48f; text-decoration: none; } .pm-ml-src:hover { color: #fff; text-decoration: none; }
.pm-ml-src .fa { font-size: 11px; margin-left: 4px; }
@media (max-width: 991px) { .pm-ml-top { grid-template-columns: 1fr; } .pm-ml-grid { grid-template-columns: 1fr 1fr; } .pm-ml-never h3 { font-size: 22px; } }
@media (max-width: 576px) { .pm-loop-d { height: 300px; } .pm-ld-ring { width: 200px; height: 200px; margin: -100px 0 0 -100px; } .pm-ld-n { padding: 7px 10px; } .pm-ld-n b { font-size: 11px; }
  .pm-ld-n--1 { left: 78%; } .pm-ld-n--3 { left: 22%; } .pm-ml-grid { grid-template-columns: 1fr; } .pm-ml-never { padding: 22px 18px; } .pm-ml-never h3 { font-size: 20px; } .pm-ml-c h3 { font-size: 18px; } }

/* full-funnel framework */
.sx.pm-fn { background: #f7f8fb; }
.pm-fn-box { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 34px; align-items: center; }
.pm-fn-stack { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pm-fn-s { position: relative; width: var(--w); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 16px; border: 0; border-radius: 16px; cursor: pointer; font-family: inherit;
  background: #fff; color: #3c4858; box-shadow: 0 8px 22px rgba(23,59,90,.06); border: 1.5px solid #eceff4; transition: background .3s, color .3s, border-color .3s, transform .3s; }
.pm-fn-s .fa { color: #f26629; font-size: 18px; transition: color .3s; }
.pm-fn-s b { font-size: 17px; } .pm-fn-s span { font-size: 13px; color: #8a93a2; white-space: nowrap; transition: color .3s; }
.pm-fn-s:hover { border-color: rgba(242,102,41,.45); }
.pm-fn-s.is-on { background: #f26629; border-color: #f26629; color: #fff; transform: scale(1.03); }
.pm-fn-s.is-on .fa, .pm-fn-s.is-on span { color: #fff; }
.pm-fn-pans { display: grid; }
.pm-fn-p { grid-area: 1 / 1; padding: 36px 40px; border-radius: 22px; background: #fff; border: 1px solid #eceff4; box-shadow: 0 20px 50px rgba(23,59,90,.06); opacity: 0; visibility: hidden; transform: translateX(20px); transition: opacity .45s, transform .45s, visibility 0s .45s; }
.pm-fn-p.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s, transform .45s; }
.pm-fn-p h3 { margin: 8px 0 18px; font-size: 24px; line-height: 1.35; color: #3c4858; }
.pm-fn-p dl { margin: 0; display: grid; gap: 16px; }
.pm-fn-p dt { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #8a93a2; text-transform: uppercase; letter-spacing: .05em; }
.pm-fn-p dt .fa { color: #f26629; } .pm-fn-p dd { margin: 4px 0 0; font-size: 16px; line-height: 1.6; color: #3c4858; }
@media (max-width: 991px) { .pm-fn-box { grid-template-columns: 1fr; } .pm-fn-p h3 { font-size: 22px; } }
@media (max-width: 576px) { .pm-fn-s { width: 100%; padding: 14px 12px; } .pm-fn-s b { font-size: 15px; } .pm-fn-p { padding: 24px 20px; } .pm-fn-p h3 { font-size: 20px; } }

/* campaign teardown */
.pm-td-box { border-radius: 22px; overflow: hidden; border: 1px solid #eceff4; background: #fff; box-shadow: 0 20px 50px rgba(23,59,90,.06); }
.pm-td-h, .pm-td-list > li { display: grid; grid-template-columns: 190px 1fr 1fr; }
.pm-td-h span { padding: 16px 22px; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: #f7f8fb; color: #8a93a2; }
.pm-td-h span:nth-child(2) .fa { color: #d9534f; } .pm-td-h span:nth-child(3) { background: #fff3ec; color: #f26629; }
.pm-td-h .fa { margin-right: 6px; }
.pm-td-list { list-style: none; margin: 0; padding: 0; }
.pm-td-list > li { border-top: 1px solid #eef1f5; transition: background .25s; }
.pm-td-list > li:hover { background: #fffaf7; }
.pm-td-list b { padding: 18px 22px; font-size: 16px; color: #3c4858; }
.pm-td-list span { display: flex; gap: 10px; padding: 18px 22px; font-size: 16px; line-height: 1.55; }
.pm-td-b { color: #8a93a2; } .pm-td-b .fa { margin-top: 5px; color: #d9534f; font-size: 13px; }
.pm-td-a { color: #3c4858; background: rgba(242,102,41,.04); } .pm-td-a .fa { margin-top: 5px; color: #16a34a; font-size: 13px; }
@media (max-width: 767px) {
  .pm-td-h { display: none; } .pm-td-list > li { grid-template-columns: 1fr; padding: 6px 0; }
  .pm-td-list b { padding: 14px 18px 4px; } .pm-td-list span { padding: 8px 18px; font-size: 15px; } .pm-td-a { background: none; }
}

/* definition tab panels: tick list */
.pm-def-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.pm-def-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.6; color: #3c4858; }
.pm-def-list .fa { margin-top: 5px; font-size: 14px; color: #f26629; }

/* services section (option C from pmsvc_preview.py) — shared pv- pieces */
.pv-ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; font-size: 17px; color: #f26629; background: rgba(242,102,41,.1); transition: background .25s, color .25s; }
.pv-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pv-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 30px; font-size: 13px; font-weight: 600; color: #3c4858; background: #f4f5f8; }
.pv-chips .fa { font-size: 11px; color: #f26629; }
.pv-cta { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 12px; background: #f26629; color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; transition: background .25s; }
.pv-cta:hover { background: #d9531a; color: #fff; text-decoration: none; }
.pv-b-foot { margin-top: 30px; text-align: center; }
/* ── C: light, grouped (paid channels | conversion + measurement) ── */
.sx.pv-c { background: #f7f8fb; }
.pv-c-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.pv-c-stack { display: grid; gap: 22px; }
.pv-c-col { padding: 22px; border-radius: 22px; background: #fff; border: 1px solid #eceff4; box-shadow: 0 14px 36px rgba(23,59,90,.05); }
.pv-c-h { display: flex; align-items: center; gap: 14px; padding: 4px 4px 18px; margin-bottom: 8px; border-bottom: 1px solid #eef1f5; }
.pv-c-h > .fa { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; background: #f26629; }
.pv-c-h h3 { margin: 0; font-size: 20px; line-height: 1.3; color: #3c4858; } .pv-c-h small { display: block; margin-top: 2px; font-size: 13px; color: #8a93a2; }
.pv-c-row { border-bottom: 1px solid #f0f2f6; } .pv-c-row:last-child { border-bottom: 0; }
.pv-c-row summary { display: flex; align-items: center; gap: 12px; padding: 14px 4px; cursor: pointer; list-style: none; }
.pv-c-row summary::-webkit-details-marker { display: none; }
.pv-c-n { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #c4c9d2; }
.pv-c .pv-ic { flex-basis: 36px; width: 36px; height: 36px; font-size: 14px; }
.pv-c-row summary b { flex: 1 1 auto; font-size: 16px; line-height: 1.35; color: #3c4858; }
.pv-c-pl { font-size: 12px; color: #c4c9d2; transition: transform .3s, color .3s; }
.pv-c-row[open] .pv-c-pl { transform: rotate(45deg); color: #f26629; } .pv-c-row[open] .pv-ic { background: #f26629; color: #fff; }
.pv-c-row summary:hover b { color: #f26629; }
.pv-c-body { padding: 0 4px 18px 64px; }
.pv-c-body p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: #5b6472; }
@media (max-width: 991px) { .pv-c-grid { grid-template-columns: 1fr; } }
@media (max-width: 576px) { .pv-c-col { padding: 16px; } .pv-c-body { padding-left: 4px; } .pv-cta { width: 100%; justify-content: center; } }

/* metrics section (option A from pmmet_preview.py) — shared pk- pieces */
.pk-ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; font-size: 17px; color: #f26629; background: rgba(242,102,41,.1); transition: background .25s, color .25s; }
.pk-tag { display: inline-block; padding: 4px 11px; border-radius: 30px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pk-tag--efficiency { color: #f26629; background: #fff1e8; } .pk-tag--profitability { color: #16a34a; background: #eafaf0; } .pk-tag--truth { color: #6d28d9; background: #f3edff; }
.pk-frac { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 18px; border-radius: 14px; background: #fff6f0; text-align: center; font-size: 15px; font-weight: 700; line-height: 1.35; color: #3c4858; }
.pk-frac i { display: block; align-self: stretch; height: 2px; border-radius: 2px; background: #f26629; }
.pk-frac--row { flex-direction: row; gap: 12px; } .pk-frac--row em { font-style: normal; font-size: 22px; color: #f26629; }
/* ── A: formula cards ── */
.pk-a-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pk-a-c { display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 24px; border-radius: 22px; background: #fff; border: 1px solid #eceff4; transition: transform .3s, box-shadow .3s, border-color .3s; }
.pk-a-c:hover { transform: translateY(-4px); border-color: rgba(242,102,41,.35); box-shadow: 0 22px 46px rgba(23,59,90,.08); } .pk-a-c:hover .pk-ic { background: #f26629; color: #fff; }
.pk-a-top { display: flex; align-items: center; justify-content: space-between; }
.pk-a-c h3 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 600; color: #5b6472; } .pk-a-c h3 b { display: block; font-size: 24px; font-weight: 800; color: #3c4858; }
.pk-a-c .pk-frac { align-self: stretch; }
.pk-a-c p { margin: 0; font-size: 16px; line-height: 1.6; color: #5b6472; }
@media (max-width: 991px) { .pk-a-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .pk-a-grid { grid-template-columns: 1fr; gap: 14px; } .pk-a-c { padding: 22px 20px; } .pk-a-c h3 b { font-size: 21px; } }

/* audit fixes (29 Oct): related-page link in service rows; H3 card scale 20/19/18 */
.pv-c-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 700; color: #f26629; text-decoration: none; }
.pv-c-more:hover { color: #d9531a; text-decoration: none; } .pv-c-more .fa { font-size: 11px; }
.pk-a-c h3 { font-size: 15px; font-weight: 600; } .pk-a-c h3 b { margin-bottom: 2px; font-size: 20px; }
@media (max-width: 991px) { .pv-c-h h3 { font-size: 19px; } .pk-a-c h3 b { font-size: 19px; } }
@media (max-width: 576px) { .pv-c-h h3 { font-size: 18px; } .pk-a-c h3 b { font-size: 18px; } }