/* QwicLink theme layer
   Keeps the existing dark brand intact and adds a cyan-led light mode. */

:root {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --cyan: #078FA3;
  --pink: #C60062;
  --purple: #7652B8;
  --black: #F7FAFC;
  --surface: #FFFFFF;
  --card: #EFF5F7;
  --border: rgba(16, 19, 24, .10);
  --text: #101318;
  --muted: rgba(16, 19, 24, .62);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(95, 215, 228, .30);
  border-radius: 5px;
  background: rgba(95, 215, 228, .055);
  color: var(--text);
  font-family: var(--fm);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
}

.theme-toggle::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: inset -4px -3px 0 rgba(5, 5, 8, .82), 0 0 12px rgba(95, 215, 228, .20);
  transition: background .2s, box-shadow .2s, transform .2s;
}

.theme-toggle:hover {
  color: var(--cyan);
  border-color: rgba(95, 215, 228, .52);
  background: rgba(95, 215, 228, .09);
}

html[data-theme="light"] .theme-toggle {
  border-color: rgba(7, 143, 163, .24);
  background: rgba(7, 143, 163, .07);
  color: #1B2430;
}

html[data-theme="light"] .theme-toggle::before {
  background: #F2B84B;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .72), 0 0 0 1px rgba(16, 19, 24, .12);
}

.theme-toggle-mobile {
  display: none;
}

html[data-theme="light"] body {
  background: var(--black) !important;
  color: var(--text) !important;
}

html[data-theme="light"] #nav {
  background: rgba(255, 255, 255, .86) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: 0 16px 40px rgba(16, 19, 24, .055);
}

html[data-theme="light"] #nav.scrolled {
  background: rgba(255, 255, 255, .96) !important;
}

html[data-theme="light"] #mnav {
  background: var(--surface) !important;
}

html[data-theme="light"] #scanline {
  background: rgba(7, 143, 163, .10) !important;
}

html[data-theme="light"] #ptcl {
  opacity: .32 !important;
  filter: saturate(.72);
}

html[data-theme="light"] .orb {
  filter: blur(92px) saturate(.72);
}

#hero > .stars {
  display: none !important;
}

@keyframes starDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 120px -240px, -160px -300px, 90px -280px, -130px -360px; }
}

:root {
  --star-layer: radial-gradient(circle at 18% 20%, rgba(255, 255, 255, .58) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 28%, rgba(95, 215, 228, .58) 0 1px, transparent 1.5px),
    radial-gradient(circle at 52% 68%, rgba(255, 255, 255, .34) 0 1px, transparent 1.5px),
    radial-gradient(circle at 84% 72%, rgba(217, 0, 109, .40) 0 1px, transparent 1.5px);
}

html:not([data-theme="light"]) #hero,
html:not([data-theme="light"]) #ind-hero,
html:not([data-theme="light"]) .ph,
html:not([data-theme="light"]) #qlos,
#cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

html:not([data-theme="light"]) #hero::before,
html:not([data-theme="light"]) #ind-hero::before,
html:not([data-theme="light"]) .ph::before,
html:not([data-theme="light"]) #qlos::before,
#cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--star-layer);
  background-size: 280px 240px, 360px 300px, 320px 280px, 420px 360px;
  opacity: .36;
  animation: starDrift 28s linear infinite;
}

html[data-theme="light"] #cta {
  background: #050508 !important;
  color: #EEEEF5 !important;
}

html[data-theme="light"] #cta .cta-h,
html[data-theme="light"] #cta .cta-in,
html[data-theme="light"] #cta .s-tag {
  color: #FFFFFF !important;
}

html[data-theme="light"] #cta .cta-s {
  color: rgba(238, 238, 245, .72) !important;
}

html:not([data-theme="light"]) #hero .h-inner,
html:not([data-theme="light"]) #hero .h-inner-about,
html:not([data-theme="light"]) #ind-hero .ind-hero-inner,
html:not([data-theme="light"]) #ind-hero .ind-watermark,
html:not([data-theme="light"]) .ph .ph-inner,
html:not([data-theme="light"]) #qlos .sw,
#cta .cta-in {
  position: relative;
  z-index: 1;
}

html[data-theme="light"] .drop,
html[data-theme="light"] .policy-index,
html[data-theme="light"] .policy-card,
html[data-theme="light"] .emp-card,
html[data-theme="light"] .dna-card,
html[data-theme="light"] .pc:not(.pc-lead),
html[data-theme="light"] .cc,
html[data-theme="light"] .qq-card,
html[data-theme="light"] .af-card,
html[data-theme="light"] .fc,
html[data-theme="light"] .svc-card,
html[data-theme="light"] .price-card,
html[data-theme="light"] .faq-i,
html[data-theme="light"] .stat,
html[data-theme="light"] .step,
html[data-theme="light"] .wapp-demo {
  background: rgba(255, 255, 255, .82) !important;
  border-color: var(--border) !important;
  box-shadow: 0 18px 48px rgba(16, 19, 24, .075);
}

