/* PERFOZI — page-service.css — Shared CSS for ALL service pages — SEO, Paid Search, Paid Social, etc. */

/* ── SERVICE PAGES SHARED CSS ── */
/* Used by: SEO, Paid Search, Paid Social, Local SEO, Content,
   Social Media, Link Building, Email, Branding, Creative */

/* Benchmark table */
.bench-table{background:var(--s2);border:1px solid var(--br);border-radius:14px;overflow:hidden;margin-top:40px}
.bench-hdr,.bench-row{display:grid;gap:0;border-bottom:1px solid var(--br)}
.bench-hdr{background:var(--s3);grid-template-columns:1fr 120px 120px 100px}
.bench-row:last-child{border-bottom:none}
.bench-cell{padding:16px 20px;font-family:var(--fb);font-size:14px;color:var(--t1);border-right:1px solid var(--br)}
.bench-cell:last-child{border-right:none}
.bench-cell.hd{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--t3);letter-spacing:1.5px;text-transform:uppercase}
.bench-cell.kw{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--white)}
.bench-bar-wrap{display:flex;align-items:center;gap:8px;height:100%}
.bench-bar{flex:1;height:6px;background:var(--s3);border-radius:3px;overflow:hidden}
.bench-bar-fill{height:100%;background:var(--cyan);border-radius:3px}
.bench-diff{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--green)}
.bench-diff.neg{color:#FF3B30}

/* Who is this for / ideal client */
.ideal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}
.ig{background:var(--s2);border:1px solid var(--br);border-radius:12px;padding:22px;transition:border-color .3s,transform .3s cubic-bezier(.16,1,.3,1)}
.ig:hover{border-color:var(--br2);transform:translateY(-3px)}
.ig-icon{width:40px;height:40px;border-radius:12px;background:var(--ca);border:1px solid var(--cb);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.ig-title{font-family:var(--fh);font-size:15px;font-weight:800;margin-bottom:6px;letter-spacing:-.2px}
.ig-desc{font-family:var(--fb);font-size:14px;color:var(--t2);line-height:1.65}

/* Pricing tiers */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--br);border-radius:16px;overflow:hidden;margin-top:52px}
.pr{background:var(--s2);padding:36px 28px;position:relative;transition:background .35s}
.pr.featured{background:linear-gradient(135deg,var(--s2),rgba(0,212,255,.07));border:1px solid var(--br2)}
.pr-badge{position:absolute;top:20px;right:20px;font-family:var(--fb);font-size:14px;font-weight:700;color:var(--black);background:var(--cyan);border-radius:100px;padding:3px 10px;letter-spacing:.5px;text-transform:uppercase}
.pr-tier{font-family:var(--fb);font-size:14px;color:var(--cyan);letter-spacing:2px;text-transform:uppercase;font-weight:600;margin-bottom:12px}
.pr-price{font-family:var(--fh);font-size:clamp(32px,3.5vw,48px);font-weight:800;letter-spacing:-2px;line-height:1;margin-bottom:6px}
.pr-price em{color:var(--cyan);font-style:normal}
.pr-freq{font-family:var(--fb);font-size:14px;color:var(--t3);margin-bottom:20px}
.pr-features{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.prf{display:flex;align-items:flex-start;gap:10px;font-family:var(--fb);font-size:14px;color:var(--t1);line-height:1.5}
.prf::before{content:'✓';color:var(--cyan);font-weight:700;flex-shrink:0;margin-top:1px}
.pr-cta{display:block;width:100%;padding:14px;font-family:var(--fh);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;text-align:center;border-radius:8px;transition:all .3s;text-decoration:none}
.pr-cta.primary{background:var(--cyan);color:var(--black)}
.pr-cta.primary:hover{opacity:.88;transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,212,255,.3)}
.pr-cta.ghost{background:transparent;color:var(--t1);border:1px solid var(--br)}
.pr-cta.ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* Social proof logos */
.logos-strip{display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;padding:40px 5%;border-top:1px solid var(--br);border-bottom:1px solid var(--br)}
.logo-item{font-family:var(--fh);font-size:18px;font-weight:800;color:var(--t4);letter-spacing:-.5px;transition:color .3s}
.logo-item:hover{color:var(--t2)}

