/* WebDesign landing — dark minimal + Bootstrap */

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --bg: #000000;
    --header-bg: #121212;
    --surface: #1a1a1a;
    --text: #ffffff;
    --muted: #a0a0a0;
    --nav-muted: #9a9a9a;
    --border: #2a2a2a;
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --section-y: 60px;
}

html {
    scroll-behavior: smooth;
}

body.webdesign-page {
    font-family: var(--font);
    background-color: var(--bg) !important;
    color: var(--text);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}
p{
    font-size: 16px;
    font-weight: 400;
    color: var(--muted);
}
.webdesign-navbar {
    background-color: var(--header-bg) !important;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.webdesign-navbar-border {
    border-color: rgba(255, 255, 255, 0.06) !important;
    padding: 0;
}

.webdesign-brand {
    font-size: 1rem !important;
    font-weight: 500;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.webdesign-brand-logo {
    width: 100px;
    display: block;
    flex-shrink: 0;
    filter: invert(1);
}
:root[data-theme="light"] .webdesign-brand-logo {
    filter: none;
}
.webdesign-nav-toggler {
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.35);
    position: relative;
    z-index: 2;
    min-width: 2.75rem;
    min-height: 2.75rem;
    flex-shrink: 0;
}

.webdesign-desktop-nav .webdesign-nav-list , .webdesign-desktop-nav {
    gap: 2.15rem;
}

.webdesign-desktop-nav .webdesign-nav-link {
    color: #9f9e9d;
    padding: 26px 14px;
    font-size: 14px;
    line-height: 100%;
    text-decoration: none;
    transition: border-color .3s;
    display: flex;
}

.webdesign-desktop-nav .webdesign-nav-link:hover,
.webdesign-desktop-nav .webdesign-nav-link.active {
    color: #fff !important;
}

.webdesign-desktop-nav .webdesign-nav-link.active {
    border-bottom: 1px solid #fff;
}

.webdesign-nav-label {
    display: inline-block;
    padding-bottom: 2px;
}

.btn-webdesign-talk {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    padding: 14px 24px;
    font-size: 14px;
    line-height: 100%;
    text-decoration: none;
    transition: background-color .3s, color .3s;
    background: #000;
}

.webdesign-offcanvas {
    background-color: var(--header-bg) !important;
    width: min(20rem, 88vw);
    background-image: none;
}

.webdesign-offcanvas .offcanvas-body {
    gap: 0.45rem;
}

.webdesign-offcanvas .webdesign-offcanvas-nav {
    flex-grow: 0 !important;
}

.webdesign-offcanvas-nav ul {
    padding-left: 0;
}

.webdesign-offcanvas-border {
    border-color: rgba(255, 255, 255, 0.035) !important;
}

.webdesign-offcanvas-nav a {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--nav-muted) !important;
    text-decoration: none;
    padding: 0.95rem 0.1rem;
    margin-bottom: 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045) !important;
    border-radius: 0;
    background: transparent;
    transition: color .2s ease, border-color .2s ease;
}
.webdesign-offcanvas-nav li:last-child a {
    border-bottom: 0;
}
.webdesign-offcanvas-nav a:hover,
.webdesign-offcanvas-nav a.active {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.12);
    background: transparent;
}

.webdesign-offcanvas .btn-webdesign-talk {
    margin-top: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #ffffff;
    color: #111827 !important;
    font-weight: 600;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.webdesign-offcanvas .btn-webdesign-talk:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: #eceff3;
    color: #0f172a !important;
}

.banner-webdesign {
    padding-bottom: var(--section-y);
    background-color:#0f0d0b;
}

.webdesign-hero-title {
    font-size: clamp(2.75rem, 7.5vw, 5.25rem);
    line-height: 0.98;
    font-weight: 500;
    color: #fff;
}

.webdesign-hero-line1 {
    text-align: left;
    color: #fff;
}

.webdesign-hero-line2 {
    padding-left: clamp(3rem, 20vw, 11.5rem);
    font-size: 60px;
    font-weight: 500;
    color: #fff;
    margin-top:30px
}

.webdesign-hero-row {
    margin-top: clamp(2.25rem, 5vw, 3.75rem);
}

.webdesign-side-label {
        color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 150%;
}

.webdesign-side-label-slash {
    color: #6b6b6b;
    margin-right: 0.15em;
}

.webdesign-hero-body {
    font-size: 16px;
    line-height: 1.75;
    color: var(--muted);
    max-width: none;
}
.hero-inner{
   
    padding-top: 70px;
    padding-bottom: 30px;
}
.webdesign-hero-cta {
    border-radius: 0.25rem !important;
    font-size: 0.875rem;
    background: #000;
    color: #fff;
}

.btn-webdesign-cta {
    --bs-btn-hover-bg: #232323;
    --bs-btn-hover-border-color: #232323;
    --bs-btn-hover-color: #fff;
    background: #000;
    color: #fff;
}
.webdesign-hero-meta{
    margin-bottom: 10px;
}

.webdesign-hero-meta .webdesign-meta-line,
.webdesign-hero-meta .webdesign-meta-line--strong {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 10px;
}

@media (min-width: 992px) {
    .webdesign-hero-meta .webdesign-meta-line {
        font-size: 14px;
    }
}

.webdesign-hero-figure {
    overflow: hidden;
    background: #000;
}

.webdesign-hero-img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #000;
}

.webdesign-client-badge {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: 0.55rem 1rem 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #fff;
    max-width: calc(100% - 2rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.webdesign-badge-icon-stack {
    position: relative;
    width: 1.125rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.webdesign-badge-sq {
    position: absolute;
    width: 0.55rem;
    height: 0.55rem;
    border: 1.5px solid #fff;
    border-radius: 2px;
    box-sizing: border-box;
}

.webdesign-badge-sq--back {
    left: 0;
    top: 0;
    opacity: 0.55;
}

.webdesign-badge-sq--front {
    left: 0.38rem;
    top: 0.22rem;
}

.webdesign-badge-text {
    white-space: nowrap;
    color: #fff;
}

@media (max-width: 991.98px) {
    .webdesign-hero-copy-wrap {
        flex-direction: column;
        gap: 0.75rem !important;
    }
    .webdesign-side-label {
        max-width: none;
    }
    .webdesign-hero-line2 {
        padding-left: clamp(2rem, 14vw, 6rem);
        font-size: 33px;
        margin-top: 20px;
        color: #fff;
    }
}

@media (max-width: 575.98px) {
    .webdesign-badge-text {
        white-space: normal;
    }
}

.section {
    padding-block: var(--section-y);
    background: #000;
}

.section-what-we-do {
    background-color: #000 !important;
}

.what-we-do-label {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
}

.what-we-do-label-slash {
    color: #6b6b6b;
    margin-right: 0.2em;
}

.what-we-do-heading {
    font-size: clamp(1.5rem, 3.2vw, 2.375rem);
    line-height: 1.2;
    color: #fff;
}

.what-we-do-rule {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: clamp(1.75rem, 4vw, 2.75rem);
    margin-bottom: 0;
    opacity: 1;
}

.what-we-do-lists {
    padding-top: clamp(1.25rem, 3vw, 2rem);
    justify-content: end;
}

.what-we-do-col--left {
    padding-right: 0;
}

.what-we-do-col--right {
    padding-left: 0;
}

@media (min-width: 992px) {
    .what-we-do-col--left {
        padding-right: clamp(1.5rem, 3vw, 2.5rem);
    }
    .what-we-do-col--right {
        padding-left: clamp(1.5rem, 3vw, 2.5rem);
    }
}

.what-we-do-list li  {
    font-size: 22px;
    font-weight: 400;
    color: #fff;
    padding: 1.15rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    line-height: 1.4;
    width: 40%;
    float: left;
    margin-right: 30px;
    background: #000;
}
.what-we-do-list li:hover {
    border-bottom-color: #fff;
}
.what-we-do-list li  a {
    font-size: 22px;
    font-weight: 400;
    color: #fff;
}
.what-we-do-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

@media (max-width: 991.98px) {
    .what-we-do-col--left .what-we-do-list li:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding-bottom: 1.15rem;
    }
    .what-we-do-list li  a {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}
    .what-we-do-col--right .what-we-do-list li:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* Selected works */
.section-selected-works {
    background-color: #000 !important;
}
.works-section-label {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
}
.works-section-label-slash {
    color: #6b6b6b;
    margin-right: 0.2em;
}
.works-headline {
    font-size: clamp(1.5rem, 3.2vw, 2.375rem);
    line-height: 1.2;
    max-width: 26rem;
    color: #fff;
}
@media (min-width: 768px) {
    .works-headline {
        max-width: none;
    }
}

.works-headline-accent {
    color: #fff !important;
    background: none !important;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
}

.works-section-rule {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: clamp(1.75rem, 4vw, 2.75rem);
    margin-bottom: 0;
    opacity: 1;
}

.works-list {
    padding-top: clamp(2rem, 5vw, 3.5rem);
}

.work-item {
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
    background: #181818;
    padding: 40px;
    color: #fff;
}
.work-item-copy {
    padding-top: 0;
    color: #fff;
}

@media (min-width: 992px) {
    .work-item-copy {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 0.25rem;
        height: 100%;
        color: #fff;
    }
}
.work-tag {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
}

.work-title h3 {
    font-size: 26px;
    font-weight: 500;
    line-height: 1.05;
    color: #fff;
}

.work-desc {
        font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
    max-width: 28rem;
    margin-top: 14px;
}

.work-img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    background: #000;
}

/* Our Clients — trust copy + Swiper logos */
.section-clients {
    background-color: #000 !important;
}

.clients-section-title h2 {
    font-size: 22px;
    font-weight: 400;
    color: #fff;
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.clients-trust-text {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #fff;
    max-width: 28rem;
}

@media (min-width: 992px) {
    .clients-trust-text {
        padding-right: 1rem;
    }
}

.clients-swiper {
    overflow: hidden;
    margin-inline: -0.25rem;
    padding-block: 0.25rem;
}

.clients-swiper .swiper-slide {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #000;
}
@media (min-width: 992px) {
    .clients-swiper .swiper-slide {
        justify-content: flex-start;
    }
}
.client-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
    color: #fff;
    padding: 0.5rem 0.25rem;
    background: #000;
}

@media (min-width: 992px) {
    .client-brand {
        align-items: flex-start;
        text-align: left;
    }
}

.client-brand__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    color: #fff;
    background: #000;
}

/* About — compact split block with right CTA link */
.about-section {
    padding-block: clamp(3.25rem, 8vw, 5rem);
    background: #000;
}

.about-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
}

