/* Public theme is isolated from the management panel and its preference. */
html[data-public-theme=light] .dv-page{color-scheme:light;--dv-ink:#15273d;--dv-muted:#526579;--dv-blue:#3554cb;--dv-cyan:#0c7d92;--dv-line:#d3ddea;background:#f9fbfe}
html[data-public-theme=dark] .dv-page{color-scheme:dark;--dv-ink:#edf4ff;--dv-muted:#b2c2d6;--dv-blue:#a3b5ff;--dv-cyan:#81d4e2;--dv-line:#314760;background:#0c1727}
html[data-public-theme=dark] .dv-page .dv-hero{background:radial-gradient(ellipse at 89% 25%,#172943 0,transparent 48%),linear-gradient(180deg,#101c30,#0c1727)}
html[data-public-theme=dark] .dv-page .dv-breadcrumb,html[data-public-theme=dark] .dv-page .dv-illustration-note{color:#a5b8d1!important}
html[data-public-theme=dark] .dv-page .dv-illustration::before{background:radial-gradient(ellipse,#29437866,transparent 70%)}
html[data-public-theme=dark] .dv-page .dv-editor{box-shadow:0 26px 60px #0005}
html[data-public-theme=dark] .dv-page .dv-application{border-color:var(--dv-line)}
html[data-public-theme=dark] .dv-page .dv-application-top>span{color:#a5b8d1}
html[data-public-theme=dark] .dv-page .dv-check{background:#24385d}
html[data-public-theme=dark] .dv-page .dv-button--secondary{border-color:#456084}
html[data-public-theme=dark] .dv-page .dv-button--secondary:hover{background:#1c2d45}
html[data-public-theme=dark] .dv-page .dv-footer{background:#111f33}
html[data-public-theme=dark] .dv-page .dv-footer-bottom{border-color:var(--dv-line);color:#a5b8d1}
html[data-public-theme=light] .dv-page .dv-calculator,html[data-public-theme=light] .dv-page .dubbing-public{background:#edf2fa}
html[data-public-theme=light] .dv-page .dubbing-simulator{color-scheme:light;--dub-surface:#fff;--dub-ink:#15273d;--dub-muted:#526579;--dub-line:#c4d2e4;--surface:#fff;--canvas:#edf2fa;color:var(--dub-ink)}
html[data-public-theme=light] .dv-page .dubbing-heading .dubbing-eyebrow{color:#146b82}
html[data-public-theme=light] .dv-page .dubbing-field small.dubbing-error{color:#a92842}
html[data-public-theme=light] .dv-page .dubbing-proposal{border-color:#a2b5d0;color:#263e66}
html[data-public-theme=light] .dv-page .dubbing-proposal:hover{background:#eaf0fc}
html[data-public-theme=light] .dv-page .dv-estimate-note{color:#15273d}
html[data-public-theme=light] .dv-page .dv-estimate-note p{color:#526579}
html[data-public-theme=dark] .dv-page .dubbing-simulator{color-scheme:dark;--dub-surface:#152b44;--dub-ink:#f1f6fc;--dub-muted:#b5c5d8;--dub-line:#35516e;--surface:#0d192a;--canvas:#213953}
.dv-page .dubbing-total{color:#fff}
/* The header remains outside the hero on both public pages. */

.dv-page{padding-top:96px}
@media(max-width:767px){.dv-page{padding-top:80px}}


html:has(#root > .dv-page)::-webkit-scrollbar{width:10px}
html:has(#root > .dv-page)::-webkit-scrollbar-track{background:#0c1727}
html:has(#root > .dv-page)::-webkit-scrollbar-thumb{background:linear-gradient(#4054c7,#0f7f91);border-radius:8px}
/* Public homepage themes. The administration shell is deliberately out of scope. */
html[data-public-theme="light"] #root > main.overflow-x-hidden:not(.admin-shell) {
  --ph-bg: #f7f9fd;
  --ph-surface: #ffffff;
  --ph-muted-surface: #edf3fa;
  --ph-ink: #15263d;
  --ph-copy: #526279;
  --ph-line: #d4dfed;
  --ph-accent: #3554c7;
  --ph-cyan: #086f82;
  --ph-shadow: 0 12px 34px rgba(26, 51, 85, .08);
  --ph-image-overlay: linear-gradient(100deg, rgba(255,255,255,.97), rgba(244,248,252,.91) 58%, rgba(232,241,250,.8));
}
html[data-public-theme="dark"] #root > main.overflow-x-hidden:not(.admin-shell) {
  --ph-bg: #080f1c;
  --ph-surface: #111e31;
  --ph-muted-surface: #172a41;
  --ph-ink: #f2f6fc;
  --ph-copy: #bccbdd;
  --ph-line: #314761;
  --ph-accent: #9cafff;
  --ph-cyan: #73d1df;
  --ph-shadow: 0 14px 38px rgba(0, 5, 15, .24);
  --ph-image-overlay: linear-gradient(100deg, rgba(15,28,46,.98), rgba(16,31,51,.95) 58%, rgba(20,41,62,.9));
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) {
  background: var(--ph-bg) !important;
  color: var(--ph-copy) !important;
}

/* The photographic hero and its blue delivery strip retain their paired dark colours. */
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) > section:not(:first-of-type) {
  background: var(--ph-bg) !important;
  color: var(--ph-copy) !important;
  border-color: var(--ph-line) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) > section:is(#services, #about, #portfolio) {
  background: var(--ph-muted-surface) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) > section:not(:first-of-type) :is(h2, h3, h4, strong, summary, label, [class*="text-white"]) {
  color: var(--ph-ink) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) > section:not(:first-of-type) :is(p, li, small, [class*="text-slate-"]) {
  color: var(--ph-copy) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) > section:not(:first-of-type) :is([class*="text-primary"], [class*="text-secondary"]) {
  color: var(--ph-accent) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) > section:not(:first-of-type) .text-transparent {
  color: transparent !important;
  background-image: linear-gradient(90deg, #4054c7, #0f7f91) !important;
}
html[data-public-theme="dark"] #root > main.overflow-x-hidden:not(.admin-shell) > section:not(:first-of-type) .text-transparent {
  background-image: linear-gradient(90deg, #9cafff, #73d1df) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) > section:not(:first-of-type) :is([class*="bg-charcoal"], [class*="bg-white/"]) {
  background: var(--ph-surface) !important;
  border-color: var(--ph-line) !important;
}

/* Preserve service images while replacing only the contrast overlay. */
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #services .group,
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #services .group:hover {
  background: var(--ph-surface) !important;
  border-color: var(--ph-line) !important;
  box-shadow: var(--ph-shadow) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #services > div.relative > div:first-child > div.grid > .group > div[class*="bg-charcoal"],
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #services > div.relative > div.grid:last-child > .group {
  background: var(--ph-image-overlay), var(--card-image) center / cover no-repeat !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #services .group :is([class*="bg-gradient-to-br"], [class*="w-14"][class*="h-14"]) {
  background: var(--ph-muted-surface) !important;
  border-color: var(--ph-line) !important;
  color: var(--ph-accent) !important;
  box-shadow: none !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #services .group :is([class*="bg-gradient-to-br"], [class*="w-14"][class*="h-14"]) svg {
  color: var(--ph-accent) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #services .group :is([class*="text-white/50"], [class*="text-white/30"]) {
  color: var(--ph-copy) !important;
}

/* Process cards override both the inline rules and the site-quality rules. */
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #process > div.relative > div.grid > div.group,
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #process > div.relative > div.grid > div.group:hover {
  background: var(--ph-image-overlay), var(--process-card-image) var(--process-card-position, center) / cover no-repeat !important;
  border-color: var(--ph-line) !important;
  box-shadow: var(--ph-shadow) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #process > div.relative > div.grid > div.group > div:first-child {
  background: var(--ph-muted-surface) !important;
  color: var(--ph-accent) !important;
  border-color: var(--ph-line) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #process :is(h2, h3, strong),
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #process .process-stats > div > div:first-child {
  color: var(--ph-ink) !important;
  -webkit-text-fill-color: var(--ph-ink) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #process p,
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #process .process-stats > div > div:last-child {
  color: var(--ph-copy) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #process > div.relative > div.text-center > span {
  color: var(--ph-cyan) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #process .process-stats {
  border-color: var(--ph-line) !important;
}

/* Investment cards, including the additional studio, traffic and app offerings. */
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing :is(.new-service-plan, .studio-package, .traffic-card, .app-packages-info, .studio-packages__terms, .studio-packages__process, .traffic-packages__terms) {
  background: var(--ph-surface) !important;
  color: var(--ph-copy) !important;
  border-color: var(--ph-line) !important;
  box-shadow: var(--ph-shadow) !important;
  --studio-accent: var(--ph-cyan);
  --traffic-accent: var(--ph-cyan);
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing :is(.new-service-plan__header, .studio-package__channel, .studio-package__capacity, .studio-package__subscription, .studio-package__art, .traffic-card__channel, .traffic-card__budget, .app-plan-platform) {
  background: var(--ph-muted-surface) !important;
  border-color: var(--ph-line) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing :is(h3, h4, strong, .new-service-plan__investment strong, .new-service-plan__header h3) {
  color: var(--ph-ink) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing :is(p, li, small, .new-service-plan__investment > span, .new-service-plan__note, .new-service-plan__header p, .studio-package__price-label, .studio-package__payment > span, .studio-package__capacity span, .traffic-card__label, .traffic-card__budget span, .app-plan-delivery, .sclyve-pricing-conditions) {
  color: var(--ph-copy) !important;
  border-color: var(--ph-line) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing :is(.studio-packages__eyebrow, .studio-package__label, .studio-package__subscription-label, .studio-packages__details, .traffic-packages__eyebrow, .traffic-packages__details, .app-packages-info a, .studio-package__channel, .traffic-card__channel, .traffic-card__price > span, .studio-package__price > span, [class*="text-primary"], [class*="text-amber-"], [class*="text-red-"], [class*="text-orange-"]) {
  color: var(--ph-accent) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing :is(.studio-package__badge, .traffic-card__badge) {
  background: var(--ph-muted-surface) !important;
  color: var(--ph-accent) !important;
  border-color: var(--ph-line) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing :is(.studio-package__note, .studio-packages__process li > span, .studio-package__subscription-terms, .traffic-packages__contract) {
  color: var(--ph-copy) !important;
  border-color: var(--ph-line) !important;
}

/* Portfolio screenshots keep their originals; their surrounding cards follow the theme. */
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) .portfolio-impact,
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) .sclyve-case-card,
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #portfolio [class*="bg-charcoal"] {
  background: var(--ph-surface) !important;
  border-color: var(--ph-line) !important;
  box-shadow: var(--ph-shadow) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #services :is(.portfolio-impact__copy h3, .sclyve-case-card h4, .sclyve-case-card h4 a),
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #portfolio :is(h2, h3, h4, strong) {
  color: var(--ph-ink) !important;
  text-shadow: none !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #services :is(.portfolio-impact__copy p, .sclyve-case-card__summary),
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #portfolio :is(p, [class*="text-slate-"]) {
  color: var(--ph-copy) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #services :is(.portfolio-impact__eyebrow, .sclyve-case-card__category) {
  color: var(--ph-cyan) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #portfolio .text-transparent {
  color: transparent !important;
}

/* Frequently asked questions, testimonials, quote and contact form. */
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) :is(#faq details, section:has(#testimonial-carousel) [class*="group/card"]) {
  background: var(--ph-surface) !important;
  border-color: var(--ph-line) !important;
  box-shadow: var(--ph-shadow) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #faq :is(summary, h2) {
  color: var(--ph-ink) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #faq details > div {
  color: var(--ph-copy) !important;
  border-color: var(--ph-line) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) section:has(blockquote) :is(blockquote, cite) {
  color: var(--ph-ink) !important;
  text-shadow: none !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #contact :is(input, textarea, select) {
  background: var(--ph-surface) !important;
  color: var(--ph-ink) !important;
  border-color: var(--ph-line) !important;
  color-scheme: inherit;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #contact :is(input, textarea)::placeholder {
  color: var(--ph-copy) !important;
  opacity: .85;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) .marquee-container {
  background: var(--ph-muted-surface) !important;
  border-color: var(--ph-line) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) .marquee-container span {
  color: var(--ph-ink) !important;
}

/* The footer logo swaps to the official original in the light theme. */
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) footer {
  background: var(--ph-surface) !important;
  color: var(--ph-copy) !important;
  border-color: var(--ph-line) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) footer :is(h3, h4, strong, [class*="text-white"]) {
  color: var(--ph-ink) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) footer :is(p, [class*="text-slate-"]),
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) footer > div:last-child {
  color: var(--ph-copy) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) footer :is([class*="text-primary"], [class*="text-secondary"]) {
  color: var(--ph-accent) !important;
}
html[data-public-theme="light"] #root > main.overflow-x-hidden:not(.admin-shell) .site-brand-logo--footer {
  background: #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
}
html[data-public-theme="light"] #root > main.overflow-x-hidden:not(.admin-shell) .site-brand-logo--footer img {
  content: url('/assets/sclyve-digital-logo.jpg');
}

/* Keep commercial calls to action paired with a dark brand gradient in both themes. */
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) :is(.portfolio-impact__link, .new-service-plan__footer a, .studio-package__cta, .traffic-card__cta, .sclyve-case-card__actions a, a[class*="from-primary"][class*="to-accent"], button[class*="from-primary"][class*="to-accent"]) {
  background: linear-gradient(105deg, #4054c7, #0f7f91) !important;
  color: #fff !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) :is(.portfolio-impact__link, .new-service-plan__footer a, .studio-package__cta, .traffic-card__cta, .sclyve-case-card__actions a, a[class*="from-primary"][class*="to-accent"], button[class*="from-primary"][class*="to-accent"]) :is(span, strong) {
  color: #fff !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) :is(.sclyve-service-pages a, .sclyve-service-page-link, .app-service-detail-link) {
  background: var(--ph-muted-surface) !important;
  color: var(--ph-accent) !important;
  border-color: var(--ph-line) !important;
}

/* The mobile service picker is part of the public pricing section. */
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing :is(.service-choice-trigger, .service-choice-dialog, .service-choice-option, .service-choice-close, .pricing-category-navigation__arrow) {
  background: var(--ph-surface) !important;
  color: var(--ph-ink) !important;
  border-color: var(--ph-line) !important;
  box-shadow: var(--ph-shadow) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing .service-choice-option[aria-pressed="true"] {
  background: var(--ph-muted-surface) !important;
  border-color: var(--ph-accent) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing :is(.service-choice-trigger__text > strong, .service-choice-option > strong, .service-choice-dialog__header h3) {
  color: var(--ph-ink) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing :is(.service-choice-trigger__text > span, .service-choice-trigger__action, .service-choice-hint, .service-choice-option__description, .service-choice-dialog__footer, .service-choice-dialog__header p, .pricing-category-navigation__hint) {
  color: var(--ph-copy) !important;
  border-color: var(--ph-line) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing .pricing-category-navigation__rail::before {
  background: linear-gradient(90deg, var(--ph-bg), transparent);
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing .pricing-category-navigation__rail::after {
  background: linear-gradient(270deg, var(--ph-bg), transparent);
}

/* The original featured landing-page card uses a literal colour, outside bg-charcoal. */
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing .group[class*="bg-[#0F0505]"] {
  background: var(--ph-surface) !important;
  border-color: #8799df !important;
  box-shadow: var(--ph-shadow) !important;
}

/* Original pricing controls and featured headings retain white on their solid brand fills. */
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing :is(
  [class~="bg-primary"],
  [class*="bg-red-"][class*="text-white"],
  [class*="bg-cyan-"][class*="text-white"],
  [class*="bg-amber-"][class*="rounded-full"],
  div[class*="bg-gradient-to-r"][class*="from-red-"],
  div[class*="bg-gradient-to-r"][class*="from-amber-"][class*="rounded-full"],
  a[class*="bg-gradient-to-"],
  button[class*="bg-gradient-to-"]
) {
  color: #fff !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing :is(
  [class~="bg-primary"],
  [class*="bg-red-"][class*="text-white"],
  [class*="bg-cyan-"][class*="text-white"],
  [class*="bg-amber-"][class*="rounded-full"],
  div[class*="bg-gradient-to-r"][class*="from-red-"],
  div[class*="bg-gradient-to-r"][class*="from-amber-"][class*="rounded-full"],
  a[class*="bg-gradient-to-"],
  button[class*="bg-gradient-to-"]
) :is(h3, p, span, strong, small, svg) {
  color: #fff !important;
}

/* Sites and stores use original gradient card wrappers instead of bg-charcoal. */
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing .group[class~="bg-gradient-to-b"][class~="from-charcoal"]:is([class~="to-blue-950/20"], [class~="to-purple-950/20"], [class~="to-cyan-950/20"]) {
  background: var(--ph-surface) !important;
  color: var(--ph-copy) !important;
  border-color: var(--ph-line) !important;
  box-shadow: var(--ph-shadow) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing .group[class~="bg-gradient-to-b"][class~="from-charcoal"] :is(.institutional-plan-heading, div[class~="bg-purple-500/5"]) {
  background: var(--ph-muted-surface) !important;
  border-color: var(--ph-line) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing .group[class~="bg-gradient-to-b"][class~="from-charcoal"] :is(.institutional-plan-heading, div[class~="bg-purple-500/5"]) h3 {
  color: var(--ph-ink) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing .group[class~="bg-gradient-to-b"][class~="from-charcoal"] :is(.institutional-plan-heading, div[class~="bg-purple-500/5"]) p {
  color: var(--ph-copy) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing .group[class~="bg-gradient-to-b"][class~="from-charcoal"] :is(span[class*="text-blue-"], span[class*="text-purple-"], span[class*="text-cyan-"], svg[class*="text-blue-"], svg[class*="text-purple-"], svg[class*="text-cyan-"]):not([class~="bg-primary"] *) {
  color: var(--ph-accent) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing .group[class~="bg-gradient-to-b"][class~="from-charcoal"] span[class*="uppercase"][class*="italic"] {
  color: var(--ph-copy) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing .group[class~="bg-gradient-to-b"][class~="from-charcoal"] a[class~="bg-blue-600/10"] {
  background: var(--ph-muted-surface) !important;
  color: var(--ph-accent) !important;
  border-color: var(--ph-line) !important;
}
html[data-public-theme] #root > main.overflow-x-hidden:not(.admin-shell) #pricing .group[class~="bg-gradient-to-b"][class~="from-charcoal"] a[class~="bg-blue-600/10"]:hover {
  background: #4054c7 !important;
  color: #fff !important;
  border-color: #4054c7 !important;
}

/* Six services reuse the established card component and its public theme. */
#root #services .sclyve-service-grid--complete > .group[data-service="social"]::before{content:"05"}
#root #services .sclyve-service-grid--complete > .group[data-service="dubbing"]::before{content:"06"}
#root #services .sclyve-service-grid--complete > .group[data-service="dubbing"]{--card-image:url('/assets/hero-studio-premium.webp');text-decoration:none}
#root #services .sclyve-service-grid--complete > .group:focus-visible{outline:3px solid #527bff;outline-offset:4px}
@media(min-width:768px) and (max-width:1023px){#root #services .sclyve-service-grid--complete > .group:last-child{grid-column:auto;width:auto;justify-self:stretch}}
@media(min-width:1024px){#root #services .sclyve-service-grid--complete > .group:nth-child(n){grid-column:span 2}}

/* Digital solutions follow the standard section; the original cards stay intact. */
#root #digital-solutions{background:var(--ph-muted-surface,#172a41);color:var(--ph-copy,#bccbdd)}
#root #digital-solutions h2,#root #digital-solutions h3{color:var(--ph-ink,#f2f6fc)}
#root #digital-solutions p,#root #digital-solutions [class*="text-white/30"]{color:var(--ph-copy,#bccbdd)}
#root #digital-solutions [class*="text-secondary"]{color:var(--ph-accent,#9cafff)}
#root #digital-solutions .group{border-color:var(--ph-line,#314761);border-radius:1.25rem;background:var(--ph-image-overlay,linear-gradient(100deg,#101f33f2,#14293ee6)),var(--card-image) center/cover no-repeat;box-shadow:var(--ph-shadow,0 14px 38px #00050f3d);transform:none}
#root #digital-solutions .group:hover{border-color:var(--ph-accent,#9cafff);transform:translateY(-4px)}
#root #digital-solutions .group>[class*="w-14"][class*="h-14"]{background:var(--ph-muted-surface,#172a41);border-color:var(--ph-line,#314761);color:var(--ph-accent,#9cafff);border-radius:.875rem;box-shadow:none}
#root #digital-solutions .group>[class*="w-14"][class*="h-14"] svg{color:var(--ph-accent,#9cafff)}
#root #digital-solutions .group:focus-visible{outline:3px solid #527bff;outline-offset:4px}
#root #digital-solutions .group:nth-child(1){--card-image:url('/assets/card-roi.jpg')}
#root #digital-solutions .group:nth-child(2){--card-image:url('/assets/card-autoridade.jpg')}
#root #digital-solutions .group:nth-child(3){--card-image:url('/assets/card-ux.jpg')}
#root #digital-solutions .group:nth-child(4){--card-image:url('/assets/card-copywriting.jpg')}
#root #digital-solutions .group:nth-child(5){--card-image:url('/assets/card-premium.jpg')}
#root #digital-solutions .group:nth-child(6){--card-image:url('/assets/card-performance.jpg')}
@media(prefers-reduced-motion:reduce){#root #digital-solutions .group{transition:none!important}#root #digital-solutions .group:hover{transform:none}}

@media(prefers-reduced-motion:reduce){.marquee-container>.animate-marquee{animation:none!important;transform:none!important}}

/* Light cards contrast with the dark page; headings outside the cards keep the page palette. */
html[data-public-theme="dark"] #root > main.overflow-x-hidden:not(.admin-shell) :is(
  #services .sclyve-service-card,
  .portfolio-impact,
  .sclyve-case-card,
  #digital-solutions .group,
  #pricing .group.h-full,
  #pricing .new-service-plan,
  #pricing .studio-package,
  #pricing .traffic-card,
  #pricing .app-packages-info,
  #pricing .studio-packages__terms,
  #pricing .studio-packages__process,
  #pricing .traffic-packages__terms
) {
  color-scheme: light;
  --ph-surface: #ffffff;
  --ph-muted-surface: #edf3fa;
  --ph-ink: #15263d;
  --ph-copy: #46586e;
  --ph-line: #cbd8e8;
  --ph-accent: #3554c7;
  --ph-cyan: #086f82;
  --ph-shadow: 0 14px 34px rgba(0, 5, 15, .24);
  --ph-image-overlay: linear-gradient(100deg, rgba(255,255,255,.97), rgba(244,248,252,.92) 58%, rgba(232,241,250,.85));
  color: var(--ph-copy) !important;
}
html[data-public-theme="dark"] #root > main.overflow-x-hidden:not(.admin-shell) #pricing .group.h-full {
  background: var(--ph-surface) !important;
  border-color: var(--ph-line) !important;
  box-shadow: var(--ph-shadow) !important;
}
html[data-public-theme="dark"] #root > main.overflow-x-hidden:not(.admin-shell) #services .portfolio-impact {
  background: #edf3fa !important;
}
html[data-public-theme="dark"] #root > main.overflow-x-hidden:not(.admin-shell) #digital-solutions .group {
  background: var(--ph-image-overlay), var(--card-image) center / cover no-repeat !important;
  border-color: var(--ph-line) !important;
}
html[data-public-theme="dark"] #root > main.overflow-x-hidden:not(.admin-shell) #pricing :is(.group.h-full, .new-service-plan, .studio-package, .traffic-card) .text-transparent {
  background-image: linear-gradient(90deg, #3554c7, #086f82) !important;
}