/* Testimonial strip (single) */
.single-testi{background:var(--s2);border:1px solid var(--br2);border-radius:16px;padding:36px;max-width:700px;margin:0 auto}
.st-quote{font-family:var(--fh);font-size:clamp(18px,2vw,26px);font-weight:800;letter-spacing:-.5px;line-height:1.25;margin-bottom:24px;position:relative}
.st-quote::before{content:'"';font-size:80px;color:var(--cyan);opacity:.1;position:absolute;top:-20px;left:-10px;font-family:var(--fh);line-height:1}
.st-author{display:flex;align-items:center;gap:14px}
.st-av{width:48px;height:48px;border-radius:14px;background:var(--cyan);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:18px;font-weight:800;color:var(--black);flex-shrink:0}
.st-name{font-family:var(--fh);font-size:15px;font-weight:800}
.st-role{font-family:var(--fb);font-size:14px;color:var(--t2)}
.st-metric{font-family:var(--fh);font-size:26px;font-weight:800;color:var(--cyan);letter-spacing:-1px;margin-left:auto;flex-shrink:0}

/* ── RANK TRACKER WIDGET (hero panel) ── */
.rank-panel{background:var(--s2);border:1px solid var(--br);border-radius:14px;overflow:hidden;margin-bottom:16px}
.rp-hd{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--br);background:var(--s3)}
.rp-title{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--t1)}
.rp-live{display:flex;align-items:center;gap:6px;font-family:var(--fb);font-size:14px;color:var(--green)}
.rp-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;flex-shrink:0}
.rank-item{display:grid;grid-template-columns:50px 1fr auto;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--br);transition:background .2s}
.rank-item:last-child{border-bottom:none}
.rank-item:hover{background:var(--s3)}
.rank-badge{width:40px;height:40px;border-radius:8px;background:var(--ca);border:1px solid var(--cb);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:14px;font-weight:800;color:var(--cyan);flex-shrink:0}
.rank-info{flex:1}
.rank-kw{font-family:var(--fh);font-size:14px;font-weight:800;margin-bottom:3px}
.rank-vol{font-family:var(--fb);font-size:14px;color:var(--t3)}
.rank-meta{text-align:right}
.rank-chg{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--green);margin-bottom:3px}
.rank-prev{font-family:var(--fb);font-size:14px;color:var(--t3)}

/* ── MINI METRICS (hero) ── */
.mini-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mm{background:var(--s2);border:1px solid var(--br);border-radius:10px;padding:14px;text-align:center}
.mm-n{font-family:var(--fh);font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--white);margin-bottom:4px}
.mm-n em{color:var(--cyan);font-style:normal}
.mm-l{font-family:var(--fb);font-size:14px;color:var(--t2);line-height:1.4}

/* ── COMPARISON TABLE ── */
.cmp-wrap{margin-top:40px;border:1px solid var(--br);border-radius:14px;overflow:hidden}
.cmp-hd{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;background:var(--s3);border-bottom:1px solid var(--br)}
.cmp-h{padding:14px 20px;font-family:var(--fh);font-size:14px;font-weight:800;color:var(--white);letter-spacing:.5px}
.cmp-h.on{color:var(--cyan);background:var(--ca)}
.cmp-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;border-bottom:1px solid var(--br)}
.cmp-row:last-child{border-bottom:none}
.cmp-row:hover{background:var(--s3)}
.cmp-c{padding:14px 20px;font-family:var(--fb);font-size:14px;color:var(--t1);border-right:1px solid var(--br)}
.cmp-c:last-child{border-right:none}
.cmp-c.lbl{font-family:var(--fh);font-size:14px;font-weight:700;color:var(--white)}
.cmp-c.on{background:rgba(0,212,255,.04)}
.tick{color:var(--green);font-weight:700;margin-right:4px}
.cross{color:#FF3B30;font-weight:700;margin-right:4px}

/* ── ENGAGEMENT / WAYS TO WORK ── */
.engage-section{padding:var(--sp);background:var(--s1)}
.engage-intro{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-bottom:52px}
.engage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.eg{background:var(--s2);border:1px solid var(--br);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:14px;transition:border-color .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.eg:hover{border-color:var(--br2);transform:translateY(-5px)}
.eg-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--fb);font-size:14px;font-weight:600;color:var(--cyan);background:var(--ca);border:1px solid var(--cb);border-radius:100px;padding:4px 12px;width:fit-content;letter-spacing:.5px}
.eg-icon{width:48px;height:48px;border-radius:14px;background:var(--ca);border:1px solid var(--cb);display:flex;align-items:center;justify-content:center}
.eg-title{font-family:var(--fh);font-size:20px;font-weight:800;letter-spacing:-.4px}
.eg-for{font-family:var(--fb);font-size:14px;color:var(--cyan);font-weight:600}
.eg-desc{font-family:var(--fb);font-size:var(--body-size);color:var(--t1);line-height:var(--body-line)}
.eg-divider{height:1px;background:var(--br)}
.eg-items{display:flex;flex-direction:column;gap:10px;flex:1}
.eg-item{display:flex;align-items:flex-start;gap:8px;font-family:var(--fb);font-size:14px;color:var(--t1);line-height:1.5}
.eg-item::before{content:'→';color:var(--cyan);flex-shrink:0;margin-top:1px}
.eg-cta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--fh);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--t1);background:transparent;border:1px solid var(--br);border-radius:8px;padding:13px 18px;cursor:pointer;transition:all .3s;margin-top:auto}
.eg-cta:hover{border-color:var(--cyan);color:var(--cyan)}

