/* ============================================
   SERVICES PAGES CSS
   ============================================ */

/* Services Index Page */
.services-index-section {
    --page-section-padding: 72px;
    --page-hero-min-height: 68vh;
    --page-h1-size: clamp(42px, 4vw, 56px);
    --page-h2-size: clamp(30px, 2.8vw, 42px);
    --page-h3-size: clamp(22px, 2vw, 28px);
    --page-body-size: 16px;
    --page-card-padding: 24px 22px;
    --page-card-radius: 18px;
    padding: var(--page-section-padding) 0 60px;
    background: linear-gradient(135deg, #f7f9ff 0%, #edf4ff 50%, #e8f0ff 100%);
}

.services-index-header {
    margin-bottom: 50px;
}

.services-index-header h1 {
    font-size: var(--page-h1-size);
    font-weight: 800;
    color: #0b1e4a;
    margin-bottom: 15px;
    letter-spacing: -0.05em;
}

.services-index-header .lead {
    font-size: var(--page-body-size);
    color: #4b5d73;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Service Index Cards */
.service-index-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--page-card-padding);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(205, 219, 255, 0.85);
    border-radius: var(--page-card-radius);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.06);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.service-index-card:hover {
    text-decoration: none;
    transform: translateY(-8px);
    border-color: rgba(37, 99, 235, 0.6);
    box-shadow: 0 20px 44px rgba(37, 99, 235, 0.14);
}

.service-index-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(59, 130, 246, 0.08));
    color: #1557dd;
    font-size: 28px;
    transition: transform 0.3s ease;
}

.service-index-card:hover .service-index-icon {
    transform: scale(1.1) rotate(5deg);
}

.service-index-card h3 {
    font-size: var(--page-h3-size);
    font-weight: 700;
    color: #0b1e4a;
    margin-bottom: 12px;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.service-index-card p {
    font-size: var(--page-body-size);
    color: #5f718b;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.service-index-card .learn-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #1a5fe8;
    transition: gap 0.25s ease;
}

.service-index-card:hover .learn-more {
    gap: 12px;
}

.service-index-card:hover .learn-more i {
    transform: translateX(3px);
    transition: transform 0.25s ease;
}

/* Services Index CTA */
.services-index-cta {
    padding: 60px 30px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(37, 99, 235, 0.2);
    margin-top: 60px;
}

.services-index-cta h2 {
    font-size: clamp(2rem, 3vw, 3.5rem);
    font-weight: 800;
    color: #0b1e4a;
    margin-bottom: 15px;
    letter-spacing: -0.03em;
}

.services-index-cta p {
    font-size: 18px;
    color: #4b5d73;
    margin-bottom: 30px;
}

/* Service Detail Pages */
.service-detail-section {
    padding: var(--page-section-padding) 0 60px;
    background: linear-gradient(180deg, #f7f9ff 0%, #edf4ff 50%, #e8f0ff 100%);
}

.service-detail-section .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 40px;
}

.service-detail-section .breadcrumb-item {
    font-size: 14px;
}

.service-detail-section .breadcrumb-item a {
    color: #1a5fe8;
    text-decoration: none;
    transition: color 0.25s ease;
}

.service-detail-section .breadcrumb-item a:hover {
    color: #0d3dba;
    text-decoration: underline;
}

/* Service Hero */
.service-hero {
    min-height: var(--page-hero-min-height);
    margin-bottom: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-hero h1 {
    font-size: var(--page-h1-size);
    font-weight: 800;
    color: #0b1e4a;
    margin-bottom: 20px;
    letter-spacing: -0.05em;
    line-height: 1.1;
}

.service-hero .lead {
    font-size: var(--page-body-size);
    color: #4b5d73;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* Service Detail Content */
.service-detail-section h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0b1e4a;
    margin-bottom: 20px;
    margin-top: 40px;
    letter-spacing: -0.03em;
}

.service-detail-section h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #0b1e4a;
    margin-bottom: 15px;
    margin-top: 30px;
    letter-spacing: -0.02em;
}

.service-detail-section p {
    font-size: 16px;
    line-height: 1.75;
    color: #5f718b;
    margin-bottom: 15px;
}

.service-detail-section ul {
    margin-bottom: 30px;
}

.service-detail-section li {
    font-size: 16px;
    line-height: 1.75;
    color: #5f718b;
    margin-bottom: 12px;
    padding-left: 28px;
    position: relative;
}

.service-detail-section li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #1a5fe8;
    font-weight: 700;
    font-size: 18px;
}

/* Service Sidebar */
.service-sidebar {
    padding: 30px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(205, 219, 255, 0.85);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.06);
    position: sticky;
    top: 100px;
}

.service-sidebar h4 {
    font-size: 18px;
    font-weight: 700;
    color: #0b1e4a;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.service-sidebar li {
    font-size: 15px;
    line-height: 1.65;
    color: #5f718b;
    margin-bottom: 16px;
    padding-left: 0;
}

.service-sidebar li::before {
    content: "";
}

.service-sidebar strong {
    color: #0b1e4a;
    font-weight: 700;
}

/* Service CTA */
.service-cta {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 18px;
    padding: 60px 40px;
    margin-top: 60px;
}

.service-cta h3 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0b1e4a;
    margin-bottom: 15px;
    margin-top: 0;
    letter-spacing: -0.03em;
}

.service-cta p {
    font-size: 18px;
    color: #4b5d73;
    margin-bottom: 30px;
}

.service-cta .btn {
    font-size: 16px;
    font-weight: 700;
    padding: 14px 40px;
    border-radius: 12px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .services-index-section {
        padding: 60px 0 40px;
    }

    .services-index-header {
        margin-bottom: 40px;
    }

    .services-index-header h1 {
        font-size: 2.2rem;
    }

    .services-index-header .lead {
        font-size: 1.1rem;
    }

    .service-index-card {
        padding: 28px 20px;
    }

    .service-index-card h3 {
        font-size: 19px;
    }

    .service-index-card p {
        font-size: 14px;
    }

    .services-index-cta {
        padding: 40px 20px;
    }

    .services-index-cta h2 {
        font-size: 2rem;
    }

    .service-detail-section {
        padding: 60px 0 40px;
    }

    .service-hero h1 {
        font-size: 2.8rem;
    }

    .service-hero .lead {
        font-size: 1.2rem;
    }

    .service-detail-section h2 {
        font-size: 2rem;
    }

    .service-detail-section h3 {
        font-size: 1.5rem;
    }

    .service-sidebar {
        position: static;
        margin-top: 40px;
    }

    .service-cta {
        padding: 40px 20px;
    }

    .service-cta h3 {
        font-size: 1.8rem;
    }
}

@media (max-width: 576px) {
    .services-index-header h1 {
        font-size: 1.8rem;
    }

    .services-index-header .lead {
        font-size: 1rem;
    }

    .service-index-card {
        padding: 20px 16px;
    }

    .service-index-card h3 {
        font-size: 17px;
    }

    .service-index-card p {
        font-size: 13px;
    }

    .service-index-icon {
        width: 52px;
        height: 52px;
        font-size: 24px;
    }

    .service-hero h1 {
        font-size: 2rem;
    }

    .service-hero .lead {
        font-size: 1rem;
    }

    .service-detail-section h2 {
        font-size: 1.6rem;
    }

    .service-detail-section h3 {
        font-size: 1.3rem;
    }

    .service-detail-section p,
    .service-detail-section li {
        font-size: 14px;
    }

    .service-sidebar {
        padding: 20px;
    }

    .service-sidebar h4 {
        font-size: 16px;
    }
}

/* ================================================================
   SHARED SERVICE DETAIL EXPERIENCE
   Scoped to .sg-service-page so home, about, and case-study pages
   retain their existing styles.
   ================================================================ */
.sg-service-page {
    overflow: hidden;
    color: #102452;
    background: #f8fbff;
}

.sg-service-page .container { position: relative; z-index: 1; }

.sg-service-hero {
    position: relative;
    padding: 164px 0 96px;
    background: radial-gradient(circle at 82% 22%, rgba(35, 103, 252, .20), transparent 26%), radial-gradient(circle at 8% 95%, rgba(155, 200, 255, .36), transparent 30%), linear-gradient(135deg, #fff 0%, #f5f9ff 51%, #e3efff 100%);
}

.sg-service-hero::before,
.sg-service-hero::after {
    position: absolute;
    border: 1px solid rgba(38, 105, 252, .14);
    border-radius: 50%;
    content: "";
}

.sg-service-hero::before { top: -270px; right: -150px; width: 610px; height: 610px; }
.sg-service-hero::after { bottom: -180px; left: -130px; width: 430px; height: 430px; }

.sg-service-eyebrow,
.sg-section-kicker {
    margin: 0 0 15px;
    color: #1765ed;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .17em;
    line-height: 1.25;
}

.sg-service-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 1px solid rgba(24, 101, 237, .18); border-radius: 99px; background: rgba(255,255,255,.70); }
.sg-service-eyebrow i { font-size: 13px; }