.about-copy {
    max-width: 46rem;
    color: #fff;
}
.about-copy h2{
    margin-bottom: 10px;
}

.about-cta-wrap {
    min-width: 7.5rem;
    justify-self: end;
}

.about-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    background: #000;
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

.about-cta-link:hover {
    border-color: rgba(255, 255, 255, 0.45);
    opacity: 0.95;
}

@media (max-width: 991.98px) {
    .about-layout {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .about-cta-wrap {
        justify-self: start;
        margin-top: 1rem;
    }
   
}

/* Facts & Figures */
.section-facts {
    background-color: #000 !important;
}

.facts-label-slash {
    color: #6b6b6b;
    margin-right: 0.2em;
}


.facts-rule {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: clamp(1rem, 2vw, 1.35rem);
    opacity: 1;
}

.facts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.95rem;
}

.fact-card {
        grid-row-gap: 285px;
    border: 1px solid rgba(255, 255, 255, .1);
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    transition: background-color .3s;
    display: flex;
}

.fact-card-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #7f7f7f;
    margin-bottom: 1rem;
}

.fact-card-number {
    font-size: clamp(3rem, 6vw, 4rem);
    font-weight: 500;
    line-height: 0.95;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* Testimonial */
.testimonial-inner {
    text-align: center;
    max-width: 48rem;
    margin-inline: auto;
    color: #fff;
}

.testimonial-swiper {
    overflow: hidden;
    padding-bottom: 2rem;
}

.testimonial-swiper .swiper-slide {
    height: auto;
    color: #fff;
    background: #000;
}


.testimonial-author {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    color: #fff;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #000;
}

.testimonial-name {
    display: block;
    font-weight: 500;
    font-size: 0.9375rem;
    color: #fff;
}

.testimonial-role {
    display: block;
    font-size: 0.8125rem;
    color: var(--muted);
}
.testimonial-text{
    padding: 20px 0px;
}
.testimonial-text p{
        text-align: center;
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 300;
    line-height: 170%;
}

/* Latest Articles — label/heading row + two horizontal cards + right action button */
.section-latest-articles {
    background-color: #000 !important;
}

.articles-label-slash {
    color: #6b6b6b;
    margin-right: 0.2em;
}


.articles-rule {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: clamp(1rem, 2.8vw, 1.7rem);
    opacity: 1;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    background: #000;
}

.article-card {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    min-height: clamp(13.5rem, 26vw, 16rem);
    background: #101010;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
}

.article-image-wrap {
    min-height: 100%;
    background: #000;
}

.article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}

.article-content {
    padding: clamp(1.1rem, 2.2vw, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    color: #fff;
    background: #000;
}
.article-content h3{
    font-size: 18px;
}
.article-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 0.3rem 0.55rem;
    line-height: 1;
}

.article-title {
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
    margin: 0;
}

.article-date {
    margin-top: auto;
    margin-bottom: 0;
    color: #8b8b8b;
    font-size: 0.9375rem;
}

.articles-action {
    display: flex;
    justify-content: flex-end;
    margin-top: clamp(1.25rem, 3.5vw, 2rem);
    color: #fff;
}

.btn-articles-view {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.4rem;
    padding: 0.75rem 1.15rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.btn-articles-view:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    background: #181818;
}

/* Footer CTA band + rebuilt footer */
.footer-cta-band {
    position: relative;
    padding: clamp(4.25rem, 10vw, 6rem) 0 clamp(3.5rem, 8vw, 5rem);
    text-align: center;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: #000;
}

.footer-cta-band-inner {
    position: relative;
    z-index: 1;
    max-width: 48rem;
    margin-inline: auto;
    color: #fff;
}

.footer-cta-band-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 1rem;
}

.footer-cta-band-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #fff;
    max-width: 44rem;
    margin: 0 auto 1.5rem;
}

.footer-cta-band-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #000;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 0.35rem;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.65rem 1.25rem;
}
.footer-cta-band-btn:hover {
    color: #fff;
    background: #181818;
    border-color: #fff;
}

.plan-summary-cta {
    width: 100%;
    justify-content: center;
    padding: 0.78rem 1rem;
    border-radius: 0.55rem;
    font-size: 0.95rem;
    font-weight: 600;
    background: linear-gradient(135deg, #000000 0%, #000000 100%);
    border-color: rgb(109 109 109 / 90%);
    box-shadow: 0 10px 24px rgb(61 61 61 / 26%);
}

.plan-summary-cta:hover {
    background: linear-gradient(135deg, #ffffff 0%, #8a8a8a 100%);
    border-color: #202020;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);
    color: #000000;
}

.site-footer.footer-rebuild {
   
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0 0 1rem;
    color: #fff;
}

.footer-brand-social {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #000;
    color: #fff;
}

.footer-brand {
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-brand-logo {
    width: 180px;
    display: block;
    flex-shrink: 0;
    filter: invert(1);
}
:root[data-theme="light"] .footer-brand-logo {
    filter: none;
}
.footer-socials ul{
    display: flex;
    align-items: center;
    gap: 1.25rem;
    color: #fff;
}

.footer-socials ul li a {
    color: #8f8f8f;
    font-size: 0.8125rem;
    position: relative;
        display: flex;
    align-content: center;
    flex-direction: row;
    align-items: center;
}
.footer-socials ul li a img{
    width: 30px;
    margin-right: 10px;
}


.footer-socials a:hover {
    color: #fff;
}

.footer-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #000;
    color: #fff;
}

.footer-left-pane {
    padding: clamp(2.2rem, 5vw, 3rem) clamp(0.25rem, 1.2vw, 0.75rem) clamp(2.4rem, 5vw, 3.25rem) 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
}

.footer-main-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: 1.25rem;
}

.footer-main-form {
    max-width: 21rem;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.3rem;
    min-height: 2.8rem;
    background: #000;
}

.footer-main-input {
    background: transparent;
    border: 0;
    color: #fff;
    padding: 0 0.9rem;
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
}

.footer-main-input::placeholder {
    color: #7d7d7d;
}

.footer-main-submit {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 0.95rem;
    padding: 0 0.85rem;
    min-height: 2.8rem;
}

.footer-right-pane {
    padding: clamp(2.2rem, 5vw, 3rem) 0 clamp(2.4rem, 5vw, 3.25rem) clamp(1rem, 2.5vw, 2rem);
    color: #fff;
}

.footer-link-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem clamp(1rem, 2vw, 2rem);
    background: #000;
    color: #fff;
}