/* ── SPECIALIST STRIP ── */
.spec-strip{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--br);border-bottom:1px solid var(--br)}
.ss-left{padding:96px 5%;background:var(--s1);border-right:1px solid var(--br);position:relative;overflow:hidden}
.ss-wm{position:absolute;top:20px;right:20px;font-family:var(--fh);font-size:120px;font-weight:800;color:rgba(255,255,255,.02);line-height:1;user-select:none;pointer-events:none}
.perks-list{display:flex;flex-direction:column;gap:14px;margin:28px 0}
.perk{display:flex;align-items:flex-start;gap:12px}
.perk-chk{width:22px;height:22px;border-radius:50%;background:var(--ca);border:1px solid var(--cb);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.perk-txt{font-family:var(--fb);font-size:var(--body-size);color:var(--t1);line-height:1.6}
.perk-txt strong{color:var(--white);font-weight:600}
.ss-right{padding:96px 5%;background:var(--s2)}
.spec-card{display:flex;gap:14px;align-items:flex-start;padding:18px;background:var(--s3);border:1px solid var(--br);border-radius:12px;margin-bottom:10px;transition:border-color .3s,transform .3s}
.spec-card:last-of-type{margin-bottom:0}
.spec-card:hover{border-color:var(--br2);transform:translateY(-2px)}
.spec-av{width:46px;height:46px;border-radius:12px;background:var(--cyan);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:14px;font-weight:800;color:var(--black);flex-shrink:0}
.spec-info{flex:1}
.spec-name{font-family:var(--fh);font-size:14px;font-weight:800;margin-bottom:3px}
.spec-role{font-family:var(--fb);font-size:14px;color:var(--t3);margin-bottom:8px;line-height:1.4}
.spec-tags{display:flex;flex-wrap:wrap;gap:4px}
.spec-tag{font-family:var(--fb);font-size:14px;background:var(--s4);color:var(--t3);border-radius:4px;padding:2px 8px}
.spec-rate{text-align:right;flex-shrink:0}
.spec-price{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--white)}
.spec-save{font-family:var(--fb);font-size:14px;color:var(--t3);text-decoration:line-through}
.mini-nums{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.mn{background:var(--s3);border:1px solid var(--br);border-radius:10px;padding:14px;text-align:center}
.mn-n{font-family:var(--fh);font-size:24px;font-weight:800;color:var(--cyan);margin-bottom:4px}
.mn-l{font-family:var(--fb);font-size:14px;color:var(--t2)}

/* ── PLATFORM LOGOS (paid-search hero) ── */
.platform-logos{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.pl-item{display:flex;align-items:center;gap:6px;font-family:var(--fb);font-size:14px;color:var(--t2)}
.pl-logo{width:16px;height:16px;object-fit:contain;flex-shrink:0}
.pl-name{font-family:var(--fb);font-size:14px;color:var(--t2)}

/* ── PLATFORM TABS (paid-search services) ── */
.ptabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:0}
.ptab{display:flex;align-items:center;gap:6px;padding:10px 18px;background:var(--s2);border:1px solid var(--br);border-radius:8px;font-family:var(--fb);font-size:14px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .2s}
.ptab:hover{border-color:var(--br2);color:var(--white)}
.ptab.active{background:var(--ca);border-color:var(--cyan);color:var(--cyan)}
.ptab-content{display:none;margin-top:20px}

/* ── INTENT PANEL (paid-search hero widget) ── */
.intent-panel{background:var(--s2);border:1px solid var(--br);border-radius:14px;overflow:hidden;margin-bottom:16px}
.ip-hd{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--br);background:var(--s3)}
.ip-title{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--t1)}
.ip-live{display:flex;align-items:center;gap:6px;font-family:var(--fb);font-size:14px;color:var(--cyan)}
.ip-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:pulse 2s infinite;flex-shrink:0}
.intent-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--br)}
.intent-row:last-of-type{border-bottom:none}
.intent-badge{display:inline-block;font-family:var(--fb);font-size:14px;font-weight:700;border-radius:4px;padding:2px 7px;letter-spacing:.3px;white-space:nowrap}
.ib-buy{background:rgba(0,229,122,.15);color:var(--green)}
.ib-compare{background:rgba(0,212,255,.15);color:var(--cyan)}
.ib-info{background:rgba(255,184,0,.15);color:#ffb800}
.intent-kw{font-family:var(--fb);font-size:14px;color:var(--t1)}
.intent-meta{text-align:right}
.intent-cpc{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--white)}
.intent-vol{font-family:var(--fb);font-size:14px;color:var(--t3)}
.adqual-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 18px;background:var(--ca);border-top:1px solid var(--cb)}
.aq-label{font-family:var(--fb);font-size:14px;color:var(--cyan);white-space:nowrap}
.aq-bar{flex:1;height:6px;background:var(--s4);border-radius:3px;overflow:hidden}
.aq-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--green));border-radius:3px}
.aq-score{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--white);white-space:nowrap}

