/* =============================================================
   BYTESPARK DIGITAL - Service pages theme (wd- / svc- / wdv2-)
   Overrides style.css to match the home page look.
   Loaded via $extra_css after theme.css.
   ============================================================= */

/* ---------- Shared: labels, buttons ---------- */
.wd-hero .section-label-chip,
.wd-bento-section .section-label,
.wd-tech-section .section-label-chip,
.wd-cta-section .section-label,
.wdv2-hero .section-label-chip,
.wdv2-services-section .section-label-chip,
.wdv2-who-section .section-label-chip,
.wdv2-why-section .section-label-chip {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--hp-accent);
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    margin-bottom: 0.75rem;
}

.wd-hero .btn-primary-brand,
.wd-cta-section .btn-primary-brand,
.wdv2-hero .btn-primary-brand,
.wdv2-why-section .btn-primary-brand,
.wdv2-services-section .btn-primary-brand {
    background: var(--hp-green);
    color: #07120A;
    border-radius: 999px;
    font-weight: 700;
    padding: 0.75rem 1.6rem;
    box-shadow: none;
}
.wd-hero .btn-primary-brand:hover,
.wd-hero .btn-primary-brand:focus-visible,
.wd-cta-section .btn-primary-brand:hover,
.wd-cta-section .btn-primary-brand:focus-visible,
.wdv2-hero .btn-primary-brand:hover,
.wdv2-hero .btn-primary-brand:focus-visible,
.wdv2-why-section .btn-primary-brand:hover,
.wdv2-services-section .btn-primary-brand:hover {
    background: var(--hp-green-2);
    color: #07120A;
    box-shadow: none;
    transform: translateY(-2px);
}

.wd-hero-cta-ghost,
.wdv2-ghost-btn {
    border: 1px solid #C7D2EA;
    background: transparent;
    color: var(--hp-heading);
    border-radius: 999px;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
}
.wd-hero-cta-ghost:hover,
.wdv2-ghost-btn:hover {
    background: var(--hp-surface);
    border-color: var(--hp-green);
    color: var(--hp-heading);
}

/* ---------- Hero (wd + wdv2) ---------- */
.wd-hero,
.wdv2-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, #F6FAFF 0%, #EAF2FF 100%);
    border-bottom: 0;
}
.wd-hero { padding: 1.5rem 0 3rem; }

.wd-hero::before,
.wdv2-hero::before {
    content: "";
    position: absolute; z-index: -1; pointer-events: none;
    width: 60rem; height: 60rem; right: -20rem; top: -16rem;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at center, transparent 0 4.2rem, rgba(111, 92, 240, .2) 4.2rem calc(4.2rem + 1px));
    -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 68%);
    mask-image: radial-gradient(circle at center, #000 0%, transparent 68%);
    font-size: inherit; opacity: 1; color: inherit;
}
.wd-hero::after,
.wdv2-hero::after {
    content: "";
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(34rem 34rem at -5% -10%, rgba(99, 206, 24, .18), transparent 70%),
        radial-gradient(30rem 30rem at 105% 20%, rgba(139, 124, 255, .20), transparent 70%),
        radial-gradient(22rem 22rem at 45% 115%, rgba(224, 68, 156, .08), transparent 70%);
}

.wd-breadcrumb ol { margin-bottom: 1rem; color: var(--hp-muted); font-size: 0.8rem; }
.wd-breadcrumb a { color: var(--hp-muted); }
.wd-breadcrumb a:hover { color: var(--hp-accent); }
.wd-breadcrumb [aria-current="page"] { color: var(--hp-heading); }

.wd-hero-grid { gap: 3rem; align-items: center; }
.wd-hero-left::before { display: none; }