.footer-link-col h3 {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 0.85rem;
}

.footer-link-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-link-col li {
    margin-bottom: 0.55rem;
}

.footer-link-col a {
    color: #8d8d8d;
    font-size: 14px;
}

.footer-link-col a:hover {
    color: #fff;
}

.footer-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 0.9rem;
    color: #fff;
    font-size: 0.75rem;
    background: #000;
}

.footer-bottom-bar p {
    margin: 0;
    color: #fff;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media(max-width: 1199px){
    .webdesign-desktop-nav .webdesign-nav-link{
        padding: 26px 10px;
    }
}
@media(max-width: 991px){
    .webdesign-navbar-border{
        padding: 20px 0px;
    }
}
@media (max-width: 900px) {
    .articles-grid {
        grid-template-columns: 1fr;
    }

    .articles-heading {
        max-width: none;
    }

    .footer-brand-social {
        grid-template-columns: 1fr;
        gap: 2.75rem;
    }

    .footer-main-grid {
        grid-template-columns: 1fr;
    }

    .footer-left-pane {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-right: 0;
    }

    .footer-right-pane {
        padding-left: 0;
    }
}

@media (max-width: 640px) {
    .facts-grid {
        grid-template-columns: 1fr;
    }

    .fact-card {
        min-height: 12rem;
        grid-row-gap: 90px;
    }

    .fact-card-number {
        font-size: clamp(2.6rem, 14vw, 3.2rem);
    }

    .article-card {
        grid-template-columns: 1fr;
    }

    .article-image {
        width: 100%;
        height: 220px;
    }

    .articles-action {
        justify-content: flex-start;
    }

    .footer-socials {
        flex-wrap: wrap;
        gap: 0.6rem 1rem;
    }

    .footer-link-columns {
        grid-template-columns: 1fr 1fr;
    }

    .footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-socials ul {
    display: grid;
    grid-column: revert-layer;
    align-items: center;
    gap: 1.25rem;
    color: #fff;
    flex-direction: row;
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    width: 100%;
    display: grid;
}
.webdesign-brand-logo , .footer-brand-logo{
    width: 120px;
}
}

.plan-page {
    background: #060606;
    color: #fff;
    --plan-accent: #4f6fff;
    --plan-accent-hover: #3d58e6;
    --plan-mint: #5eead4;
    --plan-mint-text: #0a0f0d;
}
.plan-main { padding: clamp(2rem, 5vw, 4rem) 0 clamp(3.5rem, 7vw, 5rem); }