/* ── INBOX PANEL (email hero widget) ── */
.inbox-panel{background:var(--s2);border:1px solid var(--br);border-radius:14px;overflow:hidden;margin-bottom:16px}
.inbox-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--br);background:var(--s3)}
.inbox-title{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--t1)}
.inbox-live{display:flex;align-items:center;gap:6px;font-family:var(--fb);font-size:14px;color:var(--green)}
.inbox-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;flex-shrink:0}
.email-row{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--br);position:relative;transition:background .2s}
.email-row:last-child{border-bottom:none}
.email-row:hover{background:var(--s3)}
.email-row.unread{background:rgba(0,212,255,.03)}
.er-avatar{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:14px;font-weight:800;color:var(--white);flex-shrink:0}
.er-body{flex:1;min-width:0}
.er-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}
.er-sender{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--t1);display:flex;align-items:center;gap:6px}
.er-badge{display:inline-block;font-family:var(--fb);font-size:14px;font-weight:700;border-radius:3px;padding:1px 5px;letter-spacing:.3px}
.badge-flow{background:rgba(0,212,255,.15);color:var(--cyan)}
.badge-sale{background:rgba(124,58,237,.2);color:#a78bfa}
.badge-test{background:rgba(255,184,0,.15);color:#ffb800}
.er-time{font-family:var(--fb);font-size:14px;color:var(--t3);white-space:nowrap;flex-shrink:0}
.er-subject{font-family:var(--fb);font-size:14px;font-weight:600;color:var(--t1);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.er-preview{font-family:var(--fb);font-size:14px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex-shrink:0;margin-top:4px}

/* ── REVENUE CHART PANEL (email hero) ── */
.rev-panel{background:var(--s2);border:1px solid var(--br);border-radius:14px;padding:16px}
.rev-title{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--t2);margin-bottom:12px}
.rev-bars{display:flex;align-items:flex-end;gap:6px;height:80px;margin-bottom:10px}
.rev-bar{flex:1;border-radius:3px 3px 0 0;transition:opacity .2s}
.rev-bar:hover{opacity:.8}
.rev-total{font-family:var(--fh);font-size:20px;font-weight:800;letter-spacing:-.5px;margin-bottom:2px}
.rev-total em{color:var(--green);font-style:normal}
.rev-sub{font-family:var(--fb);font-size:14px;color:var(--t3)}

/* ── ESP STRIP (email platforms) ── */
.esp-strip{display:flex;align-items:center;gap:24px;padding:20px 5%;border-top:1px solid var(--br);border-bottom:1px solid var(--br);flex-wrap:wrap}
.esp-label{font-family:var(--fb);font-size:14px;color:var(--t3);letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;flex-shrink:0}
.esp-logos{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.esp-logo{display:flex;align-items:center;gap:8px;font-family:var(--fb);font-size:14px;font-weight:600;color:var(--t2)}
.esp-logo-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ── FLOW VISUALISER (email lifecycle flows) ── */
.flow-section{padding:var(--sp);background:var(--black)}
.flow-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.ftab{padding:10px 18px;background:var(--s2);border:1px solid var(--br);border-radius:8px;font-family:var(--fb);font-size:14px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .2s}
.ftab:hover{border-color:var(--br2);color:var(--white)}
.ftab.active{background:var(--ca);border-color:var(--cyan);color:var(--cyan)}
.flow-panel{display:none;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.flow-panel.active{display:grid}
.flow-left{display:flex;flex-direction:column;gap:16px}
.flow-left h3{font-family:var(--fh);font-size:clamp(20px,2vw,28px);font-weight:800;letter-spacing:-.5px;line-height:1.2}
.flow-left p{font-family:var(--fb);font-size:var(--body-size);color:var(--t1);line-height:var(--body-line)}
.flow-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--fh);font-size:14px;font-weight:800;color:var(--cyan);text-decoration:none;letter-spacing:.3px;transition:gap .2s}
.flow-cta:hover{gap:12px}
.flow-diagram{display:flex;flex-direction:column;gap:0}
.flow-node{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:flex-start;padding:14px 18px;background:var(--s2);border:1px solid var(--br);border-radius:12px;transition:border-color .25s}
.flow-node:hover{border-color:var(--br2)}
.fn-trigger{border-color:var(--cb);background:var(--ca)}
.fn-email{border-color:var(--br)}
.fn-wait{background:var(--s1)}
.fn-split{background:var(--s1);border-style:dashed}
.fn-connector{display:flex;justify-content:center;padding:2px 0}
.fn-line{width:1px;height:20px;background:var(--br)}
.fn-num{width:36px;height:36px;border-radius:10px;background:var(--s3);border:1px solid var(--br);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:14px;font-weight:800;color:var(--cyan);flex-shrink:0}
.fn-info{flex:1;min-width:0}
.fn-type{font-family:var(--fb);font-size:14px;color:var(--t3);letter-spacing:1px;text-transform:uppercase;margin-bottom:3px}
.fn-name{font-family:var(--fh);font-size:14px;font-weight:800;margin-bottom:3px}
.fn-desc{font-family:var(--fb);font-size:14px;color:var(--t2);line-height:1.5}
.fn-stat{text-align:right;flex-shrink:0}
.fn-rate{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--green)}
.fn-rate-l{font-family:var(--fb);font-size:14px;color:var(--t3)}

/* ── EMAIL BENCHMARK TABLE ── */
.bench-avg{font-family:var(--fb);font-size:14px;color:var(--t3)}
.bench-good{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--green)}
.bench-bar-bg{flex:1;height:6px;background:var(--s3);border-radius:3px;overflow:hidden}

