/**
 * Cam Site SEO page — modern redesign.
 * Scoped under .cam-site-page so it never leaks to other templates.
 * The existing CSS in style.css still loads first; selectors here raise
 * specificity via the .cam-site-page ancestor and intentionally override
 * spacing, color, shadow, and layout details to get a more modern look.
 */

/* =========================================================
   TOKENS (page-local)
   ========================================================= */
/* Override common.css:30 (.main{overflow:hidden}) — that rule establishes a
   scrolling context on the page wrapper, which invalidates position:sticky
   for every descendant. overflow:clip contains spill without the side effect. */
main.main.cam-site-page { overflow: clip; }

.cam-site-page {
    --cs-red: #ec2024;
    --cs-red-soft: #ff4b4f;
    --cs-red-deep: #b5141a;
    --cs-ink: #07121D;
    --cs-ink-2: #111b28;
    --cs-muted: #5a6473;
    --cs-line: #eceff3;
    --cs-card: #ffffff;
    --cs-chip-bg: rgba(236, 32, 36, 0.08);
    --cs-grad-red: linear-gradient(135deg, #ff5e62 0%, #ec2024 55%, #b5141a 100%);
    --cs-grad-dark: linear-gradient(135deg, #0b1722 0%, #162234 50%, #0b1722 100%);
    --cs-grad-soft: linear-gradient(135deg, #fff5f5 0%, #ffffff 60%, #fff0f0 100%);
    --cs-shadow-sm: 0 6px 18px rgba(7, 18, 29, 0.06);
    --cs-shadow-md: 0 20px 45px rgba(7, 18, 29, 0.10);
    --cs-shadow-lg: 0 30px 70px rgba(7, 18, 29, 0.18);
    --cs-shadow-red: 0 18px 40px rgba(236, 32, 36, 0.28);
    --cs-radius: 22px;
    --cs-radius-lg: 32px;
    font-feature-settings: "ss01" on, "cv11" on;
}

/* Kill the tiny jitter some browsers show on transformed cards */
.cam-site-page * { -webkit-font-smoothing: antialiased; }

/* =========================================================
   SECTION CHIP (reused by every section heading)
   ========================================================= */
.cam-site-page .cs-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--cs-chip-bg);
    color: var(--cs-red);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
    border: 1px solid rgba(236, 32, 36, 0.18);
}
.cam-site-page .cs-chip::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cs-red);
    box-shadow: 0 0 0 4px rgba(236,32,36,0.18);
    animation: csPulse 1.8s ease-in-out infinite;
}
.cam-site-page .cs-chip.cs-chip-dark {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.15);
}
@keyframes csPulse {
    0%,100% { box-shadow: 0 0 0 4px rgba(236,32,36,0.18); }
    50%     { box-shadow: 0 0 0 9px rgba(236,32,36,0.05); }
}

/* =========================================================
   HERO — LEAD CAPTURE (headline + contact form)
   ========================================================= */
.cam-site-page .cs-hero-lead {
    position: relative;
    min-height: 100vh;
    padding: 85px 0 100px;
    background: #07121D;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
}
.cam-site-page .cs-hero-lead-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    /* Slight dim so even before the overlay paints, text reads */
    filter: saturate(1.05);
}
.cam-site-page .cs-hero-lead-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(55% 75% at 15% 20%, rgba(236,32,36,0.40) 0%, rgba(0,0,0,0) 60%),
        radial-gradient(60% 70% at 90% 90%, rgba(255,90,95,0.25) 0%, rgba(0,0,0,0) 60%),
        linear-gradient(135deg, rgba(7,18,29,0.88) 0%, rgba(7,18,29,0.72) 50%, rgba(7,18,29,0.92) 100%);
    z-index: 1;
}
.cam-site-page .cs-hero-lead-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 1;
}
.cam-site-page .cs-hero-lead-blob--one {
    width: 420px; height: 420px;
    background: rgba(236,32,36,0.35);
    top: -120px; left: -120px;
    animation: csFloat 12s ease-in-out infinite;
}
.cam-site-page .cs-hero-lead-blob--two {
    width: 360px; height: 360px;
    background: rgba(55,129,226,0.20);
    bottom: -120px; right: -100px;
    animation: csFloat 14s ease-in-out infinite reverse;
}
@keyframes csFloat {
    0%,100% { transform: translate(0,0); }
    50%     { transform: translate(25px, -20px); }
}

.cam-site-page .cs-hero-lead .container {
    z-index: 2;
}

.cam-site-page .cs-hero-lead-copy .cs-chip { margin-bottom: 22px; }
.cam-site-page .cs-hero-lead-title {
    font-size: clamp(40px, 5.6vw, 76px);
    line-height: 1.03;
    letter-spacing: -0.02em;
    font-weight: 800;
    margin: 0 0 18px 0;
    background: linear-gradient(180deg, #fff 0%, #ffd9db 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cam-site-page .cs-hero-lead-lede {
    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: 500;
    color: #ffd9db;
    margin: 0 0 18px 0;
    line-height: 1.5;
}
.cam-site-page .cs-hero-lead-desc {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255,255,255,0.82);
    max-width: 620px;
    margin: 0 0 32px 0;
}
.cam-site-page .cs-hero-lead-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cam-site-page .cs-hero-lead-badges li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(8px);
    font-size: 14px;
    color: rgba(255,255,255,0.9);
}
.cam-site-page .cs-hero-lead-badges li strong {
    font-weight: 800;
    color: #ffd9db;
    font-size: 18px;
    line-height: 1;
}

/* Form card */
.cam-site-page .cs-hero-form-card {
    background: rgba(255,255,255,0.98);
    color: var(--cs-ink);
    border-radius: 24px;
    padding: 32px 30px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.5) inset;
    position: relative;
    overflow: hidden;
}
.cam-site-page .cs-hero-form-card::before {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; height: 5px;
    background: var(--cs-grad-red);
    border-radius: 24px 24px 0 0;
}
.cam-site-page .cs-hero-form-head { margin-bottom: 22px; }
.cam-site-page .cs-hero-form-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 6px 0;
    color: var(--cs-ink);
}
.cam-site-page .cs-hero-form-sub {
    font-size: 14px;
    color: var(--cs-muted);
    margin: 0;
    line-height: 1.5;
}
.cam-site-page .cs-hero-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.cam-site-page .cs-hero-form-field { margin-bottom: 12px; }
.cam-site-page .cs-hero-form-grid .cs-hero-form-field { margin-bottom: 0; }
.cam-site-page .cs-hero-form .contact-input {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--cs-line);
    border-radius: 12px;
    font-size: 14px;
    background: #fafbfc;
    color: var(--cs-ink);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    font-family: inherit;
}
.cam-site-page .cs-hero-form .contact-input:focus {
    outline: none;
    border-color: var(--cs-red);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(236,32,36,0.12);
}
.cam-site-page .cs-hero-form .contact-textarea {
    resize: vertical;
    min-height: 88px;
    line-height: 1.5;
}
.cam-site-page .cs-hero-form .error-message {
    display: block;
    margin-top: 4px;
    min-height: 1em;
    font-size: 12px;
}
.cam-site-page .cs-hero-form-submit {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 12px;
    border: 0;
    background: var(--cs-grad-red);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: var(--cs-shadow-red);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    margin-top: 6px;
}
.cam-site-page .cs-hero-form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 50px rgba(236,32,36,0.45);
    filter: brightness(1.05);
}
.cam-site-page .cs-hero-form-note {
    text-align: center;
    font-size: 12px;
    color: var(--cs-muted);
    margin: 14px 0 0 0;
}

