/**
 * Sitewide Neon tubes
 * Hero stays dark + clear for tubes.
 * Content sections below are white so the page does not look charcoal.
 * About + Contact OLED pages stay fully transparent end-to-end.
 */

:root {
  --tubes-content-white: #ffffff;
  --tubes-content-soft: #f7f8fa;
  --tubes-wash-dark: rgba(13, 13, 13, 0.42);
  --tubes-wash-dark-strong: rgba(13, 13, 13, 0.58);
}

html.has-tubes,
body.has-tubes {
  min-height: 100%;
}

.cozq-tubes {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.cozq-tubes__canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

body.has-tubes .site-main,
body.has-tubes .site-footer {
  position: relative;
  z-index: 2;
}

body.has-tubes .site-header.site-header--floating {
  z-index: 1000;
}

body.has-tubes .whatsapp-fab,
body.has-tubes .cookie-banner,
body.has-tubes [class*="talk-to-us"],
body.has-tubes [data-talk-modal] {
  z-index: 1100;
}

/* Dark chrome by default; OLED pages override to pure black */
body.has-tubes.tubes-theme-dark {
  background: #0d0d0d !important;
}

body.has-tubes.tubes-theme-dark.page-oled {
  background: #000000 !important;
}

body.has-tubes.tubes-theme-light {
  background: #ffffff !important;
}

body.has-tubes .site-main {
  background: transparent !important;
}

/* ------------------------------------------------------------------
   LIVE: white content bands (readable) + open hero for tubes
   Skipped on About/Contact OLED so tubes stay visible end-to-end
   ------------------------------------------------------------------ */

body.has-tubes-live:not(.page-oled) .site-main > section:not(.hero--neon):not(.section--dark):not(.section--black):not(.section--cta-minimal):not(.section--cta-dark):not(.home-impact--cta):not(.home-impact--portals):not(.home-flow--cta):not(.biz-setup-cta):not(.soft-dev-cta):not(.soft-dev-results):not(.contact-bottom-cta),
body.has-tubes-live:not(.page-oled) .home-impact:not(.home-impact--cta):not(.home-impact--portals),
body.has-tubes-live:not(.page-oled) .home-flow:not(.home-flow--cta),
body.has-tubes-live:not(.page-oled) .section.section--white,
body.has-tubes-live:not(.page-oled) .section.section--gray,
body.has-tubes-live:not(.page-oled) .section.section--super,
body.has-tubes-live:not(.page-oled) .section.section--super-tight,
body.has-tubes-live:not(.page-oled) .soft-dev-intro,
body.has-tubes-live:not(.page-oled) .soft-dev-build,
body.has-tubes-live:not(.page-oled) .soft-dev-process,
body.has-tubes-live:not(.page-oled) .soft-dev-tech,
body.has-tubes-live:not(.page-oled) .soft-dev-audience,
body.has-tubes-live:not(.page-oled) .soft-dev-faq,
body.has-tubes-live:not(.page-oled) .biz-setup-intro {
  background: var(--tubes-content-white) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #0d0d0d;
}

body.has-tubes-live:not(.page-oled) .section.section--gray,
body.has-tubes-live:not(.page-oled) .section.section--super,
body.has-tubes-live:not(.page-oled) .home-impact--soft,
body.has-tubes-live:not(.page-oled) .home-flow--paths,
body.has-tubes-live:not(.page-oled) .home-flow--software,
body.has-tubes-live:not(.page-oled) .soft-dev-build,
body.has-tubes-live:not(.page-oled) .soft-dev-audience {
  background: var(--tubes-content-soft) !important;
  background-image: none !important;
}

/* Kill frosted text shadows on white content (not OLED pages) */
body.has-tubes-live:not(.page-oled) .home-impact:not(.home-impact--cta) h1,
body.has-tubes-live:not(.page-oled) .home-impact:not(.home-impact--cta) h2,
body.has-tubes-live:not(.page-oled) .home-impact:not(.home-impact--cta) h3,
body.has-tubes-live:not(.page-oled) .home-impact:not(.home-impact--cta) h4,
body.has-tubes-live:not(.page-oled) .home-impact:not(.home-impact--cta) p,
body.has-tubes-live:not(.page-oled) .home-impact__headline,
body.has-tubes-live:not(.page-oled) .home-impact__lede,
body.has-tubes-live:not(.page-oled) .section__title,
body.has-tubes-live:not(.page-oled) .section__description {
  text-shadow: none !important;
  color: inherit;
}

body.has-tubes-live:not(.page-oled) .home-impact__headline,
body.has-tubes-live:not(.page-oled) .home-bridge__title,
body.has-tubes-live:not(.page-oled) .section__title {
  color: #0d0d0d !important;
}

body.has-tubes-live:not(.page-oled) .home-impact__lede,
body.has-tubes-live:not(.page-oled) .home-bridge__lede,
body.has-tubes-live:not(.page-oled) .section__description {
  color: rgba(13, 13, 13, 0.68) !important;
}

/* Hero neon: fully clear so tubes show */
body.has-tubes-live .hero.hero--neon,
body.has-tubes-live .site-main > .hero.hero--neon {
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
}

/* OLED pages: never paint solid white over the tubes */
body.has-tubes-live.page-oled .site-main > section,
body.has-tubes-live.page-oled .hero,
body.has-tubes-live.page-oled .hero--about,
body.has-tubes-live.page-oled .hero--contact,
body.has-tubes-live.page-oled .hero--software,
body.has-tubes-live.page-oled .hero--web-design,
body.has-tubes-live.page-oled .hero--soft-dev,
body.has-tubes-live.page-oled .sd2-hero,
body.has-tubes-live.page-oled .sd2-facts,
body.has-tubes-live.page-oled .sd2-section,
body.has-tubes-live.page-oled .sd2-cta,
body.has-tubes-live.page-oled .software-detail-hero,
body.has-tubes-live.page-oled .software-detail-section,
body.has-tubes-live.page-oled .cs2-detail-hero,
body.has-tubes-live.page-oled .cs2-evidence-strip,
body.has-tubes-live.page-oled .cs2-overview,
body.has-tubes-live.page-oled .cs2-layout,
body.has-tubes-live.page-oled .cs2-detail,
body.has-tubes-live.page-oled .cs2-detail--story,
body.has-tubes-live.page-oled .cs2-finalcta,
body.has-tubes-live.page-oled .cs2-finalcta__inner,
body.has-tubes-live.page-oled .cs2-enquiry,
body.has-tubes-live.page-oled .cs2-cinema,
body.has-tubes-live.page-oled .cs2-cinema--detail,
body.has-tubes-live.page-oled .contact-below-hero,
body.has-tubes-live.page-oled .contact-why,
body.has-tubes-live.page-oled .contact-bottom-cta,
body.has-tubes-live.page-oled .software-directory-section,
body.has-tubes-live.page-oled .soft-dev-intro,
body.has-tubes-live.page-oled .soft-dev-build,
body.has-tubes-live.page-oled .soft-dev-process,
body.has-tubes-live.page-oled .soft-dev-tech,
body.has-tubes-live.page-oled .soft-dev-audience,
body.has-tubes-live.page-oled .soft-dev-faq,
body.has-tubes-live.page-oled .soft-dev-results,
body.has-tubes-live.page-oled .soft-dev-cta,
body.has-tubes-live.page-oled .biz-setup-intro,
body.has-tubes-live.page-oled .biz-setup-cta,
body.has-tubes-live.page-oled .web-design-intro,
body.has-tubes-live.page-oled .web-design-cta,
body.has-tubes-live.page-oled .section,
body.has-tubes-live.page-oled .section--gray,
body.has-tubes-live.page-oled .section--black,
body.has-tubes-live.page-oled .section--dark,
body.has-tubes-live.page-oled .section--super,
body.has-tubes-live.page-oled .section--white {
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: rgba(255, 255, 255, 0.88);
}

body.has-tubes-live.page-oled .site-main .hero:not(.hero--neon),
body.has-tubes-live.page-oled .site-main > .hero.hero--about,
body.has-tubes-live.page-oled .site-main > .hero.hero--contact,
body.has-tubes-live.page-oled .site-main > .hero.hero--software,
body.has-tubes-live.page-oled .site-main > .hero.hero--web-design,
body.has-tubes-live.page-oled .site-main > .hero.hero--soft-dev,
body.has-tubes-live.page-oled .site-main > .hero.hero--business-setup,
body.has-tubes-live.page-oled .hero--about,
body.has-tubes-live.page-oled .hero--contact,
body.has-tubes-live.page-oled .hero--software,
body.has-tubes-live.page-oled .hero--web-design,
body.has-tubes-live.page-oled .hero--soft-dev,
body.has-tubes-live.page-oled .hero--business-setup {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body.has-tubes-live.page-oled .site-main .hero.hero--about::before,
body.has-tubes-live.page-oled .site-main .hero.hero--contact::before,
body.has-tubes-live.page-oled .site-main .hero.hero--software::before,
body.has-tubes-live.page-oled .site-main .hero.hero--web-design::before,
body.has-tubes-live.page-oled .site-main .hero.hero--soft-dev::before,
body.has-tubes-live.page-oled .site-main .hero.hero--business-setup::before {
  content: none !important;
  display: none !important;
}

body.has-tubes-live.page-oled .card,
body.has-tubes-live.page-oled .about-approach-card,
body.has-tubes-live.page-oled .stats-row .stat,
body.has-tubes-live.page-oled .stat,
body.has-tubes-live.page-oled .contact-info-card,
body.has-tubes-live.page-oled .minimal-panel,
body.has-tubes-live.page-oled .biz-setup-card,
body.has-tubes-live.page-oled .biz-setup-step,
body.has-tubes-live.page-oled .biz-setup-faq__item,
body.has-tubes-live.page-oled details.biz-setup-faq__item,
body.has-tubes-live.page-oled .biz-setup-contact-card,
body.has-tubes-live.page-oled .software-filters,
body.has-tubes-live.page-oled .software-stack__link {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.has-tubes-live.page-oled .section.section--super > .container,
body.has-tubes-live.page-oled .section--super > .container {
  background: transparent !important;
  box-shadow: none !important;
}

body.has-tubes-live.page-oled .site-footer,
body.has-tubes-live.page-oled .site-footer--minimal,
body.has-tubes-live.page-oled footer.site-footer {
  background: rgba(0, 0, 0, 0.35) !important;
}

/* Dark CTAs: slight transparency so tubes can still ghost */
body.has-tubes-live:not(.page-oled) .section--dark,
body.has-tubes-live:not(.page-oled) .section--black,
body.has-tubes-live:not(.page-oled) .section--cta-minimal,
body.has-tubes-live:not(.page-oled) .section--cta-dark,
body.has-tubes-live:not(.page-oled) .biz-setup-cta,
body.has-tubes-live:not(.page-oled) .soft-dev-cta,
body.has-tubes-live:not(.page-oled) .soft-dev-results,
body.has-tubes-live:not(.page-oled) .home-impact--cta,
body.has-tubes-live:not(.page-oled) .home-flow--cta,
body.has-tubes-live:not(.page-oled) .cta-block--dark,
body.has-tubes-live:not(.page-oled) .contact-bottom-cta {
  background: var(--tubes-wash-dark) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.has-tubes-live .site-footer,
body.has-tubes-live .site-footer--minimal,
body.has-tubes-live .site-footer.site-footer--minimal,
body.has-tubes-live footer.site-footer {
  background: var(--tubes-wash-dark-strong) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Dark shells: translucent so the same tubes show through sitewide */
body.has-tubes-live:not(.page-oled) .cs2-detail-hero,
body.has-tubes-live:not(.page-oled) .cs2-cinema,
body.has-tubes-live:not(.page-oled) .cs2-cinema--detail,
body.has-tubes-live:not(.page-oled) .cs2-finalcta,
body.has-tubes-live:not(.page-oled) .cs2-finalcta__inner,
body.has-tubes-live .home-close,
body.has-tubes-live .home-impact--cta {
  background: var(--tubes-wash-dark) !important;
  background-image: none !important;
}

body.has-tubes-live.page-oled .cs2-detail-hero,
body.has-tubes-live.page-oled .cs2-cinema,
body.has-tubes-live.page-oled .cs2-cinema--detail,
body.has-tubes-live.page-oled .cs2-finalcta,
body.has-tubes-live.page-oled .cs2-finalcta__inner {
  background: transparent !important;
  background-image: none !important;
}

body.has-tubes-live:not(.page-oled) .home-bento__tile--stat,
body.has-tubes-live:not(.page-oled) .home-bento__tile--stack,
body.has-tubes-live:not(.page-oled) .biz-setup-card,
body.has-tubes-live:not(.page-oled) .home-work-card,
body.has-tubes-live:not(.page-oled) .home-soft-tile,
body.has-tubes-live:not(.page-oled) .home-soft-card,
body.has-tubes-live:not(.page-oled) .card,
body.has-tubes-live:not(.page-oled) .feature-card--light,
body.has-tubes-live:not(.page-oled) .contact-form,
body.has-tubes-live:not(.page-oled) .biz-setup-faq__item,
body.has-tubes-live:not(.page-oled) details.biz-setup-faq__item {
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.has-tubes-live .home-bento__tile--hero:not(.home-bento__tile--portal),
body.has-tubes-live .home-impact--portals:not(.is-tubes-windows) .home-bento__tile--hero {
  background: linear-gradient(155deg, #1a1a1a 0%, #0d0d0d 100%) !important;
}

body.has-tubes-live .home-bento__tile--tall:not(.home-bento__tile--portal),
body.has-tubes-live .home-bento__tile--wide:not(.home-bento__tile--portal),
body.has-tubes-live .home-impact--portals:not(.is-tubes-windows) .home-bento__tile--tall,
body.has-tubes-live .home-impact--portals:not(.is-tubes-windows) .home-bento__tile--wide {
  background: #141416 !important;
}

/* Features section: white wash with punched windows onto the hero tubes */
body.has-tubes-live .home-impact--portals {
  background: #ffffff !important;
  background-image: none !important;
}

body.has-tubes-live .home-impact--portals.is-tubes-windows {
  background: transparent !important;
  background-image: none !important;
}

body.has-tubes-live .home-impact--portals.is-tubes-windows .home-impact__tubes-mask {
  display: block;
}

body.has-tubes-live .home-impact--portals.is-tubes-windows .home-bento__tile--portal {
  background: transparent !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  /* Avoid lift fighting the mask holes */
  transform: none !important;
}

body.has-tubes-live .home-impact--portals.is-tubes-windows .home-bento__tile--portal .home-bento__scrim {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(165deg, rgba(10, 10, 12, 0.38) 0%, rgba(8, 8, 10, 0.58) 100%);
}

body.has-tubes-live .home-impact--portals.is-tubes-windows .home-bento__tile--portal:hover .home-bento__scrim {
  background:
    linear-gradient(165deg, rgba(10, 10, 12, 0.3) 0%, rgba(8, 8, 10, 0.5) 100%);
}

body.has-tubes-live .home-bento__tile--action {
  background: #ff4d20 !important;
}

body.has-tubes-live .home-logo-marquee {
  background: #ffffff !important;
}

body.has-tubes-live .section--dark h1,
body.has-tubes-live .section--dark h2,
body.has-tubes-live .section--dark h3,
body.has-tubes-live .home-impact--cta h2,
body.has-tubes-live .home-close__title,
body.has-tubes-live .biz-setup-cta .section__title,
body.has-tubes-live .soft-dev-cta .section__title,
body.has-tubes-live .hero-neon__brand,
body.has-tubes-live .hero-neon__title,
body.has-tubes-live .hero-neon__lede {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
  color: #fff !important;
}

body.tubes-static.tubes-theme-dark {
  background: #0d0d0d !important;
}

body.tubes-static.tubes-theme-light {
  background: #ffffff !important;
}

body.tubes-static .cozq-tubes {
  display: none;
}

/* Mobile: tubes stay on; hero remains open */
body.tubes-touch .cozq-tubes {
  display: block !important;
}

body.tubes-static .hero.hero--neon {
  background:
    radial-gradient(55% 50% at 70% 30%, rgba(255, 77, 32, 0.28) 0%, transparent 55%),
    #0d0d0d !important;
}