/* ── SMM HERO PLATFORM PANEL ── */
.platform-panel{background:var(--s2);border:1px solid var(--br);border-radius:14px;overflow:hidden;margin-bottom:16px}
.pp-hd{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--br);background:var(--s3)}
.pp-title{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--t1)}
.pp-live{display:flex;align-items:center;gap:6px;font-family:var(--fb);font-size:14px;color:var(--green)}
.pp-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;flex-shrink:0}
.plat-row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--br);transition:background .2s}
.plat-row:last-child{border-bottom:none}
.plat-row:hover{background:var(--s3)}
.plat-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.plat-info{flex:1;min-width:0}
.plat-name{font-family:var(--fh);font-size:14px;font-weight:800;margin-bottom:2px}
.plat-sub{font-family:var(--fb);font-size:14px;color:var(--t3)}
.plat-metric{text-align:right;flex-shrink:0}
.plat-n{font-family:var(--fh);font-size:15px;font-weight:800;color:var(--green);line-height:1}
.plat-l{font-family:var(--fb);font-size:14px;color:var(--t3)}

/* SMM platform-strip section wrapper */
.platform-strip{padding:var(--sp);background:var(--s1)}

/* ── PLATFORM TAB CONTENT (SMM / Paid Social) ── */
.ptab-logo{width:16px;height:16px;object-fit:contain;flex-shrink:0}
.ptab-content.active{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.ptab-left{display:flex;flex-direction:column;gap:16px}
.ptab-left h3{font-family:var(--fh);font-size:clamp(18px,2vw,26px);font-weight:800;letter-spacing:-.5px;line-height:1.2}
.ptab-left p{font-family:var(--fb);font-size:var(--body-size);color:var(--t1);line-height:var(--body-line)}
.ptab-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--fh);font-size:14px;font-weight:800;color:var(--cyan);text-decoration:none;letter-spacing:.3px;transition:gap .2s}
.ptab-link:hover{gap:10px}
.ptab-features{display:flex;flex-direction:column;gap:16px}
.pf{display:flex;gap:14px;align-items:flex-start}
.pf-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);flex-shrink:0;margin-top:5px}
.pf-txt{font-family:var(--fb);font-size:14px;color:var(--t1);line-height:1.65}
.pf-txt strong{color:var(--white);font-weight:600;display:block;margin-bottom:3px}