.planner-title { text-align:center; font-size: clamp(2rem, 4.8vw, 3.4rem); line-height:1.06; margin:0 0 .45rem; letter-spacing:-.03em; color:#fff; }
.planner-sub { text-align:center; color:#9aa0ad; max-width: 50rem; margin: 0 auto 1.35rem; line-height:1.5; font-size:1rem; }
.planner-grid { display:grid; grid-template-columns: minmax(0,1fr) minmax(280px,.46fr); gap: .9rem; align-items:start; }
.plan-left { display:grid; gap:.8rem; }
.plan-card { background:#111; border:1px solid rgba(255,255,255,.06); border-radius:.75rem; padding:24px; color: #fff; }
.plan-card h3 { font-size: 1.55rem; color:#fff; margin: 0 0 .75rem; letter-spacing:-.02em; }
.option-grid { display:grid; gap:.55rem; }
.option-grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.option-grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.option-grid-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.option-chip { border:1px solid rgba(255,255,255,.08); background:#0e0e0e; border-radius:.5rem; padding:25px; min-height:4.6rem; display:flex; flex-direction:column; gap:.2rem; color: #fff;}
.plan-package-tab { cursor: pointer; }
.plan-pages-tab,
.plan-cms-tab { cursor: pointer; }
.option-chip strong { font-size:18px ;color:#fff; line-height:1.25; font-weight:600; margin-bottom: 10px;}
.option-chip span { color:#9aa0ad; font-size:.78rem; line-height:1.35; }
.option-chip.selected { border-color: #fff; box-shadow: 0 0 0 1px rgba(32,32,32,.28);}
.option-chip .chip-price { margin-top:.3rem; font-style:normal; font-weight:500; color: #fff; font-size:1.5rem;  padding: 2px 6px; border-bottom: 1px solid #2b2b2b;
    margin-bottom: 20px;
    padding-bottom: 10px;}
.option-chip ul { margin:.35rem 0 0; padding-left:.95rem; color:#9aa0ad; font-size:.73rem; line-height:1.35; }
.option-chip ul li{
    font-size: 14px;
    color: #a0a0a0;
    list-style: none;
    margin-bottom: 10px;
    padding: 0;
    line-height: 1.35;
    font-weight: 400;
}
.plan-package-features p{
    color: #fff;
}
.option-chip.compact { min-height:auto; justify-content:center; align-items:center; text-align:center; padding:.6rem .45rem; }
.option-chip.compact strong { font-size:16px; color:#a0a0a0; margin-bottom:5px }
.option-chip.compact em {   color: #fff; font-style:normal; font-weight:500; font-size:20px; line-height:1.1; padding: 4px 8px; border-radius: 4px;}
.plan-card.plan-cms-card .option-chip.selected {
    border-color: #fff;
    background: #171717;
    box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.18);
    color: #fff;
}
.plan-card.plan-cms-card .option-chip.selected strong {
    color: #ffffff;
}
.plan-card.plan-cms-card .option-chip.selected span {
    color: #b3b3b3;
}
.feature-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:.5rem; }
.feature-item { display:flex; align-items:center; gap:.45rem; padding:16px; border:1px solid rgba(255,255,255,.08); border-radius:8px; color:#fff; font-size:16px; background: #000;}
.feature-item input { accent-color:#232323;     width: 20px;
    height: 20px;
    border-radius: 5px;
    margin-right: 6px;}
.feature-item b { margin-left:auto;  color: #fff; font-size:16px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.summary-box { position: sticky; top: 5.7rem; background: #111111; color:#fff; border-radius:.78rem; padding: 24px; box-shadow: 0 12px 24px rgba(30,30,30,.25);}
.summary-box h3 { margin:0 0 24px; font-size:1.5rem; color:#fff; }
.summary-line { display:flex; justify-content:space-between; align-items:center; color:#fff; font-size:16px; margin-bottom:24px; }
.summary-line strong { color: #fff; font-weight:600; }
.summary-total { border-top:1px solid rgb(255 255 255 / 4%); margin-top:.5rem; padding-top:16px; display:flex; justify-content:space-between; align-items:flex-end; color:#fff; margin-bottom:20px;}
.summary-total strong { font-size:2rem; line-height:1; letter-spacing:-.03em; color: #fff;}
.plan-btn {
    display: block;
    width: 100%;
    margin-top: .8rem;
    border: 0;
    background: var(--plan-mint);
    color: var(--plan-mint-text);
    border-radius: 999px;
    font-weight: 500;
    padding: .65rem 1rem;
    text-align: center;
    text-decoration: none;
    transition: filter .2s, transform .15s;
}
.plan-btn:hover {
    filter: brightness(1.06);
    color: var(--plan-mint-text);
}
.plan-btn:active {
    transform: scale(0.99);
}
.summary-note { margin:20px 0 .75rem; color:#dbdbdb; font-size:13px; text-align:center; }
.summary-box-muted { border-top:1px solid rgb(255 255 255 / 4%); padding:16px 0; margin-bottom:.6rem; }
.summary-box-muted h4, .summary-list h4 { margin:0 0 20px; font-size:17px; color:#fff; }
.summary-box-muted p { margin:0; font-size:14px; color:#fff; line-height:1.35; }
.plan-summary-addons { margin:0; padding-left: 1rem; display:grid; gap:.22rem; }
.plan-summary-addons li { color:#fff; font-size:14px; }
.summary-list ul { margin:0; padding-left:1rem; display:grid; gap:.3rem; }
.summary-list li { color:#fff; font-size:14px; }

.plan-get-started {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    scroll-margin-top: 5.5rem;
}
.plan-gst-title {
    font-size: clamp(1.65rem, 3vw, 2.1rem);
    font-weight: 500;
    color: #fff;
    margin-bottom: 1.5rem;
}
.plan-gst-profile {
    max-width: 26rem;
}
.plan-gst-avatar {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--plan-accent), #7c3aed);
    color: #fff;
    font-size: 1.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 10px 28px rgba(79, 111, 255, 0.28);
}
.plan-gst-lead {
    font-size: 1rem;
    line-height: 1.65;
    color: #e8eaef;
    margin-bottom: 1rem;
}
.plan-gst-muted {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #9aa0ad;
    margin-bottom: 1.25rem;
}
.plan-gst-link {
    font-weight: 500;
    color: var(--plan-accent);
    text-decoration: none;
}
.plan-gst-link:hover {
    text-decoration: underline;
    color: #8fa4ff;
}

.plan-form-shell {
    border-radius: 0.65rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #111;
}
.plan-form-shell--summary-dismissed .plan-form-body {
    border-radius: 0.65rem;
}
.plan-form-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.9rem 1.1rem;
    background: var(--plan-accent);
    color: #fff;
}
.plan-form-summary-text {
    font-size: 0.92rem;
    font-weight: 500;
    flex: 1;
    min-width: 12rem;
}
.plan-form-summary-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.plan-form-summary-edit {
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.plan-form-summary-edit:hover {
    color: #e8ecff;
}
.plan-form-summary-close {
    border: 0;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    width: 2rem;
    height: 2rem;
    border-radius: 0.35rem;
    font-size: 1.35rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.plan-form-summary-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

.plan-form-body {
    padding: 1.35rem 1.25rem 1.5rem;
}
.plan-form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #e8eaef;
    margin-bottom: 0.35rem;
}
.plan-page .plan-form-input.form-control,
.inner-page .plan-form-input.form-control,
.inner-page .plan-form-input.form-select {
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.45rem;
    color: #fff;
    font-size: 0.92rem;
    padding: 0.55rem 0.75rem;
}
.plan-page .plan-form-input.form-control::placeholder,
.inner-page .plan-form-input.form-control::placeholder {
    color: rgba(154, 160, 173, 0.75);
}
.plan-page .plan-form-input.form-control:focus,
.inner-page .plan-form-input.form-control:focus,
.inner-page .plan-form-input.form-select:focus {
    border-color: rgba(79, 111, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(79, 111, 255, 0.15);
    background: #0d0d0d;
    color: #fff;
}
.plan-form-textarea {
    min-height: 130px;
    resize: vertical;
}
.plan-form-services {
    border: 0;
    padding: 0;
    margin: 0;
}
.plan-form-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.plan-form-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #0e0e0e;
    font-size: 0.82rem;
    color: #c8cdd8;
    cursor: pointer;
    margin: 0;
}
.plan-form-chip input {
    accent-color: var(--plan-accent);
}
.plan-form-chip:has(input:checked) {
    border-color: rgba(79, 111, 255, 0.55);
    background: rgba(79, 111, 255, 0.12);
    color: #fff;
}

.plan-form-send {
    width: 100%;
    margin-top: 1.35rem;
    border: 0;
    border-radius: 999px;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    background: var(--plan-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background .2s, transform .15s;
}
.plan-form-send:hover {
    background: var(--plan-accent-hover);
    color: #fff;
}
.plan-form-send:active {
    transform: scale(0.99);
}
.plan-form-send svg {
    flex-shrink: 0;
}

@media (max-width: 1100px) {
    .option-grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .option-grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 991.98px) {
    .planner-grid { grid-template-columns: 1fr; }
    .summary-box { position: static; }
}
@media (max-width: 640px) {
    .option-grid-2, .option-grid-3, .feature-grid, .option-grid-4 { grid-template-columns: 1fr; }
    .plan-card h3 { font-size:1.2rem; }
}



.service-detail-page .sd-main {
    background: var(--sd-bg);
    color: var(--sd-text);
    overflow-x: clip;
}

.service-detail-page .sd-hero {
    position: relative;
    padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
    background: linear-gradient(180deg, #0c0c0c 0%, #000000 100%);
}
.service-detail-page .sd-hero h1{
    font-size: 60px;
}
.service-detail-page .sd-hero-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    background:radial-gradient(circle at 50% 100%, #110807 0%, #050505 100%);
}

/*.service-detail-page .sd-hero-deco::after {
    content: "";
    position: absolute;
    top: 8%;
    right: -2%;
    width: min(52%, 420px);
    height: 220px;
    opacity: 0.45;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' fill='none'%3E%3Cpath d='M0 120 Q80 40 160 100 T320 80 T400 40' stroke='%238b8fff' stroke-opacity='0.45' stroke-width='2'/%3E%3Cpath d='M20 160 Q120 80 220 130 T400 100' stroke='%23a78bfa' stroke-opacity='0.4' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat 50% 50% / contain;
}*/
.gradient-line {
    height: 100%;
  border-right: 1px solid; /* Define width and style */
  border-image: linear-gradient(to bottom, #000000 0%, #ffffff 50%, #000000 100%) 1;;
}
.sd-benefits:last-child .gradient-line{
    border-right: none;
}
.service-detail-page .sd-badge {
    display: inline-block;
    font-size: 016px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a3a3a3;
    background: rgba(90, 100, 255, 0.12);
    border: 1px solid rgba(124, 140, 255, 0.28);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    margin-bottom: 1rem;
}

.service-detail-page .sd-hero-title {
    font-size: clamp(2rem, 4.5vw, 3.15rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.12;
    max-width: 18ch;
    margin-bottom: 1rem;
    color: var(--sd-text);
}

.service-detail-page .sd-text-gradient {
    background: var(--sd-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.service-detail-page .sd-hero-emoji {
    font-style: normal;
}

.service-detail-page .sd-hero-lead p {
    font-size: 22px;
    line-height: 1.65;
    color: #d3d3d3;
    margin-bottom: 1.6rem;
}

.service-detail-page .sd-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}



.service-detail-page .sd-btn-pill {
    border-radius: 999px;
    padding: 0.62rem 1.35rem;
}

.service-detail-page .sd-btn-sm {
    padding: 0.5rem 1.15rem;
    font-size: 0.9rem;
}

.service-detail-page .sd-link-play {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 500;
    color: var(--sd-text);
    text-decoration: none;
}

.service-detail-page .sd-link-play:hover {
    color: #fff;
}

.service-detail-page .sd-link-play:hover .sd-play-icon {
    border-color: rgba(255, 255, 255, 0.2);
    background: #151515;
}

.service-detail-page .sd-play-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #181818;
    border: 1px solid #181818;
    color: var(--sd-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.service-detail-page .sd-section {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.service-detail-page .sd-section-alt {
    background: var(--sd-elevated);
}

.service-detail-page .sd-split-head .sd-section-title {
    margin-bottom: 0;
}

.service-detail-page .sd-section-title {
    font-size: clamp(1.45rem, 2.8vw, 2rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.18;
    color: var(--sd-text);
}

.service-detail-page .sd-section-intro {
    font-size: 1rem;
    line-height: 1.65;
    color: #d3d3d3;
}

.sd-benefits h3 , .sd-solutions h3 ,.sd-process h3 , .sd-tech h3{
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 30px;
    color: var(--sd-text);
}

.service-detail-page .sd-benefits p, .sd-solutions p , .sd-process p , .sd-tech p{
    font-size: 16px;
    line-height: 1.75rem;
    color: #d3d3d3;
    margin: 0;
}
.border-none{
    border: none;
}
.service-detail-page .sd-icon-ring {
    width: 3rem;
    height: 3rem;
    padding: 9px 10px;
    border-radius: 50%;
    border: 2px solid rgb(167 167 170 / 35%);
    background: linear-gradient(145deg, rgb(146 146 146 / 10%), rgb(95 95 95 / 6%));
    margin-bottom: 25px;
}

.service-detail-page .sd-panel {
    height: 100%;
    background: #181818;
    border: 1px solid #181818;
    border-radius: 0.65rem;
    padding: 1.35rem 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.service-detail-page .sd-panel-title {
    font-size: 1.02rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--sd-text);
}

.service-detail-page .sd-panel-text {
    font-size: 0.9rem;
    line-height: 1.55;
    color: #d3d3d3;
    margin: 0;
}

.service-detail-page .sd-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sd-primary);
    border: 2px solid rgb(225 225 225 / 35%);
    margin-bottom: 0.85rem;
    background: var(--sd-elevated);
    margin-bottom: 40px;
}

.service-detail-page .sd-process,
.service-detail-page .sd-faq,
.service-detail-page .sd-contact {
    scroll-margin-top: 5.5rem;
}
.sd-faq h2, .sd-faq p{
    margin-bottom: 25px;
}
.service-detail-page .sd-faq-title {
    margin-bottom: 0.75rem;
}

.service-detail-page .sd-faq-intro {
    margin-bottom: 1.25rem;
}

.service-detail-page .sd-accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-color: #ffffff;
    --bs-accordion-active-color: var(--sd-primary);
    --bs-accordion-btn-focus-border-color: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
}
.sd-accordion h3{
    color: #ffffff;
    font-size: 22px;
}
.sd-accordion .accordion-body , .sd-accordion .accordion-body p{
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 15px;
    padding: 0px;
}
.service-detail-page .sd-accordion .sd-accordion-item {
       border: 1px solid #181818;
    background: transparent;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
}
.service-detail-page .sd-accordion .sd-accordion-item:hover{
    background: #181818;
}
.service-detail-page .sd-accordion .accordion-button {
    font-weight: 500;
    font-size: 20px;
    background: transparent;
    box-shadow: none;
    padding: 1rem 0;
}

.service-detail-page .sd-accordion .accordion-button:not(.collapsed) {
    
    background: transparent;
}

.service-detail-page .sd-accordion .accordion-button::after {
    filter: brightness(0) invert(1);
    opacity: 0.55;
}

.service-detail-page .sd-accordion .accordion-button:not(.collapsed)::after {
    opacity: 0.85;
}

.service-detail-page .sd-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.service-detail-page .sd-cta-banner {
    position: relative;
    margin: clamp(1.5rem, 4vw, 2rem) 0;
    padding: clamp(2.5rem, 5vw, 3.75rem) 1.5rem;
    border-radius: 1rem;
    background: var(--sd-cta-gradient);
    border: 1px solid rgba(45, 212, 191, 0.15);
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.service-detail-page .sd-cta-watermark {
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(6rem, 22vw, 14rem);
    font-weight: 500;
    line-height: 1;
    color: rgba(255, 255, 255, 0.14);
    pointer-events: none;
    font-family: Georgia, serif;
}

.service-detail-page .sd-cta-title {
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    color: #f8fafc;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.service-detail-page .sd-cta-text {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(226, 232, 240, 0.88);
    margin-bottom: 1.35rem;
    position: relative;
    z-index: 1;
}

.service-detail-page .sd-cta-banner .sd-btn-primary {
    position: relative;
    z-index: 1;
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #ffffff;
    --bs-btn-color: #0a0a0a;
    --bs-btn-hover-bg: #e2e8f0;
    --bs-btn-hover-border-color: #e2e8f0;
    --bs-btn-hover-color: #0a0a0a;
    --bs-btn-active-bg: #cbd5e1;
    --bs-btn-active-border-color: #cbd5e1;
    --bs-btn-active-color: #0a0a0a;
}

.service-detail-page .sd-contact-heading {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--sd-text);
}

.service-detail-page .sd-contact-profile {
    padding-right: 0.5rem;
}

.service-detail-page .sd-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #2d32f1, #7c3aed);
    color: #fff;
    font-size: 1.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 24px rgba(45, 50, 241, 0.28);
}

.service-detail-page .sd-contact-quote {
    font-size: 1.02rem;
    line-height: 1.65;
    color: #d3d3d3;
}

.service-detail-page .sd-contact-byline {
    font-size: 0.92rem;
    color: var(--sd-text);
}

.service-detail-page .sd-link-arrow {
    font-weight: 500;
    color: var(--sd-primary);
    text-decoration: none;
}

.service-detail-page .sd-link-arrow:hover {
    text-decoration: underline;
}

.service-detail-page .sd-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--sd-text);
    margin-bottom: 0.35rem;
}

.service-detail-page .sd-input {
    border: 1px solid #181818;
    border-radius: 0.5rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.95rem;
    background: #181818;
    color: var(--sd-text);
}

.service-detail-page .sd-input::placeholder {
    color: rgba(154, 160, 173, 0.75);
}

.service-detail-page .sd-input:focus {
    border-color: rgba(124, 140, 255, 0.45);
    box-shadow: 0 0 0 3px rgba(90, 100, 255, 0.18);
    background: #0a0a0a;
    color: var(--sd-text);
}

.service-detail-page .sd-input:-webkit-autofill,
.service-detail-page .sd-input:-webkit-autofill:hover,
.service-detail-page .sd-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: 0 0 0 1000px #181818 inset;
}

.service-detail-page .sd-textarea {
    min-height: 120px;
    resize: vertical;
}

.service-detail-page .sd-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.25rem;
}

.service-detail-page .sd-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: #d3d3d3;
    cursor: pointer;
    margin: 0;
}

.service-detail-page .sd-check input {
    accent-color: var(--sd-primary);
}

.service-detail-page .sd-btn-submit {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

@media (max-width: 767.98px) {
    .service-detail-page .sd-hero-title {
        max-width: none;
    }

    .service-detail-page .sd-split-head {
        text-align: left;
    }

    .service-detail-page .sd-cta-watermark {
        opacity: 0.5;
        right: 2%;
    }
}

/* —— Inner pages (Company, Careers, Insights, Contact) —— */
.inner-page .inner-main {
    padding-bottom: 0;
}

.inner-hero {
    padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.inner-kicker {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9aa0ad;
    margin-bottom: 0.65rem;
}
.inner-title {
    font-size: clamp(2rem, 4vw, 2.85rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: #fff;
    max-width: 18ch;
    margin-bottom: 1rem;
}
.inner-lead {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #9aa0ad;
    margin: 0;
}
.inner-section {
    padding: clamp(2.25rem, 5vw, 3.75rem) 0;
}
.inner-section--muted {
    background: #0a0a0a;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.inner-section--tight-bottom {
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
.inner-heading {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: 1rem;
}
.inner-subheading {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0.5rem;
}
.inner-text {
    color: #c4c9d4;
    font-size: 0.98rem;
    line-height: 1.65;
    margin-bottom: 1rem;
}
.inner-footnote {
    font-size: 0.88rem;
    color: #9aa0ad;
    line-height: 1.55;
}
.inner-footnote a {
    color: #a3a3a3;
}
.inner-highlight-box {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1.35rem 1.25rem;
}
.inner-card {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1.35rem 1.25rem;
}
.inner-card-title {
    font-size: 1.05rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0.5rem;
}
.inner-card-text {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #9aa0ad;
    margin: 0;
}

.inner-jobs {
    display: grid;
    gap: 1rem;
}
.inner-job-card {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1.35rem 1.35rem 1.25rem;
}
.inner-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.inner-job-tag {
    font-size: 016px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a3a3a3;
}
.inner-job-tag--muted {
    color: #9aa0ad;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.inner-job-title {
    font-size: 1.15rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0.5rem;
}
.inner-job-desc {
    font-size: 0.92rem;
    color: #9aa0ad;
    line-height: 1.55;
    margin-bottom: 1rem;
}
.inner-job-link {
    font-weight: 500;
    font-size: 0.9rem;
    color: #fff;
    text-decoration: none;
}
.inner-job-link:hover {
    color: #a3a3a3;
}

.inner-checklist {
    margin: 0;
    padding-left: 1.15rem;
    color: #c4c9d4;
    font-size: 0.95rem;
    line-height: 1.7;
}
.inner-checklist li {
    margin-bottom: 0.35rem;
}

/* Insights listing — full-card link */
.inner-insights-list .article-card {
    position: relative;
}
.inner-insights-list .article-card-hit {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
}
.inner-insights-list .article-card-hit:focus-visible {
    outline: 2px solid rgba(198, 204, 255, 0.85);
    outline-offset: 3px;
}
.inner-insights-list .article-image-wrap,
.inner-insights-list .article-content {
    position: relative;
    z-index: 1;
}

/* Insights detail */
.inner-article-hero {
    padding: clamp(1.5rem, 3vw, 2rem) 0 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.inner-back-link {
    color: #9aa0ad;
    text-decoration: none;
    font-weight: 500;
}
.inner-back-link:hover {
    color: #fff;
}
.inner-article-title {
    font-size: clamp(1.65rem, 3.5vw, 2.35rem);
    font-weight: 500;
   
    line-height: 1.15;
    color: #fff;
    margin: 1rem 0 0.75rem;
}
.inner-article-meta {
    font-size: 0.88rem;
    color: #9aa0ad;
    margin: 0;
}
.inner-article-cover {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
}
.inner-article-img {
    width: 100%;
    height: auto;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.inner-prose {
    padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
   
}
.inner-prose .inner-lead--article {
    font-size: 1.15rem;
    color: #e8eaef;
}
.inner-prose p,
.inner-prose li {
    color: #c4c9d4;
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1.15rem;
}
.inner-prose h2 {
    font-size: 1.25rem;
    font-weight: 500;
    color: #fff;
    margin: 2rem 0 0.75rem;
}
.inner-prose ul {
    padding-left: 1.2rem;
    margin-bottom: 1.15rem;
}
.inner-prose ul li {
    margin-bottom: 0.35rem;
}
.inner-article-footer {
    padding: 2rem 0 clamp(3rem, 6vw, 4rem);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Contact page form */
.inner-contact-block strong {
    color: #e8eaef;
}
.inner-inline-link {
    color: #a3a3a3;
    text-decoration: none;
}
.inner-inline-link:hover {
    text-decoration: underline;
    color: #fff;
}
.inner-form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #e8eaef;
    margin-bottom: 0.35rem;
}
.inner-page .inner-form-control.form-control,
.inner-page .inner-form-control.form-select {
    background: #0e0e0e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    border-radius: 0.45rem;
    font-size: 0.95rem;
    padding: 0.55rem 0.75rem;
}
.inner-page .inner-form-control:focus {
    border-color: rgba(124, 140, 255, 0.45);
    box-shadow: 0 0 0 3px rgba(90, 100, 255, 0.15);
    background: #111;
    color: #fff;
}
.inner-page .inner-form-control::placeholder {
    color: rgba(154, 160, 173, 0.75);
}
.inner-form-textarea {
    min-height: 140px;
    resize: vertical;
}
.inner-contact-submit {
    border: 0;
    border-radius: 999px;
    padding: 0.65rem 1.75rem;
    font-weight: 500;
    font-size: 0.95rem;
    background: #fff;
    color: #0a0a0a;
    transition: filter 0.2s;
}
.inner-contact-submit:hover {
    filter: brightness(0.92);
}

/* Company / About — “Why we do things differently” + team */
.about-different {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.about-split-title {
    font-size: clamp(1.85rem, 3.8vw, 2.75rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.15;
    margin: 0;
}
.about-split-title-line {
    display: block;
    color: #ffffff;
}
.about-split-title-gradient {
    display: block;
    background: linear-gradient(105deg, #e1e1e1 0%, #939494 45%, #e1e1e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.about-split-intro {
    font-size: 1.02rem;
    line-height: 1.65;
    color: #9aa0ad;
    margin: 0;
}

.about-pillars {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.about-pillar {
    padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1rem, 2vw, 1.5rem);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.about-pillar:first-child {
    border-left: none;
}
.about-pillar-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a3a3a3;
    background: rgba(79, 111, 255, 0.08);
    margin-bottom: 1.1rem;
}
.about-pillar-title {
    font-size: 1.05rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 0.65rem;
}
.about-pillar-text {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #9aa0ad;
    margin: 0;
}

.about-team-sub {
    font-size: 0.98rem;
    line-height: 1.55;
    color: #9aa0ad;
    max-width: 36rem;
}
.about-team-card {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.85rem;
    padding: clamp(1.35rem, 3vw, 1.75rem);
    text-align: center;
}
.about-team-avatar img{
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto 1.15rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    font-weight: 500;
    color: #fff;
    object-fit: cover;
    background: linear-gradient(135deg, #4f6fff, #7c3aed);
    box-shadow: 0 10px 28px rgba(79, 111, 255, 0.25);
}
.about-team-avatar--david {
    background: linear-gradient(135deg, #0d9488, #2563eb);
    box-shadow: 0 10px 28px rgba(13, 148, 136, 0.22);
}
.about-team-name {
    font-size: 1.35rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}
.about-team-role {
    font-size: 0.82rem;
    font-weight: 500;
    color: #a3a3a3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}
.about-team-bio {
    font-size: 0.92rem;
    line-height: 1.65;
    color: #9aa0ad;
    margin: 0;
    text-align: left;
}
.gradiant-background-orange{
    /* This creates the subtle dark-to-warm-glow effect seen in the image */
background: radial-gradient(circle at 50% 100%, #110807 0%, #050505 100%);
}
@media (max-width: 991.98px) {
    .about-pillar {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    .about-pillar:first-child {
        border-top: none;
        padding-top: 0;
    }
}

@media (max-width: 767.98px) {
    .inner-title {
        max-width: none;
    }
    .inner-article-title {
        max-width: none;
    }
    .work-item-copy{
        margin-top: 30px;
    }
    .work-tags{
        margin-bottom: 15px;
    }
    .service-detail-page .sd-hero h1{
        font-size: 40px;
    }
    .service-detail-page .sd-hero-lead p {
        font-size: 17px;
    }
}

.plan-section-title{
    text-align: center;
    margin-bottom: 40px;
}
.plan-section-title h1{
    font-size: 60px;
}
.plan-section-title p{
    font-size: 20px ;
}
.planner-grid .plan-left h2{
    margin-bottom: 30px;
    font-size: 24px;
}
.plan-package-features ul , .summary-list ul , .summary-box-muted ul , .inner-prose ul{
    padding: 0px;
}
.plan-package-features ul li , .summary-list ul li , .summary-box-muted ul li , .inner-prose ul li{
    position: relative;
    padding-left: 24px;
}
.plan-package-features ul li:before,
.summary-list ul li:before,
.summary-box-muted ul li:before,
.inner-prose ul li:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-check text-black mr-2 w-4 h-4 mt-0.5 flex-shrink-0' aria-hidden='true'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 0.22em;
    display: inline-block;
    vertical-align: middle;
    filter: invert(1);
}
@media(max-width: 767px){
    .plan-section-title h1{
    font-size: 40px;
}
.planner-grid .plan-left h2 {
    margin-bottom: 30px;
    font-size: 22px;
}
}

/* Global theme toggle + light mode */
.theme-toggle-btn {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1200;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(145deg, rgba(17, 17, 17, 0.95), rgba(35, 35, 35, 0.95));
    color: #fff;
    border-radius: 999px;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 5.5rem;
    justify-content: center;
    backdrop-filter: blur(6px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.theme-toggle-btn:hover {
    background: linear-gradient(145deg, rgba(31, 31, 31, 0.96), rgba(49, 49, 49, 0.96));
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.theme-toggle-btn:active {
    transform: translateY(0);
}
.theme-toggle-btn__icon {
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle-btn__icon svg {
    width: 100%;
    height: 100%;
}
.theme-toggle-btn__text {
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}

.scroll-top-btn {
    position: fixed;
    right: 1rem;
    bottom: 4.15rem;
    z-index: 1200;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(145deg, rgba(17, 17, 17, 0.95), rgba(35, 35, 35, 0.95));
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    backdrop-filter: blur(6px);
}
.scroll-top-btn svg {
    width: 1rem;
    height: 1rem;
}
.scroll-top-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.scroll-top-btn:hover {
    background: linear-gradient(145deg, rgba(31, 31, 31, 0.96), rgba(49, 49, 49, 0.96));
}
.scroll-top-btn:active {
    transform: translateY(1px);
}

:root[data-theme="light"] {
    --bg: #f5f7fb;
    --header-bg: #ffffff;
    --surface: #ffffff;
    --text: #121212;
    --muted: #5c6575;
    --nav-muted: #4f5968;
    --border: #d9deea;
}

:root[data-theme="light"] .theme-toggle-btn {
    background: linear-gradient(145deg, #ffffff, #f4f7fb);
    border-color: #d1d7e4;
    color: #121212;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.15);
}
:root[data-theme="light"] .theme-toggle-btn:hover {
    background: linear-gradient(145deg, #f8fbff, #ecf1f8);
}
:root[data-theme="light"] .scroll-top-btn {
    background: linear-gradient(145deg, #ffffff, #f4f7fb);
    border-color: #d1d7e4;
    color: #111827;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.15);
}
:root[data-theme="light"] .scroll-top-btn:hover {
    background: linear-gradient(145deg, #f8fbff, #ecf1f8);
}

:root[data-theme="light"] .webdesign-navbar,
:root[data-theme="light"] .webdesign-offcanvas {
    background: #ffffff !important;
}
:root[data-theme="light"] .webdesign-navbar-border,
:root[data-theme="light"] .webdesign-offcanvas-border {
    border-color: rgba(17, 24, 39, 0.055) !important;
}
:root[data-theme="light"] .webdesign-brand,
:root[data-theme="light"] .webdesign-desktop-nav .webdesign-nav-link {
    color: #121212 !important;
}
:root[data-theme="light"] .webdesign-offcanvas-nav a {
    color: #4f5968 !important;
    border-color: rgba(17, 24, 39, 0.06) !important;
    background: transparent !important;
}
:root[data-theme="light"] .webdesign-offcanvas-nav a:hover,
:root[data-theme="light"] .webdesign-offcanvas-nav a.active {
    color: #111827 !important;
    border-color: rgba(17, 24, 39, 0.11) !important;
    background: transparent !important;
}

:root[data-theme="light"] .webdesign-offcanvas .btn-webdesign-talk {
    border-color: rgba(17, 24, 39, 0.9) !important;
    background: #111827 !important;
    color: #ffffff !important;
}

:root[data-theme="light"] .webdesign-offcanvas .btn-webdesign-talk:hover {
    border-color: #000000 !important;
    background: #000000 !important;
    color: #ffffff !important;
}
:root[data-theme="light"] .webdesign-desktop-nav .webdesign-nav-link.active {
    border-bottom-color: #121212;
}
:root[data-theme="light"] .btn-webdesign-talk {
    color: #121212;
    background: #fff;
    border-color: rgba(17, 24, 39, 0.15);
}
:root[data-theme="light"] .btn-close.btn-close-white {
    filter: none;
}

/* Mobile menu: dark hamburger on light navbar (Bootstrap toggler uses --bs-navbar-toggler-icon-bg) */
:root[data-theme="light"] .webdesign-nav-toggler {
    --bs-navbar-toggler-border-color: rgba(17, 24, 39, 0.22);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23111827' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

:root[data-theme="light"] .section,
:root[data-theme="light"] .section-selected-works,
:root[data-theme="light"] .section-clients,
:root[data-theme="light"] .section-facts,
:root[data-theme="light"] .section-testimonials,
:root[data-theme="light"] .section-latest-articles,
:root[data-theme="light"] .inner-section,
:root[data-theme="light"] .inner-section--muted,
:root[data-theme="light"] .plan-main,
:root[data-theme="light"] .sd-main,
:root[data-theme="light"] .sd-hero,
:root[data-theme="light"] .sd-section,
:root[data-theme="light"] .sd-section-alt,
:root[data-theme="light"] .plan-get-started {
    background: #f5f7fb !important;
    color: #121212;
}

:root[data-theme="light"] .plan-card,
:root[data-theme="light"] .summary-box,
:root[data-theme="light"] .option-chip,
:root[data-theme="light"] .feature-item,
:root[data-theme="light"] .plan-form-shell,
:root[data-theme="light"] .plan-form-chip,
:root[data-theme="light"] .inner-card,
:root[data-theme="light"] .inner-job-card,
:root[data-theme="light"] .about-team-card,
:root[data-theme="light"] .inner-highlight-box,
:root[data-theme="light"] .sd-panel,
:root[data-theme="light"] .article-card,
:root[data-theme="light"] .fact-card {
    background: #ffffff !important;
    border-color: #d9deea !important;
    color: #121212 !important;
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.07);
}

:root[data-theme="light"] .site-footer,
:root[data-theme="light"] .footer-rebuild {
    background: #ffffff !important;
    color: #121212 !important;
    border-top-color: #e4e8f1 !important;
}
:root[data-theme="light"] .footer-main-grid,
:root[data-theme="light"] .footer-bottom-bar,
:root[data-theme="light"] .footer-brand-social {
    background: #ffffff !important;
    border-color: #e4e8f1 !important;
}
:root[data-theme="light"] .footer-link-columns,
:root[data-theme="light"] .footer-link-col,
:root[data-theme="light"] .footer-link-col ul {
    background: #ffffff !important;
}
:root[data-theme="light"] .footer-brand,
:root[data-theme="light"] .footer-main-title,
:root[data-theme="light"] .footer-link-col h3,
:root[data-theme="light"] .footer-link-col a,
:root[data-theme="light"] .footer-socials a,
:root[data-theme="light"] .footer-bottom-bar p {
    color: #121212 !important;
}

:root[data-theme="light"] .footer-link-col a,
:root[data-theme="light"] .footer-socials ul li a {
    color: #374151 !important;
}
:root[data-theme="light"] .footer-link-col a:hover,
:root[data-theme="light"] .footer-socials ul li a:hover {
    color: #111827 !important;
}
:root[data-theme="light"] .footer-main-input,
:root[data-theme="light"] .footer-main-input::placeholder {
    color: #4b5563 !important;
}

/* :root[data-theme="light"] .footer-socials ul li a img {
    filter: invert(1) grayscale(1) contrast(1.1);
} */

:root[data-theme="light"] .footer-main-title {
    color: #0f172a !important;
}

:root[data-theme="light"] .footer-main-form {
    background: #ffffff !important;
    border-color: #cfd6e4 !important;
}

:root[data-theme="light"] .footer-main-input {
    background: #ffffff !important;
}

:root[data-theme="light"] .footer-main-submit {
    color: #1f2937 !important;
}

:root[data-theme="light"] .footer-link-col h3 {
    color: #0f172a !important;
}

:root[data-theme="light"] .footer-link-col a {
    color: #4b5563 !important;
}

:root[data-theme="light"] .footer-link-col a:hover {
    color: #111827 !important;
}

:root[data-theme="light"] .footer-socials ul li a {
    color: #4b5563 !important;
}

:root[data-theme="light"] .footer-socials ul li a:hover {
    color: #111827 !important;
}

:root[data-theme="light"] .footer-left-pane {
    border-right-color: #e4e8f1 !important;
}

:root[data-theme="light"] .footer-bottom-bar {
    color: #6b7280 !important;
}

:root[data-theme="light"] .footer-bottom-bar p {
    color: #6b7280 !important;
}

:root[data-theme="light"] .btn-articles-view {
    background: #ffffff !important;
    border-color: #cfd6e4 !important;
    color: #111827 !important;
}

:root[data-theme="light"] .btn-articles-view:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
    color: #111827 !important;
}

:root[data-theme="light"] .articles-grid {
    background: #ffffff !important;
}

/* FAQ readability in light mode */
:root[data-theme="light"] .sd-faq h2,
:root[data-theme="light"] .sd-faq p,
:root[data-theme="light"] .service-detail-page .sd-faq-title,
:root[data-theme="light"] .service-detail-page .sd-faq-intro,
:root[data-theme="light"] .sd-accordion h3,
:root[data-theme="light"] .sd-accordion .accordion-body,
:root[data-theme="light"] .sd-accordion .accordion-body p,
:root[data-theme="light"] .service-detail-page .sd-accordion .accordion-button {
    color: #111827 !important;
}
:root[data-theme="light"] .service-detail-page .sd-accordion .accordion-button:not(.collapsed) {
    color: #000 !important;
}
:root[data-theme="light"] .service-detail-page .sd-accordion .sd-accordion-item {
    border-color: #d7deea !important;
    background: #ffffff !important;
}
:root[data-theme="light"] .service-detail-page .sd-accordion .sd-accordion-item:hover {
    background: #f8fafc !important;
}

/* Compatible global light mode: white sections, dark readable text */
:root[data-theme="light"] body.webdesign-page,
:root[data-theme="light"] .webdesign-page .bg-black,
:root[data-theme="light"] .webdesign-page .section,
:root[data-theme="light"] .webdesign-page .section-selected-works,
:root[data-theme="light"] .webdesign-page .section-clients,
:root[data-theme="light"] .webdesign-page .section-facts,
:root[data-theme="light"] .webdesign-page .section-testimonials,
:root[data-theme="light"] .webdesign-page .section-latest-articles,
:root[data-theme="light"] .webdesign-page .footer-cta-band,
:root[data-theme="light"] .webdesign-page .article-content,
:root[data-theme="light"] .webdesign-page .clients-swiper .swiper-slide,
:root[data-theme="light"] .webdesign-page .client-brand,
:root[data-theme="light"] .webdesign-page .testimonial-swiper .swiper-slide {
    background: #ffffff !important;
}

:root[data-theme="light"] .webdesign-page main,
:root[data-theme="light"] .webdesign-page section,
:root[data-theme="light"] .webdesign-page article,
:root[data-theme="light"] .webdesign-page aside,
:root[data-theme="light"] .webdesign-page h1,
:root[data-theme="light"] .webdesign-page h2,
:root[data-theme="light"] .webdesign-page h3,
:root[data-theme="light"] .webdesign-page h4,
:root[data-theme="light"] .webdesign-page h5,
:root[data-theme="light"] .webdesign-page h6,
:root[data-theme="light"] .webdesign-page p,
:root[data-theme="light"] .webdesign-page li,
:root[data-theme="light"] .webdesign-page a,
:root[data-theme="light"] .webdesign-page label {
    color: #111827 !important;
}

:root[data-theme="light"] .webdesign-page .article-tag,
:root[data-theme="light"] .webdesign-page .works-headline-accent,
:root[data-theme="light"] .webdesign-page .about-split-title-gradient {
    color: #333 !important;
}

:root[data-theme="light"] .banner-webdesign {
    background: #ffffff !important;

}
:root[data-theme="light"] .work-item {
    background: #f5f7fb!important;
    border-color: #d9deea !important;
}
:root[data-theme="light"] .client-brand__mark{
    background-color: transparent !important;
}
:root[data-theme="light"] .service-detail-page .sd-icon-ring svg{
    filter: invert(1);
}
:root[data-theme="light"] .work-tag {
    
    border-color: #cfd6e4 !important;
    color: #111827 !important;
}

:root[data-theme="light"] .webdesign-hero-title,
:root[data-theme="light"] .webdesign-hero-line1,
:root[data-theme="light"] .webdesign-hero-line2 {
    color: #111827 !important;
}

:root[data-theme="light"] .sd-hero,
:root[data-theme="light"] .service-detail-page .sd-hero {
    background: #ffffff !important;
    color: #111827 !important;
}

:root[data-theme="light"] .service-detail-page .sd-hero-deco {
    background: none !important;
}

:root[data-theme="light"] .service-detail-page .sd-hero-deco::after {
    opacity: 0.18 !important;
}

:root[data-theme="light"] .gradient-line {
    border-image: linear-gradient(to bottom, #e5e7eb 0%, #9ca3af 50%, #e5e7eb 100%) 1 !important;
}

:root[data-theme="light"] .service-detail-page .sd-play-icon {
    background: #ffffff !important;
    border-color: #cfd6e4 !important;
    color: #000 !important;
}

:root[data-theme="light"] .service-detail-page .sd-step-num {
    background: #ffffff !important;
    border-color: #cfd6e4 !important;
    color: #000 !important;
}



:root[data-theme="light"] .option-chip strong,
:root[data-theme="light"] .option-chip.compact strong,
:root[data-theme="light"] .summary-total,
:root[data-theme="light"] .summary-line,
:root[data-theme="light"] .option-chip .chip-price,
:root[data-theme="light"] .inner-contact-block strong,
:root[data-theme="light"] .plan-form-label {
    color: #111827 !important;
}

:root[data-theme="light"] .option-chip.compact em {
    color: #0f172a !important;
    background: #ffffff !important;
    font-weight: 600;
}

:root[data-theme="light"] .feature-item b {
    color: #0f172a !important;
    background: #ffffff !important;
    border: 1px solid #cfd6e4 !important;
}

:root[data-theme="light"] .summary-total strong {
    color: #000000 !important;
}

:root[data-theme="light"] .plan-package-features ul li:before,
:root[data-theme="light"] .summary-list ul li:before,
:root[data-theme="light"] .summary-box-muted ul li:before,
:root[data-theme="light"] .inner-prose ul li:before {
    filter: none !important;
}

:root[data-theme="light"] .plan-page .plan-form-input.form-control,
:root[data-theme="light"] .inner-page .plan-form-input.form-control,
:root[data-theme="light"] .inner-page .plan-form-input.form-select {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #cfd6e4 !important;
}

:root[data-theme="light"] .plan-page .plan-form-input.form-control::placeholder,
:root[data-theme="light"] .inner-page .plan-form-input.form-control::placeholder {
    color: #6b7280 !important;
}

:root[data-theme="light"] .plan-page .plan-form-input.form-control:focus,
:root[data-theme="light"] .inner-page .plan-form-input.form-control:focus,
:root[data-theme="light"] .inner-page .plan-form-input.form-select:focus {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #9db4ff !important;
    box-shadow: 0 0 0 3px rgba(79, 111, 255, 0.15) !important;
}

:root[data-theme="light"] .what-we-do-list li {
    background: #ffffff !important;
    border-color: #d9deea !important;
}

:root[data-theme="light"] .what-we-do-list li:hover {
    border-color: #616264 !important;
}

:root[data-theme="light"] .about-cta-link {
    color: #111827 !important;
    border-bottom-color: #cfd6e4 !important;
    background: #ffffff !important;
}

:root[data-theme="light"] .about-cta-link:hover {
    color: #111827 !important;
    border-bottom-color: #9ca3af !important;
}

:root[data-theme="light"] .footer-cta-band-btn {
    background: #ffffff !important;
    border-color: #cfd6e4 !important;
    color: #111827 !important;
}

:root[data-theme="light"] .footer-cta-band-btn:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
    color: #111827 !important;
}

:root[data-theme="light"] .plan-summary-cta {
    background: #fff !important;
    border-color: #111 !important;
    color: #111 !important;
    box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

:root[data-theme="light"] .plan-summary-cta:hover {
    background: #111 !important;
    border-color: #000 !important;
    color: #fff !important;
}