html[data-theme="light"] .pc:not(.pc-lead):hover {
  background: rgba(255, 255, 255, .92) !important;
}

html[data-theme="light"] .emp-card:hover,
html[data-theme="light"] .dna-card:hover,
html[data-theme="light"] .dna-card.dna-lead:hover {
  background: rgba(255, 255, 255, .92) !important;
}

html[data-theme="light"] .fc.fc-wide,
html[data-theme="light"] .fc.fc-full,
html[data-theme="light"] .fc:hover {
  background: rgba(255, 255, 255, .88) !important;
}

html[data-theme="light"] footer {
  background: #FFFFFF !important;
  border-top-color: var(--border) !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .h1,
html[data-theme="light"] .ind-h1,
html[data-theme="light"] .sh,
html[data-theme="light"] .cta-h,
html[data-theme="light"] .form-title,
html[data-theme="light"] .cc-title,
html[data-theme="light"] .qq-q,
html[data-theme="light"] .ps-title,
html[data-theme="light"] .af-title,
html[data-theme="light"] .emp-title,
html[data-theme="light"] .dna-title,
html[data-theme="light"] .flip-title,
html[data-theme="light"] .wd-name {
  color: var(--text) !important;
}

html[data-theme="light"] .pc:not(.pc-lead) .pt,
html[data-theme="light"] .pc:not(.pc-lead) .pb,
html[data-theme="light"] .step .sti,
html[data-theme="light"] .af-title,
html[data-theme="light"] .cc-title,
html[data-theme="light"] .qq-q,
html[data-theme="light"] .emp-title,
html[data-theme="light"] .dna-title,
html[data-theme="light"] .ft,
html[data-theme="light"] .flip-title,
html[data-theme="light"] .iname {
  color: var(--text) !important;
}

html[data-theme="light"] .flip-one,
html[data-theme="light"] .back-text {
  color: var(--muted) !important;
}

html[data-theme="light"] .pc.pc-lead .pb,
html[data-theme="light"] .term,
html[data-theme="light"] .terminal,
html[data-theme="light"] .ql-panel,
html[data-theme="light"] .ql-card,
html[data-theme="light"] .term-bar span,
html[data-theme="light"] .tc {
  color: rgba(238, 238, 245, .72) !important;
}

html[data-theme="light"] .term *,
html[data-theme="light"] .terminal *,
html[data-theme="light"] .ql-panel,
html[data-theme="light"] .ql-panel *,
html[data-theme="light"] .ql-card,
html[data-theme="light"] .ql-card * {
  color: inherit;
}

html[data-theme="light"] .pc.pc-lead .pt {
  color: #FFFFFF !important;
}

html[data-theme="light"] .pc.pc-lead {
  background: linear-gradient(150deg, #15162e, #0F0F1C 60%) !important;
  background-color: #0F0F1C !important;
}

html[data-theme="light"] #qlos,
html[data-theme="light"] #qlos h2,
html[data-theme="light"] #qlos .sh {
  color: #FFFFFF !important;
}

html[data-theme="light"] #qlos .ssub,
html[data-theme="light"] #qlos .pdesc,
html[data-theme="light"] #qlos p,
html[data-theme="light"] #qlos .qlos-channels {
  color: rgba(238, 238, 245, .72) !important;
}

html[data-theme="light"] .ql-hdr,
html[data-theme="light"] .ql-hdr-title,
html[data-theme="light"] .ql-msg-text,
html[data-theme="light"] .ql-card-name {
  color: #FFFFFF !important;
}

html[data-theme="light"] .ql-msg-time,
html[data-theme="light"] .ql-card-src,
html[data-theme="light"] .ql-card-time,
html[data-theme="light"] .ql-col-hdr {
  color: rgba(238, 238, 245, .62) !important;
}

html[data-theme="light"] .ql-live,
html[data-theme="light"] .ql-log-entry,
html[data-theme="light"] .ql-badge,
html[data-theme="light"] .ql-col-badge {
  color: var(--cyan) !important;
}

html[data-theme="light"] .ql-check,
html[data-theme="light"] .ql-log-entry .ql-chk,
html[data-theme="light"] .ql-col-badge.pink {
  color: var(--pink) !important;
}

html[data-theme="light"] .wc-hdr,
html[data-theme="light"] .m-in,
html[data-theme="light"] .m-typing {
  color: #FFFFFF !important;
}

html[data-theme="light"] .m-out {
  color: #F0FFF8 !important;
}