/* ── PAID SOCIAL HERO PLATFORM CARDS ── */
.platform-card{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:14px 16px;background:var(--s2);border:1px solid var(--br);border-radius:12px;margin-bottom:8px;transition:border-color .25s}
.platform-card:last-of-type{margin-bottom:12px}
.platform-card:hover{border-color:var(--br2)}
.pc-icon{width:32px;height:32px;border-radius:8px;background:var(--s3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.pc-info{flex:1;min-width:0}
.pc-name{font-family:var(--fh);font-size:14px;font-weight:800;margin-bottom:2px}
.pc-sub{font-family:var(--fb);font-size:14px;color:var(--t3)}
.pc-stat{text-align:right;flex-shrink:0}
.pc-n{font-family:var(--fh);font-size:18px;font-weight:800;color:var(--green);line-height:1}
.pc-l{font-family:var(--fb);font-size:14px;color:var(--t3)}

/* ── BRANDING HERO PANEL ── */
.brand-panel{background:var(--s2);border:1px solid var(--br);border-radius:14px;padding:22px;margin-bottom:12px}
.bp-hd{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--t2);margin-bottom:14px}
.brand-swatch-row{display:flex;gap:8px;margin-bottom:16px}
.brand-swatch{width:40px;height:40px;border-radius:10px;flex-shrink:0}
.brand-type-demo{background:var(--s3);border:1px solid var(--br);border-radius:10px;padding:16px;margin-bottom:14px}
.btd-label{font-family:var(--fb);font-size:14px;color:var(--t3);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.btd-h{font-family:var(--fh);font-size:24px;font-weight:800;letter-spacing:-1px;line-height:1.1}
.btd-b{font-family:var(--fb);font-size:14px;color:var(--t2);line-height:1.6}
.logo-variants{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px}
.logo-var{background:var(--s3);border:1px solid var(--br);border-radius:10px;height:56px;display:flex;align-items:center;justify-content:center;transition:border-color .25s}
.logo-var:hover{border-color:var(--br2)}
.logo-var-label{font-family:var(--fb);font-size:14px;color:var(--t3);text-align:center;margin-top:5px;letter-spacing:.5px}

/* ── LINK BUILDING HERO PANEL ── */
.link-panel{background:var(--s2);border:1px solid var(--br);border-radius:14px;overflow:hidden;margin-bottom:16px}
.lp-hd{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--br);background:var(--s3)}
.lp-title{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--t1)}
.lp-live{display:flex;align-items:center;gap:6px;font-family:var(--fb);font-size:14px;color:var(--green)}
.lp-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;flex-shrink:0}
.link-row{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--br);transition:background .2s}
.link-row:last-child{border-bottom:none}
.link-row:hover{background:var(--s3)}
.dr-badge{width:44px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:14px;font-weight:800;flex-shrink:0}
.dr-high{background:rgba(0,229,122,.15);color:var(--green);border:1px solid rgba(0,229,122,.3)}
.dr-med{background:rgba(0,212,255,.12);color:var(--cyan);border:1px solid var(--cb)}
.link-info{flex:1;min-width:0}
.link-pub{font-family:var(--fh);font-size:14px;font-weight:800;margin-bottom:2px}
.link-anchor{font-family:var(--fb);font-size:14px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-type{font-family:var(--fb);font-size:14px;color:var(--t2);background:var(--s3);border:1px solid var(--br);border-radius:4px;padding:2px 7px;white-space:nowrap;flex-shrink:0}

/* ── CREATIVE AD SHOWCASE (page-creative) ── */
.ad-showcase{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:12px}
.ad-card{background:var(--s2);border:1px solid var(--br);border-radius:12px;overflow:hidden;transition:border-color .3s,transform .3s cubic-bezier(.16,1,.3,1)}
.ad-card:hover{border-color:var(--br2);transform:translateY(-4px)}
.ad-format-tag{background:var(--s3);border-bottom:1px solid var(--br);padding:7px 12px;font-family:var(--fb);font-size:14px;font-weight:700;color:var(--cyan);letter-spacing:1.5px;text-transform:uppercase}
.ad-card-inner{padding:14px}
.ad-label{display:flex;align-items:center;gap:6px;font-family:var(--fb);font-size:14px;color:var(--t3);margin-bottom:10px;letter-spacing:.5px}
.ad-label-dot{width:5px;height:5px;border-radius:50%;background:var(--green);flex-shrink:0}
.ad-visual{height:72px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:10px}
.ad-copy{font-family:var(--fh);font-size:14px;font-weight:800;letter-spacing:-.2px;margin-bottom:4px}
.ad-sub{font-family:var(--fb);font-size:14px;color:var(--t3);margin-bottom:10px}
.ad-cta-btn{display:inline-block;background:var(--cyan);color:var(--black);font-family:var(--fh);font-size:14px;font-weight:800;border-radius:4px;padding:5px 10px;letter-spacing:.3px}

/* ── LINK BUILDING PROCESS GRID ── */
.lb-proc-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}