/* =========================================================
   PARTNER STRIP
   ========================================================= */
.cam-site-page .partner-sec.bg-section-black {
    padding: 40px 0;
    background: #050d17;
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    overflow: hidden;
}
/* Enforce horizontal layout + logo size caps independent of Swiper state.
   The Swiper init sometimes lags the async-loaded swiper CSS, leaving slides
   stacked as blocks with native-size images — these rules prevent that. */
.cam-site-page .partner-sec .partner-slider {
    position: relative;
}
.cam-site-page .partner-sec .swiper-wrapper {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
}
.cam-site-page .partner-sec .swiper-slide {
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cam-site-page .partner-sec .swiper-slide .partner-box {
    padding: 0;
    width: auto;
    height: auto;
}
.cam-site-page .partner-sec .swiper-slide img {
    max-height: 34px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    filter: brightness(0) invert(1) opacity(0.55);
    transition: filter .3s ease, transform .3s ease;
}
.cam-site-page .partner-sec .swiper-slide img:hover {
    filter: brightness(0) invert(1) opacity(1);
    transform: scale(1.05);
}

/* =========================================================
   SERVICES GRID — broadcast / media-industry treatment
   Scanlines, signal rings, equalizer bars, viewfinder brackets
   ========================================================= */
.cam-site-page .cam-sites-services {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(45% 55% at 0% 10%,   rgba(255, 90, 130, 0.12) 0%, transparent 60%),
        radial-gradient(45% 55% at 100% 10%, rgba(236, 32, 36, 0.10)  0%, transparent 60%),
        radial-gradient(70% 80% at 50% 120%, rgba(255, 110, 150, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, #fffafa 0%, #fff4f5 50%, #fffafa 100%);
    isolation: isolate;
}

/* --- Floating soft blobs (stage-light glow) --- */
.cam-site-page .cs-svc-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.cam-site-page .cs-svc-blob--one {
    width: 440px; height: 440px;
    background: radial-gradient(closest-side, rgba(236,32,36,0.30), rgba(236,32,36,0) 70%);
    top: -140px; left: -140px;
    animation: csSvcFloat 14s ease-in-out infinite;
}
.cam-site-page .cs-svc-blob--two {
    width: 380px; height: 380px;
    background: radial-gradient(closest-side, rgba(255,110,150,0.32), rgba(255,110,150,0) 70%);
    bottom: -140px; right: -120px;
    animation: csSvcFloat 16s ease-in-out infinite reverse;
}
@keyframes csSvcFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(30px, -20px) scale(1.07); }
}

/* --- Scanlines (CRT / broadcast feel) --- */
.cam-site-page .cs-svc-scanlines {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        180deg,
        rgba(236, 32, 36, 0.035) 0px,
        rgba(236, 32, 36, 0.035) 1px,
        transparent 1px,
        transparent 4px
    );
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

/* --- Concentric signal rings (broadcast wave) top-right --- */
.cam-site-page .cs-svc-rings {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 420px;
    height: 420px;
    background-image:
        radial-gradient(circle at 50% 50%, transparent 0, transparent 38px, rgba(236,32,36,0.22) 39px, rgba(236,32,36,0.22) 40px, transparent 41px),
        radial-gradient(circle at 50% 50%, transparent 0, transparent 78px, rgba(236,32,36,0.16) 79px, rgba(236,32,36,0.16) 80px, transparent 81px),
        radial-gradient(circle at 50% 50%, transparent 0, transparent 128px, rgba(236,32,36,0.12) 129px, rgba(236,32,36,0.12) 130px, transparent 131px),
        radial-gradient(circle at 50% 50%, transparent 0, transparent 178px, rgba(236,32,36,0.08) 179px, rgba(236,32,36,0.08) 180px, transparent 181px);
    mask-image: radial-gradient(circle at 50% 50%, #000 50%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 50%, transparent 72%);
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
    animation: csSvcRingsPulse 6s ease-in-out infinite;
}
@keyframes csSvcRingsPulse {
    0%, 100% { transform: scale(1);   opacity: 0.7; }
    50%      { transform: scale(1.04); opacity: 0.9; }
}

/* --- Camera viewfinder brackets (corners) --- */
.cam-site-page .cs-svc-bracket {
    position: absolute;
    width: 80px;
    height: 80px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}
.cam-site-page .cs-svc-bracket::before,
.cam-site-page .cs-svc-bracket::after {
    content: "";
    position: absolute;
    background: linear-gradient(90deg, #ff6e96, #ec2024);
    border-radius: 2px;
}
.cam-site-page .cs-svc-bracket--tl {
    top: 34px;
    left: 34px;
}
.cam-site-page .cs-svc-bracket--tl::before {
    top: 0; left: 0;
    width: 26px; height: 3px;
}
.cam-site-page .cs-svc-bracket--tl::after {
    top: 0; left: 0;
    width: 3px; height: 26px;
}
.cam-site-page .cs-svc-bracket--br {
    bottom: 34px;
    right: 34px;
}
.cam-site-page .cs-svc-bracket--br::before {
    bottom: 0; right: 0;
    width: 26px; height: 3px;
}
.cam-site-page .cs-svc-bracket--br::after {
    bottom: 0; right: 0;
    width: 3px; height: 26px;
}

/* --- Equalizer bars (audio waveform feel) bottom-left --- */
.cam-site-page .cs-svc-eq {
    position: absolute;
    bottom: 40px;
    left: 34px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 46px;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}
.cam-site-page .cs-svc-eq span {
    display: block;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ff6e96 0%, #ec2024 100%);
    animation: csSvcEq 1.4s ease-in-out infinite;
}
.cam-site-page .cs-svc-eq span:nth-child(1)  { animation-delay: 0s;    }
.cam-site-page .cs-svc-eq span:nth-child(2)  { animation-delay: 0.1s;  }
.cam-site-page .cs-svc-eq span:nth-child(3)  { animation-delay: 0.2s;  }
.cam-site-page .cs-svc-eq span:nth-child(4)  { animation-delay: 0.3s;  }
.cam-site-page .cs-svc-eq span:nth-child(5)  { animation-delay: 0.15s; }
.cam-site-page .cs-svc-eq span:nth-child(6)  { animation-delay: 0.25s; }
.cam-site-page .cs-svc-eq span:nth-child(7)  { animation-delay: 0.05s; }
.cam-site-page .cs-svc-eq span:nth-child(8)  { animation-delay: 0.35s; }
.cam-site-page .cs-svc-eq span:nth-child(9)  { animation-delay: 0.2s;  }
.cam-site-page .cs-svc-eq span:nth-child(10) { animation-delay: 0.1s;  }
.cam-site-page .cs-svc-eq span:nth-child(11) { animation-delay: 0.3s;  }
.cam-site-page .cs-svc-eq span:nth-child(12) { animation-delay: 0s;    }
@keyframes csSvcEq {
    0%, 100% { height: 20%; }
    50%      { height: 100%; }
}

/* --- Live "On Air" indicator pill, top-right area --- */
.cam-site-page .cs-svc-live {
    position: absolute;
    top: 38px;
    right: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 12px;
    background: rgba(236, 32, 36, 0.08);
    border: 1px solid rgba(236, 32, 36, 0.25);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d4122a;
    backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: 1;
}
.cam-site-page .cs-svc-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ec2024;
    box-shadow: 0 0 0 0 rgba(236, 32, 36, 0.5);
    animation: csSvcLivePulse 1.8s ease-in-out infinite;
}
@keyframes csSvcLivePulse {
    0%   { box-shadow: 0 0 0 0   rgba(236, 32, 36, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(236, 32, 36, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(236, 32, 36, 0);    }
}

/* Responsive: hide heavy decorative elements on small screens */
@media (max-width: 768px) {
    .cam-site-page .cs-svc-rings,
    .cam-site-page .cs-svc-bracket,
    .cam-site-page .cs-svc-eq,
    .cam-site-page .cs-svc-live { display: none; }
}

.cam-site-page .cam-sites-services .container { z-index: 1; }
.cam-site-page .cam-sites-services .heading-row { margin-bottom: 70px; }

/* Chip placed inline above services title */
.cam-site-page .cs-chip.cs-chip--services {
    background: linear-gradient(135deg, rgba(255, 110, 150, 0.14), rgba(236,32,36, 0.10));
    color: #d4122a;
    border-color: rgba(236, 32, 36, 0.25);
}

/* Headline: gradient clip + rising underline */
.cam-site-page .cs-svc-heading h2 {
    background: linear-gradient(95deg, #0b1722 0%, #111b28 40%, #ec2024 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    letter-spacing: -0.01em;
    position: relative;
    display: inline-block;
}
.cam-site-page .cs-svc-heading h2::after {
    content: "";
    display: block;
    width: 80px; height: 4px;
    margin-top: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ff6e96 0%, #ec2024 100%);
    box-shadow: 0 8px 20px rgba(236,32,36,0.35);
}

/* Card grid — numbered via CSS counter */
.cam-site-page .cam-sites-services .content-row .row {
    counter-reset: cam-svc-count;
    gap: 0;
    border-radius: var(--cs-radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow:
        0 30px 60px -20px rgba(236, 32, 36, 0.18),
        0 0 0 1px rgba(236, 32, 36, 0.18);
    position: relative;
}

.cam-site-page .cam-site-service-box {
    counter-increment: cam-svc-count;
    padding: 52px 32px 44px !important;
    min-height: 330px;
    border: 0 !important;
    border-right: 1px solid rgba(236, 32, 36, 0.10) !important;
    border-bottom: 1px solid rgba(236, 32, 36, 0.10) !important;
    position: relative;
    background: #fff;
    transition: transform .45s cubic-bezier(.2,.7,.3,1), color .3s ease;
    overflow: hidden;
}

/* Card hover gradient fill — sits ABOVE the card's white bg, BELOW content */
.cam-site-page .cam-site-service-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(255,110,150,0.45), transparent 70%),
        linear-gradient(135deg, #ec2024 0%, #ff3a6a 55%, #ff6e96 100%);
    opacity: 0;
    transform: scale(0.85);
    transform-origin: top right;
    transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.3,1);
    z-index: 0;
    pointer-events: none;
}

/* Numbered watermark top-right — gradient fill; stays above hover bg */
.cam-site-page .cam-site-service-box::after {
    content: counter(cam-svc-count, decimal-leading-zero);
    position: absolute;
    top: 16px;
    right: 24px;
    font-size: 46px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(180deg, #ffb3c4 0%, #ec2024 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.7;
    transition: opacity .35s ease, transform .35s ease, background .35s ease;
    pointer-events: none;
    z-index: 1;
}

/* Content above everything */
.cam-site-page .cam-site-service-box h3,
.cam-site-page .cam-site-service-box p {
    position: relative;
    z-index: 2;
}

/* Red-to-pink dot before the card title */
.cam-site-page .cam-site-service-box h3 {
    padding-left: 22px;
}
.cam-site-page .cam-site-service-box h3::before {
    content: "";
    position: absolute;
    left: 0; top: 10px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6e96, #ec2024);
    box-shadow: 0 0 0 4px rgba(236, 32, 36, 0.14);
    transition: box-shadow .35s ease, transform .35s ease, background .35s ease;
}

/* Hover states.
   NOTE: style.css:4894 applies background-color: var(--black-bg) on hover for
   this class — we override to transparent so our ::before gradient is visible. */
.cam-site-page .cam-site-service-box:hover {
    transform: translateY(-6px);
    background: transparent !important;
}
.cam-site-page .cam-site-service-box:hover::before {
    opacity: 1;
    transform: scale(1);
}
.cam-site-page .cam-site-service-box:hover::after {
    /* Switch gradient fill to a white fade so the number pops on red */
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.45) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.95;
    transform: translateY(-2px);
}
.cam-site-page .cam-site-service-box:hover h3,
.cam-site-page .cam-site-service-box:hover p { color: #fff !important; }
.cam-site-page .cam-site-service-box:hover h3::before {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28);
    transform: scale(1.15);
}

/* Responsive: smaller watermark on tight screens */
@media (max-width: 576px) {
    .cam-site-page .cam-site-service-box::after { font-size: 34px; top: 12px; right: 18px; }
}

/* =========================================================
   TRAFFIC & REVENUE — IMAGE HERO #1
   ========================================================= */
.cam-site-page .traffic-revenue-machine {
    padding: 120px 0;
    background: var(--cs-grad-dark);
    position: relative;
    overflow: hidden;
}
.cam-site-page .traffic-revenue-machine::before,
.cam-site-page .traffic-revenue-machine::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
.cam-site-page .traffic-revenue-machine::before {
    width: 460px; height: 460px;
    background: rgba(236,32,36,0.25);
    top: -120px; left: -120px;
}
.cam-site-page .traffic-revenue-machine::after {
    width: 360px; height: 360px;
    background: rgba(55,129,226,0.18);
    bottom: -140px; right: -100px;
}
.cam-site-page .traffic-revenue-machine .heading-row { margin-bottom: 70px; }

.cam-site-page .cs-image-frame {
    position: relative;
    border-radius: var(--cs-radius-lg);
    padding: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: var(--cs-shadow-lg);
}
.cam-site-page .cs-image-frame img {
    border-radius: calc(var(--cs-radius-lg) - 10px);
    width: 100%;
    display: block;
}
.cam-site-page .cs-image-frame::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: var(--cs-radius-lg);
    background: linear-gradient(120deg, rgba(236,32,36,0.5), transparent 40%, transparent 60%, rgba(236,32,36,0.5));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    padding: 1px;
    pointer-events: none;
}

/* Floating stat cards on images */
.cam-site-page .cs-float-stat {
    position: absolute;
    background: #fff;
    color: var(--cs-ink);
    padding: 14px 18px;
    border-radius: 16px;
    box-shadow: var(--cs-shadow-md);
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 180px;
    z-index: 3;
}
.cam-site-page .cs-float-stat .cs-float-num {
    font-size: 26px;
    font-weight: 800;
    color: var(--cs-red);
    line-height: 1;
}
.cam-site-page .cs-float-stat .cs-float-label {
    font-size: 13px;
    color: var(--cs-muted);
    line-height: 1.3;
}
.cam-site-page .cs-float-stat.cs-float-tl { top: -24px; left: -20px; }
.cam-site-page .cs-float-stat.cs-float-br { bottom: -24px; right: -20px; }
.cam-site-page .cs-float-stat.cs-float-tr { top: -24px; right: -20px; }
.cam-site-page .cs-float-stat.cs-float-bl { bottom: -24px; left: -20px; }

.cam-site-page .traffic-revenue-content p { font-size: 17px; line-height: 1.9; }
.cam-site-page .traffic-revenue-action-btn {
    padding: 14px 30px !important;
    border-radius: 999px !important;
    box-shadow: var(--cs-shadow-red);
    transition: transform .25s ease, box-shadow .25s ease;
}
.cam-site-page .traffic-revenue-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 50px rgba(236,32,36,0.45);
}

/* =========================================================
   TRUSTED BY GIANTS (tech partners)
   ========================================================= */
.cam-site-page .trusted-by-giants-sec {
    padding: 110px 0;
    background:
        radial-gradient(30% 40% at 0% 100%, rgba(236,32,36,0.04), transparent 70%),
        #fafbfc;
}
.cam-site-page .trusted-by-giants-sec .heading-row { margin-bottom: 60px; }

/* =========================================================
   CAM SITE BENEFITS SLIDER — film / recording motif
   ========================================================= */
.cam-site-page .cam-site-benefits-sec {
    padding: 110px 0;
    position: relative;
    background:
        radial-gradient(55% 65% at 90% 10%, rgba(236, 32, 36, 0.10) 0%, transparent 60%),
        radial-gradient(45% 55% at 0% 85%,  rgba(255, 110, 150, 0.14) 0%, transparent 60%),
        linear-gradient(180deg, #fffafa 0%, #fff4f5 55%, #fff8f8 100%);
    isolation: isolate;
}
.cam-site-page .cam-site-benefits-sec .container { z-index: 1; }

/* --- Soft stage blobs --- */
.cam-site-page .cs-ben-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.cam-site-page .cs-ben-blob--one {
    width: 460px; height: 460px;
    background: radial-gradient(closest-side, rgba(236,32,36,0.30), rgba(236,32,36,0) 70%);
    top: -160px; right: -140px;
    animation: csSvcFloat 15s ease-in-out infinite;
}
.cam-site-page .cs-ben-blob--two {
    width: 380px; height: 380px;
    background: radial-gradient(closest-side, rgba(255,110,150,0.32), rgba(255,110,150,0) 70%);
    bottom: -140px; left: -120px;
    animation: csSvcFloat 17s ease-in-out infinite reverse;
}

/* --- Film strips top and bottom (perforated film border) --- */
.cam-site-page .cs-ben-filmstrip {
    position: absolute;
    left: 0;
    right: 0;
    height: 22px;
    background:
        linear-gradient(90deg, rgba(236,32,36,0.25), rgba(255,110,150,0.25)) padding-box,
        repeating-linear-gradient(
            90deg,
            #ec2024 0px, #ec2024 10px,
            transparent 10px, transparent 30px
        );
    -webkit-mask: repeating-linear-gradient(
        90deg,
        #000 0px, #000 10px,
        transparent 10px, transparent 30px
    );
            mask: repeating-linear-gradient(
        90deg,
        #000 0px, #000 10px,
        transparent 10px, transparent 30px
    );
    opacity: 0.28;
    pointer-events: none;
    z-index: 0;
}
.cam-site-page .cs-ben-filmstrip--top    { top: 20px;    }
.cam-site-page .cs-ben-filmstrip--bottom { bottom: 20px; }

/* --- Animated signal wave across the middle background --- */
.cam-site-page .cs-ben-wave {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 160px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.45;
    mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.cam-site-page .cs-ben-wave svg {
    width: 100%;
    height: 100%;
    display: block;
    animation: csBenWave 8s ease-in-out infinite;
}
@keyframes csBenWave {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-60px); }
}

/* --- Recording indicator (top-right) with running timecode --- */
.cam-site-page .cs-ben-rec {
    position: absolute;
    top: 36px;
    right: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(7, 18, 29, 0.05);
    border: 1px solid rgba(236, 32, 36, 0.25);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cs-ink);
    backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: 1;
}
.cam-site-page .cs-ben-rec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ec2024;
    animation: csBenRec 1.2s ease-in-out infinite;
}
.cam-site-page .cs-ben-rec-text { color: #d4122a; }
.cam-site-page .cs-ben-rec-time {
    font-variant-numeric: tabular-nums;
    color: var(--cs-muted);
    font-weight: 600;
    letter-spacing: 0.08em;
}
@keyframes csBenRec {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%      { opacity: 0.25; transform: scale(0.85); }
}

/* Responsive */
@media (max-width: 768px) {
    .cam-site-page .cs-ben-rec,
    .cam-site-page .cs-ben-filmstrip,
    .cam-site-page .cs-ben-wave { display: none; }
}
.cam-site-page .cam-site-benefits-box {
    min-height: 360px !important;
    border: 1px solid var(--cs-line) !important;
    border-radius: 24px !important;
    padding: 36px 28px !important;
    text-align: left !important;
    background: #fff !important;
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
    position: relative;
    overflow: hidden;
}
.cam-site-page .cam-site-benefits-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: var(--cs-grad-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}
.cam-site-page .cam-site-benefits-box:hover {
    transform: translateY(-8px);
    box-shadow: var(--cs-shadow-md);
    border-color: transparent !important;
}
.cam-site-page .cam-site-benefits-box:hover::before { transform: scaleX(1); }
.cam-site-page .cam-site-benefits-box .cam-site-benefit-icon {
    margin-bottom: 22px !important;
    width: 74px; height: 74px;
    border-radius: 18px;
    background: var(--cs-grad-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .4s ease;
}
.cam-site-page .cam-site-benefits-box:hover .cam-site-benefit-icon { transform: rotate(-6deg) scale(1.05); }
.cam-site-page .cam-site-benefits-box .cam-site-benefit-icon img { width: 40px; height: 40px; }
.cam-site-page .cam-site-benefits-box .cam-site-benefits-content { text-align: left; }
.cam-site-page .cam-site-benefits-slider-swiper-prev,
.cam-site-page .cam-site-benefits-slider-swiper-next {
    top: 55% !important;
    box-shadow: var(--cs-shadow-sm);
    transition: background .25s ease, transform .25s ease;
}
.cam-site-page .cam-site-benefits-slider-swiper-prev:hover,
.cam-site-page .cam-site-benefits-slider-swiper-next:hover {
    background: var(--cs-red) !important;
    transform: scale(1.05);
}
.cam-site-page .cam-site-benefits-slider-swiper-prev:hover img,
.cam-site-page .cam-site-benefits-slider-swiper-next:hover img {
    filter: brightness(0) invert(1);
}

/* =========================================================
   SEO SOLUTION (cs-sol-v2) — "channel guide" layout
   Left: sticky studio-monitor feature card
   Right: numbered horizontal-row list (like a TV program guide)
   ========================================================= */
.cam-site-page .seo-solution.cs-sol-v2 {
    padding: 130px 0;
    background:
        radial-gradient(40% 50% at 0% 0%,   rgba(236, 32, 36, 0.22), transparent 60%),
        radial-gradient(40% 50% at 100% 100%, rgba(255, 110, 150, 0.18), transparent 60%),
        var(--cs-grad-dark);
    position: relative;
    /* overflow: clip keeps the blur-blob spill contained without creating a
       scroll/overflow context — position:sticky on the left feature panel
       still works. overflow:hidden would kill sticky. */
    overflow: clip;
    isolation: isolate;
}

/* Noise/grain texture overlay */
.cam-site-page .cs-sol-noise {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 40px);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
}
.cam-site-page .cs-sol-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}
.cam-site-page .cs-sol-glow--one {
    width: 420px; height: 420px;
    background: rgba(236,32,36,0.35);
    top: -140px; left: -120px;
}
.cam-site-page .cs-sol-glow--two {
    width: 360px; height: 360px;
    background: rgba(255,110,150,0.25);
    bottom: -140px; right: -80px;
}