.wd-hero-title,
.wdv2-hero-title {
    font-weight: 800;
    color: var(--hp-heading);
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.wd-hero-title { font-size: clamp(2rem, 3.6vw, 3rem); margin: 0.5rem 0 1rem; }

.wd-hero-title-block,
.wdv2-title-em {
    background: linear-gradient(90deg, var(--hp-grad-a), var(--hp-grad-b));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}

.wd-hero-sub,
.wdv2-hero-desc {
    color: var(--hp-muted);
    font-size: 1rem;
    line-height: 1.7;
}
.wd-hero-sub { margin-bottom: 1.5rem; }
.wd-hero-ctas { margin-bottom: 1.5rem; gap: 0.75rem; }

.wd-hero-stats { padding-top: 1.25rem; border-top: 1px solid #C9D6EE; }
.wd-hs-num { color: var(--hp-heading); font-weight: 800; font-size: 1.6rem; }
.wd-hs-lbl { color: var(--hp-muted); }
.wd-hs-div { width: 1px; background: #C9D6EE; }

.wd-hero-img-wrap { border-radius: 1.1rem; }
.wd-hero-img-wrap::before {
    border: 0;
    top: -1.2rem; right: -1.2rem; width: 9rem; height: 9rem;
    border-radius: 50%;
    background: rgba(111, 92, 240, .14);
    filter: blur(24px);
}
.wd-hero-img-wrap::after {
    background: var(--hp-green);
    opacity: .22;
    filter: blur(28px);
    border-radius: 50%;
    bottom: -1.2rem; left: -1.2rem; width: 8rem; height: 8rem;
}
.wd-hero-img-wrap img {
    height: 380px;
    border-radius: 1.1rem;
    border: 1px solid var(--hp-border);
    box-shadow: none;
}

/* ---------- Intro strip ---------- */
.wd-intro-strip {
    background: var(--hp-bg-2);
    border: 0;
    padding: 2rem 0;
}
.wd-intro-grid { gap: 1rem; }
.wd-intro-item {
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: 1.1rem;
    padding: 1.25rem;
    gap: 0.5rem;
    transition: border-color .25s ease, transform .25s ease;
}
.wd-intro-item:last-child { border-right: 1px solid var(--hp-border); padding-right: 1.25rem; }
.wd-intro-item:hover { border-color: var(--hp-green); transform: translateY(-3px); }
.wd-intro-icon {
    width: 2.5rem; height: 2.5rem;
    background: var(--hp-tint);
    color: var(--hp-accent);
    border-radius: 0.7rem;
    font-size: 1.15rem;
}
.wd-intro-title { color: var(--hp-heading); font-weight: 800; font-size: 1.05rem; }
.wd-intro-desc { color: var(--hp-muted); line-height: 1.6; }

/* ---------- Section shells ---------- */
.wd-bento-section { padding: 3rem 0; background: var(--hp-tint); }
.wd-tech-section { padding: 3rem 0; background: var(--hp-bg-2); border-top: 0; }

.wd-section-header,
.wdv2-section-header { margin-bottom: 2rem; }
.wd-section-title,
.wdv2-section-title {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--hp-heading);
    letter-spacing: -0.02em;
    margin: 0.5rem 0;
}
.wd-section-sub,
.wdv2-section-sub { color: var(--hp-muted); font-size: 1rem; line-height: 1.65; }

/* ---------- Service cards (svc-) ---------- */
.svc-grid { gap: 1rem; }
.wd-bento-section .svc-card {
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: 1.1rem;
    padding: 1rem;
    gap: 0;
    box-shadow: none;
    transition: border-color .25s ease, transform .25s ease;
}
.wd-bento-section .svc-card::before,
.wd-bento-section .svc-card::after { display: none; }
.wd-bento-section .svc-card:hover {
    border-color: var(--hp-green);
    box-shadow: none;
    transform: translateY(-3px);
}
.wd-bento-section .svc-card-img { height: 190px; border-radius: 0.8rem; }
.wd-bento-section .svc-card-eyebrow {
    background: rgba(10, 14, 51, .78);
    color: #fff;
}
.wd-bento-section .svc-card-eyebrow i { color: var(--hp-green-2); }
.wd-bento-section .svc-card-body { padding: 0.9rem 0.25rem 0.25rem; gap: 0.4rem; }
.wd-bento-section .svc-card-title { color: var(--hp-heading); font-weight: 800; }
.wd-bento-section .svc-card-desc { color: var(--hp-muted); line-height: 1.6; }
.wd-bento-section .svc-card-tags { border-top: 1px solid var(--hp-border); padding-top: 0.65rem; }
.wd-bento-section .svc-card-tags span {
    background: var(--hp-tag);
    border: 1px solid var(--hp-border);
    color: var(--hp-heading);
}
.wd-bento-section .svc-card:hover .svc-card-tags span {
    background: rgba(99, 206, 24, .12);
    border-color: rgba(99, 206, 24, .45);
    color: var(--hp-accent);
}

/* ---------- Stats banner (dark) ---------- */
.wd-stats-banner {
    background: #0A0E33;
    padding: 2rem 0;
}
.wd-stat-big {
    font-weight: 800;
    background: linear-gradient(90deg, #8BEF45, #35D4E8);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.wd-stat-lbl { color: #AEB6D6; }
.wd-stat-divider { width: 1px; background: rgba(255, 255, 255, .12); }

/* ---------- Tech grid ---------- */
.wd-tech-grid { gap: 0.75rem; }
.wd-tech-card {
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: 1.1rem;
    padding: 1.1rem 0.6rem 1rem;
    gap: 0.5rem;
}
.wd-tech-card:hover {
    border-color: var(--hp-green);
    box-shadow: none;
    transform: translateY(-3px);
}
.wd-tech-card span { color: var(--hp-heading); }
.wd-tech-icon {
    width: 2.6rem; height: 2.6rem;
    background: var(--hp-tint);
    color: var(--hp-accent);
    font-size: 1.2rem;
}
.wd-tech-card:hover .wd-tech-icon { background: var(--hp-green); color: #07120A; }

/* ---------- CTA ---------- */
.wd-cta-section {
    padding: 3rem 0;
    background: var(--hp-tint);
    border-top: 0;
}
.wd-cta-inner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: none;
    padding: 2.5rem 1.5rem;
    border-radius: 1.4rem;
    background: #0A0E33;
}
.wd-cta-inner::before {
    content: "";
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(26rem 18rem at 0% 0%, rgba(99, 206, 24, .22), transparent 70%),
        radial-gradient(26rem 18rem at 100% 100%, rgba(139, 124, 255, .26), transparent 70%);
}
.wd-cta-inner .section-label {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: #8BEF45;
}
.wd-cta-title {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0.5rem 0 0.75rem;
}
.wd-cta-sub {
    font-size: 1rem;
    color: #AEB6D6;
    max-width: 40rem;
    margin: 0 auto 1.5rem;
}
.wd-cta-phone {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #FFFFFF;
    font-size: 1rem;
}
.wd-cta-phone .bi { color: #8BEF45; }
.wd-cta-phone:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; border-color: #8BEF45; }
.wd-cta-phone:hover .bi { color: #8BEF45; }

/* ---------- web-development-v2 ---------- */
.wdv2-hero { padding: 2rem 0 0; }
.wdv2-hero-top { margin-bottom: 2rem; }
.wdv2-hero-title { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
.wdv2-hero-desc { margin-bottom: 1.5rem; }
.wdv2-hero-img-wrap img {
    height: 420px;
    border: 1px solid var(--hp-border);
    border-bottom: 0;
    border-radius: 1.4rem 1.4rem 0 0;
}

.wdv2-services-section { padding: 3rem 0; background: var(--hp-tint); border-bottom: 0; }
.wdv2-who-section { padding: 3rem 0; background: var(--hp-bg-2); border-bottom: 0; }
.wdv2-why-section { padding: 3rem 0 4rem; background: var(--hp-tint); border-bottom: 0; }
.wdv2-services-grid { gap: 1rem; }

.wdv2-service-card {
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: 1.1rem;
    padding: 1.4rem 1.25rem 1.25rem;
    transition: border-color .25s ease, transform .25s ease;
}
.wdv2-service-card:hover { border-color: var(--hp-green); box-shadow: none; transform: translateY(-3px); }
.wdv2-sc-icon {
    width: 2.75rem; height: 2.75rem; font-size: 1.3rem;
    background: var(--hp-tint); color: var(--hp-accent);
    margin-bottom: 0.9rem;
}
.wdv2-service-card:hover .wdv2-sc-icon { background: var(--hp-green); color: #07120A; }
.wdv2-sc-title { color: var(--hp-heading); font-weight: 800; margin-bottom: 0.4rem; }
.wdv2-sc-desc { color: var(--hp-muted); line-height: 1.6; margin-bottom: 0.9rem; }
.wdv2-sc-link { color: var(--hp-accent); }

.wdv2-who-layout,
.wdv2-why-layout { gap: 2.5rem; }
.wdv2-who-content .wdv2-section-title { margin: 0.5rem 0 1.25rem; }
.wdv2-why-content .wdv2-section-title { margin: 0.5rem 0 0.75rem; }
.wdv2-mosaic-row img {
    height: 180px;
    border-radius: 1.1rem;
    border: 1px solid var(--hp-border);
}
.wdv2-audience-list { gap: 0.75rem; }
.wdv2-audience-item {
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: 1.1rem;
    padding: 0.9rem 1rem;
    transition: border-color .25s ease, transform .25s ease;
}
.wdv2-audience-item:hover { border-color: var(--hp-green); transform: translateY(-2px); }
.wdv2-ai-icon { background: var(--hp-tint); color: var(--hp-accent); margin-top: 0; }
.wdv2-ai-title { color: var(--hp-heading); font-weight: 800; }
.wdv2-ai-desc { color: var(--hp-muted); }

.wdv2-why-intro { color: var(--hp-muted); margin-bottom: 1.5rem; }
.wdv2-why-points { gap: 1.1rem; }
.wdv2-wp-num {
    background: linear-gradient(90deg, var(--hp-grad-a), var(--hp-grad-b));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    font-weight: 800;
}
.wdv2-wp-title { color: var(--hp-heading); font-weight: 800; }
.wdv2-wp-desc { color: var(--hp-muted); }
.wdv2-why-visual img {
    height: 380px;
    border-radius: 1.1rem;
    border: 1px solid var(--hp-border);
    box-shadow: none;
}
.wdv2-why-stats {
    background: #0A0E33;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: none;
    border-radius: 1rem;
}
.wdv2-wstat-num { color: #8BEF45; font-weight: 800; }
.wdv2-wstat-lbl { color: #AEB6D6; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .wd-hero-grid { gap: 2rem; }
    .wd-hero-img-wrap img { height: 320px; }
}
@media (max-width: 992px) {
    .wdv2-hero-img-wrap img { height: 340px; }
    .wdv2-why-visual { padding-bottom: 3.5rem; }
}
@media (max-width: 768px) {
    .wd-intro-item,
    .wd-intro-item:last-child { border: 1px solid var(--hp-border); padding: 1.1rem; }
    .wd-bento-section,
    .wd-tech-section,
    .wd-cta-section,
    .wdv2-services-section,
    .wdv2-who-section { padding: 2.5rem 0; }
    .wdv2-why-section { padding: 2.5rem 0 3rem; }
    .wd-hero-img-wrap img { height: 280px; }
}
@media (max-width: 576px) {
    .wd-hero { padding-bottom: 2.5rem; }
    .wd-hero-title { font-size: 2rem; }
    .wd-hero-img-wrap img { height: 220px; }
    .wd-hero::before,
    .wdv2-hero::before { width: 40rem; height: 40rem; right: -20rem; top: -14rem; }
    .wd-hs-item { padding-right: 0.9rem; }
    .wd-hs-div { margin-right: 0.9rem; }
    .wd-hs-num { font-size: 1.3rem; }
    .wd-bento-section .svc-card-img { height: 180px; }
    .wd-cta-inner { padding: 2rem 1.1rem; }
    .wdv2-hero-title { font-size: 2.1rem; }
    .wdv2-hero-img-wrap img { height: 220px; }
    .wdv2-mosaic-row img { height: 150px; }
    .wd-stat-divider { width: 60%; height: 1px; }
}