/* ── PUBLISHER TICKER (link-building) ── */
.pub-ticker{overflow:hidden;max-width:100%;background:var(--s1);border-top:1px solid var(--br);border-bottom:1px solid var(--br);padding:14px 0}
.ticker-inner{display:flex;gap:0;animation:ticker 30s linear infinite;width:max-content}
.ticker-item{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--t3);letter-spacing:.5px;padding:0 28px;white-space:nowrap;border-right:1px solid var(--br)}
.ticker-item:last-child{border-right:none}

/* ── SUB-SERVICES GRID (link-building specialist cards) ── */
.sub-services{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}
.ss-card{background:var(--s2);border:1px solid var(--br);border-radius:14px;padding:24px;text-decoration:none;color:var(--white);display:flex;flex-direction:column;gap:8px;transition:border-color .3s,transform .3s cubic-bezier(.16,1,.3,1);position:relative}
.ss-card:hover{border-color:var(--br2);transform:translateY(-4px)}
.ss-card-lbl{font-family:var(--fb);font-size:14px;font-weight:700;color:var(--t3);letter-spacing:2px;text-transform:uppercase}
.ss-card-title{font-family:var(--fh);font-size:16px;font-weight:800;letter-spacing:-.3px;line-height:1.2}
.ss-card-desc{font-family:var(--fb);font-size:14px;color:var(--t2);line-height:1.65;flex:1}
.ss-card-arr{font-family:var(--fh);font-size:18px;color:var(--cyan);margin-top:4px;transition:transform .25s}
.ss-card:hover .ss-card-arr{transform:translate(3px,-3px)}

/* ── COMPARE GRID (link-building good vs bad) ── */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.compare-col{background:var(--s2);border:1px solid var(--br);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:0}
.compare-col.bad{border-color:rgba(255,59,48,.2);background:rgba(255,59,48,.03)}
.compare-title{font-family:var(--fh);font-size:15px;font-weight:800;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--br)}
.compare-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--br)}
.compare-row:last-child{border-bottom:none}
.compare-icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0;margin-top:1px}
.icon-no{background:rgba(255,59,48,.15);color:#FF3B30;border:1px solid rgba(255,59,48,.25)}
.icon-yes{background:rgba(0,229,122,.12);color:var(--green);border:1px solid rgba(0,229,122,.25)}
.compare-txt{font-family:var(--fb);font-size:14px;color:var(--t1);line-height:1.6}

/* ── WASTED BUDGET CALCULATOR ── */
.calc-box { background:var(--s2); border:1px solid var(--br2); border-radius:16px; padding:36px; margin-top:40px; }
.calc-box h3 { font-family:var(--fh); font-size:20px; font-weight:800; letter-spacing:-.4px; margin-bottom:8px; }
.calc-box > p { font-family:var(--fb); font-size:14px; color:var(--t2); margin-bottom:28px; }
.calc-inputs { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
.calc-field label { display:block; font-family:var(--fb); font-size:14px; font-weight:600; color:var(--t2); letter-spacing:.8px; text-transform:uppercase; margin-bottom:8px; }
.calc-field input { width:100%; background:var(--s3); border:1px solid var(--br); border-radius:8px; padding:14px 16px; font-family:var(--fb); font-size:16px; font-weight:600; color:var(--white); outline:none; transition:border-color .25s,box-shadow .25s; -webkit-appearance:none; box-sizing:border-box; }
.calc-field input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,212,255,.08); }
.calc-field input::-webkit-inner-spin-button,.calc-field input::-webkit-outer-spin-button { opacity:.4; }
.calc-result { display:grid; grid-template-columns:1fr 1fr auto; gap:16px; align-items:center; padding-top:24px; border-top:1px solid var(--br); }
.cr-label { font-family:var(--fb); font-size:14px; color:var(--t3); letter-spacing:.4px; margin-bottom:6px; }
.cr-value { font-family:var(--fh); font-size:28px; font-weight:800; letter-spacing:-1px; color:var(--cyan); }

/* ── SMM HOW WE WORK GRID ── */
.smm-how-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.smm-cal-card { background:var(--s2); border:1px solid var(--br2); border-radius:14px; padding:28px; }