html[data-theme="light"] .stage-btn {
  color: rgba(238, 238, 245, .72) !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

html[data-theme="light"] .stage.active .stage-btn {
  color: var(--cyan) !important;
}

html[data-theme="light"] .stage.completed .stage-btn {
  color: #FFFFFF !important;
}

html[data-theme="light"] .stage.active .stage-label {
  color: var(--text) !important;
}

html[data-theme="light"] p,
html[data-theme="light"] .sub,
html[data-theme="light"] .muted,
html[data-theme="light"] .f-tline,
html[data-theme="light"] .f-copy,
html[data-theme="light"] .policy-section p,
html[data-theme="light"] footer .f-tline,
html[data-theme="light"] footer .f-ct a,
html[data-theme="light"] footer .f-links a,
html[data-theme="light"] footer .f-copy,
html[data-theme="light"] .qlos-channels {
  color: rgba(16, 19, 24, .66) !important;
}

html[data-theme="light"] #hero .h-sub,
html[data-theme="light"] #hero .h-trust,
html[data-theme="light"] .ind-sub,
html[data-theme="light"] .ssub,
html[data-theme="light"] .cta-s,
html[data-theme="light"] .pdesc,
html[data-theme="light"] .af-body,
html[data-theme="light"] .cc-body,
html[data-theme="light"] .qq-a,
html[data-theme="light"] .pstep-body,
html[data-theme="light"] .back-text,
html[data-theme="light"] .industry-card p,
html[data-theme="light"] .side-panel p,
html[data-theme="light"] .fb,
html[data-theme="light"] .idesc,
html[data-theme="light"] .pplan,
html[data-theme="light"] .pamt sub,
html[data-theme="light"] .pb,
html[data-theme="light"] .emp-body,
html[data-theme="light"] .dna-body,
html[data-theme="light"] .sb {
  color: rgba(16, 19, 24, .66) !important;
}

html[data-theme="light"] #hero .h-sub strong {
  color: var(--text) !important;
}

html[data-theme="light"] .nav-wa,
html[data-theme="light"] .btn-p,
html[data-theme="light"] .form-submit {
  background: #151A22 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(7, 143, 163, .30) !important;
  box-shadow: 0 14px 34px rgba(16, 19, 24, .16) !important;
}

html[data-theme="light"] .nav-wa:hover,
html[data-theme="light"] .btn-p:hover,
html[data-theme="light"] .form-submit:hover {
  background: #078FA3 !important;
  box-shadow: 0 16px 38px rgba(7, 143, 163, .24) !important;
}

html[data-theme="light"] .btn-g,
html[data-theme="light"] .nav-login {
  color: #1B2430 !important;
  border-color: rgba(16, 19, 24, .16) !important;
  background: rgba(255, 255, 255, .58);
}

html[data-theme="light"] .lang-sw {
  border-color: rgba(7, 143, 163, .24) !important;
  background: rgba(255, 255, 255, .58);
}

html[data-theme="light"] .lang-sw a.lactive {
  color: #FFFFFF !important;
  background: var(--cyan) !important;
}

html[data-theme="light"] .h-grid {
  opacity: .42;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: #FFFFFF !important;
  color: var(--text) !important;
  border-color: rgba(16, 19, 24, .14) !important;
}

html[data-theme="light"] .wd-hdr {
  background: #E8F1F4 !important;
  border-bottom-color: rgba(16, 19, 24, .08) !important;
}

html[data-theme="light"] .dm-in {
  background: #E8F1F4 !important;
  color: var(--text) !important;
}

html[data-theme="light"] .dm-out {
  background: #DDF4EF !important;
  color: #123B31 !important;
}

/* Final light-mode corrections for homepage sections. */
html[data-theme="light"] .pc.pc-lead,
html[data-theme="light"] .pc.pc-lead:hover {
  background: rgba(255, 255, 255, .88) !important;
  background-image: none !important;
  background-color: rgba(255, 255, 255, .88) !important;
  border-color: var(--border) !important;
  box-shadow: 0 18px 48px rgba(16, 19, 24, .075) !important;
}

html[data-theme="light"] .pc.pc-lead .pt,
html[data-theme="light"] .pc.pc-lead .pb {
  color: var(--text) !important;
}

html[data-theme="light"] .pc .gn {
  color: rgba(7, 143, 163, .12) !important;
  -webkit-text-stroke-color: rgba(7, 143, 163, .28) !important;
}

html[data-theme="light"] .pc.pc-lead .gn {
  color: transparent !important;
  -webkit-text-stroke-color: rgba(7, 143, 163, .42) !important;
}

html[data-theme="light"] #qlos {
  background: var(--black) !important;
  color: var(--text) !important;
}

html[data-theme="light"] #qlos h2,
html[data-theme="light"] #qlos .sh {
  color: var(--text) !important;
}