.cam-site-page .seo-solution.cs-sol-v2 .container { z-index: 1; }

/* Header */
.cam-site-page .cs-sol-head {
    margin-bottom: 70px;
    text-align: center;
}
.cam-site-page .cs-sol-chip { margin: 0 auto 18px; }
.cam-site-page .cs-sol-title {
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
    background: linear-gradient(180deg, #fff 0%, #ffd9db 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Two-column grid: 5fr sticky feature | 7fr channels */
.cam-site-page .cs-sol-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px;
    align-items: start;
}

/* ===== Left: studio monitor feature ===== */
.cam-site-page .cs-sol-feature {
    position: sticky;
    top: 100px;
    padding: 36px 32px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(236,32,36,0.22) 0%, rgba(236,32,36,0.04) 100%),
        rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow:
        0 40px 80px -30px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
}

.cam-site-page .cs-sol-monitor {
    padding: 14px 16px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    margin-bottom: 24px;
}
.cam-site-page .cs-sol-monitor-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.75);
}
.cam-site-page .cs-sol-monitor-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ec2024;
    animation: csBenRec 1.4s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(236,32,36,0.7);
}
.cam-site-page .cs-sol-monitor-label { color: #ffb3bd; }
.cam-site-page .cs-sol-monitor-freq {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.55);
}
.cam-site-page .cs-sol-monitor-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
}
.cam-site-page .cs-sol-monitor-bars span {
    flex: 1;
    border-radius: 2px;
    background: linear-gradient(180deg, #ff6e96, #ec2024);
    animation: csSvcEq 1.2s ease-in-out infinite;
}
.cam-site-page .cs-sol-monitor-bars span:nth-child(1)  { animation-delay: 0s;    }
.cam-site-page .cs-sol-monitor-bars span:nth-child(2)  { animation-delay: 0.1s;  }
.cam-site-page .cs-sol-monitor-bars span:nth-child(3)  { animation-delay: 0.2s;  }
.cam-site-page .cs-sol-monitor-bars span:nth-child(4)  { animation-delay: 0.15s; }
.cam-site-page .cs-sol-monitor-bars span:nth-child(5)  { animation-delay: 0.25s; }
.cam-site-page .cs-sol-monitor-bars span:nth-child(6)  { animation-delay: 0.05s; }
.cam-site-page .cs-sol-monitor-bars span:nth-child(7)  { animation-delay: 0.3s;  }
.cam-site-page .cs-sol-monitor-bars span:nth-child(8)  { animation-delay: 0.18s; }
.cam-site-page .cs-sol-monitor-bars span:nth-child(9)  { animation-delay: 0.08s; }
.cam-site-page .cs-sol-monitor-bars span:nth-child(10) { animation-delay: 0.22s; }
.cam-site-page .cs-sol-monitor-bars span:nth-child(11) { animation-delay: 0.12s; }
.cam-site-page .cs-sol-monitor-bars span:nth-child(12) { animation-delay: 0.28s; }
.cam-site-page .cs-sol-monitor-bars span:nth-child(13) { animation-delay: 0s;    }
.cam-site-page .cs-sol-monitor-bars span:nth-child(14) { animation-delay: 0.18s; }
.cam-site-page .cs-sol-monitor-bars span:nth-child(15) { animation-delay: 0.26s; }

.cam-site-page .cs-sol-feature-desc {
    color: rgba(255,255,255,0.88);
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 26px;
}
.cam-site-page .cs-sol-feature-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    margin-bottom: 26px;
}
.cam-site-page .cs-sol-feature-stats > div strong {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    background: linear-gradient(180deg, #fff, #ffb3bd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 6px;
}
.cam-site-page .cs-sol-feature-stats > div span {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    line-height: 1.4;
}
.cam-site-page .cs-sol-feature-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border: 0;
    border-radius: 12px;
    background: var(--cs-grad-red);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: var(--cs-shadow-red);
    transition: transform .2s ease, box-shadow .2s ease;
}
.cam-site-page .cs-sol-feature-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 50px rgba(236,32,36,0.45);
}