@media(max-width:960px){
  .ideal-grid{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr}
  .cmp-hd,.cmp-row{grid-template-columns:1fr 1fr}
  .cmp-c:nth-child(3),.cmp-c:nth-child(4),.cmp-h:nth-child(3),.cmp-h:nth-child(4){display:none}
  .engage-intro{grid-template-columns:1fr}
  .engage-grid{grid-template-columns:1fr 1fr}
  .spec-strip{grid-template-columns:1fr}
  .ss-left{border-right:none;border-bottom:1px solid var(--br)}
  .mini-metrics{grid-template-columns:1fr 1fr}
  .flow-panel.active{grid-template-columns:1fr}
  .flow-diagram{display:none}
  .ptab-content.active{grid-template-columns:1fr}
  .ad-showcase{grid-template-columns:1fr 1fr}
  .sub-services{grid-template-columns:1fr 1fr}
  .compare-grid{grid-template-columns:1fr}
  .calc-inputs{grid-template-columns:1fr}
  .calc-result{grid-template-columns:1fr;gap:20px}
  .smm-how-grid{grid-template-columns:1fr;gap:32px}
  .pr-price,.st-quote,.st-metric,.mm-n,.eg-title,.rev-total,.flow-left h3,
  .ptab-left h3,.btd-h,.ss-card-title,.calc-box h3,.cr-value,.pkg-price { letter-spacing:0; }
  .lb-proc-grid{grid-template-columns:1fr;gap:32px}
  .link-row{grid-template-columns:56px 1fr;gap:8px}
  .link-type{display:none}
}
@media(max-width:600px){
  .ideal-grid{grid-template-columns:1fr}
  .engage-grid{grid-template-columns:1fr}
  .cmp-hd,.cmp-row{grid-template-columns:1fr 1fr}
  .mini-metrics{grid-template-columns:1fr}
  .ptabs,.flow-tabs{gap:4px}
  .ptab,.ftab{font-size:14px;padding:8px 12px}
  .ad-showcase{grid-template-columns:1fr}
  .logo-variants{grid-template-columns:repeat(3,1fr)}
  .sub-services{grid-template-columns:1fr}
  .pkg-grid{grid-template-columns:1fr}
}

/* ── CREATIVE PACKAGES (page-creative only) ── */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px;align-items:start}
.pkg{background:var(--s2);border:1px solid var(--br);border-radius:16px;padding:32px 28px;display:flex;flex-direction:column;position:relative;transition:border-color .25s,transform .25s}
.pkg:hover{border-color:var(--br2);transform:translateY(-3px)}
.pkg.featured{background:linear-gradient(160deg,var(--s2),rgba(0,212,255,.06));border-color:var(--cb);box-shadow:0 0 0 1px rgba(0,212,255,.12),0 20px 60px rgba(0,0,0,.4)}
.pkg-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-family:var(--fb);font-size:14px;font-weight:700;color:var(--black);background:var(--cyan);border-radius:100px;padding:4px 14px;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.pkg-name{font-family:var(--fb);font-size:14px;font-weight:700;color:var(--cyan);letter-spacing:2px;text-transform:uppercase;margin-bottom:14px}
.pkg-price{font-family:var(--fh);font-size:clamp(36px,4vw,52px);font-weight:800;letter-spacing:-2px;line-height:1;color:var(--white)}
.pkg-price em{font-style:normal;font-size:.55em;color:var(--cyan);vertical-align:top;margin-top:8px;display:inline-block}
.pkg-period{font-family:var(--fb);font-size:14px;color:var(--t3);margin-top:4px;margin-bottom:22px}
.pkg-divider{height:1px;background:rgba(255,255,255,.08);margin-bottom:22px}
.pkg-items{display:flex;flex-direction:column;gap:11px;flex:1;margin-bottom:28px}
.pkg-item{display:flex;align-items:flex-start;gap:10px;font-family:var(--fb);font-size:14px;color:var(--t1);line-height:1.45}
.pkg-chk{color:var(--cyan);font-weight:700;flex-shrink:0;margin-top:1px}
.pkg-btn{display:block;text-align:center;padding:14px 20px;font-family:var(--fh);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;border-radius:9px;text-decoration:none;transition:all .25s;margin-top:auto}
.pkg:not(.featured) .pkg-btn{background:transparent;color:var(--t1);border:1px solid var(--br)}
.pkg:not(.featured) .pkg-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.pkg.featured .pkg-btn{background:var(--cyan);color:var(--black)}
.pkg.featured .pkg-btn:hover{opacity:.88;transform:translateY(-1px);box-shadow:0 12px 32px rgba(0,212,255,.3)}