html[data-theme="light"] #qlos .ssub,
html[data-theme="light"] #qlos .pdesc,
html[data-theme="light"] #qlos p,
html[data-theme="light"] #qlos .qlos-channels {
  color: rgba(16, 19, 24, .66) !important;
}

html[data-theme="light"] #qlos .ql-panel,
html[data-theme="light"] #qlos .ql-card {
  background: rgba(255, 255, 255, .86) !important;
  border-color: var(--border) !important;
  color: rgba(16, 19, 24, .68) !important;
  box-shadow: 0 18px 48px rgba(16, 19, 24, .075) !important;
}

html[data-theme="light"] #qlos .ql-hdr {
  border-bottom-color: rgba(16, 19, 24, .08) !important;
}

html[data-theme="light"] #qlos .ql-hdr,
html[data-theme="light"] #qlos .ql-hdr-title,
html[data-theme="light"] #qlos .ql-msg-text,
html[data-theme="light"] #qlos .ql-card-name {
  color: var(--text) !important;
}

html[data-theme="light"] #qlos .ql-msg-time,
html[data-theme="light"] #qlos .ql-card-src,
html[data-theme="light"] #qlos .ql-card-time,
html[data-theme="light"] #qlos .ql-col-hdr {
  color: rgba(16, 19, 24, .58) !important;
}

html[data-theme="light"] #qlos .ql-live,
html[data-theme="light"] #qlos .ql-log-entry,
html[data-theme="light"] #qlos .ql-badge,
html[data-theme="light"] #qlos .ql-col-badge,
html[data-theme="light"] #qlos .qlos-channels .dot {
  color: var(--cyan) !important;
}

html[data-theme="light"] #qlos .ql-check,
html[data-theme="light"] #qlos .ql-log-entry .ql-chk,
html[data-theme="light"] #qlos .ql-col-badge.pink {
  color: var(--pink) !important;
}

html[data-theme="light"] .ic,
html[data-theme="light"] .ic:hover,
html[data-theme="light"] .ic.ic-cta:hover {
  background: rgba(255, 255, 255, .86) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html[data-theme="light"] .ic:hover {
  border-bottom-color: var(--cyan) !important;
  box-shadow: 0 18px 48px rgba(16, 19, 24, .09) !important;
}

html[data-theme="light"] .ic .iname,
html[data-theme="light"] .ic:hover .iname {
  color: var(--text) !important;
}

html[data-theme="light"] .ic .idesc,
html[data-theme="light"] .ic:hover .idesc {
  color: rgba(16, 19, 24, .66) !important;
}

html[data-theme="light"] .compare {
  background: rgba(255, 255, 255, .88) !important;
  border-color: var(--border) !important;
  box-shadow: 0 18px 48px rgba(16, 19, 24, .075) !important;
}

html[data-theme="light"] .compare h3,
html[data-theme="light"] .compare .bad h3 {
  color: var(--text) !important;
}

html[data-theme="light"] .compare .good h3 {
  color: var(--cyan) !important;
}

html[data-theme="light"] .compare li {
  color: rgba(16, 19, 24, .70) !important;
}

html[data-theme="light"] .compare .bad .ico {
  color: var(--pink) !important;
}

html[data-theme="light"] .compare .good .ico {
  color: var(--cyan) !important;
}

html[data-theme="light"] .trigger {
  background: rgba(255, 255, 255, .88) !important;
  border-color: var(--border) !important;
  color: rgba(16, 19, 24, .72) !important;
  box-shadow: 0 10px 28px rgba(16, 19, 24, .055) !important;
}

html[data-theme="light"] .trigger:hover {
  background: #FFFFFF !important;
  border-color: rgba(7, 143, 163, .30) !important;
  color: var(--text) !important;
}

html[data-theme="light"] .trigger.running {
  background: #151A22 !important;
  border-color: var(--cyan) !important;
  color: #FFFFFF !important;
  box-shadow: 0 16px 38px rgba(16, 19, 24, .16) !important;
}

html[data-theme="light"] .terminal {
  background: #050508 !important;
  color: rgba(238, 238, 245, .74) !important;
  border-color: rgba(7, 143, 163, .22) !important;
  box-shadow: 0 24px 54px rgba(16, 19, 24, .16) !important;
}

html[data-theme="light"] .terminal .type-INCOMING {
  color: rgba(238, 238, 245, .78) !important;
}

html[data-theme="light"] .terminal .type-LOG {
  color: rgba(238, 238, 245, .58) !important;
}

@media (max-width: 768px) {
  .theme-toggle-mobile {
    display: inline-flex;
    width: 36px;
    min-width: 36px;
    padding: 0;
    gap: 0;
  }

  .theme-toggle-mobile .theme-toggle-label {
    display: none;
  }
}