/* ===== Right: channel guide (numbered horizontal rows) ===== */
.cam-site-page .cs-sol-channels {
    counter-reset: cs-sol-n;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}

.cam-site-page .cs-sol-channel {
    counter-increment: cs-sol-n;
    position: relative;
    display: grid;
    grid-template-columns: 80px 56px 1fr 36px;
    gap: 20px;
    align-items: center;
    padding: 22px 26px;
    border-top: 1px solid rgba(255,255,255,0.06);
    transition: background .35s ease;
    cursor: default;
}
.cam-site-page .cs-sol-channel:first-child { border-top: 0; }

/* Left accent bar that scales on hover */
.cam-site-page .cs-sol-channel::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--cs-grad-red);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .35s ease;
}

.cam-site-page .cs-sol-channel-num {
    font-size: 44px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,110,150,0.3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
    transition: background .35s ease, transform .35s ease;
}
.cam-site-page .cs-sol-channel-num::before {
    content: counter(cs-sol-n, decimal-leading-zero);
}

.cam-site-page .cs-sol-channel-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(236,32,36,0.15);
    border: 1px solid rgba(236,32,36,0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
.cam-site-page .cs-sol-channel-icon img {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1);
    transition: transform .35s ease;
}

.cam-site-page .cs-sol-channel-body { min-width: 0; }
.cam-site-page .cs-sol-channel-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.3;
    letter-spacing: -0.005em;
    transition: color .35s ease;
}
.cam-site-page .cs-sol-channel-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cam-site-page .cs-sol-channel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.04);
    transition: transform .35s ease, color .35s ease, background .35s ease;
}