.sg-service-page h1,
.sg-service-page h2,
.sg-service-page h3 { color: #081b49; font-family: "Poppins", sans-serif; }

.sg-service-page h1 {
    max-width: 690px;
    margin: 0 0 22px;
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1.08;
}

.sg-service-hero-copy { max-width: 620px; margin: 0; color: #506487; font-size: 18px; line-height: 1.72; }
.sg-service-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 34px; }
.sg-service-primary-btn,
.sg-service-light-btn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 52px; padding: 14px 24px; border-radius: 12px; background: #1765ed; box-shadow: 0 12px 24px rgba(23, 101, 237, .20); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.sg-service-primary-btn:hover,
.sg-service-light-btn:hover { background: #0f51cf; box-shadow: 0 17px 28px rgba(23, 101, 237, .29); color: #fff; text-decoration: none; transform: translateY(-3px); }
.sg-service-text-btn { display: inline-flex; align-items: center; gap: 8px; color: #193361; font-size: 15px; font-weight: 700; text-decoration: none; }
.sg-service-text-btn:hover { color: #1765ed; text-decoration: none; }
.sg-service-proof { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: #5a6d8e; font-size: 13px; font-weight: 600; }
.sg-service-proof i { margin-right: 6px; color: #1765ed; }

.sg-service-visual { position: relative; width: min(100%, 420px); height: 370px; margin: 16px auto 0; }
.sg-visual-orbit { position: absolute; border: 1px solid rgba(23, 101, 237, .23); border-radius: 50%; }
.sg-visual-orbit-one { top: 2px; right: 0; width: 345px; height: 345px; border-left-color: transparent; transform: rotate(-23deg); }
.sg-visual-orbit-two { top: 36px; right: 34px; width: 276px; height: 276px; border-right-color: transparent; transform: rotate(27deg); }
.sg-visual-glow { position: absolute; top: 73px; right: 65px; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle, rgba(47, 130, 255, .32), rgba(47, 130, 255, 0) 69%); filter: blur(3px); }
.sg-visual-panel { position: absolute; top: 68px; right: 39px; display: flex; width: 285px; min-height: 246px; padding: 28px 30px 25px; flex-direction: column; border: 1px solid rgba(255,255,255,.94); border-radius: 24px; background: linear-gradient(145deg, rgba(27, 105, 245, .98), rgba(30, 175, 229, .96)); box-shadow: 0 25px 50px rgba(35, 91, 185, .28); color: #fff; }
.sg-visual-icon { display: inline-flex; width: 45px; height: 45px; align-items: center; justify-content: center; margin-bottom: 15px; border-radius: 14px; background: rgba(255,255,255,.18); font-size: 21px; }
.sg-visual-label { font-size: 13px; font-weight: 600; letter-spacing: .03em; opacity: .86; }
.sg-visual-panel strong { margin-top: 1px; color: #fff; font-size: 43px; font-weight: 800; line-height: 1.1; }
.sg-visual-panel small { margin-top: 4px; font-size: 12px; opacity: .82; }
.sg-visual-chart { display: flex; height: 44px; align-items: end; gap: 7px; margin-top: auto; }
.sg-visual-chart i { display: block; width: 15px; border-radius: 3px 3px 0 0; background: rgba(255,255,255,.78); }
.sg-visual-chart i:nth-child(1) { height: 17px; }.sg-visual-chart i:nth-child(2) { height: 24px; }.sg-visual-chart i:nth-child(3) { height: 20px; }.sg-visual-chart i:nth-child(4) { height: 31px; }.sg-visual-chart i:nth-child(5) { height: 27px; }.sg-visual-chart i:nth-child(6) { height: 37px; }.sg-visual-chart i:nth-child(7) { height: 44px; background: #fff; }
.sg-visual-chip { position: absolute; display: flex; width: 54px; height: 54px; align-items: center; justify-content: center; border: 1px solid rgba(178,210,255,.8); border-radius: 17px; background: rgba(255,255,255,.90); box-shadow: 0 12px 22px rgba(49,91,155,.12); color: #1765ed; font-size: 19px; }
.chip-one { top: 49px; left: 22px; }.chip-two { right: 3px; bottom: 21px; }

.sg-service-intro { padding: 92px 0 84px; background: #fff; }
.sg-service-page h2 { margin: 0; font-size: clamp(30px, 3vw, 45px); font-weight: 800; letter-spacing: -.04em; line-height: 1.15; }
.sg-service-intro > .container > .row > div:last-child > p { max-width: 690px; margin: 8px 0 0; color: #607191; font-size: 17px; line-height: 1.76; }
.sg-service-benefits { margin-top: 55px; }
.sg-service-benefits > [class*="col-"] { margin-bottom: 24px; }
.sg-benefit-card { width: 100%; height: 248px; min-height: 248px; box-sizing: border-box; padding: 28px; border: 1px solid #e1eaff; border-radius: 18px; background: linear-gradient(145deg, #fff, #f8fbff); box-shadow: 0 12px 27px rgba(38, 76, 133, .07); transition: transform .25s ease, box-shadow .25s ease; }
.sg-benefit-card:hover { box-shadow: 0 19px 34px rgba(30, 91, 189, .13); transform: translateY(-5px); }
.sg-benefit-icon { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; margin-bottom: 22px; border-radius: 50%; background: #eaf2ff; color: #1765ed; font-size: 21px; }
.sg-benefit-card h3 { margin: 0 0 10px; font-size: 20px; font-weight: 750; line-height: 1.25; }
.sg-benefit-card p { margin: 0; color: #687a99; font-size: 14px; line-height: 1.67; }

.sg-service-capabilities { position: relative; padding: 92px 0 68px; background: linear-gradient(135deg, #f7faff, #eaf3ff); }
.sg-service-capabilities::after { position: absolute; right: -75px; bottom: -85px; width: 345px; height: 345px; border: 1px solid rgba(23,101,237,.12); border-radius: 50%; content: ""; }

/* Services index page */
.sg-services-page { overflow: hidden; color: #152746; background: #f7f9fc; }
.sg-services-page .container { position: relative; z-index: 1; }
.sg-services-hero { position: relative; padding: 145px 0 46px; background: #081b49; color: #fff; }
.sg-services-hero::before { position: absolute; inset: 0; background: radial-gradient(circle at 76% 24%, rgba(53, 150, 255, .34), transparent 26%), linear-gradient(115deg, transparent 50%, rgba(255,255,255,.04) 50%); content: ""; }
.sg-services-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); align-items: center; gap: 70px; min-height: 480px; }
.sg-services-kicker { display: inline-flex; align-items: center; gap: 12px; color: #55b8ff; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.sg-services-kicker i { display: inline-block; width: 42px; height: 2px; background: currentColor; }
.sg-services-hero h1 { max-width: 690px; margin: 25px 0 24px; color: #fff; font-size: clamp(42px, 5.4vw, 78px); font-weight: 800; letter-spacing: -.055em; line-height: 1.02; }
.sg-services-hero-copy > p { max-width: 560px; margin: 0; color: #bdcce5; font-size: 18px; line-height: 1.7; }
.sg-services-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 34px; }
.sg-services-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 14px 23px; border: 1px solid #55b8ff; border-radius: 4px; background: #55b8ff; color: #061634; font-size: 14px; font-weight: 800; text-decoration: none; transition: transform .25s ease, background .25s ease; }
.sg-services-button:hover { background: #fff; color: #061634; text-decoration: none; transform: translateY(-3px); }
.sg-services-text-link { display: inline-flex; align-items: center; gap: 9px; color: #173a73; font-size: 14px; font-weight: 800; text-decoration: none; }
.sg-services-text-link:hover { color: #1765ed; text-decoration: none; }
.sg-services-hero .sg-services-text-link { color: #fff; }
.sg-services-hero .sg-services-text-link:hover { color: #55b8ff; }
.sg-services-hero-visual { position: relative; height: 390px; }
.sg-services-orbit { position: absolute; border: 1px solid rgba(85,184,255,.35); border-radius: 50%; }
.sg-services-orbit-one { top: 12px; right: 12px; width: 350px; height: 350px; border-left-color: transparent; transform: rotate(28deg); }
.sg-services-orbit-two { top: 47px; right: 47px; width: 280px; height: 280px; border-right-color: transparent; transform: rotate(-22deg); }
.sg-services-hero-panel { position: absolute; top: 74px; right: 50px; display: flex; width: 290px; min-height: 225px; padding: 28px; flex-direction: column; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; background: linear-gradient(145deg, #1666ee, #24a2dc); box-shadow: 0 25px 55px rgba(0,0,0,.25); }
.sg-services-panel-label { color: rgba(255,255,255,.75); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.sg-services-chart { display: flex; height: 100px; align-items: end; gap: 8px; margin-top: 28px; border-bottom: 1px solid rgba(255,255,255,.35); }
.sg-services-chart span { flex: 1; background: rgba(255,255,255,.7); }
.sg-services-chart span:nth-child(1) { height: 25%; }.sg-services-chart span:nth-child(2) { height: 40%; }.sg-services-chart span:nth-child(3) { height: 35%; }.sg-services-chart span:nth-child(4) { height: 57%; }.sg-services-chart span:nth-child(5) { height: 70%; }.sg-services-chart span:nth-child(6) { height: 92%; background: #fff; }
.sg-services-panel-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 17px; color: #fff; font-size: 14px; }.sg-services-panel-bottom i { font-size: 20px; }
.sg-services-floating-note { position: absolute; right: -9px; bottom: 18px; display: flex; align-items: center; gap: 12px; padding: 14px 17px; border: 1px solid #d7e8ff; border-radius: 4px; background: #fff; box-shadow: 0 18px 35px rgba(0,0,0,.2); color: #19396e; font-size: 12px; line-height: 1.45; }.sg-services-floating-note i { color: #1765ed; font-size: 21px; }.sg-services-floating-note b { font-size: 14px; }
.sg-services-proof-row { display: flex; flex-wrap: wrap; gap: 35px; padding-top: 35px; border-top: 1px solid rgba(255,255,255,.16); color: #b8c9e7; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sg-services-intro { padding: 105px 0 115px; background: #fff; }
.sg-services-section-heading { display: grid; grid-template-columns: .8fr 1.2fr; align-items: end; gap: 40px; margin-bottom: 54px; }.sg-services-section-heading .sg-services-kicker { grid-column: 1 / -1; color: #1765ed; }.sg-services-section-heading h2 { max-width: 450px; margin: 0; color: #081b49; font-size: clamp(34px, 4vw, 56px); font-weight: 800; letter-spacing: -.05em; line-height: 1.05; }.sg-services-section-heading p { max-width: 530px; margin: 0; color: #687a99; font-size: 16px; line-height: 1.75; }
.sg-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.sg-service-card { display: flex; height: 330px; min-height: 330px; box-sizing: border-box; padding: 27px; flex-direction: column; border: 1px solid #dce6f5; border-radius: 4px; background: #fbfcfe; color: inherit; text-decoration: none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }.sg-service-card:hover { border-color: #55b8ff; box-shadow: 0 18px 35px rgba(24,75,145,.11); color: inherit; text-decoration: none; transform: translateY(-6px); }.sg-service-card-top { display: flex; justify-content: space-between; color: #1765ed; font-size: 13px; font-weight: 800; }.sg-service-card-top i { font-size: 22px; }.sg-service-card h3 { max-width: 270px; margin: 44px 0 13px; color: #081b49; font-size: 22px; font-weight: 800; line-height: 1.2; }.sg-service-card p { margin: 0; color: #607191; font-size: 14px; line-height: 1.65; }.sg-service-card small { margin-top: 18px; color: #526784; font-size: 11px; line-height: 1.5; }.sg-service-card-link { display: inline-flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 22px; color: #1765ed; font-size: 13px; font-weight: 800; }.sg-service-card-link i { transition: transform .25s ease; }.sg-service-card:hover .sg-service-card-link i { transform: translateX(5px); }
.sg-services-method { padding: 110px 0; background: #edf5ff; }.sg-services-method-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; align-items: start; }.sg-services-method h2 { margin: 24px 0; color: #081b49; font-size: clamp(36px, 4.2vw, 60px); font-weight: 800; letter-spacing: -.055em; line-height: 1.02; }.sg-services-method p { max-width: 420px; margin: 0 0 28px; color: #607191; font-size: 16px; line-height: 1.75; }.sg-services-method .sg-services-kicker { color: #1765ed; }.sg-services-steps { border-top: 1px solid #c9d9ee; }.sg-services-step { display: grid; grid-template-columns: 70px 1fr; gap: 25px; padding: 27px 0; border-bottom: 1px solid #c9d9ee; }.sg-services-step b { color: #1765ed; font-size: 13px; letter-spacing: .08em; }.sg-services-step h3 { margin: 0 0 7px; color: #081b49; font-size: 22px; font-weight: 800; }.sg-services-step p { max-width: none; margin: 0; font-size: 14px; }
.sg-services-cta { padding: 105px 0; background: #081b49; text-align: center; }.sg-services-cta .sg-services-kicker { color: #55b8ff; }.sg-services-cta h2 { margin: 22px 0 31px; color: #fff; font-size: clamp(38px, 5vw, 68px); font-weight: 800; letter-spacing: -.055em; line-height: 1.03; }
@media (max-width: 991px) { .sg-services-hero-grid, .sg-services-method-grid { grid-template-columns: 1fr; gap: 45px; }.sg-services-hero-visual { max-width: 470px; width: 100%; margin: 0 auto; }.sg-services-grid { grid-template-columns: repeat(2, 1fr); }.sg-services-method-grid { gap: 55px; } }
@media (max-width: 575px) { .sg-services-hero { padding-top: 110px; }.sg-services-hero h1 { font-size: 43px; }.sg-services-hero-copy > p { font-size: 16px; }.sg-services-hero-visual { height: 320px; }.sg-services-orbit-one { width: 280px; height: 280px; right: 0; }.sg-services-orbit-two { width: 220px; height: 220px; right: 30px; top: 42px; }.sg-services-hero-panel { top: 58px; right: 25px; width: 240px; min-height: 190px; padding: 21px; }.sg-services-floating-note { right: 0; bottom: 0; }.sg-services-proof-row { gap: 15px; font-size: 10px; }.sg-services-intro, .sg-services-method { padding: 75px 0; }.sg-services-section-heading { display: block; }.sg-services-section-heading h2 { margin: 22px 0; font-size: 40px; }.sg-services-grid { grid-template-columns: 1fr; }.sg-service-card { height: 300px; min-height: 300px; }.sg-services-method h2 { font-size: 43px; }.sg-services-step { grid-template-columns: 45px 1fr; gap: 12px; }.sg-services-cta { padding: 80px 0; } }
.sg-section-heading { max-width: 740px; margin: 0 auto; }
.sg-section-heading > p:not(.sg-section-kicker) { margin: 16px auto 0; color: #657694; font-size: 16px; line-height: 1.7; }
.sg-capability-grid { margin-top: 48px; }
.sg-capability-grid > [class*="col-"] { margin-bottom: 24px; }
.sg-capability-card { position: relative; width: 100%; height: 222px; min-height: 222px; box-sizing: border-box; padding: 29px 28px; overflow: hidden; border: 1px solid #dbe7ff; border-radius: 16px; background: rgba(255,255,255,.9); box-shadow: 0 10px 25px rgba(33,75,137,.06); transition: transform .25s ease, border-color .25s ease; }
.sg-capability-card:hover { border-color: #94b9ff; transform: translateY(-5px); }
.sg-capability-number { display: block; margin-bottom: 19px; color: #1765ed; font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.sg-capability-card h3 { margin: 0 0 10px; font-size: 19px; font-weight: 750; line-height: 1.25; }.sg-capability-card p { max-width: 270px; margin: 0; color: #647694; font-size: 14px; line-height: 1.65; }.sg-card-line { position: absolute; bottom: 0; left: 28px; width: 42px; height: 3px; border-radius: 10px 10px 0 0; background: #1765ed; }

.sg-service-process { padding: 90px 0 66px; background: #fff; }.sg-process-grid { margin-top: 48px; }.sg-process-grid > [class*="col-"] { margin-bottom: 24px; }.sg-process-card { position: relative; width: 100%; height: 234px; min-height: 234px; box-sizing: border-box; padding: 29px 24px; border-radius: 16px; background: #f8fbff; text-align: center; }.sg-process-card::after { position: absolute; top: 49px; right: -18px; z-index: 2; width: 36px; height: 1px; background: #bdd4ff; content: ""; }.sg-process-grid > div:last-child .sg-process-card::after { display: none; }.sg-process-number { display: inline-flex; width: 49px; height: 49px; align-items: center; justify-content: center; margin-bottom: 19px; border-radius: 50%; background: #1765ed; box-shadow: 0 10px 20px rgba(23,101,237,.20); color: #fff; font-size: 14px; font-weight: 800; }.sg-process-card h3 { margin: 0 0 10px; font-size: 19px; font-weight: 750; }.sg-process-card p { margin: 0; color: #687a99; font-size: 13px; line-height: 1.65; }

.sg-service-cta { padding: 25px 0 92px; background: #fff; }.sg-service-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 48px 52px; border: 1px solid #2d77ef; border-radius: 23px; background: linear-gradient(120deg, #0754dc, #218cf0); box-shadow: 0 21px 42px rgba(20,91,203,.21); }.sg-service-cta .sg-section-kicker { color: #b8d5ff; }.sg-service-cta h2 { max-width: 690px; color: #fff; font-size: clamp(29px, 3vw, 41px); }.sg-service-cta p:not(.sg-section-kicker) { max-width: 650px; margin: 13px 0 0; color: rgba(255,255,255,.84); font-size: 16px; line-height: 1.65; }.sg-service-light-btn { flex: 0 0 auto; background: #fff; box-shadow: none; color: #1254ce; }.sg-service-light-btn:hover { background: #edf5ff; color: #1254ce; box-shadow: none; }

@media (max-width: 991px) { .sg-service-hero { padding-top: 132px; }.sg-service-visual { margin-top: 50px; }.sg-service-visual { height: 340px; }.sg-service-benefits, .sg-capability-grid, .sg-process-grid { margin-top: 38px; }.sg-process-card::after { display: none; }.sg-service-cta-inner { align-items: flex-start; flex-direction: column; } }
@media (max-width: 767px) { .sg-service-hero { padding: 122px 0 68px; }.sg-service-page h1 { font-size: 42px; }.sg-service-hero-copy { font-size: 16px; }.sg-service-actions { gap: 17px; margin-top: 28px; }.sg-service-proof { gap: 11px; flex-direction: column; }.sg-service-visual { width: 340px; max-width: 100%; height: 308px; }.sg-visual-orbit-one { width: 288px; height: 288px; }.sg-visual-orbit-two { width: 228px; height: 228px; }.sg-visual-panel { top: 52px; right: 19px; width: 244px; min-height: 221px; padding: 23px; }.sg-visual-panel strong { font-size: 38px; }.chip-one { top: 38px; left: 2px; }.sg-service-intro, .sg-service-capabilities, .sg-service-process { padding-top: 68px; padding-bottom: 48px; }.sg-service-intro > .container > .row > div:last-child > p { margin-top: 18px; font-size: 16px; }.sg-service-benefits { margin-top: 36px; }.sg-benefit-card { height: 248px; min-height: 248px; }.sg-service-cta { padding-bottom: 68px; }.sg-service-cta-inner { padding: 36px 28px; }.sg-service-light-btn { width: 100%; } }

.sg-seo-detail .sg-service-hero {
    background: radial-gradient(circle at 78% 18%, rgba(26, 116, 255, .28), transparent 24%), radial-gradient(circle at 12% 88%, rgba(176, 210, 255, .46), transparent 30%), linear-gradient(135deg, #ffffff 0%, #f4f8ff 48%, #dcecff 100%);
}

.sg-seo-detail .sg-service-hero::before {
    top: -215px;
    right: -115px;
    width: 570px;
    height: 570px;
    border: 2px solid rgba(23, 101, 237, .18);
    box-shadow: 0 0 0 24px rgba(23, 101, 237, .045), 0 0 0 48px rgba(23, 101, 237, .025);
    transform: rotate(18deg);
}

.sg-seo-detail .sg-service-hero::after {
    bottom: -132px;
    left: -105px;
    width: 350px;
    height: 220px;
    border: 0;
    border-radius: 48% 52% 25% 75%;
    background: rgba(93, 164, 255, .14);
    transform: rotate(-17deg);
}

.sg-seo-detail .sg-service-visual::before,
.sg-seo-detail .sg-service-visual::after {
    position: absolute;
    z-index: 0;
    content: "";
}

.sg-seo-detail .sg-service-visual::before {
    top: 3px;
    left: 24px;
    width: 66px;
    height: 66px;
    border: 1px solid rgba(23, 101, 237, .28);
    border-radius: 18px;
    transform: rotate(28deg);
}

.sg-seo-detail .sg-service-visual::after {
    right: -12px;
    bottom: 4px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: rgba(41, 178, 242, .18);
    filter: blur(2px);
}

.sg-seo-detail .sg-visual-panel,
.sg-seo-detail .sg-visual-chip { z-index: 1; }

/* Keep service-card content on consistent rows so the action links align. */
.sg-services-grid .sg-service-card-top i {
    font-size: 28px;
}

.sg-services-grid .sg-service-card h3 {
    min-height: 53px;
}

.sg-services-grid .sg-service-card p {
    min-height: 46px;
}

.sg-services-grid .sg-service-card small {
    min-height: 33px;
}

.sg-services-grid .sg-service-card-link {
    min-height: 40px;
    box-sizing: border-box;
    align-items: center;
}

@media (max-width: 575px) {
    .sg-services-grid .sg-service-card-top i {
        font-size: 27px;
    }

    .sg-services-grid .sg-service-card h3 {
        min-height: 0;
    }

    .sg-services-grid .sg-service-card p,
    .sg-services-grid .sg-service-card small {
        min-height: 0;
    }
}

.sg-seo-detail .sg-service-intro {
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

.sg-seo-detail .sg-service-intro::before {
    position: absolute;
    top: 42px;
    right: -38px;
    width: 135px;
    height: 135px;
    border: 18px solid rgba(23, 101, 237, .07);
    border-radius: 50%;
    content: "";
}

.sg-seo-detail .sg-service-intro::after {
    position: absolute;
    bottom: 26px;
    left: -44px;
    width: 105px;
    height: 105px;
    border-radius: 27px;
    background: rgba(212, 229, 255, .5);
    transform: rotate(24deg);
    content: "";
}

.sg-seo-detail .sg-benefit-card {
    position: relative;
    overflow: hidden;
    border-color: #d6e5fb;
    background: linear-gradient(145deg, #ffffff 0%, #f5f9ff 100%);
}

.sg-seo-detail .sg-benefit-card::after {
    position: absolute;
    right: -27px;
    bottom: -34px;
    width: 92px;
    height: 92px;
    border: 12px solid rgba(23, 101, 237, .08);
    border-radius: 50%;
    content: "";
}

.sg-seo-detail .sg-service-capabilities {
    overflow: hidden;
    background: linear-gradient(135deg, #f4f8ff 0%, #e6f0ff 100%);
}

.sg-seo-detail .sg-service-capabilities::before {
    position: absolute;
    top: -82px;
    left: 10%;
    width: 180px;
    height: 115px;
    border: 1px solid rgba(23, 101, 237, .16);
    border-radius: 36px 8px 42px 12px;
    transform: rotate(-18deg);
    content: "";
}

.sg-seo-detail .sg-service-capabilities::after {
    right: -94px;
    bottom: -105px;
    width: 360px;
    height: 360px;
    border: 2px solid rgba(23, 101, 237, .13);
    border-radius: 44% 56% 63% 37%;
    transform: rotate(25deg);
}

.sg-seo-detail .sg-capability-card {
    border-color: rgba(187, 211, 246, .9);
    background: rgba(255, 255, 255, .82);
}

.sg-seo-detail .sg-capability-card:nth-child(2n) { transform: translateY(18px); }
.sg-seo-detail .sg-capability-card:nth-child(2n):hover { transform: translateY(13px); }

.sg-seo-detail .sg-service-process {
    position: relative;
    overflow: hidden;
    background: #ffffff radial-gradient(circle, rgba(23, 101, 237, .09) 1px, transparent 1.5px) 0 0 / 22px 22px;
}

.sg-seo-detail .sg-service-process::before {
    position: absolute;
    top: -155px;
    right: 18%;
    width: 310px;
    height: 310px;
    border: 1px solid rgba(23, 101, 237, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(23, 101, 237, .035);
    content: "";
}

.sg-seo-detail .sg-process-card {
    border: 1px solid rgba(216, 228, 247, .95);
    background: rgba(248, 251, 255, .94);
    box-shadow: 0 10px 25px rgba(33, 75, 137, .05);
}

.sg-seo-detail .sg-service-cta {
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

.sg-seo-detail .sg-service-cta::before {
    position: absolute;
    bottom: -120px;
    left: 8%;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(23, 101, 237, .13);
    border-radius: 50%;
    content: "";
}

.sg-seo-detail .sg-service-cta-inner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, #064fd0 0%, #1878ee 58%, #34b8ed 100%);
}

.sg-seo-detail .sg-service-cta-inner::after {
    position: absolute;
    top: -105px;
    right: 85px;
    width: 245px;
    height: 245px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 42% 58% 51% 49%;
    transform: rotate(35deg);
    content: "";
}

@media (max-width: 991px) {
    .sg-seo-detail .sg-capability-card:nth-child(2n) { transform: none; }
    .sg-seo-detail .sg-capability-card:nth-child(2n):hover { transform: translateY(-5px); }
}

@media (max-width: 767px) {
    .sg-seo-detail .sg-service-hero::before { top: -125px; right: -190px; width: 390px; height: 390px; }
    .sg-seo-detail .sg-service-hero::after { bottom: -80px; left: -125px; width: 250px; height: 155px; }
    .sg-seo-detail .sg-service-process { background-size: 18px 18px; }
    .sg-seo-detail .sg-service-cta-inner::after { right: -80px; }
}

/* Reference-inspired SEO landing page. The wrapper keeps every rule off other services. */
.sg-seo-reference { overflow: hidden; color: #203c66; background: #f7faff; }
.sg-seo-reference h1, .sg-seo-reference h2, .sg-seo-reference h3 { color: #0b2054; font-family: "Poppins", sans-serif; }
.sg-seo-ref-hero { position: relative; padding: 155px 0 55px; overflow: hidden; background: radial-gradient(circle at 66% 34%, rgba(74, 157, 255, .34), transparent 27%), linear-gradient(145deg, #fff 12%, #f5f9ff 58%, #e7f1ff 100%); }
.sg-seo-ref-hero::before { position: absolute; top: 70px; right: 10%; width: 470px; height: 470px; border: 1px solid rgba(52, 126, 246, .17); border-radius: 50%; box-shadow: 0 0 0 26px rgba(52, 126, 246, .04), 0 0 0 52px rgba(52, 126, 246, .025); content: ""; }
.sg-seo-ref-shape { position: absolute; pointer-events: none; }
.sg-seo-ref-shape.hero-ring { top: 175px; left: 39%; width: 125px; height: 125px; border: 1px dashed rgba(47, 119, 240, .27); border-radius: 50%; }
.sg-seo-ref-shape.hero-blob { bottom: -105px; left: -65px; width: 280px; height: 180px; border-radius: 50% 50% 8% 78%; background: rgba(170, 209, 255, .24); transform: rotate(-15deg); }
.sg-seo-ref-label, .sg-seo-ref-kicker { margin: 0 0 14px; color: #1465e8; font-size: 10px; font-weight: 800; letter-spacing: .13em; line-height: 1.4; }
.sg-seo-ref-hero h1 { max-width: 500px; margin: 0 0 19px; font-size: clamp(42px, 5vw, 65px); font-weight: 800; letter-spacing: -.06em; line-height: 1.03; }
.sg-seo-ref-hero h1 span { display: block; color: #1767ed; }
.sg-seo-ref-lead { max-width: 430px; margin: 0; color: #526987; font-size: 14px; line-height: 1.7; }
.sg-seo-ref-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.sg-seo-ref-btn { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 10px; padding: 11px 17px; border: 1px solid #145be1; border-radius: 6px; background: #125de6; box-shadow: 0 11px 23px rgba(18, 93, 230, .18); color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.sg-seo-ref-btn:hover { background: #084ecb; box-shadow: 0 15px 28px rgba(18, 93, 230, .28); color: #fff; text-decoration: none; transform: translateY(-2px); }
.sg-seo-ref-btn-outline { background: rgba(255, 255, 255, .75); box-shadow: none; color: #145be1; }.sg-seo-ref-btn-outline:hover { background: #fff; color: #145be1; }
.sg-seo-ref-dashboard-art { position: relative; z-index: 1; width: min(100%, 590px); height: 390px; margin: 10px auto 0; }
.sg-seo-ref-dashboard-art::before { position: absolute; top: 7px; right: 2px; width: 470px; height: 350px; border-radius: 45% 55% 50% 50%; background: radial-gradient(circle, rgba(75, 167, 255, .38), rgba(77, 169, 255, 0) 68%); filter: blur(8px); content: ""; }
.sg-seo-ref-dashboard { position: absolute; top: 31px; right: 38px; width: 420px; height: 190px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.96); border-radius: 11px; background: rgba(255,255,255,.92); box-shadow: 0 21px 46px rgba(48, 95, 168, .22); transform: rotate(-1deg); }
.dashboard-top { display: flex; align-items: center; justify-content: space-between; color: #9aa9c4; font-size: 8px; }.dashboard-top span { display: flex; gap: 4px; }.dashboard-top span i { width: 6px; height: 6px; border-radius: 50%; background: #d5dfed; }.dashboard-top b { color: #41628d; font-size: 10px; }.dashboard-top em { font-style: normal; letter-spacing: 2px; }
.dashboard-search { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding: 7px 10px; border: 1px solid #e6edf8; border-radius: 20px; color: #4285f4; font-size: 10px; font-weight: 700; }.dashboard-search i { color: #a8b7cc; font-size: 9px; }.dashboard-heading { display: flex; align-items: end; justify-content: space-between; margin-top: 18px; }.dashboard-heading small, .dashboard-cards small { display: block; color: #8799b3; font-size: 8px; }.dashboard-heading strong { display: block; margin-top: 3px; color: #0d2c66; font-size: 23px; line-height: 1; }.dashboard-heading strong em, .dashboard-cards strong em { margin-left: 5px; color: #31a779; font-size: 8px; font-style: normal; }.dashboard-mini-chart { display: flex; height: 29px; align-items: end; gap: 4px; }.dashboard-mini-chart i { width: 10px; border-radius: 3px 3px 0 0; background: #aed0ff; }.dashboard-mini-chart i:nth-child(1) { height: 8px; }.dashboard-mini-chart i:nth-child(2) { height: 13px; }.dashboard-mini-chart i:nth-child(3) { height: 9px; }.dashboard-mini-chart i:nth-child(4) { height: 20px; }.dashboard-mini-chart i:nth-child(5) { height: 17px; }.dashboard-mini-chart i:nth-child(6) { height: 24px; }.dashboard-mini-chart i:nth-child(7) { height: 29px; background: #206fec; }.dashboard-chart { display: flex; height: 91px; align-items: end; gap: 6px; margin-top: 11px; padding: 0 4px; border-bottom: 1px solid #e4ebf5; background: linear-gradient(180deg, transparent 49%, rgba(215, 228, 247, .55) 50%, transparent 51%) 0 0/100% 35px; }.dashboard-chart i { position: relative; flex: 1; height: 3px; border-radius: 3px; background: #216ff0; transform: rotate(-8deg); }.dashboard-chart i:nth-child(2) { margin-bottom: 8px; }.dashboard-chart i:nth-child(3) { margin-bottom: 5px; }.dashboard-chart i:nth-child(4) { margin-bottom: 14px; }.dashboard-chart i:nth-child(5) { margin-bottom: 11px; }.dashboard-chart i:nth-child(6) { margin-bottom: 25px; }.dashboard-chart i:nth-child(7) { margin-bottom: 20px; }.dashboard-chart i:nth-child(8) { margin-bottom: 38px; }.dashboard-chart i:nth-child(9) { margin-bottom: 31px; }.dashboard-chart i:nth-child(10) { margin-bottom: 55px; }.dashboard-cards { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 8px; margin-top: 12px; }.dashboard-cards > div { padding: 9px 8px; border: 1px solid #e6edf8; border-radius: 6px; }.dashboard-cards strong { display: block; margin-top: 6px; color: #173a79; font-size: 15px; line-height: 1; }.donut-card { display: flex; align-items: center; gap: 8px; }.dashboard-donut { display: inline-block; width: 35px; height: 35px; flex: 0 0 35px; border: 7px solid #1f6fea; border-right-color: #b8d4ff; border-radius: 50%; }.donut-card small { line-height: 1.45; }.donut-card small b { color: #21457f; }
.sg-seo-ref-float { position: absolute; z-index: 2; display: flex; min-width: 76px; padding: 11px 12px; flex-direction: column; border: 1px solid rgba(255,255,255,.96); border-radius: 8px; background: rgba(255,255,255,.92); box-shadow: 0 13px 24px rgba(53, 99, 164, .16); text-align: center; }.sg-seo-ref-float strong { color: #1161df; font-size: 20px; line-height: 1; }.sg-seo-ref-float small { margin-top: 6px; color: #7184a2; font-size: 8px; }.rank-float { top: 38px; right: -2px; }.traffic-float { top: 155px; left: 2px; }.leads-float { right: -11px; bottom: 45px; }.leads-float strong { font-size: 16px; }
.sg-seo-ref-stats { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 6px; padding: 16px 24px; border: 1px solid rgba(255,255,255,.95); border-radius: 19px; background: rgba(255,255,255,.73); box-shadow: 0 16px 31px rgba(69, 115, 181, .15); }.sg-seo-ref-stats > div { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: 1fr 1fr; column-gap: 8px; align-items: center; border-right: 1px solid #dce7f7; padding: 3px 18px; }.sg-seo-ref-stats > div:last-child { border-right: 0; }.sg-seo-ref-stats i { grid-row: span 2; color: #1465e8; font-size: 23px; text-align: center; }.sg-seo-ref-stats strong { color: #183b77; font-size: 16px; line-height: 1; }.sg-seo-ref-stats small { color: #7890ae; font-size: 9px; }
.sg-seo-ref-section { position: relative; overflow: hidden; padding: 92px 0; }.sg-seo-ref-why { background: #fff; }.sg-seo-ref-why::before { position: absolute; top: 22px; right: 2%; width: 130px; height: 130px; border: 18px solid rgba(73, 145, 248, .07); border-radius: 50%; content: ""; }.why-blob { bottom: -70px; left: -45px; width: 280px; height: 190px; border-radius: 50% 52% 10% 78%; background: rgba(220, 234, 255, .8); transform: rotate(-10deg); }.sg-seo-ref-section h2, .sg-seo-ref-results h2 { margin: 0 0 15px; font-size: clamp(28px, 3vw, 42px); font-weight: 800; letter-spacing: -.05em; line-height: 1.1; }.sg-seo-ref-section .col-lg-3 > p:not(.sg-seo-ref-kicker), .sg-seo-ref-results .col-lg-3 > p:not(.sg-seo-ref-kicker) { max-width: 240px; margin: 0; color: #7184a1; font-size: 12px; line-height: 1.7; }
.sg-seo-ref-benefits { margin-top: 0; }.sg-seo-ref-benefits article { position: relative; min-height: 164px; padding: 22px 20px; overflow: hidden; border: 1px solid #e0eafb; border-radius: 14px; background: rgba(255,255,255,.84); box-shadow: 0 12px 24px rgba(57, 92, 146, .07); }.sg-seo-ref-benefits article::after { position: absolute; right: -28px; bottom: -34px; width: 95px; height: 95px; border: 13px solid rgba(40, 113, 239, .07); border-radius: 50%; content: ""; }.sg-seo-ref-benefits i { display: inline-flex; width: 39px; height: 39px; align-items: center; justify-content: center; border-radius: 12px; background: #e8f1ff; color: #1667e8; font-size: 17px; }.sg-seo-ref-benefits h3 { margin: 16px 0 7px; font-size: 15px; font-weight: 750; }.sg-seo-ref-benefits p { margin: 0; color: #7184a1; font-size: 10px; line-height: 1.55; }
.sg-seo-ref-services { background: #f4f8ff; }.sg-seo-ref-services::before { position: absolute; top: -72px; left: 4%; width: 190px; height: 120px; border: 1px solid rgba(37, 111, 237, .14); border-radius: 42px 7px 48px 12px; transform: rotate(-15deg); content: ""; }.services-dots { right: 2%; bottom: 37px; width: 90px; height: 90px; background-image: radial-gradient(#8eb9fb 1px, transparent 1px); background-size: 12px 12px; opacity: .65; }.sg-seo-ref-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: #1262e5; font-size: 11px; font-weight: 750; text-decoration: none; }.sg-seo-ref-more:hover { color: #0846ad; text-decoration: none; }.sg-seo-ref-service-grid { margin-top: 0; }.sg-seo-ref-service-grid > div { margin-bottom: 12px; }.sg-seo-ref-service-grid article { position: relative; min-height: 155px; padding: 18px 17px 14px 53px; border: 1px solid #d9e6fb; border-radius: 11px; background: rgba(255,255,255,.73); box-shadow: 0 8px 18px rgba(39, 90, 160, .045); }.sg-seo-ref-service-grid article > i { position: absolute; top: 17px; left: 17px; color: #1b6ef0; font-size: 20px; }.sg-seo-ref-service-grid small { color: #4382e7; font-size: 8px; font-weight: 800; }.sg-seo-ref-service-grid h3 { margin: 8px 0 7px; font-size: 13px; font-weight: 750; }.sg-seo-ref-service-grid p { margin: 0; color: #7184a1; font-size: 10px; line-height: 1.55; }
.sg-seo-ref-results { position: relative; padding: 62px 0; overflow: hidden; background: linear-gradient(105deg, #06164b 0%, #071b68 52%, #0c51c8 100%); }.sg-seo-ref-results::before { position: absolute; right: -70px; bottom: -170px; width: 440px; height: 310px; border: 1px solid rgba(86, 161, 255, .34); border-radius: 50%; transform: rotate(-10deg); content: ""; }.sg-seo-ref-results .sg-seo-ref-kicker, .sg-seo-ref-results h2 { color: #fff; }.sg-seo-ref-results .col-lg-3 > p:not(.sg-seo-ref-kicker) { color: #b7c8f0; }.sg-seo-ref-results .sg-seo-ref-more { color: #8fc1ff; }.sg-seo-ref-result-grid article { min-height: 170px; padding: 23px 17px; border: 1px solid rgba(46, 129, 255, .7); border-radius: 10px; background: rgba(5, 31, 105, .48); box-shadow: inset 0 0 25px rgba(35, 120, 255, .14); text-align: center; }.sg-seo-ref-result-grid i { display: inline-flex; width: 43px; height: 43px; align-items: center; justify-content: center; margin-bottom: 16px; border: 1px solid #4d9aff; border-radius: 50%; box-shadow: 0 0 16px rgba(57, 145, 255, .65); color: #9bc7ff; }.sg-seo-ref-result-grid strong { display: block; color: #fff; font-size: 26px; line-height: 1; }.sg-seo-ref-result-grid span { display: block; margin-top: 9px; color: #cfdefb; font-size: 11px; line-height: 1.45; }
.sg-seo-ref-process { background: #fff; }.sg-seo-ref-timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }.sg-seo-ref-timeline::before { position: absolute; top: 28px; right: 8%; left: 8%; height: 1px; background: #b6d4ff; content: ""; }.sg-seo-ref-timeline > div { position: relative; z-index: 1; text-align: left; }.sg-seo-ref-timeline i { display: inline-flex; width: 53px; height: 53px; align-items: center; justify-content: center; border: 5px solid #fff; border-radius: 50%; background: #1a6df0; box-shadow: 0 0 0 1px #87b6fb, 0 8px 18px rgba(23, 101, 237, .25); color: #fff; }.sg-seo-ref-timeline strong { display: block; margin-top: 16px; color: #16376f; font-size: 16px; }.sg-seo-ref-timeline p { margin: 9px auto 0; color: #7184a1; font-size: 9px; line-height: 1.55; }
.sg-seo-ref-audit { padding: 0 0 78px; background: #fff; }.sg-seo-ref-audit-inner { position: relative; display: grid; grid-template-columns: 1.05fr 1.25fr 1.25fr; gap: 35px; align-items: center; min-height: 250px; padding: 36px 42px; overflow: hidden; border: 1px solid #d7e7ff; border-radius: 26px; background: linear-gradient(135deg, #e7f2ff, #f6faff); box-shadow: 0 13px 28px rgba(59, 106, 176, .09); }.sg-seo-ref-audit-inner::before { position: absolute; top: -80px; right: -40px; width: 260px; height: 260px; border: 1px solid rgba(23, 101, 237, .15); border-radius: 50%; content: ""; }.sg-seo-audit-art { display: flex; width: 135px; height: 135px; align-items: center; justify-content: center; margin: auto; border: 9px solid rgba(63, 139, 242, .18); border-radius: 23px; background: #fff; box-shadow: 0 14px 24px rgba(58, 112, 187, .14); color: #125de6; font-size: 55px; transform: rotate(-4deg); }.sg-seo-audit-art span { position: absolute; width: 165px; height: 80px; border: 1px dashed #8ebcfb; border-radius: 50%; transform: rotate(-30deg); }.sg-seo-ref-audit h2 { margin: 0 0 11px; font-size: clamp(24px, 2.6vw, 35px); font-weight: 800; letter-spacing: -.045em; line-height: 1.08; }.sg-seo-ref-audit-inner > div > p:not(.sg-seo-ref-kicker) { max-width: 330px; margin: 0 0 17px; color: #7184a1; font-size: 11px; line-height: 1.65; }.sg-seo-audit-checklist { position: relative; z-index: 1; padding: 18px 20px; border: 1px solid #dbe7f9; border-radius: 11px; background: #fff; box-shadow: 0 10px 20px rgba(41, 91, 157, .08); }.sg-seo-audit-checklist p { margin: 0; padding: 7px 0; border-bottom: 1px solid #edf2f8; color: #5e7497; font-size: 10px; }.sg-seo-audit-checklist p:last-child { border-bottom: 0; }.sg-seo-audit-checklist i { margin-right: 7px; color: #2376eb; }
.sg-seo-ref-faq { padding: 0 0 75px; background: #fff; }.sg-seo-ref-faq > .container > .sg-seo-ref-kicker { margin-bottom: 18px; }.sg-seo-ref-faq details { margin: 0 12px 9px 0; border: 1px solid #e5ebf5; border-radius: 6px; background: #fff; box-shadow: 0 5px 12px rgba(38, 78, 132, .04); }.sg-seo-ref-faq details:nth-child(even) { margin-right: 0; margin-left: 12px; }.sg-seo-ref-faq summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; cursor: pointer; list-style: none; color: #28436e; font-size: 10px; font-weight: 700; }.sg-seo-ref-faq summary::-webkit-details-marker { display: none; }.sg-seo-ref-faq summary::after { color: #1769eb; content: "+"; font-size: 17px; font-weight: 400; }.sg-seo-ref-faq details[open] summary::after { content: "-"; }.sg-seo-ref-faq details p { margin: 0; padding: 0 15px 13px; color: #7184a1; font-size: 10px; line-height: 1.55; }
.sg-seo-ref-final { position: relative; padding: 47px 0; overflow: hidden; background: linear-gradient(110deg, #061750, #0b277e 58%, #0e4cc1); }.sg-seo-ref-final::before { position: absolute; right: -15px; bottom: -88px; width: 310px; height: 200px; border: 1px solid rgba(83, 158, 255, .3); border-radius: 50%; transform: rotate(-12deg); content: ""; }.sg-seo-ref-final > .container { display: flex; align-items: center; gap: 16px; }.sg-seo-ref-final > .container > div { flex: 1; }.sg-seo-ref-final .sg-seo-ref-kicker { color: #8ebeff; }.sg-seo-ref-final h2 { max-width: 520px; margin: 0; color: #fff; font-size: clamp(25px, 3vw, 39px); font-weight: 800; letter-spacing: -.045em; line-height: 1.1; }.sg-seo-ref-final p:not(.sg-seo-ref-kicker) { margin: 10px 0 0; color: #bfcef0; font-size: 12px; }.sg-seo-ref-final .sg-seo-ref-btn { position: relative; z-index: 1; flex: 0 0 auto; background: #fff; box-shadow: none; color: #145be1; }.sg-seo-ref-final .sg-seo-ref-btn-ghost { border-color: #77a7f4; background: transparent; color: #fff; }
@media (max-width: 991px) { .sg-seo-ref-dashboard { right: 20px; }.sg-seo-ref-stats > div { padding: 3px 10px; }.sg-seo-ref-timeline { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }.sg-seo-ref-timeline::before { display: none; }.sg-seo-ref-audit-inner { grid-template-columns: 1fr 1.5fr; }.sg-seo-audit-checklist { grid-column: span 2; }.sg-seo-ref-final > .container { flex-wrap: wrap; } }
@media (max-width: 767px) { .sg-seo-ref-hero { padding: 122px 0 30px; }.sg-seo-ref-hero::before { top: 170px; right: -170px; width: 340px; height: 340px; }.sg-seo-ref-hero h1 { font-size: 43px; }.sg-seo-ref-actions { flex-direction: column; align-items: stretch; }.sg-seo-ref-btn { width: 100%; }.sg-seo-ref-dashboard-art { height: 260px; margin-top: 35px; }.sg-seo-ref-dashboard { top: 28px; right: 4px; width: calc(100% - 20px); height: 170px; padding: 10px; }.dashboard-search { margin-top: 8px; }.dashboard-heading { margin-top: 10px; }.sg-seo-ref-float { min-width: 62px; padding: 8px 7px; }.sg-seo-ref-float strong { font-size: 15px; }.rank-float { top: 25px; right: -4px; }.traffic-float { top: 122px; left: -5px; }.leads-float { right: -5px; bottom: 22px; }.sg-seo-ref-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 0; padding: 12px; }.sg-seo-ref-stats > div { border-right: 0; padding: 6px; }.sg-seo-ref-section { padding: 65px 0; }.sg-seo-ref-benefits, .sg-seo-ref-service-grid, .sg-seo-ref-result-grid { margin-top: 28px; }.sg-seo-ref-benefits > div, .sg-seo-ref-service-grid > div, .sg-seo-ref-result-grid > div { margin-bottom: 12px; }.sg-seo-ref-service-grid article { min-height: 135px; }.sg-seo-ref-results { padding: 58px 0; }.sg-seo-ref-timeline { grid-template-columns: 1fr; gap: 24px; margin-top: 25px; }.sg-seo-ref-timeline > div { display: grid; grid-template-columns: 53px 1fr; column-gap: 15px; align-items: center; text-align: left; }.sg-seo-ref-timeline i { grid-row: span 2; }.sg-seo-ref-timeline strong { margin-top: 0; }.sg-seo-ref-timeline p { margin: 5px 0 0; }.sg-seo-ref-audit-inner { grid-template-columns: 1fr; gap: 22px; padding: 30px 22px; }.sg-seo-audit-checklist { grid-column: auto; }.sg-seo-ref-faq details, .sg-seo-ref-faq details:nth-child(even) { margin-right: 0; margin-left: 0; }.sg-seo-ref-final > .container { align-items: stretch; flex-direction: column; }.sg-seo-ref-final .sg-seo-ref-btn { width: 100%; } }

/* Motion is limited to the SEO layout and respects reduced-motion preferences. */
.sg-seo-reference .seo-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}

.sg-seo-reference .seo-reveal.seo-visible {
    opacity: 1;
    transform: translateY(0);
}

.sg-seo-reference .sg-seo-ref-benefits article,
.sg-seo-reference .sg-seo-ref-service-grid article,
.sg-seo-reference .sg-seo-ref-result-grid article,
.sg-seo-reference .sg-seo-ref-timeline > div {
    transition-delay: var(--seo-delay, 0ms);
}

.sg-seo-reference .sg-seo-ref-hero h1,
.sg-seo-reference .sg-seo-ref-lead,
.sg-seo-reference .sg-seo-ref-actions {
    animation: seo-copy-rise .75s both cubic-bezier(.2,.8,.2,1);
}

.sg-seo-reference .sg-seo-ref-lead { animation-delay: .12s; }
.sg-seo-reference .sg-seo-ref-actions { animation-delay: .22s; }
.sg-seo-reference .sg-seo-ref-dashboard-art::before { animation: seo-glow-breathe 4.5s ease-in-out infinite; }
.sg-seo-reference .sg-seo-ref-dashboard { animation: seo-dashboard-float 6s ease-in-out infinite; }
.sg-seo-reference .sg-seo-ref-float { animation: seo-badge-float 4s ease-in-out infinite; }
.sg-seo-reference .traffic-float { animation-delay: -1.4s; }.sg-seo-reference .leads-float { animation-delay: -2.6s; }
.sg-seo-reference .hero-ring { animation: seo-ring-spin 18s linear infinite; }
.sg-seo-reference .dashboard-chart i { animation: seo-chart-pulse 1.8s ease-in-out infinite alternate; transform-origin: center bottom; }
.sg-seo-reference .dashboard-chart i:nth-child(2n) { animation-delay: -.65s; }.sg-seo-reference .dashboard-chart i:nth-child(3n) { animation-delay: -1.1s; }
.sg-seo-reference .sg-seo-ref-btn i, .sg-seo-reference .sg-seo-ref-more i { transition: transform .25s ease; }.sg-seo-reference .sg-seo-ref-btn:hover i, .sg-seo-reference .sg-seo-ref-more:hover i { transform: translateX(4px); }
.sg-seo-reference .sg-seo-ref-faq details { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }.sg-seo-reference .sg-seo-ref-faq details:hover { border-color: #a9c9f8; box-shadow: 0 8px 18px rgba(38, 92, 168, .1); transform: translateY(-2px); }

.sg-seo-reference .dashboard-chart {
    height: 96px;
    display: block;
    position: relative;
    padding: 0;
    overflow: hidden;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 30px, rgba(215, 228, 247, .55) 31px, transparent 32px);
}

.sg-seo-reference .dashboard-chart svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sg-seo-reference .seo-chart-area { fill: url(#seo-chart-fill); }
.sg-seo-reference .seo-chart-line { fill: none; stroke: #1767ed; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.sg-seo-reference .seo-chart-end { fill: #1767ed; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 2px 3px rgba(23, 103, 237, .34)); }
.sg-seo-reference .dashboard-cards { gap: 9px; }
.sg-seo-reference .dashboard-cards > div { min-height: 58px; background: rgba(255,255,255,.84); }
.sg-seo-reference .dashboard-cards strong { font-size: 16px; }
.sg-seo-reference .dashboard-cards strong em { color: #31a779; }
.sg-seo-reference .dashboard-cards > div > small:last-child { margin-top: 5px; font-size: 7px; }
.sg-seo-reference .dashboard-cards .donut-card { display: flex; align-items: center; gap: 8px; }
.sg-seo-reference .dashboard-cards .donut-card > span:last-child { min-width: 0; }
.sg-seo-reference .dashboard-cards .donut-card strong { margin-top: 5px; font-size: 15px; }
.sg-seo-reference .dashboard-cards .donut-card strong em { margin-left: 3px; font-size: 7px; }
.sg-seo-reference .dashboard-donut { background: conic-gradient(#1767ed 0 76%, #b9d6ff 76% 100%); border: 0; position: relative; }
.sg-seo-reference .dashboard-donut::after { position: absolute; inset: 7px; border-radius: 50%; background: #fff; content: ""; }

/* Multi-panel analytics visual based on the supplied SEO hero reference. */
.sg-seo-reference .sg-seo-analytics-art { height: 440px; }
.sg-seo-reference .sg-seo-analytics-art::before { top: 0; right: 4%; width: 500px; height: 410px; opacity: .72; }
.sg-seo-reference .sg-seo-analytics-art::after { position: absolute; right: 1%; bottom: 8px; width: 110px; height: 110px; border-radius: 50%; background: rgba(58, 143, 247, .18); filter: blur(4px); content: ""; }
.sg-seo-reference .sg-seo-analytics-art .traffic-float { top: 7px; right: 0; left: auto; z-index: 5; min-width: 104px; text-align: left; }
.sg-seo-reference .sg-seo-analytics-art .traffic-float strong { color: #173d79; font-size: 16px; }.sg-seo-reference .sg-seo-analytics-art .traffic-float small { color: #7b91b0; }
.sg-seo-analytics-main { position: absolute; top: 26px; left: 24px; z-index: 2; width: 445px; height: 270px; padding: 24px 25px 16px; border: 1px solid rgba(255,255,255,.95); border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: 0 20px 38px rgba(59, 104, 172, .16); }
.analytics-heading { display: flex; align-items: center; justify-content: space-between; color: #7688a4; font-size: 14px; }.analytics-heading b { padding: 8px 9px; border-radius: 6px; background: #e7f8ef; color: #138a61; font-size: 12px; }.analytics-heading b small { margin-left: 4px; color: #8a9bab; font-size: 9px; font-weight: 500; }
.analytics-traffic { margin-top: 25px; }.analytics-traffic > small { color: #15345f; font-size: 13px; font-weight: 700; }.analytics-traffic > strong { display: block; margin-top: 4px; color: #071d4f; font-size: 29px; line-height: 1; }.analytics-traffic > strong em { margin-left: 9px; color: #24ae79; font-size: 11px; font-style: normal; vertical-align: middle; }
.analytics-line-chart { height: 135px; margin-top: 14px; padding-top: 3px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 43px, #edf3fb 44px, transparent 45px); }.analytics-line-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }.analytics-line-chart path { fill: url(#seo-traffic-fill); }.analytics-line-chart polyline { fill: none; stroke: #1768ed; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }.analytics-line-chart circle { fill: #1768ed; stroke: #fff; stroke-width: 2; }
.sg-seo-analytics-small { position: absolute; z-index: 3; border: 1px solid rgba(255,255,255,.98); border-radius: 13px; background: rgba(255,255,255,.96); box-shadow: 0 18px 32px rgba(50, 95, 163, .14); }.analytics-keywords { bottom: 3px; left: 0; width: 170px; height: 155px; padding: 21px 17px; }.analytics-leads { bottom: 3px; left: 181px; width: 174px; height: 155px; padding: 21px 18px; }.sg-seo-analytics-small > small { display: block; color: #2a426d; font-size: 11px; font-weight: 700; }.analytics-keywords span { display: block; margin-top: 8px; color: #556d90; font-size: 10px; }.sg-seo-analytics-small > strong { display: block; margin-top: 10px; color: #071d4f; font-size: 26px; line-height: 1; }.analytics-keywords > em { display: block; margin-top: 8px; color: #24ae79; font-size: 10px; font-style: normal; }.analytics-bars { display: flex; height: 43px; align-items: end; gap: 8px; margin-top: 12px; }.analytics-bars i { width: 15px; border-radius: 2px 2px 0 0; background: #9ec3fa; }.analytics-bars i:nth-child(1) { height: 15px; }.analytics-bars i:nth-child(2) { height: 25px; background: #518eea; }.analytics-bars i:nth-child(3) { height: 19px; background: #8eb7f4; }.analytics-bars i:nth-child(4) { height: 34px; background: #4e8dea; }.analytics-bars i:nth-child(5) { height: 27px; background: #81aff2; }.analytics-bars i:nth-child(6) { height: 43px; background: #4e8dea; }
.analytics-leads strong em { margin-left: 5px; color: #24ae79; font-size: 10px; font-style: normal; }.analytics-mini-line { display: flex; height: 52px; align-items: end; gap: 4px; margin-top: 13px; }.analytics-mini-line i { display: block; width: 27px; height: 2px; border-radius: 3px; background: #27b58b; transform: rotate(-16deg); }.analytics-mini-line i:nth-child(2) { margin-bottom: 4px; }.analytics-mini-line i:nth-child(3) { margin-bottom: 2px; }.analytics-mini-line i:nth-child(4) { margin-bottom: 18px; }.analytics-mini-line i:nth-child(5) { margin-bottom: 14px; }.analytics-mini-line i:nth-child(6) { margin-bottom: 30px; }
.sg-seo-analytics-source { position: absolute; right: -4px; bottom: 4px; z-index: 3; width: 225px; height: 190px; padding: 22px 20px; border: 1px solid rgba(255,255,255,.98); border-radius: 15px; background: rgba(255,255,255,.96); box-shadow: 0 18px 32px rgba(50, 95, 163, .14); }.sg-seo-analytics-source h3 { margin: 0 0 15px; color: #2a426d; font-size: 15px; }.source-content { display: flex; align-items: center; gap: 16px; }.analytics-donut { display: block; width: 82px; height: 82px; flex: 0 0 82px; border-radius: 50%; background: conic-gradient(#1768ed 0 45%, #39bd91 45% 85%, #6150ce 85% 95%, #bed1ef 95% 100%); position: relative; }.analytics-donut::after { position: absolute; inset: 19px; border-radius: 50%; background: #fff; content: ""; }.source-content ul { margin: 0; padding: 0; list-style: none; }.source-content li { display: flex; align-items: center; min-width: 108px; margin: 7px 0; color: #596f91; font-size: 9px; white-space: nowrap; }.source-content li i { width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #1768ed; }.source-content li:nth-child(2) i { background: #39bd91; }.source-content li:nth-child(3) i { background: #6150ce; }.source-content li:nth-child(4) i { background: #bed1ef; }.source-content li b { margin-left: auto; color: #314b75; font-weight: 700; }
.sg-seo-reference .sg-seo-analytics-art .analytics-heading, .sg-seo-reference .sg-seo-analytics-art .analytics-traffic, .sg-seo-reference .sg-seo-analytics-art .analytics-line-chart { animation: none; }

/* Compact dashboard mode restored after removing the multi-panel visual. */
.sg-seo-reference .sg-seo-ref-dashboard-art:not(.sg-seo-analytics-art) { height: 340px; }
.sg-seo-reference .sg-seo-ref-dashboard-art:not(.sg-seo-analytics-art) .sg-seo-ref-dashboard { height: 230px; overflow: hidden; }
.sg-seo-reference .sg-seo-ref-dashboard-art:not(.sg-seo-analytics-art) .dashboard-heading { margin-top: 18px; }
.sg-seo-reference .sg-seo-ref-dashboard-art:not(.sg-seo-analytics-art) .dashboard-heading strong { display: block; margin-top: 5px; color: #0d2c66; font-size: 22px !important; line-height: 1.15; white-space: nowrap; }
.sg-seo-reference .sg-seo-ref-dashboard-art:not(.sg-seo-analytics-art) .dashboard-heading small { font-size: 8px; }

@media (max-width: 991px) { .sg-seo-reference .sg-seo-analytics-art { width: 560px; max-width: 100%; margin-left: auto; }.sg-seo-analytics-main { left: 12px; }.analytics-keywords { left: 0; }.sg-seo-analytics-source { right: 0; } }
@media (max-width: 767px) { .sg-seo-reference .sg-seo-analytics-art { height: 360px; margin-top: 35px; }.sg-seo-analytics-main { top: 17px; left: 5px; width: calc(100% - 18px); height: 205px; padding: 16px 15px 10px; }.analytics-heading { font-size: 11px; }.analytics-heading b { font-size: 9px; }.analytics-traffic { margin-top: 16px; }.analytics-traffic > strong { font-size: 22px; }.analytics-line-chart { height: 91px; }.sg-seo-analytics-small { bottom: 0; height: 126px; padding: 15px 12px; }.analytics-keywords { left: 0; width: 31%; }.analytics-leads { left: 34%; width: 31%; }.analytics-keywords span, .sg-seo-analytics-small > small { font-size: 8px; }.sg-seo-analytics-small > strong { font-size: 19px; }.analytics-bars { gap: 3px; height: 31px; }.analytics-bars i { width: 8px; }.sg-seo-analytics-source { right: 0; width: 32%; padding: 13px 9px; }.sg-seo-analytics-source h3 { font-size: 10px; margin-bottom: 9px; }.source-content { gap: 6px; }.analytics-donut { width: 42px; height: 42px; flex-basis: 42px; }.analytics-donut::after { inset: 10px; }.source-content ul { display: none; }.sg-seo-reference .sg-seo-analytics-art .traffic-float { top: 0; right: 0; min-width: 77px; }.sg-seo-reference .sg-seo-analytics-art .traffic-float strong { font-size: 13px; } }

@media (max-width: 767px) {
    .sg-seo-reference .dashboard-chart { height: 64px; }
    .sg-seo-reference .seo-chart-line { stroke-width: 4; }
}

/* Social media reference page. */
.sg-social-reference { overflow: hidden; color: #203c66; background: #f7faff; }
.sg-social-reference h1, .sg-social-reference h2, .sg-social-reference h3 { color: #0b2054; font-family: "Poppins", sans-serif; }
.sg-social-hero { position: relative; padding: 150px 0 48px; overflow: hidden; background: radial-gradient(circle at 70% 32%, rgba(94,166,255,.27), transparent 28%), linear-gradient(145deg,#fff 10%,#f5f9ff 57%,#e8f2ff 100%); }
.sg-social-hero::before { position: absolute; top: 45px; right: 10%; width: 470px; height: 470px; border-radius: 50%; background: radial-gradient(circle,rgba(169,210,255,.32),rgba(169,210,255,0) 68%); content: ""; }
.social-hero-orbit { position: absolute; top: 180px; left: 39%; width: 125px; height: 125px; border: 1px dashed rgba(47,119,240,.25); border-radius: 50%; }
.sg-social-kicker { margin: 0 0 14px; color: #1465e8; font-size: 10px; font-weight: 800; letter-spacing: .13em; line-height: 1.4; }
.sg-social-hero h1 { max-width: 510px; margin: 0 0 18px; font-size: clamp(42px,5vw,64px); font-weight: 800; letter-spacing: -.06em; line-height: 1.03; }
.sg-social-hero h1 span { color: #1767ed; }
.sg-social-lead { max-width: 430px; margin: 0; color: #526987; font-size: 14px; line-height: 1.7; }
.sg-social-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.sg-social-btn { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 10px; padding: 11px 17px; border: 1px solid #145be1; border-radius: 6px; background: #125de6; box-shadow: 0 11px 23px rgba(18,93,230,.18); color: #fff; font-size: 10px; font-weight: 700; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.sg-social-btn:hover { background: #084ecb; box-shadow: 0 15px 28px rgba(18,93,230,.28); color: #fff; text-decoration: none; transform: translateY(-2px); }
.sg-social-btn-outline { background: rgba(255,255,255,.75); box-shadow: none; color: #145be1; }.sg-social-btn-outline:hover { background: #fff; color: #145be1; }
.sg-social-phones { position: relative; z-index: 1; width: min(100%, 570px); height: 385px; margin: 7px auto 0; }
.social-phone { position: absolute; z-index: 2; overflow: hidden; border: 7px solid #162c62; border-radius: 24px; background: #fff; box-shadow: 0 23px 40px rgba(43,82,146,.22); }
.social-phone-screen { height: 100%; padding: 10px 8px; background: #fff; color: #1c315e; font-size: 7px; }
.social-phone-main { top: 8px; left: 50%; width: 150px; height: 278px; transform: translateX(-50%); }
.social-phone-side { top: 53px; right: 8%; width: 130px; height: 236px; transform: rotate(7deg); }
.social-phone-back { top: 70px; left: 18%; width: 119px; height: 216px; transform: rotate(-13deg); opacity: .92; }
.social-phone-top { display: flex; align-items: center; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid #eef2f8; color: #193a76; font-size: 7px; }.social-phone-top i:first-child { color: #e84e75; font-size: 12px; }.social-phone-top i:last-child { margin-left: auto; color: #7890b0; }
.social-phone-avatar { display: flex; width: 27px; height: 27px; align-items: center; justify-content: center; margin: 9px 0 7px; border-radius: 50%; background: linear-gradient(135deg,#1768ed,#49c6ed); color: #fff; font-size: 9px; font-weight: 800; }
.social-phone-photo { display: flex; height: 112px; align-items: center; justify-content: center; border-radius: 5px; background: linear-gradient(145deg,#071b68,#1768ed 52%,#28b7ea); color: #fff; font-size: 25px; font-weight: 800; letter-spacing: -.1em; }
.social-phone-main strong, .social-phone-side strong { display: block; margin-top: 8px; color: #16376f; font-size: 8px; }.social-phone-main small, .social-phone-side small { display: block; margin-top: 5px; color: #7184a1; line-height: 1.5; }.social-phone-main em { display: block; margin-top: 5px; color: #1768ed; font-style: normal; }
.social-linkedin-card { display: flex; height: 110px; align-items: center; justify-content: center; margin-top: 16px; border-radius: 5px; background: linear-gradient(145deg,#e4f0ff,#1768ed); color: #fff; text-align: center; }.social-linkedin-card i { display: block; margin-bottom: 9px; font-size: 22px; }.social-phone-back .social-phone-screen { background: linear-gradient(145deg,#edf5ff,#bcd7ff); }.social-phone-back .social-phone-screen > i { display: flex; height: 117px; align-items: center; justify-content: center; color: #fff; font-size: 32px; }.social-phone-back .social-phone-screen > span { display: block; height: 45px; border-radius: 4px; background: rgba(255,255,255,.75); }.social-phone-back .social-phone-screen > b { display: block; margin-top: 8px; color: #274574; }
.social-badge { position: absolute; z-index: 4; display: flex; min-width: 70px; padding: 10px 9px; flex-direction: column; border: 1px solid rgba(255,255,255,.96); border-radius: 7px; background: rgba(255,255,255,.92); box-shadow: 0 13px 24px rgba(53,99,164,.16); text-align: center; }.social-badge strong { color: #1161df; font-size: 17px; line-height: 1; }.social-badge small { margin-top: 5px; color: #7184a2; font-size: 7px; }.social-badge-engage { top: 78px; left: 3%; }.social-badge-reach { bottom: 70px; left: 4%; }.social-badge-followers { top: 60px; right: 0; }.social-badge-shares { right: 2%; bottom: 77px; }
.sg-social-trust { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 0; padding: 15px 22px; border: 1px solid rgba(255,255,255,.95); border-radius: 17px; background: rgba(255,255,255,.8); box-shadow: 0 16px 31px rgba(69,115,181,.15); }.sg-social-trust > div { display: grid; grid-template-columns: 31px 1fr; grid-template-rows: 1fr 1fr; column-gap: 7px; align-items: center; border-right: 1px solid #dce7f7; padding: 3px 15px; }.sg-social-trust > div:last-child { border: 0; }.sg-social-trust i { grid-row: span 2; color: #1465e8; font-size: 21px; text-align: center; }.sg-social-trust strong { color: #183b77; font-size: 15px; line-height: 1; }.sg-social-trust small { color: #7890ae; font-size: 8px; }
.sg-social-why, .sg-social-services, .sg-social-process { position: relative; overflow: hidden; padding: 82px 0; }.sg-social-why { background: #fff; }.sg-social-services { background: #f4f8ff; }.sg-social-why h2, .sg-social-services h2, .sg-social-process h2 { margin: 0 0 14px; font-size: clamp(26px,2.8vw,39px); font-weight: 800; letter-spacing: -.05em; line-height: 1.08; }.sg-social-why .col-lg-3 > p:not(.sg-social-kicker), .sg-social-services .col-lg-3 > p:not(.sg-social-kicker), .sg-social-process .col-lg-3 > p:not(.sg-social-kicker) { max-width: 235px; margin: 0; color: #7184a1; font-size: 11px; line-height: 1.7; }
.sg-social-why-grid article { min-height: 154px; padding: 20px; border: 1px solid #e0eafb; border-radius: 12px; background: rgba(255,255,255,.88); box-shadow: 0 12px 24px rgba(57,92,146,.07); }.sg-social-why-grid article i { display: inline-flex; width: 37px; height: 37px; align-items: center; justify-content: center; border-radius: 11px; background: #e8f1ff; color: #1667e8; font-size: 16px; }.sg-social-why-grid h3 { margin: 14px 0 7px; font-size: 13px; font-weight: 750; }.sg-social-why-grid p { margin: 0; color: #7184a1; font-size: 9px; line-height: 1.55; }
.sg-social-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: #1262e5; font-size: 10px; font-weight: 750; text-decoration: none; }.sg-social-more:hover { color: #0846ad; text-decoration: none; }.sg-social-service-grid > div { margin-bottom: 12px; }.sg-social-service-grid article { position: relative; min-height: 137px; padding: 16px 13px 12px 48px; border: 1px solid #d9e6fb; border-radius: 10px; background: rgba(255,255,255,.78); box-shadow: 0 8px 18px rgba(39,90,160,.045); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }.sg-social-service-grid article:hover { background: #fff; box-shadow: 0 14px 25px rgba(39,90,160,.12); transform: translateY(-4px); }.sg-social-service-grid article > i { position: absolute; top: 17px; left: 15px; color: #1b6ef0; font-size: 19px; }.sg-social-service-grid small { color: #4382e7; font-size: 8px; font-weight: 800; }.sg-social-service-grid h3 { margin: 7px 0 6px; font-size: 12px; font-weight: 750; }.sg-social-service-grid p { margin: 0; color: #7184a1; font-size: 9px; line-height: 1.5; }
.sg-social-process { background: #fff; }.sg-social-timeline { position: relative; display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }.sg-social-timeline::before { position: absolute; top: 25px; right: 5%; left: 5%; height: 1px; background: #b6d4ff; content: ""; }.sg-social-timeline > div { position: relative; z-index: 1; text-align: left; }.sg-social-timeline i { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border: 4px solid #fff; border-radius: 50%; background: #1768ed; box-shadow: 0 0 0 1px #87b6fb, 0 8px 18px rgba(23,101,237,.25); color: #fff; }.sg-social-timeline strong { display: block; margin-top: 13px; color: #16376f; font-size: 16px; }.sg-social-timeline p { margin: 7px auto 0; color: #7184a1; font-size: 8px; line-height: 1.5; }
.sg-social-results { position: relative; padding: 13px 0; background: linear-gradient(105deg,#06164b,#071b68 52%,#0c51c8); }.sg-social-results .container { display: flex; align-items: center; gap: 20px; min-height: 78px; }.sg-social-results h2 { margin: 0; color: #fff; font-size: 20px; line-height: 1.05; }.sg-social-results-copy { flex: 0 0 22%; }.sg-social-result-grid { display: grid; flex: 1; grid-template-columns: repeat(4,1fr); gap: 8px; }.sg-social-result-grid article { padding: 10px 8px; border: 1px solid rgba(46,129,255,.7); border-radius: 5px; background: rgba(5,31,105,.48); box-shadow: inset 0 0 20px rgba(35,120,255,.14); text-align: center; }.sg-social-result-grid strong { display: block; color: #fff; font-size: 20px; line-height: 1; }.sg-social-result-grid span { display: block; margin-top: 5px; color: #cfdefb; font-size: 8px; }.sg-social-result-line { position: absolute; right: 5%; bottom: 0; width: 135px; height: 45px; border-top: 1px solid #2680ff; transform: skewY(-24deg); opacity: .7; }
.sg-social-bottom { padding: 18px 0 0; background: #fff; }.sg-social-bottom .container { display: grid; grid-template-columns: 1fr 1fr; }.sg-social-bottom-cta { display: flex; align-items: center; justify-content: space-between; min-height: 220px; padding: 26px 22px; border-radius: 15px 15px 0 0; background: linear-gradient(135deg,#eaf3ff,#f7faff); }.sg-social-bottom h2 { margin: 0 0 10px; font-size: 23px; line-height: 1.08; }.sg-social-bottom-cta p { max-width: 230px; margin: 0 0 13px; color: #7184a1; font-size: 9px; line-height: 1.5; }.sg-social-rocket { position: relative; display: flex; width: 115px; height: 145px; align-items: center; justify-content: center; color: #1768ed; font-size: 49px; transform: rotate(12deg); }.sg-social-rocket::before { position: absolute; bottom: 8px; width: 75px; height: 35px; border-radius: 50%; background: #c6e1ff; box-shadow: 0 11px 0 #dcecff; content: ""; }.sg-social-rocket i { position: relative; z-index: 1; }.sg-social-faq { padding: 23px 0 20px 20px; }.sg-social-faq .sg-social-kicker { margin-bottom: 14px; }.sg-social-faq details { margin: 0 0 6px; border-bottom: 1px solid #e3eaf4; }.sg-social-faq summary { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px; cursor: pointer; list-style: none; color: #28436e; font-size: 9px; font-weight: 700; }.sg-social-faq summary::-webkit-details-marker { display: none; }.sg-social-faq summary::after { color: #1769eb; content: "+"; font-size: 15px; font-weight: 400; }.sg-social-faq details[open] summary::after { content: "-"; }.sg-social-faq details p { margin: 0; padding: 0 8px 9px; color: #7184a1; font-size: 9px; line-height: 1.5; }
@media (max-width: 991px) { .sg-social-hero { padding-top: 130px; }.sg-social-phones { margin-top: 35px; }.sg-social-trust > div { padding: 3px 8px; }.sg-social-timeline { grid-template-columns: repeat(3,1fr); row-gap: 28px; }.sg-social-timeline::before { display: none; }.sg-social-bottom .container { grid-template-columns: 1fr; }.sg-social-faq { padding: 30px 0; }.sg-social-results-copy { flex-basis: 27%; } }
@media (max-width: 767px) { .sg-social-hero { padding: 122px 0 30px; }.sg-social-hero h1 { font-size: 42px; }.sg-social-actions { flex-direction: column; align-items: stretch; }.sg-social-btn { width: 100%; }.sg-social-phones { height: 330px; margin-top: 30px; }.social-phone-main { width: 130px; height: 240px; }.social-phone-side { top: 46px; right: 0; width: 106px; height: 194px; }.social-phone-back { top: 59px; left: 0; width: 97px; height: 178px; }.social-phone-photo { height: 96px; }.social-linkedin-card { height: 85px; }.social-badge { min-width: 58px; padding: 8px 6px; }.social-badge strong { font-size: 13px; }.social-badge small { font-size: 6px; }.social-badge-engage { top: 66px; left: 0; }.social-badge-reach { bottom: 53px; left: 0; }.social-badge-followers { top: 42px; right: 0; }.social-badge-shares { right: 0; bottom: 58px; }.sg-social-trust { grid-template-columns: repeat(2,1fr); gap: 8px; padding: 11px; }.sg-social-trust > div { border: 0; padding: 5px; }.sg-social-why, .sg-social-services, .sg-social-process { padding: 62px 0; }.sg-social-why-grid, .sg-social-service-grid { margin-top: 26px; }.sg-social-why-grid > div, .sg-social-service-grid > div { margin-bottom: 10px; }.sg-social-timeline { grid-template-columns: 1fr; gap: 22px; margin-top: 28px; }.sg-social-timeline > div { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; align-items: center; text-align: left; }.sg-social-timeline i { grid-row: span 2; }.sg-social-timeline strong { margin-top: 0; }.sg-social-timeline p { margin: 4px 0 0; }.sg-social-results .container { align-items: stretch; flex-direction: column; gap: 12px; padding-top: 15px; padding-bottom: 15px; }.sg-social-results-copy { flex-basis: auto; }.sg-social-result-grid { width: 100%; }.sg-social-result-grid strong { font-size: 16px; }.sg-social-result-grid span { font-size: 7px; }.sg-social-bottom-cta { min-height: 0; padding: 30px 20px; }.sg-social-rocket { width: 80px; height: 100px; font-size: 35px; }.sg-social-faq { padding: 30px 0 20px; } }

/* Social page motion and spacing polish. */
.sg-social-reference .social-reveal { opacity: 1; transform: none; }
.sg-social-reference.social-motion-ready .social-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--social-delay, 0ms); }
.sg-social-reference.social-motion-ready .social-reveal.social-visible { opacity: 1; transform: translateY(0); }
.sg-social-reference .sg-social-hero h1,
.sg-social-reference .sg-social-lead,
.sg-social-reference .sg-social-actions { animation: social-copy-rise .75s both cubic-bezier(.2,.8,.2,1); }
.sg-social-reference .sg-social-lead { animation-delay: .12s; }.sg-social-reference .sg-social-actions { animation-delay: .22s; }
.sg-social-reference .sg-social-phones { animation: social-phones-float 7s ease-in-out infinite; }
.sg-social-reference .social-badge { animation: social-badge-float 4s ease-in-out infinite; }
.sg-social-reference .social-badge-reach { animation-delay: -1.2s; }.sg-social-reference .social-badge-followers { animation-delay: -2.1s; }.sg-social-reference .social-badge-shares { animation-delay: -3s; }
.sg-social-reference .social-phone-side { animation: social-side-phone 6s ease-in-out infinite; }
.sg-social-reference .social-phone-back { animation: social-back-phone 6.5s ease-in-out infinite; }
.sg-social-reference .sg-social-trust { margin-top: 8px; }
.sg-social-reference .sg-social-why { padding-top: 92px; padding-bottom: 92px; }
.sg-social-reference .sg-social-services { padding-top: 88px; padding-bottom: 88px; }
.sg-social-reference .sg-social-process { padding-top: 92px; padding-bottom: 92px; }
.sg-social-reference .sg-social-results { padding-top: 17px; padding-bottom: 17px; }
.sg-social-reference .sg-social-result-grid article { min-height: 60px; display: flex; flex-direction: column; justify-content: center; }
.sg-social-reference .sg-social-bottom { padding-top: 24px; }
@keyframes social-copy-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes social-phones-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes social-badge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes social-side-phone { 0%, 100% { transform: rotate(7deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-6px); } }
@keyframes social-back-phone { 0%, 100% { transform: rotate(-13deg) translateY(0); } 50% { transform: rotate(-12deg) translateY(-5px); } }
@media (max-width: 991px) { .sg-social-reference .sg-social-why, .sg-social-reference .sg-social-services, .sg-social-reference .sg-social-process { padding-top: 72px; padding-bottom: 72px; } }
@media (max-width: 767px) { .sg-social-reference .sg-social-why, .sg-social-reference .sg-social-services, .sg-social-reference .sg-social-process { padding-top: 68px; padding-bottom: 68px; }.sg-social-reference .sg-social-trust { margin-top: 4px; }.sg-social-reference .sg-social-results { padding-top: 19px; padding-bottom: 19px; } }
@media (prefers-reduced-motion: reduce) { .sg-social-reference *, .sg-social-reference *::before, .sg-social-reference *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }.sg-social-reference.social-motion-ready .social-reveal { opacity: 1; transform: none; } }

/* Match the established SEO/PPC reference presentation. */
.sg-social-reference .sg-social-hero::after { position: absolute; top: 74px; right: -155px; width: 510px; height: 510px; border: 1px solid rgba(52,126,246,.15); border-radius: 50%; box-shadow: 0 0 0 28px rgba(52,126,246,.04), 0 0 0 56px rgba(52,126,246,.025); content: ""; pointer-events: none; }
.sg-social-reference .sg-social-hero .container { position: relative; z-index: 1; }
.sg-social-reference .sg-social-trust { margin-top: 14px; }
.sg-social-reference .sg-social-why::before { position: absolute; top: 26px; right: 4%; width: 132px; height: 132px; border: 17px solid rgba(73,145,248,.07); border-radius: 50%; content: ""; }
.sg-social-reference .sg-social-why::after { position: absolute; bottom: -75px; left: -45px; width: 260px; height: 170px; border-radius: 50% 52% 10% 78%; background: rgba(220,234,255,.8); transform: rotate(-10deg); content: ""; }
.sg-social-reference .sg-social-services::before { position: absolute; top: -72px; left: 4%; width: 190px; height: 120px; border: 1px solid rgba(37,111,237,.14); border-radius: 42px 7px 48px 12px; transform: rotate(-15deg); content: ""; }
.sg-social-reference .sg-social-services::after { position: absolute; right: 2%; bottom: 38px; width: 90px; height: 90px; background-image: radial-gradient(#8eb9fb 1px, transparent 1px); background-size: 12px 12px; content: ""; opacity: .6; }
.sg-social-reference .sg-social-services .container,
.sg-social-reference .sg-social-process .container,
.sg-social-reference .sg-social-bottom .container { position: relative; z-index: 1; }
.sg-social-reference .sg-social-why-grid article,
.sg-social-reference .sg-social-service-grid article { min-height: 155px; }
.sg-social-reference .sg-social-process { background: #fff radial-gradient(circle, rgba(23,101,237,.08) 1px, transparent 1.5px) 0 0 / 22px 22px; }
.sg-social-reference .sg-social-timeline::before { height: 2px; background: #b6d4ff; }
.sg-social-reference .sg-social-timeline i { width: 52px; height: 52px; }
.sg-social-reference .sg-social-results { min-height: 112px; }
.sg-social-reference .sg-social-result-grid article { min-height: 72px; padding: 13px 9px; border-radius: 8px; }
.sg-social-reference .sg-social-bottom { padding-top: 30px; }
.sg-social-reference .sg-social-bottom-cta { border: 1px solid #d7e7ff; border-bottom: 0; box-shadow: 0 13px 28px rgba(59,106,176,.08); }
.sg-social-reference .sg-social-faq { padding-top: 27px; }
@media (max-width: 991px) {
    .sg-social-reference .sg-social-hero::after { top: 170px; right: -185px; width: 400px; height: 400px; }
    .sg-social-reference .sg-social-trust { margin-top: 10px; }
    .sg-social-reference .sg-social-results { min-height: 0; }
}
@media (max-width: 767px) {
    .sg-social-reference .sg-social-hero::after { top: 215px; right: -190px; width: 365px; height: 365px; }
    .sg-social-reference .sg-social-trust { margin-top: 6px; }
    .sg-social-reference .sg-social-process { background-size: 18px 18px; }
    .sg-social-reference .sg-social-result-grid article { min-height: 60px; }
}

/* Give the social results band the same visual weight as the SEO/PPC result sections. */
.sg-social-reference .sg-social-results { min-height: 176px; padding-top: 28px; padding-bottom: 28px; }
.sg-social-reference .sg-social-results h2 { font-size: clamp(24px, 2.7vw, 34px); }
.sg-social-reference .sg-social-result-grid article { min-height: 118px; padding: 19px 12px; }
.sg-social-reference .sg-social-result-grid strong { font-size: 25px; }
.sg-social-reference .sg-social-result-grid span { margin-top: 8px; font-size: 9px; }
@media (max-width: 991px) {
    .sg-social-reference .sg-social-results { min-height: 160px; padding-top: 24px; padding-bottom: 24px; }
}
@media (max-width: 767px) {
    .sg-social-reference .sg-social-results { min-height: 0; padding-top: 25px; padding-bottom: 25px; }
    .sg-social-reference .sg-social-result-grid article { min-height: 92px; padding: 14px 8px; }
    .sg-social-reference .sg-social-result-grid strong { font-size: 19px; }
    .sg-social-reference .sg-social-result-grid span { font-size: 8px; }
}

/* Content marketing reference page. */
.sg-content-reference { overflow: hidden; color: #203c66; background: #f7faff; }
.sg-content-reference h1, .sg-content-reference h2, .sg-content-reference h3 { color: #0b2054; font-family: "Poppins", sans-serif; }
.sg-content-hero { position: relative; padding: 150px 0 48px; overflow: hidden; background: radial-gradient(circle at 69% 32%, rgba(94,166,255,.27), transparent 28%), linear-gradient(145deg,#fff 10%,#f5f9ff 57%,#e8f2ff 100%); }
.sg-content-hero::before { position: absolute; top: 48px; right: 9%; width: 475px; height: 475px; border-radius: 50%; background: radial-gradient(circle,rgba(169,210,255,.32),rgba(169,210,255,0) 68%); content: ""; }
.sg-content-hero::after { position: absolute; top: 73px; right: -155px; width: 510px; height: 510px; border: 1px solid rgba(52,126,246,.15); border-radius: 50%; box-shadow: 0 0 0 28px rgba(52,126,246,.04),0 0 0 56px rgba(52,126,246,.025); content: ""; pointer-events: none; }
.content-hero-ring { position: absolute; top: 180px; left: 39%; width: 125px; height: 125px; border: 1px dashed rgba(47,119,240,.25); border-radius: 50%; }
.sg-content-hero .container, .sg-content-services .container, .sg-content-journey .container, .sg-content-process .container, .sg-content-showcase .container, .sg-content-why-us .container, .sg-content-faq .container { position: relative; z-index: 1; }
.sg-content-kicker { margin: 0 0 14px; color: #1465e8; font-size: 11px; font-weight: 800; letter-spacing: .13em; line-height: 1.4; padding-top:25px; }
.sg-content-hero h1 { max-width: 510px; margin: 0 0 18px; font-size: clamp(42px,5vw,64px); font-weight: 800; letter-spacing: -.06em; line-height: 1.03; }.sg-content-hero h1 span { color: #1767ed; }
.sg-content-lead { max-width: 430px; margin: 0; color: #526987; font-size: 14px; line-height: 1.7; }.sg-content-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.sg-content-btn { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 10px; padding: 11px 17px; border: 1px solid #145be1; border-radius: 6px; background: #125de6; box-shadow: 0 11px 23px rgba(18,93,230,.18); color: #fff; font-size: 10px; font-weight: 700; text-decoration: none; transition: transform .25s ease,box-shadow .25s ease,background .25s ease; }.sg-content-btn:hover { background: #084ecb; box-shadow: 0 15px 28px rgba(18,93,230,.28); color: #fff; text-decoration: none; transform: translateY(-2px); }.sg-content-btn-outline { background: rgba(255,255,255,.75); box-shadow: none; color: #145be1; }.sg-content-btn-outline:hover { background: #fff; color: #145be1; }
.sg-content-hero-art { position: relative; z-index: 1; width: min(100%,570px); height: 370px; margin: 9px auto 0; }.content-editor { position: absolute; top: 28px; right: 42px; width: 390px; height: 235px; overflow: hidden; border: 1px solid rgba(255,255,255,.95); border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 22px 45px rgba(48,95,168,.2); transform: rotate(-2deg); }.content-editor-top { display: flex; align-items: center; gap: 4px; height: 29px; padding: 0 11px; background: #f2f6fb; color: #7589a8; font-size: 8px; }.content-editor-top i { width: 6px; height: 6px; border-radius: 50%; background: #d2dfed; }.content-editor-top b { margin-left: auto; color: #284a7d; font-size: 9px; }.content-editor-body { display: grid; grid-template-columns: 42px 1fr; height: calc(100% - 29px); }.content-editor-sidebar { display: flex; padding-top: 17px; flex-direction: column; align-items: center; gap: 22px; background: #f6f9fd; color: #7da7e9; font-size: 13px; }.content-editor-main { padding: 19px 22px; }.content-editor-main small { color: #8799b3; font-size: 8px; }.content-editor-main h3 { margin: 8px 0 6px; color: #17396f; font-size: 23px; line-height: 1.05; }.content-editor-main p { margin: 0; color: #7184a1; font-size: 9px; }.content-editor-chart { display: flex; height: 48px; align-items: end; gap: 7px; margin-top: 17px; padding-bottom: 1px; border-bottom: 1px solid #e4ebf5; }.content-editor-chart i { flex: 1; border-radius: 3px 3px 0 0; background: #9ec3fa; }.content-editor-chart i:nth-child(1) { height: 15px; }.content-editor-chart i:nth-child(2) { height: 25px; }.content-editor-chart i:nth-child(3) { height: 20px; }.content-editor-chart i:nth-child(4) { height: 33px; background: #4e8dea; }.content-editor-chart i:nth-child(5) { height: 27px; }.content-editor-chart i:nth-child(6) { height: 41px; background: #4e8dea; }.content-editor-chart i:nth-child(7) { height: 47px; background: #1768ed; }.content-editor-main > span { display: block; margin-top: 9px; color: #8a9bb3; font-size: 8px; }.content-editor-main > span b { margin-left: 5px; color: #28a97b; }
.content-paper { position: absolute; z-index: 2; display: flex; width: 145px; min-height: 112px; padding: 14px; flex-direction: column; border: 1px solid rgba(255,255,255,.96); border-radius: 9px; background: rgba(255,255,255,.95); box-shadow: 0 17px 29px rgba(53,99,164,.16); }.content-paper i { color: #1768ed; font-size: 22px; }.content-paper b { margin-top: 13px; color: #274574; font-size: 10px; }.content-paper small { margin-top: 5px; color: #7184a1; font-size: 8px; }.content-paper-back { bottom: 40px; left: 9%; transform: rotate(-8deg); }.content-paper-front { right: 0; bottom: 2px; transform: rotate(6deg); }.content-paper-front i { color: #28a97b; }
.content-float { position: absolute; z-index: 3; display: flex; min-width: 75px; padding: 10px; flex-direction: column; border: 1px solid rgba(255,255,255,.96); border-radius: 8px; background: rgba(255,255,255,.94); box-shadow: 0 13px 24px rgba(53,99,164,.16); text-align: center; }.content-float strong { color: #1161df; font-size: 18px; line-height: 1; }.content-float small { margin-top: 5px; color: #7184a2; font-size: 7px; }.content-float-ideas { top: 64px; left: 0; }.content-float-leads { top: 20px; right: 0; }
.sg-content-trust { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 14px; padding: 15px 22px; border: 1px solid rgba(255,255,255,.95); border-radius: 17px; background: rgba(255,255,255,.8); box-shadow: 0 16px 31px rgba(69,115,181,.15); }.sg-content-trust > div { display: grid; grid-template-columns: 31px 1fr; grid-template-rows: 1fr 1fr; column-gap: 7px; align-items: center; border-right: 1px solid #dce7f7; padding: 3px 15px; }.sg-content-trust > div:last-child { border: 0; }.sg-content-trust i { grid-row: span 2; color: #1465e8; font-size: 25px; text-align: center; }.sg-content-trust strong { color: #183b77; font-size: 18px; line-height: 1; }.sg-content-trust small { color: #7890ae; font-size: 12px; }
.sg-content-why,.sg-content-services,.sg-content-journey,.sg-content-process,.sg-content-showcase,.sg-content-why-us { position: relative; overflow: hidden; padding: 88px 0; }.sg-content-why { background: #fff; }.sg-content-services,.sg-content-showcase { background: #f4f8ff; }.sg-content-journey,.sg-content-process,.sg-content-why-us { background: #fff; }.sg-content-why h2,.sg-content-services h2,.sg-content-journey h2,.sg-content-process h2,.sg-content-showcase h2,.sg-content-why-us h2 { margin: 0 0 14px; font-size: clamp(26px,2.8vw,39px); font-weight: 800; letter-spacing: -.05em; line-height: 1.08; }.sg-content-why .col-lg-3 > p:not(.sg-content-kicker),.sg-content-services .col-lg-3 > p:not(.sg-content-kicker),.sg-content-journey .col-lg-3 > p:not(.sg-content-kicker),.sg-content-process .col-lg-3 > p:not(.sg-content-kicker),.sg-content-showcase .col-lg-3 > p:not(.sg-content-kicker),.sg-content-why-us .col-lg-3 > p:not(.sg-content-kicker) { max-width: 245px; margin: 0; color: #7184a1; font-size: 11px; line-height: 1.7; }
.sg-content-why::before,.sg-content-services::before { position: absolute; top: 24px; right: 4%; width: 130px; height: 130px; border: 17px solid rgba(73,145,248,.07); border-radius: 50%; content: ""; }.sg-content-services::before { top: -72px; left: 4%; width: 190px; height: 120px; border: 1px solid rgba(37,111,237,.14); border-radius: 42px 7px 48px 12px; transform: rotate(-15deg); }.sg-content-showcase::after { position: absolute; right: 3%; bottom: 35px; width: 90px; height: 90px; background-image: radial-gradient(#8eb9fb 1px,transparent 1px); background-size: 12px 12px; content: ""; opacity: .6; }
.sg-content-benefits article { min-height: 155px; padding: 20px; border: 1px solid #e0eafb; border-radius: 12px; background: rgba(255,255,255,.88); box-shadow: 0 12px 24px rgba(57,92,146,.07); }.sg-content-benefits article i { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 11px; background: #e8f1ff; color: #1667e8; font-size: 17px; }.sg-content-benefits h3 { margin: 14px 0 7px; font-size: 13px; }.sg-content-benefits p { margin: 0; color: #7184a1; font-size: 9px; line-height: 1.55; }
.sg-content-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: #1262e5; font-size: 10px; font-weight: 750; text-decoration: none; }.sg-content-more:hover { color: #0846ad; text-decoration: none; }.sg-content-service-grid > div { margin-bottom: 12px; }.sg-content-service-grid article { position: relative; min-height: 140px; padding: 17px 13px 12px 49px; border: 1px solid #d9e6fb; border-radius: 10px; background: rgba(255,255,255,.78); box-shadow: 0 8px 18px rgba(39,90,160,.045); transition: transform .25s ease,box-shadow .25s ease,background .25s ease; }.sg-content-service-grid article:hover { background: #fff; box-shadow: 0 14px 25px rgba(39,90,160,.12); transform: translateY(-4px); }.sg-content-service-grid article > i { position: absolute; top: 17px; left: 15px; color: #1b6ef0; font-size: 19px; }.sg-content-service-grid small { color: #4382e7; font-size: 8px; font-weight: 800; }.sg-content-service-grid h3 { margin: 7px 0 6px; font-size: 12px; }.sg-content-service-grid p { margin: 0; color: #7184a1; font-size: 9px; line-height: 1.5; }
.sg-content-journey { background: #fff; }.sg-content-journey-grid { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }.sg-content-journey-grid::before { position: absolute; top: 45px; right: 8%; left: 8%; height: 2px; background: #b6d4ff; content: ""; }.sg-content-journey-grid article { position: relative; z-index: 1; min-height: 180px; padding: 21px; border: 1px solid #dce8fa; border-radius: 13px; background: #fff; box-shadow: 0 12px 25px rgba(57,92,146,.08); }.sg-content-journey-grid span { color: #4382e7; font-size: 8px; font-weight: 800; }.sg-content-journey-grid i { display: flex; width: 46px; height: 46px; align-items: center; justify-content: center; margin: 11px 0 13px; border: 4px solid #fff; border-radius: 50%; background: #1768ed; box-shadow: 0 0 0 1px #87b6fb,0 8px 18px rgba(23,101,237,.25); color: #fff; }.sg-content-journey-grid h3 { margin: 0 0 7px; font-size: 15px; }.sg-content-journey-grid p { margin: 0; color: #7184a1; font-size: 9px; line-height: 1.55; }
.sg-content-process { background: #fff radial-gradient(circle,rgba(23,101,237,.08) 1px,transparent 1.5px) 0 0/22px 22px; }.sg-content-timeline { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }.sg-content-timeline::before { position: absolute; top: 26px; right: 7%; left: 7%; height: 2px; background: #b6d4ff; content: ""; }.sg-content-timeline > div { position: relative; z-index: 1; text-align: left; }.sg-content-timeline i { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border: 4px solid #fff; border-radius: 50%; background: #1768ed; box-shadow: 0 0 0 1px #87b6fb,0 8px 18px rgba(23,101,237,.25); color: #fff; }.sg-content-timeline strong { display: block; margin-top: 13px; color: #16376f; font-size: 16px; }.sg-content-timeline p { margin: 7px auto 0; color: #7184a1; font-size: 8px; line-height: 1.5; }
.sg-content-showcase-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }.sg-content-showcase-grid article { min-height: 190px; padding: 10px; border: 1px solid #d9e6fb; border-radius: 10px; background: rgba(255,255,255,.78); box-shadow: 0 8px 18px rgba(39,90,160,.045); transition: transform .25s ease,box-shadow .25s ease; }.sg-content-showcase-grid article:hover { box-shadow: 0 15px 26px rgba(39,90,160,.12); transform: translateY(-4px); }.showcase-art { display: flex; height: 112px; padding: 12px; flex-direction: column; justify-content: space-between; border-radius: 7px; color: #fff; }.showcase-art i { font-size: 20px; }.showcase-art span { font-size: 10px; font-weight: 700; }.showcase-blog { background: linear-gradient(145deg,#1768ed,#5ba7f5); }.showcase-website { background: linear-gradient(145deg,#0b2054,#1768ed); }.showcase-case { background: linear-gradient(145deg,#1b9c84,#1768ed); }.showcase-social { background: linear-gradient(145deg,#6356cc,#e84e75); }.sg-content-showcase-grid b { display: block; margin: 11px 3px 4px; color: #274574; font-size: 11px; }.sg-content-showcase-grid p { margin: 0 3px; color: #7184a1; font-size: 8px; }
.sg-content-results { position: relative; padding: 62px 0; overflow: hidden; background: linear-gradient(105deg,#06164b,#071b68 52%,#0c51c8); }.sg-content-results::before { position: absolute; right: -70px; bottom: -170px; width: 440px; height: 310px; border: 1px solid rgba(86,161,255,.34); border-radius: 50%; transform: rotate(-10deg); content: ""; }.sg-content-results .container { display: flex; align-items: center; gap: 25px; position: relative; z-index: 1; }.sg-content-results .sg-content-kicker,.sg-content-results h2 { color: #fff; }.sg-content-results-copy { flex: 0 0 28%; }.sg-content-results-copy > p:not(.sg-content-kicker) { max-width: 250px; color: #b7c8f0; font-size: 10px; line-height: 1.6; }.sg-content-results h2 { margin: 0 0 12px; font-size: clamp(26px,3vw,39px); line-height: 1.05; }.sg-content-result-grid { display: grid; flex: 1; grid-template-columns: repeat(4,1fr); gap: 9px; }.sg-content-result-grid article { min-height: 145px; padding: 20px 10px; border: 1px solid rgba(46,129,255,.7); border-radius: 9px; background: rgba(5,31,105,.48); box-shadow: inset 0 0 25px rgba(35,120,255,.14); text-align: center; }.sg-content-result-grid i { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; margin-bottom: 13px; border: 1px solid #4d9aff; border-radius: 50%; color: #9bc7ff; }.sg-content-result-grid strong { display: block; color: #fff; font-size: 23px; }.sg-content-result-grid span { display: block; margin-top: 7px; color: #cfdefb; font-size: 9px; }
.sg-content-why-us { padding-bottom: 72px; }.sg-content-why-us-grid > div { margin-bottom: 12px; }.sg-content-why-us-grid article { display: flex; min-height: 104px; align-items: center; gap: 13px; padding: 17px; border: 1px solid #dce8fa; border-radius: 10px; background: #fff; box-shadow: 0 9px 20px rgba(39,90,160,.05); }.sg-content-why-us-grid article > i { display: inline-flex; width: 36px; height: 36px; flex: 0 0 36px; align-items: center; justify-content: center; border-radius: 50%; background: #e8f1ff; color: #1768ed; }.sg-content-why-us-grid h3 { margin: 0 0 5px; font-size: 12px; }.sg-content-why-us-grid p { margin: 0; color: #7184a1; font-size: 9px; line-height: 1.5; }
.sg-content-faq { padding: 0 0 75px; background: #fff; }.sg-content-faq > .container > .sg-content-kicker { margin-bottom: 18px; }.sg-content-faq details { margin: 0 12px 9px 0; border: 1px solid #e5ebf5; border-radius: 6px; box-shadow: 0 5px 12px rgba(38,78,132,.04); }.sg-content-faq .col-md-6:last-child details { margin-right: 0; margin-left: 12px; }.sg-content-faq summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; cursor: pointer; list-style: none; color: #28436e; font-size: 10px; font-weight: 700; }.sg-content-faq summary::-webkit-details-marker { display: none; }.sg-content-faq summary::after { color: #1769eb; content: "+"; font-size: 17px; font-weight: 400; }.sg-content-faq details[open] summary::after { content: "-"; }.sg-content-faq details p { margin: 0; padding: 0 15px 13px; color: #7184a1; font-size: 10px; line-height: 1.55; }
.sg-content-final { position: relative; padding: 48px 0; overflow: hidden; background: linear-gradient(110deg,#061750,#0b277e 58%,#0e4cc1); }.sg-content-final::before { position: absolute; right: -20px; bottom: -90px; width: 320px; height: 205px; border: 1px solid rgba(83,158,255,.3); border-radius: 50%; transform: rotate(-12deg); content: ""; }.sg-content-final > .container { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }.sg-content-final > .container > div { flex: 1; }.sg-content-final .sg-content-kicker { color: #8ebeff; }.sg-content-final h2 { max-width: 580px; margin: 0; color: #fff; font-size: clamp(25px,3vw,39px); line-height: 1.1; }.sg-content-final p:not(.sg-content-kicker) { margin: 10px 0 0; color: #bfcef0; font-size: 12px; }.sg-content-final .sg-content-btn { flex: 0 0 auto; background: #fff; box-shadow: none; color: #145be1; }.sg-content-final .sg-content-btn-ghost { border-color: #77a7f4; background: transparent; color: #fff; }
.sg-content-reference .content-reveal { opacity: 1; transform: none; }.sg-content-reference.content-motion-ready .content-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--content-delay,0ms); }.sg-content-reference.content-motion-ready .content-reveal.content-visible { opacity: 1; transform: translateY(0); }.sg-content-reference .sg-content-hero h1,.sg-content-reference .sg-content-lead,.sg-content-reference .sg-content-actions { animation: content-copy-rise .75s both cubic-bezier(.2,.8,.2,1); }.sg-content-reference .sg-content-lead { animation-delay: .12s; }.sg-content-reference .sg-content-actions { animation-delay: .22s; }.sg-content-reference .sg-content-hero-art { animation: content-art-float 7s ease-in-out infinite; }.sg-content-reference .content-float { animation: content-badge-float 4s ease-in-out infinite; }.sg-content-reference .content-float-leads { animation-delay: -1.4s; }
@keyframes content-copy-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes content-art-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes content-badge-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (max-width: 991px) { .sg-content-hero { padding-top: 130px; }.sg-content-hero::after { top: 170px; right: -185px; width: 400px; height: 400px; }.sg-content-hero-art { margin-top: 35px; }.sg-content-results .container { align-items: stretch; flex-direction: column; }.sg-content-results-copy { flex-basis: auto; }.sg-content-showcase-grid { grid-template-columns: repeat(2,1fr); }.sg-content-final > .container { flex-wrap: wrap; }.sg-content-final > .container > div { flex-basis: 100%; } }
@media (max-width: 767px) { .sg-content-hero { padding: 122px 0 30px; }.sg-content-hero h1 { font-size: 42px; }.sg-content-actions { flex-direction: column; align-items: stretch; }.sg-content-btn { width: 100%; }.sg-content-hero-art { height: 310px; }.content-editor { top: 20px; right: 3%; width: 310px; height: 190px; }.content-editor-main { padding: 13px 15px; }.content-editor-main h3 { font-size: 18px; }.content-paper { width: 110px; min-height: 85px; padding: 10px; }.content-paper-back { bottom: 30px; left: 2%; }.content-paper-front { right: 0; bottom: 0; }.content-float { min-width: 58px; padding: 8px 6px; }.content-float strong { font-size: 14px; }.content-float small { font-size: 6px; }.content-float-ideas { top: 50px; left: 0; }.content-float-leads { top: 17px; right: 0; }.sg-content-trust { grid-template-columns: repeat(2,1fr); gap: 8px; padding: 11px; }.sg-content-trust > div { border: 0; padding: 5px; }.sg-content-why,.sg-content-services,.sg-content-journey,.sg-content-process,.sg-content-showcase,.sg-content-why-us { padding: 68px 0; }.sg-content-benefits,.sg-content-service-grid { margin-top: 26px; }.sg-content-benefits > div,.sg-content-service-grid > div { margin-bottom: 10px; }.sg-content-journey-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }.sg-content-journey-grid::before { display: none; }.sg-content-journey-grid article { min-height: 140px; }.sg-content-timeline { grid-template-columns: 1fr; gap: 22px; margin-top: 28px; }.sg-content-timeline::before { display: none; }.sg-content-timeline > div { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; text-align: left; }.sg-content-timeline i { grid-row: span 2; }.sg-content-timeline strong { margin-top: 0; }.sg-content-timeline p { margin: 4px 0 0; }.sg-content-showcase-grid { margin-top: 26px; }.sg-content-result-grid { grid-template-columns: repeat(2,1fr); width: 100%; }.sg-content-result-grid article { min-height: 125px; }.sg-content-why-us-grid { margin-top: 26px; }.sg-content-faq .col-md-6:last-child details { margin-left: 0; }.sg-content-faq details { margin-right: 0; }.sg-content-final > .container { align-items: stretch; flex-direction: column; }.sg-content-final .sg-content-btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .sg-content-reference *,.sg-content-reference *::before,.sg-content-reference *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }.sg-content-reference.content-motion-ready .content-reveal { opacity:1; transform:none; } }

/* Email page refinements, using the same isolated reference presentation. */
.sg-email-reference .sg-content-hero h1 span { color: #1768ed; }
.sg-email-reference .sg-content-hero-art::before { position: absolute; top: 0; right: 1%; width: 470px; height: 350px; border-radius: 45% 55% 50% 50%; background: radial-gradient(circle,rgba(75,167,255,.34),rgba(77,169,255,0) 68%); filter: blur(8px); content: ""; }
.sg-email-reference .sg-content-hero-art > * { z-index: 1; }
.sg-email-reference .sg-content-hero-art .content-editor { z-index: 2; }
.sg-email-reference .sg-content-hero-art .content-float { z-index: 4; }
.sg-email-journey-grid { grid-template-columns: repeat(5,1fr); gap: 9px; }
.sg-email-journey-grid::before { top: 45px; right: 5%; left: 5%; }
.sg-email-journey-grid article { min-height: 188px; padding: 17px 13px; }
.sg-email-journey-grid i { width: 43px; height: 43px; margin-top: 10px; font-size: 13px; }
.sg-email-journey-grid h3 { font-size: 13px; }
.sg-email-journey-grid p { font-size: 8px; }
.sg-email-reference .sg-content-showcase { background: #f4f8ff; }
.sg-email-reference .sg-content-results { background: linear-gradient(105deg,#06164b 0%,#071b68 52%,#0c51c8 100%); }
@media (max-width: 991px) {
    .sg-email-journey-grid { grid-template-columns: repeat(3,1fr); row-gap: 14px; }
    .sg-email-journey-grid::before { display: none; }
}
@media (max-width: 767px) {
    .sg-email-reference .sg-content-hero-art::before { right: -35px; width: 360px; height: 290px; }
    .sg-email-journey-grid { grid-template-columns: 1fr; gap: 12px; }
    .sg-email-journey-grid article { min-height: 125px; padding: 15px 18px; }
    .sg-email-journey-grid article i { margin-top: 8px; }
}

@keyframes seo-copy-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes seo-glow-breathe { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: .9; transform: scale(1.04); } }
@keyframes seo-dashboard-float { 0%, 100% { transform: rotate(-1deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-8px); } }
@keyframes seo-badge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes seo-ring-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes seo-chart-pulse { from { filter: brightness(.92); } to { filter: brightness(1.25); } }

@media (prefers-reduced-motion: reduce) {
    .sg-seo-reference *, .sg-seo-reference *::before, .sg-seo-reference *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .sg-seo-reference .seo-reveal { opacity: 1; transform: none; }
}

/* PPC reference layout. All selectors stay inside the PPC wrapper. */
.sg-ppc-reference { overflow: hidden; color: #203c66; background: #f7faff; }
.sg-ppc-reference h1, .sg-ppc-reference h2, .sg-ppc-reference h3 { color: #0b2054; font-family: "Poppins", sans-serif; }
.sg-ppc-ref-hero { position: relative; padding: 150px 0 55px; overflow: hidden; background: radial-gradient(circle at 67% 34%, rgba(74, 157, 255, .34), transparent 28%), linear-gradient(145deg, #fff 12%, #f5f9ff 58%, #e7f1ff 100%); }
.sg-ppc-ref-hero::before { position: absolute; top: 63px; right: 8%; width: 500px; height: 500px; border: 1px solid rgba(52,126,246,.15); border-radius: 50%; box-shadow: 0 0 0 28px rgba(52,126,246,.04), 0 0 0 56px rgba(52,126,246,.025); content: ""; }
.ppc-hero-ring { position: absolute; top: 182px; left: 38%; width: 125px; height: 125px; border: 1px dashed rgba(47,119,240,.25); border-radius: 50%; }
.ppc-hero-blob { position: absolute; bottom: -100px; left: -60px; width: 300px; height: 190px; border-radius: 50% 50% 8% 78%; background: rgba(170,209,255,.22); transform: rotate(-15deg); }
.sg-ppc-label, .sg-ppc-kicker { margin: 0 0 14px; color: #1465e8; font-size: 10px; font-weight: 800; letter-spacing: .13em; line-height: 1.4; }.sg-ppc-ref-hero h1 { max-width: 510px; margin: 0 0 19px; font-size: clamp(42px,3vw,64px); font-weight: 800; letter-spacing: -.06em; line-height: 1.03; }.sg-ppc-ref-hero h1 span { display: block; color: #1767ed; }.sg-ppc-lead { max-width: 435px; margin: 0; color: #526987; font-size: 14px; line-height: 1.7; }.sg-ppc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }.sg-ppc-btn { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 10px; padding: 11px 17px; border: 1px solid #145be1; border-radius: 6px; background: #125de6; box-shadow: 0 11px 23px rgba(18,93,230,.18); color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }.sg-ppc-btn:hover { background: #084ecb; box-shadow: 0 15px 28px rgba(18,93,230,.28); color: #fff; text-decoration: none; transform: translateY(-2px); }.sg-ppc-btn-outline { background: rgba(255,255,255,.75); box-shadow: none; color: #145be1; }.sg-ppc-btn-outline:hover { background: #fff; color: #145be1; }
.sg-ppc-dashboard-art { position: relative; z-index: 1; width: min(100%,590px); height: 410px; margin: 12px auto 0; }.sg-ppc-dashboard-art::before { position: absolute; top: 0; right: 2%; width: 490px; height: 370px; border-radius: 45% 55% 50% 50%; background: radial-gradient(circle,rgba(75,167,255,.4),rgba(77,169,255,0) 68%); filter: blur(8px); content: ""; }.sg-ppc-dashboard { position: absolute; top: 30px; right: 37px; width: 425px; height: 290px; padding: 14px; border: 1px solid rgba(255,255,255,.96); border-radius: 11px; background: rgba(255,255,255,.93); box-shadow: 0 21px 46px rgba(48,95,168,.22); transform: rotate(-1deg); }.ppc-window-top { display: flex; align-items: center; justify-content: space-between; color: #7589a8; font-size: 9px; }.ppc-window-top span { display: flex; gap: 4px; }.ppc-window-top span i { width: 6px; height: 6px; border-radius: 50%; background: #d6e1ef; }.ppc-window-top b { color: #284a7d; font-size: 10px; }.ppc-window-top b i { margin-right: 4px; color: #4285f4; }.ppc-dashboard-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 16px; }.ppc-dashboard-metrics div { padding: 10px 7px; border: 1px solid #e5edf8; border-radius: 5px; }.ppc-dashboard-metrics small { display: block; color: #8799b3; font-size: 7px; }.ppc-dashboard-metrics strong { display: block; margin-top: 5px; color: #15356e; font-size: 13px; line-height: 1; }.ppc-dashboard-metrics em { display: block; margin-top: 5px; color: #28a97b; font-size: 7px; font-style: normal; }.ppc-dashboard-body { display: grid; grid-template-columns: 1.45fr .8fr; gap: 8px; margin-top: 9px; }.ppc-campaign-chart, .ppc-campaign-donut { min-height: 150px; padding: 12px; border: 1px solid #e5edf8; border-radius: 5px; }.ppc-campaign-chart small, .ppc-campaign-donut > small { color: #7890b0; font-size: 8px; }.ppc-campaign-chart strong { display: block; margin-top: 6px; color: #17396f; font-size: 17px; }.ppc-campaign-chart strong em { margin-left: 4px; color: #28a97b; font-size: 8px; font-style: normal; }.ppc-campaign-chart svg { display: block; width: 100%; height: 85px; margin-top: 9px; background: repeating-linear-gradient(to bottom,transparent 0,transparent 27px,#edf3fb 28px,transparent 29px); }.ppc-campaign-chart path { fill: rgba(81,145,245,.2); }.ppc-campaign-chart polyline { fill: none; stroke: #1768ed; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }.ppc-campaign-chart circle { fill: #1768ed; }.ppc-campaign-donut span { display: block; width: 67px; height: 67px; margin: 21px auto 13px; border: 12px solid #1768ed; border-right-color: #36b98c; border-bottom-color: #6356cc; border-radius: 50%; }.ppc-campaign-donut ul { margin: 0; padding: 0; list-style: none; }.ppc-campaign-donut li { margin: 4px 0; color: #7185a3; font-size: 7px; }.ppc-campaign-donut li b { float: right; color: #284b7d; }.ppc-float { position: absolute; z-index: 3; display: flex; min-width: 78px; padding: 11px 10px; flex-direction: column; border: 1px solid rgba(255,255,255,.96); border-radius: 8px; background: rgba(255,255,255,.94); box-shadow: 0 13px 24px rgba(53,99,164,.16); text-align: center; }.ppc-float strong { color: #1161df; font-size: 19px; line-height: 1; }.ppc-float small { margin-top: 5px; color: #7184a2; font-size: 8px; }.ppc-ctr { top: 80px; left: 0; }.ppc-leads { top: 27px; right: -3px; }.ppc-roas { bottom: 50px; left: -9px; }.ppc-cost { right: -16px; bottom: 60px; }.ppc-cost strong { color: #1261df; }
.sg-ppc-stats { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 3px; padding: 16px 24px; border: 1px solid rgba(255,255,255,.95); border-radius: 19px; background: rgba(255,255,255,.75); box-shadow: 0 16px 31px rgba(69,115,181,.15); }.sg-ppc-stats > div { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: 1fr 1fr; column-gap: 8px; align-items: center; border-right: 1px solid #dce7f7; padding: 3px 18px; }.sg-ppc-stats > div:last-child { border-right: 0; }.sg-ppc-stats i { grid-row: span 2; color: #1465e8; font-size: 23px; text-align: center; }.sg-ppc-stats strong { color: #183b77; font-size: 16px; line-height: 1; }.sg-ppc-stats small { color: #7890ae; font-size: 9px; }
.sg-ppc-ref-section { position: relative; overflow: hidden; padding: 90px 0; }.sg-ppc-ref-section h2, .sg-ppc-results h2, .sg-ppc-case-faq h2 { margin: 0 0 15px; font-size: clamp(28px,3vw,42px); font-weight: 800; letter-spacing: -.05em; line-height: 1.1; }.sg-ppc-ref-section .col-lg-3 > p:not(.sg-ppc-kicker) { max-width: 245px; margin: 0; color: #7184a1; font-size: 12px; line-height: 1.7; }.sg-ppc-why { background: #fff; }.sg-ppc-why::before { position: absolute; top: 40px; right: 5%; width: 140px; height: 140px; border: 18px solid rgba(73,145,248,.07); border-radius: 50%; content: ""; }.sg-ppc-why-shape { height: 230px; border-radius: 45% 55% 20% 70%; background: radial-gradient(circle at 60% 45%,rgba(77,162,255,.38),rgba(77,162,255,0) 65%), #edf5ff; transform: rotate(-7deg); }.sg-ppc-benefit-list { margin: 0; padding: 0; list-style: none; }.sg-ppc-benefit-list li { display: flex; gap: 12px; margin: 19px 0; color: #7184a1; font-size: 10px; line-height: 1.55; }.sg-ppc-benefit-list li > i { display: inline-flex; width: 29px; height: 29px; flex: 0 0 29px; align-items: center; justify-content: center; border-radius: 50%; background: #e8f1ff; color: #1465e8; }.sg-ppc-benefit-list b { display: block; margin-bottom: 3px; color: #274574; font-size: 11px; }
.sg-ppc-services { background: #f4f8ff; }.sg-ppc-services::after { position: absolute; right: -50px; bottom: -75px; width: 270px; height: 270px; border: 1px solid rgba(37,111,237,.14); border-radius: 45%; transform: rotate(22deg); content: ""; }.sg-ppc-service-grid > div { margin-bottom: 14px; }.sg-ppc-service-grid article { position: relative; min-height: 150px; padding: 20px 17px 14px 55px; border: 1px solid #d9e6fb; border-radius: 11px; background: rgba(255,255,255,.76); box-shadow: 0 8px 18px rgba(39,90,160,.045); }.sg-ppc-service-grid article > i { position: absolute; top: 19px; left: 18px; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: #e8f1ff; color: #1b6ef0; font-size: 14px; }.sg-ppc-service-grid h3 { margin: 8px 0 7px; font-size: 13px; font-weight: 750; }.sg-ppc-service-grid p { margin: 0; color: #7184a1; font-size: 10px; line-height: 1.55; }
.sg-ppc-ref-process { position: relative; padding: 90px 0; overflow: hidden; background: #fff; }.sg-ppc-ref-process::before { position: absolute; top: -110px; right: 14%; width: 260px; height: 260px; border: 1px dashed #a8caf9; border-radius: 50%; content: ""; }.sg-ppc-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: #1262e5; font-size: 11px; font-weight: 750; text-decoration: none; }.sg-ppc-more:hover { color: #0846ad; text-decoration: none; }.sg-ppc-timeline { position: relative; display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }.sg-ppc-timeline::before { position: absolute; top: 31px; right: 8%; left: 8%; height: 1px; background: #b6d4ff; content: ""; }.sg-ppc-timeline > div { position: relative; z-index: 1; text-align: left; }.sg-ppc-timeline i { display: inline-flex; width: 57px; height: 57px; align-items: center; justify-content: center; border: 5px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #9ac1fb, 0 8px 18px rgba(23,101,237,.2); color: #1768ed; }.sg-ppc-timeline b { display: block; margin-top: 14px; color: #16376f; font-size: 11px; }.sg-ppc-timeline p { margin: 8px 0 0; color: #7184a1; font-size: 9px; line-height: 1.55; }.sg-ppc-timeline .ppc-launch i { width: 82px; height: 82px; margin-top: -13px; border-color: #1465e8; background: #1465e8; box-shadow: 0 0 0 9px rgba(76,153,255,.17), 0 15px 28px rgba(23,101,237,.32); color: #fff; font-size: 25px; }.sg-ppc-timeline .ppc-launch b { margin-top: 10px; }
.sg-ppc-results { position: relative; padding: 62px 0; overflow: hidden; background: linear-gradient(105deg,#06164b 0%,#071b68 52%,#0c51c8 100%); }.sg-ppc-results::before { position: absolute; right: -80px; bottom: -160px; width: 450px; height: 300px; border: 1px solid rgba(86,161,255,.34); border-radius: 50%; transform: rotate(-10deg); content: ""; }.sg-ppc-results .sg-ppc-kicker, .sg-ppc-results h2 { color: #fff; }.sg-ppc-results .col-lg-3 > p:not(.sg-ppc-kicker) { color: #b7c8f0; }.sg-ppc-results .sg-ppc-more { color: #8fc1ff; }.sg-ppc-result-grid article { min-height: 170px; padding: 23px 12px; border: 1px solid rgba(46,129,255,.7); border-radius: 10px; background: rgba(5,31,105,.48); box-shadow: inset 0 0 25px rgba(35,120,255,.14); text-align: center; }.sg-ppc-result-grid i { display: inline-flex; width: 43px; height: 43px; align-items: center; justify-content: center; margin-bottom: 15px; border: 1px solid #4d9aff; border-radius: 50%; box-shadow: 0 0 16px rgba(57,145,255,.65); color: #9bc7ff; }.sg-ppc-result-grid strong { display: block; color: #fff; font-size: 25px; }.sg-ppc-result-grid span { display: block; margin-top: 8px; color: #cfdefb; font-size: 10px; line-height: 1.45; }
.sg-ppc-case-faq { padding: 85px 0 0; background: #fff; }.sg-ppc-case-faq h2 { font-size: 32px; }.sg-ppc-case-faq .col-lg-6 > p:not(.sg-ppc-kicker) { max-width: 410px; color: #7184a1; font-size: 12px; line-height: 1.7; }.sg-ppc-case-stats { display: flex; gap: 35px; margin: 24px 0; }.sg-ppc-case-stats b { color: #1465e8; font-size: 22px; }.sg-ppc-case-stats small { display: block; margin-top: 4px; color: #7184a1; font-size: 8px; font-weight: 500; }.sg-ppc-laptop { position: relative; width: 330px; height: 190px; margin: auto; border: 10px solid #1b3e73; border-bottom-width: 19px; border-radius: 8px 8px 3px 3px; background: linear-gradient(135deg,#e7f1ff,#fff); box-shadow: 0 20px 30px rgba(40,88,155,.2); }.sg-ppc-laptop::after { position: absolute; right: -39px; bottom: -31px; left: -39px; height: 20px; border-radius: 0 0 20px 20px; background: #b9c8dc; content: ""; }.sg-ppc-laptop i { position: absolute; top: 53px; left: 78px; color: #1768ed; font-size: 65px; }.sg-ppc-laptop span { position: absolute; top: 44px; right: 32px; width: 75px; height: 45px; border-bottom: 3px solid #27ad83; transform: rotate(-14deg); }.sg-ppc-faq-wrap { margin-top: 88px; padding-bottom: 72px; }.sg-ppc-faq-wrap details { margin: 0 12px 9px 0; border: 1px solid #e5ebf5; border-radius: 6px; box-shadow: 0 5px 12px rgba(38,78,132,.04); }.sg-ppc-faq-wrap details:nth-child(even) { margin-right: 0; margin-left: 12px; }.sg-ppc-faq-wrap summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; cursor: pointer; list-style: none; color: #28436e; font-size: 10px; font-weight: 700; }.sg-ppc-faq-wrap summary::-webkit-details-marker { display: none; }.sg-ppc-faq-wrap summary::after { color: #1769eb; content: "+"; font-size: 17px; font-weight: 400; }.sg-ppc-faq-wrap details[open] summary::after { content: "-"; }.sg-ppc-faq-wrap details p { margin: 0; padding: 0 15px 13px; color: #7184a1; font-size: 10px; line-height: 1.55; }
.sg-ppc-final { position: relative; padding: 48px 0; overflow: hidden; background: linear-gradient(110deg,#061750,#0b277e 58%,#0e4cc1); }.sg-ppc-final::before { position: absolute; right: -20px; bottom: -90px; width: 320px; height: 205px; border: 1px solid rgba(83,158,255,.3); border-radius: 50%; transform: rotate(-12deg); content: ""; }.sg-ppc-final > .container { display: flex; align-items: center; gap: 18px; }.sg-ppc-final > .container > div { flex: 1; }.sg-ppc-final .sg-ppc-kicker { color: #8ebeff; }.sg-ppc-final h2 { max-width: 580px; margin: 0; color: #fff; font-size: clamp(25px,3vw,39px); font-weight: 800; letter-spacing: -.045em; line-height: 1.1; }.sg-ppc-final p:not(.sg-ppc-kicker) { margin: 10px 0 0; color: #bfcef0; font-size: 12px; }.sg-ppc-final .sg-ppc-btn { position: relative; z-index: 1; flex: 0 0 auto; background: #fff; box-shadow: none; color: #145be1; }.sg-ppc-final .sg-ppc-btn-ghost { border-color: #77a7f4; background: transparent; color: #fff; }
.sg-ppc-case-faq { padding-top: 72px; }
.sg-ppc-case-faq > .container > .row > .col-lg-6:first-child { padding-right: 45px; }
.sg-ppc-case-faq > .container > .row > .col-lg-6:last-child { padding-left: 45px; }
.sg-ppc-case-faq .sg-ppc-faq-wrap { margin-top: 0; padding-bottom: 0; }
.sg-ppc-case-faq .sg-ppc-faq-wrap details { margin-right: 0; margin-left: 0; }
.sg-ppc-case-faq .sg-ppc-laptop { width: 300px; height: 170px; margin: 35px auto 8px; }
.sg-ppc-case-faq .sg-ppc-laptop i { top: 47px; left: 72px; font-size: 57px; }
@media (max-width: 991px) { .sg-ppc-dashboard-art { width: 560px; max-width: 100%; margin-left: auto; }.sg-ppc-stats > div { padding: 3px 10px; }.sg-ppc-timeline { grid-template-columns: repeat(3,1fr); row-gap: 36px; }.sg-ppc-timeline::before { display: none; }.sg-ppc-final > .container { flex-wrap: wrap; } }
@media (max-width: 767px) { .sg-ppc-ref-hero { padding: 122px 0 30px; }.sg-ppc-ref-hero::before { top: 150px; right: -180px; width: 360px; height: 360px; }.sg-ppc-ref-hero h1 { font-size: 43px; }.sg-ppc-actions { flex-direction: column; align-items: stretch; }.sg-ppc-btn { width: 100%; }.sg-ppc-dashboard-art { height: 330px; margin-top: 35px; }.sg-ppc-dashboard { top: 24px; right: 3px; width: calc(100% - 12px); height: 235px; padding: 10px; }.ppc-dashboard-metrics { gap: 3px; margin-top: 10px; }.ppc-dashboard-metrics div { padding: 7px 4px; }.ppc-dashboard-metrics strong { font-size: 9px; }.ppc-dashboard-body { gap: 4px; margin-top: 6px; }.ppc-campaign-chart, .ppc-campaign-donut { min-height: 125px; padding: 8px; }.ppc-campaign-chart svg { height: 67px; }.ppc-campaign-donut span { width: 45px; height: 45px; margin: 14px auto 8px; border-width: 8px; }.ppc-campaign-donut li { font-size: 6px; }.ppc-float { min-width: 60px; padding: 8px 6px; }.ppc-float strong { font-size: 14px; }.ppc-float small { font-size: 7px; }.ppc-ctr { top: 68px; left: -4px; }.ppc-leads { top: 14px; right: -4px; }.ppc-roas { bottom: 29px; left: -4px; }.ppc-cost { right: -4px; bottom: 35px; }.sg-ppc-stats { grid-template-columns: repeat(2,1fr); gap: 8px; padding: 12px; }.sg-ppc-stats > div { border-right: 0; padding: 6px; }.sg-ppc-ref-section, .sg-ppc-ref-process { padding: 65px 0; }.sg-ppc-service-grid { margin-top: 28px; }.sg-ppc-service-grid > div { margin-bottom: 12px; }.sg-ppc-timeline { grid-template-columns: 1fr; gap: 24px; margin-top: 25px; }.sg-ppc-timeline > div { display: grid; grid-template-columns: 57px 1fr; column-gap: 15px; align-items: center; text-align: left; }.sg-ppc-timeline i { grid-row: span 2; }.sg-ppc-timeline .ppc-launch i { width: 67px; height: 67px; margin-top: 0; }.sg-ppc-timeline b { margin-top: 0; }.sg-ppc-timeline p { margin: 5px 0 0; }.sg-ppc-results { padding: 58px 0; }.sg-ppc-result-grid { margin-top: 28px; }.sg-ppc-result-grid > div { margin-bottom: 12px; }.sg-ppc-case-faq { padding-top: 65px; }.sg-ppc-case-stats { gap: 16px; }.sg-ppc-laptop { width: 275px; height: 160px; margin-top: 30px; }.sg-ppc-faq-wrap { margin-top: 60px; }.sg-ppc-faq-wrap details, .sg-ppc-faq-wrap details:nth-child(even) { margin-right: 0; margin-left: 0; }.sg-ppc-final > .container { align-items: stretch; flex-direction: column; }.sg-ppc-final .sg-ppc-btn { width: 100%; } }

/* Combined PPC overview: benefits and service cards share one visual band. */
.sg-ppc-overview { position: relative; overflow: hidden; padding: 88px 0 82px; background: #f4f8ff; }
.sg-ppc-overview::before { position: absolute; top: -90px; left: -80px; width: 520px; height: 610px; border-radius: 48% 52% 46% 54%; background: linear-gradient(150deg, #e4efff, #f1f6ff 72%, rgba(244,248,255,0)); content: ""; }
.sg-ppc-overview::after { position: absolute; right: -70px; bottom: -95px; width: 280px; height: 280px; border: 1px solid rgba(37,111,237,.13); border-radius: 45%; transform: rotate(23deg); content: ""; }
.ppc-overview-blob { position: absolute; top: 28px; left: 33%; width: 115px; height: 115px; border: 1px dashed rgba(47,119,240,.23); border-radius: 50%; }
.sg-ppc-overview .container { position: relative; z-index: 1; }
.sg-ppc-overview-intro { max-width: 275px; }
.sg-ppc-overview h2 { margin: 0 0 15px; font-size: clamp(29px,3vw,42px); font-weight: 800; letter-spacing: -.05em; line-height: 1.1; }
.sg-ppc-overview-intro h2 { max-width: 300px; font-size: clamp(25px,2.35vw,34px); line-height: 1.08; }
.sg-ppc-overview-intro > p:not(.sg-ppc-kicker) { margin: 0; color: #7184a1; font-size: 12px; line-height: 1.7; }
.sg-ppc-overview .sg-ppc-benefit-list { max-width: 285px; margin-top: 30px; }
.sg-ppc-overview-heading { margin-bottom: 6px; }
.sg-ppc-overview-heading .sg-ppc-kicker { margin-bottom: 0; }
.sg-ppc-overview .sg-ppc-service-grid { margin-top: 0; }
.sg-ppc-overview .sg-ppc-service-grid > div { margin-bottom: 20px; }
.sg-ppc-overview .sg-ppc-service-grid article { min-height: 154px; padding-top: 22px; background: rgba(255,255,255,.86); box-shadow: 0 11px 24px rgba(39,90,160,.07); }
.sg-ppc-overview .sg-ppc-service-grid article:hover { border-color: #a7c9fa; box-shadow: 0 16px 28px rgba(39,90,160,.13); transform: translateY(-4px); }

@media (max-width: 991px) {
    .sg-ppc-overview::before { left: -190px; }
    .ppc-overview-blob { left: 50%; }
}

@media (max-width: 767px) {
    .sg-ppc-overview { padding: 65px 0 53px; }
    .sg-ppc-overview::before { top: -70px; left: -170px; width: 390px; height: 540px; }
    .ppc-overview-blob { top: 16px; right: 25px; left: auto; width: 75px; height: 75px; }
    .sg-ppc-overview-intro { max-width: none; }
    .sg-ppc-overview-intro h2 { max-width: 330px; font-size: 30px; }
    .sg-ppc-overview .sg-ppc-benefit-list { max-width: none; margin-top: 25px; }
    .sg-ppc-overview-heading { margin-top: 45px; }
    .sg-ppc-overview .sg-ppc-service-grid { margin-top: 20px; }
    .sg-ppc-overview .sg-ppc-service-grid > div { margin-bottom: 12px; }
}

/* Final PPC hero alignment and trust-strip spacing. */
.sg-ppc-reference .sg-ppc-ref-hero { padding-bottom: 78px; }
.sg-ppc-reference .sg-ppc-dashboard { box-sizing: border-box; overflow: hidden; transform: rotate(0); }
.sg-ppc-reference .ppc-dashboard-metrics,
.sg-ppc-reference .ppc-dashboard-body,
.sg-ppc-reference .ppc-campaign-chart,
.sg-ppc-reference .ppc-campaign-donut { box-sizing: border-box; }
.sg-ppc-reference .ppc-dashboard-metrics { align-items: stretch; }
.sg-ppc-reference .ppc-dashboard-metrics div { min-width: 0; }
.sg-ppc-reference .ppc-dashboard-body { align-items: stretch; min-height: 0; overflow: hidden; }
.sg-ppc-reference .ppc-campaign-chart,
.sg-ppc-reference .ppc-campaign-donut { overflow: hidden; }
.sg-ppc-reference .ppc-campaign-chart svg { display: block; max-width: 100%; overflow: hidden; }
.sg-ppc-reference .sg-ppc-stats { margin-top: 24px; }

@media (max-width: 767px) {
    .sg-ppc-reference .sg-ppc-ref-hero { padding-bottom: 54px; }
    .sg-ppc-reference .sg-ppc-stats { margin-top: 22px; }
    .sg-ppc-reference .sg-ppc-ref-hero h1 { max-width: 360px; font-size: 35px; line-height: 1.04; }
    .sg-ppc-reference .sg-ppc-lead { max-width: 360px; font-size: 14px; line-height: 1.5; }
    .sg-ppc-reference .sg-ppc-actions { flex-direction: row; flex-wrap: nowrap; gap: 8px; margin-top: 16px; }
    .sg-ppc-reference .sg-ppc-actions .sg-ppc-btn { width: auto; min-width: 0; min-height: 38px; flex: 1 1 0; padding: 9px 8px; font-size: 9px; white-space: nowrap; }
    .sg-ppc-reference .sg-ppc-dashboard-art { height: 350px; margin-top: 12px; }
    .sg-ppc-reference .sg-ppc-dashboard { top: 15px; right: 0; left: 0; width: calc(100% - 4px); height: 270px; margin: auto; padding: 11px; }
    .sg-ppc-reference .ppc-dashboard-metrics { margin-top: 12px; }
    .sg-ppc-reference .ppc-dashboard-metrics small { font-size: 6px; }
    .sg-ppc-reference .ppc-dashboard-metrics strong { font-size: 11px; }
    .sg-ppc-reference .ppc-dashboard-body { margin-top: 8px; }
    .sg-ppc-reference .ppc-campaign-chart, .sg-ppc-reference .ppc-campaign-donut { min-height: 137px; }
    .sg-ppc-reference .ppc-campaign-chart svg { height: 73px; }
}

/* PPC motion and presentation layer, isolated from SEO and shared services. */
.sg-ppc-reference .ppc-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.sg-ppc-reference .ppc-reveal.ppc-visible { opacity: 1; transform: translateY(0); }
.sg-ppc-reference .sg-ppc-service-grid article, .sg-ppc-reference .sg-ppc-result-grid article, .sg-ppc-reference .sg-ppc-timeline > div, .sg-ppc-reference .sg-ppc-benefit-list li { transition-delay: var(--ppc-delay, 0ms); }
.sg-ppc-reference .sg-ppc-ref-hero h1, .sg-ppc-reference .sg-ppc-lead, .sg-ppc-reference .sg-ppc-actions { animation: ppc-copy-rise .75s both cubic-bezier(.2,.8,.2,1); }
.sg-ppc-reference .sg-ppc-lead { animation-delay: .12s; }.sg-ppc-reference .sg-ppc-actions { animation-delay: .22s; }
.sg-ppc-reference .sg-ppc-dashboard-art::before { animation: ppc-glow-breathe 4.5s ease-in-out infinite; }
.sg-ppc-reference .sg-ppc-dashboard { animation: ppc-dashboard-float 6s ease-in-out infinite; }
.sg-ppc-reference .ppc-float { animation: ppc-badge-float 4s ease-in-out infinite; }
.sg-ppc-reference .ppc-leads { animation-delay: -1.1s; }.sg-ppc-reference .ppc-roas { animation-delay: -2s; }.sg-ppc-reference .ppc-cost { animation-delay: -2.8s; }
.sg-ppc-reference .ppc-hero-ring { animation: ppc-ring-spin 18s linear infinite; }
.sg-ppc-reference .ppc-launch i { animation: ppc-launch-pulse 2.6s ease-in-out infinite; }
.sg-ppc-reference .sg-ppc-btn i, .sg-ppc-reference .sg-ppc-more i { transition: transform .25s ease; }.sg-ppc-reference .sg-ppc-btn:hover i, .sg-ppc-reference .sg-ppc-more:hover i { transform: translateX(4px); }
.sg-ppc-reference details { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }.sg-ppc-reference details:hover { border-color: #a9c9f8; box-shadow: 0 8px 18px rgba(38,92,168,.1); transform: translateY(-2px); }
@keyframes ppc-copy-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ppc-glow-breathe { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: .9; transform: scale(1.04); } }
@keyframes ppc-dashboard-float { 0%, 100% { transform: rotate(-1deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-8px); } }
@keyframes ppc-badge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ppc-ring-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes ppc-launch-pulse { 0%, 100% { box-shadow: 0 0 0 9px rgba(76,153,255,.17), 0 15px 28px rgba(23,101,237,.32); } 50% { box-shadow: 0 0 0 15px rgba(76,153,255,.08), 0 18px 34px rgba(23,101,237,.42); } }
@media (prefers-reduced-motion: reduce) { .sg-ppc-reference *, .sg-ppc-reference *::before, .sg-ppc-reference *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }.sg-ppc-reference .ppc-reveal { opacity: 1; transform: none; } }

/* Final alignment for the supplied analytics reference. */
.sg-seo-reference .sg-seo-analytics-art { height: 490px; }
.sg-seo-reference .sg-seo-analytics-main { height: 325px; padding-top: 27px; }
.sg-seo-reference .analytics-line-chart { height: 170px; margin-top: 18px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 54px, #edf3fb 55px, transparent 56px); }
.sg-seo-reference .analytics-keywords, .sg-seo-reference .analytics-leads { height: 175px; padding-top: 24px; }
.sg-seo-reference .analytics-keywords { bottom: 3px; }
.sg-seo-reference .analytics-leads { bottom: 3px; }
.sg-seo-reference .sg-seo-analytics-source { height: 215px; padding-top: 25px; }
.sg-seo-reference .sg-seo-analytics-source { width: 280px; padding-left: 24px; padding-right: 24px; }
.sg-seo-reference .sg-seo-analytics-source h3 { margin-bottom: 18px; font-size: 17px; }
.sg-seo-reference .analytics-donut { width: 86px; height: 86px; flex-basis: 86px; }
.sg-seo-reference .analytics-donut::after { inset: 20px; }
.sg-seo-reference .source-content { gap: 19px; }
.sg-seo-reference .source-content li { min-width: 120px; margin-top: 8px; margin-bottom: 8px; font-size: 10px; }
.sg-seo-reference .analytics-traffic > strong { font-size: 30px; }
.sg-seo-reference .sg-seo-analytics-small > small { font-size: 12px; }
.sg-seo-reference .sg-seo-analytics-small > strong { margin-top: 14px; font-size: 28px; }

@media (max-width: 767px) {
    .sg-seo-reference .sg-seo-analytics-art { height: 360px; }
    .sg-seo-reference .sg-seo-analytics-main { height: 205px; padding-top: 16px; }
    .sg-seo-reference .analytics-line-chart { height: 91px; margin-top: 14px; }
    .sg-seo-reference .analytics-keywords, .sg-seo-reference .analytics-leads { height: 126px; padding-top: 15px; }
    .sg-seo-reference .sg-seo-analytics-source { right: 0; width: 32%; height: 126px; padding: 13px 9px; }
    .sg-seo-reference .sg-seo-analytics-source h3 { margin-bottom: 9px; font-size: 10px; }
    .sg-seo-reference .analytics-donut { width: 42px; height: 42px; flex-basis: 42px; }
    .sg-seo-reference .analytics-donut::after { inset: 10px; }
    .sg-seo-reference .sg-seo-analytics-small > small { font-size: 8px; }
    .sg-seo-reference .sg-seo-analytics-small > strong { font-size: 19px; }
}

/* Compact the PPC intro and visually separate it from the services grid. */
.sg-ppc-reference .sg-ppc-overview { padding-top: 68px; padding-bottom: 0; background: #fff; }
.sg-ppc-reference .sg-ppc-overview::before { top: -105px; left: -105px; width: 475px; height: 555px; background: linear-gradient(150deg, #e7f1ff, #f5f9ff 74%, rgba(255,255,255,0)); }
.sg-ppc-reference .sg-ppc-overview-intro { max-width: 250px; }
.sg-ppc-reference .sg-ppc-overview-intro h2 { max-width: 300px; font-size: clamp(24px, 2.25vw, 32px); line-height: 1.06; }
.sg-ppc-reference .sg-ppc-overview-intro > p:not(.sg-ppc-kicker) { font-size: 11px; line-height: 1.55; }
.sg-ppc-reference .sg-ppc-overview .sg-ppc-benefit-list { max-width: 260px; margin-top: 20px; }
.sg-ppc-reference .sg-ppc-overview .sg-ppc-benefit-list li { margin: 13px 0; font-size: 9px; line-height: 1.4; }
.sg-ppc-reference .sg-ppc-overview .sg-ppc-benefit-list li > i { width: 26px; height: 26px; flex-basis: 26px; font-size: 11px; }
.sg-ppc-reference .sg-ppc-overview .sg-ppc-benefit-list b { margin-bottom: 2px; font-size: 10px; }
.sg-ppc-reference .sg-ppc-overview > .container { padding-bottom: 66px; }
.sg-ppc-reference .sg-ppc-overview > .container::after { position: absolute; right: -12vw; bottom: -90px; left: -12vw; height: 145px; border-radius: 50% 50% 0 0; background: #f4f8ff; content: ""; }
.sg-ppc-reference .sg-ppc-overview .sg-ppc-service-grid { position: relative; z-index: 1; }
.sg-ppc-reference .sg-ppc-overview .sg-ppc-service-grid article { margin-top:10px; background: #fff; }

@media (max-width: 767px) {
    .sg-ppc-reference .sg-ppc-overview { padding-top: 54px; }
    .sg-ppc-reference .sg-ppc-overview-intro { max-width: 330px; }
    .sg-ppc-reference .sg-ppc-overview-intro h2 { max-width: 330px; font-size: 30px; }
    .sg-ppc-reference .sg-ppc-overview > .container { padding-bottom: 45px; }
    .sg-ppc-reference .sg-ppc-overview > .container::after { bottom: -58px; height: 100px; }
}

/* PPC process reference treatment: compact copy, connected nodes, and a Launch spotlight. */
.sg-ppc-reference .sg-ppc-ref-process { padding: 70px 0 64px; background: #fff; }
.sg-ppc-reference .sg-ppc-ref-process::before { top: -105px; right: 19%; width: 250px; height: 250px; border-color: #c1d9fb; }
.sg-ppc-reference .sg-ppc-ref-process > .container > .row { align-items: center; }
.sg-ppc-reference .sg-ppc-ref-process .col-lg-3 { padding-right: 30px; }
.sg-ppc-reference .sg-ppc-ref-process .sg-ppc-kicker { margin-bottom: 11px; }
.sg-ppc-reference .sg-ppc-ref-process h2 { max-width: 245px; margin-bottom: 12px; font-size: clamp(26px, 2.5vw, 35px); line-height: 1.08; }
.sg-ppc-reference .sg-ppc-ref-process .col-lg-3 > p:not(.sg-ppc-kicker) { max-width: 245px; font-size: 11px; line-height: 1.65; }
.sg-ppc-reference .sg-ppc-ref-process .sg-ppc-more { margin-top: 15px; }
.sg-ppc-reference .sg-ppc-timeline { min-height: 220px; align-items: start; gap: 8px; padding-top: 2px; }
.sg-ppc-reference .sg-ppc-timeline::before { top: 31px; right: 8%; left: 8%; height: 2px; background: #a9cafa; content: ""; }
.sg-ppc-reference .sg-ppc-timeline > div { min-width: 0; }
.sg-ppc-reference .sg-ppc-timeline i { width: 57px; height: 57px; border-width: 4px; box-shadow: 0 0 0 1px #c0d9fb, 0 8px 18px rgba(23,101,237,.16); }
.sg-ppc-reference .sg-ppc-timeline b { margin-top: 14px; font-size: 16px; }
.sg-ppc-reference .sg-ppc-timeline p { max-width: 125px; margin-top: 8px; font-size: 9px; line-height: 1.55; }
.sg-ppc-reference .sg-ppc-timeline .ppc-launch { margin-top: -13px; }
.sg-ppc-reference .sg-ppc-timeline .ppc-launch i { width: 86px; height: 86px; border: 0; box-shadow: 0 0 0 10px rgba(73,151,255,.14), 0 14px 27px rgba(23,101,237,.34); }
.sg-ppc-reference .sg-ppc-timeline .ppc-launch b { margin-top: 10px; color: #1768ed; }
.sg-ppc-reference .sg-ppc-timeline .ppc-route { position: absolute; z-index: 0; display: block; height: 38px; border-top: 2px dotted #a9cafa; border-radius: 50% 50% 0 0; pointer-events: none; }
.sg-ppc-reference .sg-ppc-timeline .ppc-route::after { position: absolute; top: -6px; width: 8px; height: 8px; border-top: 2px solid #79aef4; border-right: 2px solid #79aef4; content: ""; }
.sg-ppc-reference .sg-ppc-timeline .ppc-route-left { top: 5px; left: 8%; width: 39%; transform: rotate(4deg); }
.sg-ppc-reference .sg-ppc-timeline .ppc-route-left::after { right: -3px; transform: rotate(45deg); }
.sg-ppc-reference .sg-ppc-timeline .ppc-route-right { top: 5px; right: 7%; width: 34%; transform: rotate(-4deg); }
.sg-ppc-reference .sg-ppc-timeline .ppc-route-right::after { right: -3px; transform: rotate(45deg); }

@media (max-width: 991px) {
    .sg-ppc-reference .sg-ppc-ref-process .col-lg-3 { padding-right: 15px; }
    .sg-ppc-reference .sg-ppc-timeline { margin-top: 30px; }
    .sg-ppc-reference .sg-ppc-timeline .ppc-route { display: none; }
}

@media (max-width: 767px) {
    .sg-ppc-reference .sg-ppc-ref-process { padding: 60px 0; }
    .sg-ppc-reference .sg-ppc-ref-process h2 { max-width: 330px; font-size: 30px; }
    .sg-ppc-reference .sg-ppc-ref-process .col-lg-3 > p:not(.sg-ppc-kicker) { max-width: 330px; }
    .sg-ppc-reference .sg-ppc-timeline { min-height: 0; margin-top: 35px; gap: 25px; }
    .sg-ppc-reference .sg-ppc-timeline > div { display: grid; grid-template-columns: 58px 1fr; column-gap: 15px; align-items: center; text-align: left; }
    .sg-ppc-reference .sg-ppc-timeline i { grid-row: span 2; }
    .sg-ppc-reference .sg-ppc-timeline .ppc-launch { margin-top: 0; }
    .sg-ppc-reference .sg-ppc-timeline .ppc-launch i { width: 68px; height: 68px; }
    .sg-ppc-reference .sg-ppc-timeline b { margin-top: 0; }
    .sg-ppc-reference .sg-ppc-timeline p { max-width: none; margin: 5px 0 0; }
}

/* PPC case study and FAQ split panel. */
.sg-ppc-reference .sg-ppc-case-faq { padding: 0; background: #eef4fc; }
.sg-ppc-reference .sg-ppc-case-faq > .container { max-width: none; padding: 0; }
.sg-ppc-reference .sg-ppc-case-faq > .container > .row { margin: 0; }
.sg-ppc-reference .sg-ppc-case-panel,
.sg-ppc-reference .sg-ppc-faq-panel { padding: 42px max(4vw, 30px) 38px; }
.sg-ppc-reference .sg-ppc-case-panel { background: #f4f8ff; }
.sg-ppc-reference .sg-ppc-faq-panel { background: #fff; }
.sg-ppc-reference .sg-ppc-case-panel { position: relative; min-height: 330px; }
.sg-ppc-reference .sg-ppc-case-panel > *,
.sg-ppc-reference .sg-ppc-faq-panel > * { max-width: 560px; margin-right: auto; margin-left: auto; }
.sg-ppc-reference .sg-ppc-case-copy { width: 49%; margin-left: 0; }
.sg-ppc-reference .sg-ppc-case-panel > .sg-ppc-case-copy { margin-right: 0; margin-left: 0; }
.sg-ppc-reference .sg-ppc-case-copy h2 { margin-bottom: 12px; font-size: clamp(26px, 2.5vw, 35px); }
.sg-ppc-reference .sg-ppc-case-copy > p:not(.sg-ppc-kicker) { max-width: 365px; margin: 0; color: #7184a1; font-size: 11px; line-height: 1.65; }
.sg-ppc-reference .sg-ppc-case-stats { gap: 10px; margin: 20px 0 17px; }
.sg-ppc-reference .sg-ppc-case-stats b { min-width: 96px; padding: 11px 9px 10px; border: 1px solid rgba(147, 181, 232, .48); border-radius: 6px; background: rgba(255,255,255,.38); color: #1465e8; font-size: 18px; text-align: center; transition: transform .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease; }
.sg-ppc-reference .sg-ppc-case-stats b:hover { border-color: #fff; background: #fff; box-shadow: 0 12px 22px rgba(48, 96, 164, .16); transform: translateY(-5px) scale(1.04); }
.sg-ppc-reference .sg-ppc-case-stats small { margin-top: 4px; font-size: 7px; white-space: nowrap; }
.sg-ppc-reference .sg-ppc-laptop { position: absolute; top: 88px; right: 4%; width: min(43%, 235px); height: 136px; margin: 0; border-width: 6px; border-bottom-width: 12px; background: #1b3e73; transform: none; }
.sg-ppc-reference .sg-ppc-laptop-screen { position: absolute; top: 8px; right: 8px; bottom: 16px; left: 8px; overflow: hidden; border-radius: 3px; background: #fff; }
.sg-ppc-reference .ppc-laptop-top { display: flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px; background: #f2f6fb; color: #7386a2; font-size: 6px; }
.sg-ppc-reference .ppc-laptop-top i { position: static; width: 4px; height: 4px; border-radius: 50%; background: #c4d2e4; color: transparent; font-size: 0; }
.sg-ppc-reference .ppc-laptop-top b { margin-left: auto; color: #52709d; font-size: 7px; }
.sg-ppc-reference .ppc-laptop-dashboard { display: grid; grid-template-columns: 1.35fr .75fr; gap: 7px; padding: 9px; }
.sg-ppc-reference .ppc-laptop-chart,
.sg-ppc-reference .ppc-laptop-donut { min-height: 112px; padding: 7px; border: 1px solid #e5edf8; border-radius: 3px; }
.sg-ppc-reference .ppc-laptop-chart small,
.sg-ppc-reference .ppc-laptop-donut small { color: #8799b3; font-size: 6px; }
.sg-ppc-reference .ppc-laptop-chart strong { display: block; margin-top: 4px; color: #17396f; font-size: 13px; }
.sg-ppc-reference .ppc-laptop-chart > span { display: flex; height: 63px; align-items: end; gap: 3px; margin-top: 4px; padding: 0 2px; border-bottom: 1px solid #e4ebf5; background: repeating-linear-gradient(to bottom, transparent 0, transparent 19px, #edf3fb 20px, transparent 21px); }
.sg-ppc-reference .ppc-laptop-chart > span i { position: static; flex: 1; width: auto; height: auto; border: 0; border-radius: 2px 2px 0 0; background: #8eb8f4; color: transparent; font-size: 0; transform: none; }
.sg-ppc-reference .ppc-laptop-chart > span i:nth-child(1) { height: 17px; }.sg-ppc-reference .ppc-laptop-chart > span i:nth-child(2) { height: 25px; }.sg-ppc-reference .ppc-laptop-chart > span i:nth-child(3) { height: 22px; }.sg-ppc-reference .ppc-laptop-chart > span i:nth-child(4) { height: 36px; background: #4d8dec; }.sg-ppc-reference .ppc-laptop-chart > span i:nth-child(5) { height: 31px; }.sg-ppc-reference .ppc-laptop-chart > span i:nth-child(6) { height: 47px; background: #4d8dec; }.sg-ppc-reference .ppc-laptop-chart > span i:nth-child(7) { height: 58px; background: #1768ed; }
.sg-ppc-reference .ppc-laptop-donut > span { position: static; display: block; width: 48px; height: 48px; margin: 19px auto 7px; border: 9px solid #1768ed; border-right-color: #38bb8c; border-bottom-color: #6256cc; border-radius: 50%; transform: none; }
.sg-ppc-reference .ppc-laptop-donut b { display: block; color: #17396f; font-size: 11px; text-align: center; }
.sg-ppc-reference .sg-ppc-faq-wrap { margin: 0; padding: 0; }
.sg-ppc-reference .sg-ppc-faq-wrap .sg-ppc-kicker { margin-bottom: 15px; }
.sg-ppc-reference .sg-ppc-faq-wrap details { margin: 0 0 7px; border-color: #edf1f7; border-radius: 7px; background: #fff; box-shadow: 0 5px 14px rgba(38,78,132,.045); }
.sg-ppc-reference .sg-ppc-faq-wrap details:hover { border-color: #c5daf9; box-shadow: 0 9px 20px rgba(38,92,168,.11); transform: translateY(-2px); }

@media (max-width: 991px) {
    .sg-ppc-reference .sg-ppc-case-panel,
    .sg-ppc-reference .sg-ppc-faq-panel { padding-right: 30px; padding-left: 30px; }
    .sg-ppc-reference .sg-ppc-case-panel { min-height: 0; }
    .sg-ppc-reference .sg-ppc-case-panel > *,
    .sg-ppc-reference .sg-ppc-faq-panel > * { max-width: 620px; }
    .sg-ppc-reference .sg-ppc-case-copy { width: 100%; }
    .sg-ppc-reference .sg-ppc-laptop { position: relative; top: auto; right: auto; width: 300px; height: 175px; margin: 28px auto 0; }
}

@media (max-width: 767px) {
    .sg-ppc-reference .sg-ppc-case-panel,
    .sg-ppc-reference .sg-ppc-faq-panel { padding: 42px 20px; }
    .sg-ppc-reference .sg-ppc-case-stats { width: 100%; gap: 6px; }
    .sg-ppc-reference .sg-ppc-case-stats b { min-width: 0; flex: 1; padding-right: 5px; padding-left: 5px; font-size: 16px; }
    .sg-ppc-reference .sg-ppc-case-stats small { font-size: 6px; }
    .sg-ppc-reference .sg-ppc-laptop { width: 300px; max-width: 100%; height: 175px; }
}

/* Keep every repeated service grid visually level when copy wraps. */
.sg-content-service-grid article,
.sg-seo-ref-service-grid article,
.sg-social-service-grid article,
.sg-ppc-service-grid article,
.sg-content-benefits article,
.sg-seo-ref-benefits article,
.sg-social-why-grid article {
    box-sizing: border-box;
    height: 220px;
    min-height: 220px;
}

.sg-content-service-grid article > i,
.sg-seo-ref-service-grid article > i,
.sg-social-service-grid article > i,
.sg-ppc-service-grid article > i {
    font-size: 26px;
}

/* Keep service-page FAQs readable alongside the larger page typography. */
.sg-seo-ref-faq summary,
.sg-content-faq summary,
.sg-ppc-faq-wrap summary,
.sg-social-faq summary {
    font-size: 12px;
}

.sg-seo-ref-faq details p,
.sg-content-faq details p,
.sg-ppc-faq-wrap details p,
.sg-social-faq details p {
    font-size: 11px;
    line-height: 1.65;
}

@media (max-width: 767px) {
    .sg-content-service-grid article,
    .sg-seo-ref-service-grid article,
    .sg-social-service-grid article,
    .sg-ppc-service-grid article,
    .sg-content-benefits article,
    .sg-seo-ref-benefits article,
    .sg-social-why-grid article {
        height: 220px;
        min-height: 220px;
    }
}

/* Web design reference page. */
.sg-web-reference .sg-content-hero h1 span { color: #1768ed; }
.sg-web-reference .sg-content-hero-art::before { position: absolute; top: 0; right: 1%; width: 470px; height: 350px; border-radius: 45% 55% 50% 50%; background: radial-gradient(circle,rgba(75,167,255,.34),rgba(77,169,255,0) 68%); filter: blur(8px); content: ""; }
.web-browser { position: absolute; top: 28px; right: 30px; z-index: 2; width: 415px; height: 255px; overflow: hidden; border: 8px solid #18366d; border-radius: 13px; background: #fff; box-shadow: 0 22px 45px rgba(48,95,168,.22); transform: rotate(-2deg); }
.web-browser-body { height: calc(100% - 29px); background: #f8fbff; }.web-browser-nav { display: flex; align-items: center; gap: 18px; height: 35px; padding: 0 16px; border-bottom: 1px solid #e6edf8; color: #7184a1; font-size: 7px; }.web-browser-nav b { margin-right: auto; color: #1768ed; font-size: 8px; line-height: .85; }.web-browser-hero { padding: 24px 24px 0; }.web-browser-hero small { color: #1768ed; font-size: 7px; font-weight: 800; }.web-browser-hero h3 { margin: 6px 0; color: #0b2054; font-size: 22px; line-height: 1.03; }.web-browser-hero p { margin: 0; color: #7184a1; font-size: 8px; }.web-browser-hero button { margin-top: 12px; padding: 7px 10px; border: 0; border-radius: 4px; background: #1768ed; color: #fff; font-size: 7px; }.web-browser-chart { display: flex; height: 54px; align-items: end; gap: 6px; margin: 17px 24px 0; border-bottom: 1px solid #dce8fa; }.web-browser-chart i { flex: 1; border-radius: 2px 2px 0 0; background: #9ec3fa; }.web-browser-chart i:nth-child(1) { height: 15px; }.web-browser-chart i:nth-child(2) { height: 25px; }.web-browser-chart i:nth-child(3) { height: 20px; }.web-browser-chart i:nth-child(4) { height: 33px; background: #4e8dea; }.web-browser-chart i:nth-child(5) { height: 41px; background: #1768ed; }.web-browser-chart i:nth-child(6) { height: 48px; background: #1768ed; }
.web-browser-card { position: absolute; z-index: 3; display: flex; width: 142px; min-height: 82px; padding: 12px; flex-direction: column; border: 1px solid rgba(255,255,255,.95); border-radius: 8px; background: rgba(255,255,255,.95); box-shadow: 0 17px 29px rgba(53,99,164,.16); }.web-browser-card i { color: #1768ed; font-size: 20px; }.web-browser-card b { margin-top: 9px; color: #274574; font-size: 9px; }.web-browser-card small { margin-top: 4px; color: #7184a1; font-size: 7px; }.web-browser-card-left { bottom: 34px; left: 7%; transform: rotate(-8deg); }.web-browser-card-right { right: 0; bottom: 5px; transform: rotate(6deg); }.web-browser-card-right i { color: #28a97b; }
.sg-web-reference .sg-content-journey-grid { grid-template-columns: repeat(4,1fr); }.sg-web-reference .sg-content-journey-grid::before { right: 7%; left: 7%; }.sg-web-reference .sg-content-journey-grid article { min-height: 180px; }
.sg-web-before-after { position: relative; overflow: hidden; padding: 88px 0; background: #f4f8ff; }.sg-web-before-after::before { position: absolute; top: -75px; left: 3%; width: 190px; height: 120px; border: 1px solid rgba(37,111,237,.14); border-radius: 42px 7px 48px 12px; transform: rotate(-15deg); content: ""; }.sg-web-before-after .container { position: relative; z-index: 1; }.sg-web-before-after h2 { margin: 0 0 14px; color: #0b2054; font-size: clamp(26px,2.8vw,39px); font-weight: 800; letter-spacing: -.05em; line-height: 1.08; }.sg-web-before-after .col-lg-3 > p:not(.sg-content-kicker) { max-width: 245px; margin: 0; color: #7184a1; font-size: 11px; line-height: 1.7; }.sg-web-comparison { display: grid; grid-template-columns: 1fr 42px 1fr; align-items: center; gap: 10px; }.sg-web-comparison article { min-height: 190px; padding: 18px; border: 1px solid #d9e6fb; border-radius: 12px; background: #fff; box-shadow: 0 11px 24px rgba(39,90,160,.07); }.sg-web-comparison article > span { font-size: 8px; font-weight: 800; letter-spacing: .12em; }.web-before > span { color: #8799b3; }.web-after > span { color: #1768ed; }.sg-web-comparison article > div { margin-top: 18px; }.sg-web-comparison article i { display: inline-flex; width: 37px; height: 37px; align-items: center; justify-content: center; border-radius: 50%; background: #edf2f8; color: #8092ab; }.web-after i { background: #e8f1ff !important; color: #1768ed !important; }.sg-web-comparison h3 { margin: 12px 0 6px; font-size: 15px; }.sg-web-comparison p { margin: 0; color: #7184a1; font-size: 9px; line-height: 1.55; }.sg-web-comparison b { display: block; margin-top: 14px; color: #7184a1; font-size: 8px; }.web-after b { color: #1768ed !important; }.web-comparison-arrow { color: #1768ed; font-size: 20px; text-align: center; }
.sg-web-reference .sg-content-results { background: linear-gradient(105deg,#06164b,#071b68 52%,#0c51c8); }
@media (max-width: 991px) { .sg-web-reference .sg-content-hero-art::before { right: -20px; }.web-browser { right: 20px; }.sg-web-reference .sg-content-journey-grid { grid-template-columns: repeat(2,1fr); row-gap: 14px; }.sg-web-reference .sg-content-journey-grid::before { display: none; } }
@media (max-width: 767px) { .sg-web-reference .sg-content-hero-art::before { right: -35px; width: 360px; height: 290px; }.web-browser { top: 20px; right: 3%; width: 310px; height: 195px; }.web-browser-nav { gap: 8px; padding: 0 9px; }.web-browser-hero { padding: 15px 15px 0; }.web-browser-hero h3 { font-size: 17px; }.web-browser-chart { margin: 10px 15px 0; }.web-browser-card { width: 105px; min-height: 70px; padding: 9px; }.web-browser-card-left { bottom: 27px; left: 0; }.web-browser-card-right { right: 0; bottom: 0; }.sg-web-reference .sg-content-journey-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 26px; }.sg-web-reference .sg-content-journey-grid article { min-height: 125px; }.sg-web-before-after { padding: 68px 0; }.sg-web-comparison { grid-template-columns: 1fr; gap: 10px; margin-top: 26px; }.web-comparison-arrow { transform: rotate(90deg); }.sg-web-comparison article { min-height: 155px; } }