/* Hover: red/pink wash + accent bar + icon glow */
.cam-site-page .cs-sol-channel:hover {
    background: linear-gradient(90deg, rgba(236,32,36,0.18) 0%, rgba(236,32,36,0.04) 60%, transparent 100%);
}
.cam-site-page .cs-sol-channel:hover::before { transform: scaleY(1); }
.cam-site-page .cs-sol-channel:hover .cs-sol-channel-num {
    background: linear-gradient(180deg, #fff, #ff6e96);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transform: translateX(4px);
}
.cam-site-page .cs-sol-channel:hover .cs-sol-channel-icon {
    background: var(--cs-grad-red);
    border-color: transparent;
    transform: scale(1.05);
}
.cam-site-page .cs-sol-channel:hover .cs-sol-channel-icon img { transform: rotate(-6deg); }
.cam-site-page .cs-sol-channel:hover .cs-sol-channel-arrow {
    color: #fff;
    background: var(--cs-grad-red);
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 991px) {
    .cam-site-page .cs-sol-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .cam-site-page .cs-sol-feature {
        position: relative;
        top: 0;
    }
}
@media (max-width: 576px) {
    .cam-site-page .cs-sol-channel {
        grid-template-columns: 52px 48px 1fr;
        gap: 14px;
        padding: 18px 18px;
    }
    .cam-site-page .cs-sol-channel-arrow { display: none; }
    .cam-site-page .cs-sol-channel-num { font-size: 32px; }
    .cam-site-page .cs-sol-feature { padding: 26px 22px; }
    .cam-site-page .cs-sol-feature-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}

/* =========================================================
   BUSINESS VISIBILITY — IMAGE HERO #2
   ========================================================= */
.cam-site-page .business-visibilty {
    padding: 110px 0;
    background: #fff;
    position: relative;
}
.cam-site-page .business-visibilty .business-wrapper {
    padding: 70px 60px !important;
    border-radius: var(--cs-radius-lg) !important;
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(236,32,36,0.06), transparent 65%),
        #fff !important;
    border: 1px solid var(--cs-line);
    box-shadow: var(--cs-shadow-md);
    position: relative;
}
.cam-site-page .business-visibilty .business-wrapper::before {
    content: "";
    position: absolute;
    top: -80px; right: -80px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(236,32,36,0.18), transparent);
    filter: blur(20px);
}
.cam-site-page .business-visibilty .business-visibilty-heading h3 {
    font-size: clamp(30px, 3.2vw, 46px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em;
}
.cam-site-page .business-visibilty .business-visibilty-btn {
    padding: 14px 30px !important;
    border-radius: 999px !important;
    box-shadow: var(--cs-shadow-red);
    transition: transform .25s ease, box-shadow .25s ease;
}
.cam-site-page .business-visibilty .business-visibilty-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 50px rgba(236,32,36,0.45);
}
.cam-site-page .business-visibilty .business-visibilty-img {
    position: relative;
}
.cam-site-page .business-visibilty .business-visibilty-img img {
    border-radius: var(--cs-radius-lg) !important;
    box-shadow: var(--cs-shadow-lg);
    position: relative;
    z-index: 2;
}
.cam-site-page .business-visibilty .business-visibilty-img::before {
    content: "";
    position: absolute;
    inset: 20px -20px -20px 20px;
    border-radius: var(--cs-radius-lg);
    background: var(--cs-grad-red);
    z-index: 1;
    opacity: 0.95;
}

/* =========================================================
   WHY CHOOSE — NUMBERED CARDS
   ========================================================= */
.cam-site-page .why-choose-seo-sec {
    padding: 120px 0;
    background:
        radial-gradient(40% 60% at 0% 50%, rgba(236,32,36,0.04), transparent 70%),
        #fafbfc;
}
.cam-site-page .why-choose-seo-sec .heading-row { margin-bottom: 60px; }
.cam-site-page .why-choose-seo-sec .content-row { gap: 0; }
.cam-site-page .why-choose-box {
    border: 1px solid var(--cs-line) !important;
    border-radius: 24px !important;
    padding: 40px 32px !important;
    min-height: 320px !important;
    background: #fff !important;
    transition: transform .4s ease, background .4s ease, box-shadow .4s ease, border-color .4s ease;
    overflow: hidden;
    position: relative;
    margin: 8px;
}
.cam-site-page .why-choose-box::after {
    content: "";
    position: absolute;
    inset: auto -30% -50% auto;
    width: 240px; height: 240px;
    background: radial-gradient(closest-side, rgba(236,32,36,0.25), transparent 70%);
    opacity: 0;
    transition: opacity .45s ease;
}
.cam-site-page .why-choose-box:hover {
    background: var(--cs-grad-dark) !important;
    transform: translateY(-6px);
    box-shadow: var(--cs-shadow-lg);
    border-color: transparent !important;
}
.cam-site-page .why-choose-box:hover::after { opacity: 1; }
.cam-site-page .why-choose-count span {
    font-size: 84px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    background: linear-gradient(180deg, #ffd5d6 0%, #ec2024 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-stroke: 0 !important;
}

/* =========================================================
   STREAMING PROCESS — TIMELINE
   ========================================================= */
.cam-site-page .our-proven-adult-streaming-sec {
    padding: 120px 0 100px;
    background: var(--cs-grad-dark);
    position: relative;
    overflow: hidden;
}
.cam-site-page .our-proven-adult-streaming-sec::before {
    content: "";
    position: absolute;
    top: 10%; left: -100px;
    width: 360px; height: 360px;
    border-radius: 50%;
    background: rgba(236,32,36,0.15);
    filter: blur(80px);
}
.cam-site-page .our-proven-adult-streaming-sec .streaming-heading h3 {
    font-size: clamp(34px, 4vw, 50px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em;
}
.cam-site-page .our-proven-adult-streaming-sec .streaming-image img {
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-lg);
}
.cam-site-page .adult-streaming-inner-box {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: var(--cs-radius) !important;
    margin-right: 20px;
    padding: 40px 34px !important;
    height: 280px !important;
    position: relative;
    transition: background .35s ease, transform .35s ease;
}
.cam-site-page .adult-streaming-inner-box::before {
    content: "";
    position: absolute;
    top: 22px; right: 22px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--cs-red);
    box-shadow: 0 0 0 6px rgba(236,32,36,0.15);
}
.cam-site-page .adult-streaming-inner-box:hover {
    background: rgba(236,32,36,0.14) !important;
    transform: translateY(-6px);
}
.cam-site-page .adult-streaming-slider-swiper-prev,
.cam-site-page .adult-streaming-slider-swiper-next {
    transition: background .25s ease, transform .25s ease;
}
.cam-site-page .adult-streaming-slider-swiper-prev:hover,
.cam-site-page .adult-streaming-slider-swiper-next:hover {
    background: var(--cs-red) !important;
    transform: scale(1.05);
}
.cam-site-page .adult-streaming-slider-swiper-prev:hover img,
.cam-site-page .adult-streaming-slider-swiper-next:hover img {
    filter: brightness(0) invert(1);
}

/* =========================================================
   DRIVE MORE TRAFFIC — IMAGE HERO #3
   ========================================================= */
.cam-site-page .drive-more-traffic {
    padding: 120px 0;
    background:
        radial-gradient(40% 60% at 100% 0%, rgba(236,32,36,0.06), transparent 70%),
        #fff;
    position: relative;
    overflow: hidden;
}
.cam-site-page .drive-more-traffic .drive-image {
    position: relative;
}
.cam-site-page .drive-more-traffic .drive-image img {
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-lg);
    position: relative;
    z-index: 2;
}
.cam-site-page .drive-more-traffic .drive-image::before {
    content: "";
    position: absolute;
    inset: -30px -30px auto auto;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: var(--cs-grad-red);
    filter: blur(40px);
    opacity: 0.5;
    z-index: 1;
}
.cam-site-page .drive-more-traffic .drive-image::after {
    content: "";
    position: absolute;
    left: -30px; bottom: -30px;
    width: 150px; height: 150px;
    border-radius: 24px;
    border: 2px solid var(--cs-red);
    z-index: 1;
    opacity: 0.45;
}
.cam-site-page .drive-more-traffic .drive-more-content h3 {
    font-size: clamp(32px, 3.6vw, 50px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em;
}
.cam-site-page .drive-more-traffic .drive-more-btn {
    padding: 14px 30px !important;
    border-radius: 999px !important;
    box-shadow: var(--cs-shadow-red);
    transition: transform .25s ease, box-shadow .25s ease;
}
.cam-site-page .drive-more-traffic .drive-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 50px rgba(236,32,36,0.45);
}

/* =========================================================
   INDUSTRIES SOLUTION (cs-ind-v2) — CSS-only tabbed showcase
   Hidden radio state swaps the active tab + panel with no JS
   ========================================================= */
.cam-site-page .industries-solution.cs-ind-v2 {
    padding: 120px 0 130px;
    position: relative;
    overflow: clip;
    background:
        radial-gradient(45% 55% at 100% 0%, rgba(236, 32, 36, 0.10) 0%, transparent 60%),
        radial-gradient(45% 55% at 0% 100%, rgba(255, 110, 150, 0.12) 0%, transparent 60%),
        linear-gradient(180deg, #fffafa 0%, #fff4f5 55%, #fffafa 100%);
    isolation: isolate;
}

/* Decorative blobs + scan overlay */
.cam-site-page .cs-ind-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.cam-site-page .cs-ind-blob--one {
    width: 420px; height: 420px;
    background: radial-gradient(closest-side, rgba(236,32,36,0.26), rgba(236,32,36,0) 70%);
    top: -140px; right: -120px;
    animation: csSvcFloat 14s ease-in-out infinite;
}
.cam-site-page .cs-ind-blob--two {
    width: 380px; height: 380px;
    background: radial-gradient(closest-side, rgba(255,110,150,0.30), rgba(255,110,150,0) 70%);
    bottom: -160px; left: -120px;
    animation: csSvcFloat 16s ease-in-out infinite reverse;
}
.cam-site-page .cs-ind-scan {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        180deg,
        rgba(236, 32, 36, 0.04) 0px,
        rgba(236, 32, 36, 0.04) 1px,
        transparent 1px,
        transparent 5px
    );
    mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}
.cam-site-page .industries-solution.cs-ind-v2 .container { z-index: 1; }

/* ---- Header ---- */
.cam-site-page .cs-ind-head {
    text-align: center;
    margin-bottom: 50px;
}
.cam-site-page .cs-ind-head .cs-chip { margin: 0 auto 18px; }
.cam-site-page .cs-ind-title {
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    font-weight: 800;
    margin: 0 0 16px;
    background: linear-gradient(95deg, #0b1722 0%, #111b28 45%, #ec2024 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cam-site-page .cs-ind-sub {
    color: var(--cs-muted);
    font-size: 16px;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto;
}

/* ---- Switcher wrapper (state container) ---- */
.cam-site-page .cs-ind-switcher { position: relative; }
.cam-site-page .cs-ind-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}

/* ---- Tabs (pill row) ---- */
.cam-site-page .cs-ind-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 40px;
}
.cam-site-page .cs-ind-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid rgba(236, 32, 36, 0.16);
    border-radius: 999px;
    cursor: pointer;
    color: var(--cs-ink);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    user-select: none;
    transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.cam-site-page .cs-ind-tab:hover {
    border-color: rgba(236, 32, 36, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px rgba(236, 32, 36, 0.35);
}
.cam-site-page .cs-ind-tab-num {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.1em;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(236, 32, 36, 0.08);
    color: #d4122a;
    transition: background .3s ease, color .3s ease;
}

/* ---- Panels ---- */
.cam-site-page .cs-ind-panels {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(135deg, #0b1722 0%, #141d2c 50%, #0b1722 100%);
    box-shadow: 0 40px 100px -30px rgba(0,0,0,0.55);
    border: 1px solid rgba(236, 32, 36, 0.18);
    min-height: 360px;
}
.cam-site-page .cs-ind-panels::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(45% 65% at 100% 0%, rgba(236, 32, 36, 0.35), transparent 65%),
        radial-gradient(45% 65% at 0% 100%, rgba(255, 110, 150, 0.18), transparent 65%);
    pointer-events: none;
}
.cam-site-page .cs-ind-panels::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 4px);
    pointer-events: none;
}

.cam-site-page .cs-ind-panel {
    display: grid;
    grid-template-columns: minmax(160px, 240px) 1fr minmax(140px, 180px);
    gap: 40px;
    align-items: center;
    padding: 60px 60px;
    position: relative;
    z-index: 1;
    /* Stack all panels, fade between them */
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .4s ease, transform .4s ease;
}
.cam-site-page .cs-ind-panels {
    display: grid;
    grid-template-areas: "stack";
}
.cam-site-page .cs-ind-panel > * { grid-area: initial; }

.cam-site-page .cs-ind-panel-num {
    font-size: clamp(90px, 12vw, 180px);
    line-height: 0.9;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    background: linear-gradient(180deg, #ffb3c4 0%, #ec2024 70%, #9c0f14 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 8px 30px rgba(236, 32, 36, 0.35));
}

.cam-site-page .cs-ind-panel-body { color: #fff; min-width: 0; }
.cam-site-page .cs-ind-panel-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin-bottom: 14px;
    background: rgba(236, 32, 36, 0.18);
    border: 1px solid rgba(236, 32, 36, 0.35);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffb3bd;
}
.cam-site-page .cs-ind-panel-live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ec2024;
    box-shadow: 0 0 8px rgba(236, 32, 36, 0.8);
    animation: csBenRec 1.4s ease-in-out infinite;
}
.cam-site-page .cs-ind-panel-title {
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    color: #fff;
}
.cam-site-page .cs-ind-panel-desc {
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    max-width: 620px;
}

/* Signal bars (right side of panel) */
.cam-site-page .cs-ind-panel-signal {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 80px;
    justify-content: flex-end;
    position: relative;
}
.cam-site-page .cs-ind-panel-signal span {
    width: 12px;
    border-radius: 3px;
    background: linear-gradient(180deg, #ff6e96 0%, #ec2024 100%);
    opacity: 0.9;
    animation: csSvcEq 1.6s ease-in-out infinite;
}
.cam-site-page .cs-ind-panel-signal span:nth-child(1) { height: 30%; animation-delay: 0s;    }
.cam-site-page .cs-ind-panel-signal span:nth-child(2) { height: 55%; animation-delay: 0.1s;  }
.cam-site-page .cs-ind-panel-signal span:nth-child(3) { height: 75%; animation-delay: 0.2s;  }
.cam-site-page .cs-ind-panel-signal span:nth-child(4) { height: 90%; animation-delay: 0.15s; }
.cam-site-page .cs-ind-panel-signal span:nth-child(5) { height: 100%; animation-delay: 0.25s; }
.cam-site-page .cs-ind-panel-signal small {
    position: absolute;
    bottom: -22px;
    right: 0;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
}

/* ---- State-driven activation (no JS) ---- */
/* Hide panel display handled via opacity + stacking */
.cam-site-page #cs-ind-r0:checked ~ .cs-ind-panels .cs-ind-panel:nth-of-type(1),
.cam-site-page #cs-ind-r1:checked ~ .cs-ind-panels .cs-ind-panel:nth-of-type(2),
.cam-site-page #cs-ind-r2:checked ~ .cs-ind-panels .cs-ind-panel:nth-of-type(3),
.cam-site-page #cs-ind-r3:checked ~ .cs-ind-panels .cs-ind-panel:nth-of-type(4),
.cam-site-page #cs-ind-r4:checked ~ .cs-ind-panels .cs-ind-panel:nth-of-type(5),
.cam-site-page #cs-ind-r5:checked ~ .cs-ind-panels .cs-ind-panel:nth-of-type(6) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Active tab styling */
.cam-site-page #cs-ind-r0:checked ~ .cs-ind-tabs label[for="cs-ind-r0"],
.cam-site-page #cs-ind-r1:checked ~ .cs-ind-tabs label[for="cs-ind-r1"],
.cam-site-page #cs-ind-r2:checked ~ .cs-ind-tabs label[for="cs-ind-r2"],
.cam-site-page #cs-ind-r3:checked ~ .cs-ind-tabs label[for="cs-ind-r3"],
.cam-site-page #cs-ind-r4:checked ~ .cs-ind-tabs label[for="cs-ind-r4"],
.cam-site-page #cs-ind-r5:checked ~ .cs-ind-tabs label[for="cs-ind-r5"] {
    background: var(--cs-grad-red);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 14px 30px -10px rgba(236, 32, 36, 0.55);
    transform: translateY(-2px);
}
.cam-site-page #cs-ind-r0:checked ~ .cs-ind-tabs label[for="cs-ind-r0"] .cs-ind-tab-num,
.cam-site-page #cs-ind-r1:checked ~ .cs-ind-tabs label[for="cs-ind-r1"] .cs-ind-tab-num,
.cam-site-page #cs-ind-r2:checked ~ .cs-ind-tabs label[for="cs-ind-r2"] .cs-ind-tab-num,
.cam-site-page #cs-ind-r3:checked ~ .cs-ind-tabs label[for="cs-ind-r3"] .cs-ind-tab-num,
.cam-site-page #cs-ind-r4:checked ~ .cs-ind-tabs label[for="cs-ind-r4"] .cs-ind-tab-num,
.cam-site-page #cs-ind-r5:checked ~ .cs-ind-tabs label[for="cs-ind-r5"] .cs-ind-tab-num {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* Responsive */
@media (max-width: 991px) {
    .cam-site-page .cs-ind-panel {
        grid-template-columns: 1fr;
        padding: 40px 30px 50px;
        gap: 20px;
        text-align: left;
    }
    .cam-site-page .cs-ind-panel-num { font-size: 90px; }
    .cam-site-page .cs-ind-panel-signal { justify-content: flex-start; height: 60px; }
    .cam-site-page .cs-ind-panel-signal small { right: auto; left: 0; }
}
@media (max-width: 576px) {
    .cam-site-page .cs-ind-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 10px; }
    .cam-site-page .cs-ind-tab { flex: 0 0 auto; }
    .cam-site-page .cs-ind-panel { padding: 30px 22px 40px; }
}

/* =========================================================
   WEBCAM RESULTS — image cards
   ========================================================= */
.cam-site-page .webcam-seo {
    padding: 120px 0;
    background: var(--cs-grad-dark);
    position: relative;
    overflow: hidden;
}
.cam-site-page .webcam-seo::before {
    content: "";
    position: absolute;
    bottom: -160px; right: -160px;
    width: 440px; height: 440px;
    background: rgba(236,32,36,0.15);
    border-radius: 50%;
    filter: blur(100px);
}
.cam-site-page .webcam-seo .heading-row { margin-bottom: 60px; }
.cam-site-page .webcam-box {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: var(--cs-radius) !important;
    padding: 30px !important;
    min-height: 380px !important;
    transition: transform .4s ease, background .4s ease, border-color .4s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.cam-site-page .webcam-box:hover {
    background: #fff !important;
    transform: translateY(-8px);
    border-color: transparent !important;
    box-shadow: var(--cs-shadow-lg);
}
.cam-site-page .webcam-box .webcam-content { margin-bottom: 28px !important; }
.cam-site-page .webcam-box .webcam-content h3 {
    transition: color .3s ease;
}
.cam-site-page .webcam-box:hover .webcam-content h3 { color: var(--cs-ink) !important; }
.cam-site-page .webcam-box .webcam-image {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}
.cam-site-page .webcam-box .webcam-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.35) 100%);
    opacity: 1;
    transition: opacity .35s ease;
}
.cam-site-page .webcam-box:hover .webcam-image::after { opacity: 0; }
.cam-site-page .webcam-box .webcam-image img {
    transition: transform .5s ease;
}
.cam-site-page .webcam-box:hover .webcam-image img { transform: scale(1.05); }

/* =========================================================
   LATEST SEO TRENDS
   ========================================================= */
.cam-site-page .latest-seo-trend {
    padding: 120px 0;
    background:
        radial-gradient(30% 50% at 100% 0%, rgba(236,32,36,0.05), transparent 70%),
        #fff;
}
.cam-site-page .latest-seo-trend .trend-heading h3 {
    font-size: clamp(32px, 3.6vw, 50px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em;
}
.cam-site-page .latest-seo-trend .seo-trend-image img {
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-lg);
}
.cam-site-page .latest-seo-trend .seo-trend-wrapper {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.cam-site-page .seo-trend-inner-wrapper {
    background: #fff;
    padding: 28px 30px;
    border: 1px solid var(--cs-line);
    border-radius: 20px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    position: relative;
    overflow: hidden;
}
.cam-site-page .seo-trend-inner-wrapper:hover {
    transform: translateY(-4px);
    box-shadow: var(--cs-shadow-md);
    border-color: transparent;
}
.cam-site-page .seo-trend-inner-wrapper h3 span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--cs-grad-red);
    color: #fff !important;
    font-size: 16px;
    font-weight: 800;
    padding: 0 10px;
    box-shadow: var(--cs-shadow-red);
}

/* =========================================================
   GET IN TOUCH
   ========================================================= */
.cam-site-page .get-in-touch-sec {
    padding: 110px 0;
    background: #fafbfc;
}

/* =========================================================
   RESPONSIVE TWEAKS
   ========================================================= */
@media (max-width: 992px) {
    .cam-site-page .cs-float-stat { display: none; }
    .cam-site-page .business-visibilty .business-visibilty-img::before { display: none; }
    .cam-site-page .drive-more-traffic .drive-image::after { display: none; }
    .cam-site-page .business-visibilty .business-wrapper { padding: 40px 30px !important; }
    .cam-site-page .traffic-revenue-machine,
    .cam-site-page .seo-solution,
    .cam-site-page .webcam-seo,
    .cam-site-page .our-proven-adult-streaming-sec,
    .cam-site-page .latest-seo-trend,
    .cam-site-page .drive-more-traffic,
    .cam-site-page .business-visibilty,
    .cam-site-page .why-choose-seo-sec,
    .cam-site-page .cam-sites-services { padding: 80px 0; }
}

@media (max-width: 992px) {
    .cam-site-page .cs-hero-lead { min-height: auto; padding: 110px 0 70px; }
    .cam-site-page .cs-hero-form-card { margin-top: 40px; }
}

@media (max-width: 768px) {
    .cam-site-page .cam-site-service-box { padding: 32px 22px !important; min-height: auto; }
    .cam-site-page .why-choose-count span { font-size: 66px !important; }
    .cam-site-page .cs-hero-lead { padding: 90px 0 60px; }
    .cam-site-page .cs-hero-form-card { padding: 24px 20px; }
    .cam-site-page .cs-hero-form-grid { grid-template-columns: 1fr; }
    .cam-site-page .cs-hero-lead-badges li { padding: 8px 14px; font-size: 13px; }
}