/* ============================================================
   Jillani SofTech - enhancement layer (loads after styles.css)
   Dark theme, interaction system, search, modals, hub, print
   ============================================================ */

/* ---------- 1. Theme tokens (light is the brand default) ---------- */
:root{
  --ux-ease:cubic-bezier(.22,1,.36,1);
  --ux-ink:#0f172a;
  --ux-ring:0 0 0 3px rgba(37,99,235,.35);
  --ux-card:#fff;
  --ux-card-2:#f8fafc;
  --ux-line:rgba(15,23,42,.08);
  --ux-shadow:0 24px 60px -18px rgba(8,13,28,.28);
  --ux-hdr-bg:rgba(255,255,255,.86);
}
[data-theme="dark"]{
  color-scheme:dark;
  --white:#0b1228;
  --surface:#0e1730;
  --slate:#dbe3f0;
  --muted:#8b9bb4;
  --muted-2:#a9b6cc;
  --border:rgba(255,255,255,.1);
  --sh-sm:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
  --sh-md:0 10px 30px -10px rgba(0,0,0,.6);
  --sh-lg:0 24px 60px -18px rgba(0,0,0,.7);
  --sh-xl:0 40px 90px -24px rgba(0,0,0,.8);
  --ux-ink:#e2e8f0;
  --ux-card:#101a36;
  --ux-card-2:#0e1730;
  --ux-line:rgba(255,255,255,.1);
  --ux-shadow:0 24px 60px -18px rgba(0,0,0,.75);
  --ux-hdr-bg:rgba(8,13,28,.86);
}
[data-theme="dark"] body{background:var(--white);color:var(--slate)}
[data-theme="dark"] img{opacity:.94}
[data-theme="dark"] ::selection{background:rgba(96,165,250,.35)}
::selection{background:rgba(37,99,235,.18)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- 2. Page enter animation (JS-gated, safe without JS) ---------- */
html.js main{opacity:0;animation:uxEnter .55s var(--ux-ease) .04s forwards}
@keyframes uxEnter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 3. Focus + skip link ---------- */
:focus-visible{outline:none;box-shadow:var(--ux-ring);border-radius:6px}
.skip:focus{left:12px;top:12px;box-shadow:var(--ux-ring)}

/* ---------- 4. Button interaction system ---------- */
.btn-p,.btn-s,.btn-o,.btn-w,.btn-dark,.btn-nav,.btn-ghost,.btn-submit{
  position:relative;transition:transform .28s var(--ux-ease),box-shadow .28s var(--ux-ease),background .25s,color .25s,border-color .25s;
  will-change:transform
}
.btn-p:hover,.btn-s:hover,.btn-o:hover,.btn-w:hover,.btn-dark:hover,.btn-nav:hover,.btn-submit:hover{transform:translateY(-2px)}
.btn-p:active,.btn-s:active,.btn-o:active,.btn-w:active,.btn-dark:active,.btn-nav:active,.btn-submit:active{transform:translateY(0) scale(.985);transition-duration:.08s}
.btn-p,.btn-nav,.btn-submit,.btn-w{overflow:hidden}
.btn-p::after,.btn-nav::after,.btn-submit::after,.btn-w::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .55s var(--ux-ease);pointer-events:none
}
.btn-p:hover::after,.btn-nav:hover::after,.btn-submit:hover::after,.btn-w:hover::after{left:125%}
.btn-ghost:hover{color:var(--blue)}
.btn-p:hover,.btn-nav:hover,.btn-submit:hover{box-shadow:0 14px 34px -12px rgba(37,99,235,.55)}

/* ---------- 5. Card hover system ---------- */
.svc-card,.ind-card,.testi-card,.cap-card,.why-card,.res-card,.cs-card,.price-card,.rel-card,.art-card{
  transition:transform .35s var(--ux-ease),box-shadow .35s var(--ux-ease),border-color .3s !important
}
.svc-card:hover,.ind-card:hover,.cap-card:hover,.why-card:hover,.res-card:hover,.rel-card:hover,.art-card:hover{
  transform:translateY(-5px) !important;box-shadow:var(--ux-shadow);border-color:rgba(37,99,235,.35)
}
.price-card:hover,.testi-card:hover{transform:translateY(-3px) !important;box-shadow:var(--ux-shadow)}

/* ---------- 6. Header: glass, hide on scroll down ---------- */
#mainHeader{transition:transform .45s var(--ux-ease),box-shadow .3s,background .3s}
#mainHeader.scrolled{background:var(--ux-hdr-bg);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:0 8px 30px -14px rgba(8,13,28,.25)}
[data-theme="dark"] #mainHeader.scrolled{box-shadow:0 8px 30px -14px rgba(0,0,0,.7)}

/* icon buttons injected into the nav (theme + search) */
.ux-ibtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--ux-line);background:var(--ux-card);color:var(--ux-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:.95rem;transition:transform .25s var(--ux-ease),background .25s,color .25s,border-color .25s;margin-right:.35rem;flex:0 0 auto}
.ux-ibtn:hover{transform:translateY(-2px);color:var(--blue);border-color:rgba(37,99,235,.4)}
.ux-ibtn:active{transform:scale(.94)}

/* ---------- 7. Mobile menu polish ---------- */
body.ux-menu-open{overflow:hidden}
.ux-overlay{position:fixed;inset:0;background:rgba(5,7,15,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:899;opacity:0;pointer-events:none;transition:opacity .3s}
.ux-overlay.on{opacity:1;pointer-events:auto}
@media (max-width:968px){.nav-links.open li{animation:uxEnter .4s var(--ux-ease) both}.nav-links.open li:nth-child(2){animation-delay:.04s}.nav-links.open li:nth-child(3){animation-delay:.08s}.nav-links.open li:nth-child(4){animation-delay:.12s}.nav-links.open li:nth-child(5){animation-delay:.16s}.nav-links.open li:nth-child(6){animation-delay:.2s}}

/* ---------- 8. Floating contact hub (replaces the single WhatsApp button) ---------- */
body.ux-hub-on .wa-float{display:none !important}
.ux-hub{position:fixed;right:26px;bottom:26px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.ux-hub-main{width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:1.45rem;background:var(--g-prime);box-shadow:0 12px 32px -8px rgba(37,99,235,.7);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ux-ease),box-shadow .3s;position:relative}
.ux-hub-main:hover{transform:translateY(-3px) scale(1.04)}
.ux-hub-main i{transition:transform .35s var(--ux-ease)}
.ux-hub.open .ux-hub-main i{transform:rotate(135deg)}
.ux-hub-main::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(37,99,235,.45);animation:uxPulse 2.2s ease-out infinite}
.ux-hub.open .ux-hub-main::before{animation:none;opacity:0}
@keyframes uxPulse{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.ux-hub-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
.ux-hub-list a{display:inline-flex;align-items:center;gap:.6rem;padding:.55rem .9rem .55rem .65rem;border-radius:999px;background:var(--ux-card);color:var(--ux-ink);border:1px solid var(--ux-line);box-shadow:var(--sh-md);text-decoration:none;font-weight:600;font-size:.86rem;white-space:nowrap;opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;transition:opacity .28s var(--ux-ease),transform .32s var(--ux-ease),border-color .25s}
.ux-hub.open .ux-hub-list a{opacity:1;transform:none;pointer-events:auto}
.ux-hub.open .ux-hub-list a:nth-child(1){transition-delay:.12s}.ux-hub.open .ux-hub-list a:nth-child(2){transition-delay:.08s}.ux-hub.open .ux-hub-list a:nth-child(3){transition-delay:.04s}
.ux-hub-list a:hover{border-color:rgba(37,99,235,.45);color:var(--blue)}
.ux-hub-list a span.ux-ic{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem}
.ux-ic-wa{background:#25D366}.ux-ic-cal{background:var(--g-prime)}.ux-ic-mail{background:var(--g-violet)}.ux-ic-call{background:var(--g-green)}
.ux-hub-tip{position:absolute;right:70px;top:50%;transform:translateY(-50%);background:var(--ux-ink);color:var(--white);font-size:.75rem;font-weight:600;padding:.4rem .7rem;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s}
.ux-hub-main:hover .ux-hub-tip{opacity:1}
.ux-hub.open .ux-hub-tip{display:none}


/* ---------- 9. Overlay dialogs (search + confirm) ---------- */
.ux-dim{position:fixed;inset:0;background:rgba(5,7,15,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10000;display:flex;align-items:flex-start;justify-content:center;padding:12vh 1rem 2rem;opacity:0;pointer-events:none;transition:opacity .25s}
.ux-dim.on{opacity:1;pointer-events:auto}
.ux-dialog{width:100%;max-width:640px;background:var(--ux-card);color:var(--ux-ink);border:1px solid var(--ux-line);border-radius:18px;box-shadow:var(--ux-shadow);transform:translateY(-12px) scale(.98);transition:transform .3s var(--ux-ease);overflow:hidden}
.ux-dim.on .ux-dialog{transform:none}
.ux-dialog.ux-sm{max-width:460px;padding:1.6rem 1.7rem}
.ux-dialog h3{margin:0 0 .5rem;font-family:var(--f-disp);font-size:1.15rem;color:var(--ux-ink)}
.ux-dialog p{margin:0 0 1rem;color:var(--muted-2);font-size:.95rem;line-height:1.6}
.ux-dialog .ux-review{margin:.2rem 0 1.2rem;padding:.9rem 1rem;border-radius:12px;background:var(--ux-card-2);border:1px solid var(--ux-line);font-size:.9rem;display:grid;gap:.35rem}
.ux-dialog .ux-review b{color:var(--ux-ink);font-weight:600}
.ux-actions{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap}
.ux-btn{border:1px solid var(--ux-line);background:var(--ux-card);color:var(--ux-ink);padding:.62rem 1.05rem;border-radius:10px;font-weight:600;font-size:.9rem;cursor:pointer;transition:transform .25s var(--ux-ease),background .2s,color .2s,border-color .2s}
.ux-btn:hover{transform:translateY(-1px);border-color:rgba(37,99,235,.4);color:var(--blue)}
.ux-btn.ux-primary{background:var(--g-prime);color:#fff;border-color:transparent}
.ux-btn.ux-primary:hover{color:#fff;box-shadow:0 12px 28px -12px rgba(37,99,235,.6)}

/* search */
.ux-sbar{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--ux-line)}
.ux-sbar i{color:var(--muted)}
.ux-sbar input{flex:1;border:0;background:transparent;font-weight:500;font-size:1.05rem;font-family:var(--f-body);color:var(--ux-ink);outline:none;min-width:0}
.ux-sbar input::placeholder{color:var(--muted)}
.ux-sbar kbd{font-weight:600;font-size:.7rem;font-family:var(--f-body);border:1px solid var(--ux-line);border-radius:5px;padding:.25rem .4rem;color:var(--muted)}
.ux-results{max-height:min(56vh,520px);overflow:auto;padding:.5rem}
.ux-results a{display:block;padding:.75rem .9rem;border-radius:12px;text-decoration:none;color:var(--ux-ink);transition:background .15s}
.ux-results a:hover,.ux-results a.active{background:rgba(37,99,235,.09)}
.ux-results .ux-rt{font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:.5rem}
.ux-results .ux-rt small{font-weight:600;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);background:rgba(37,99,235,.1);padding:.15rem .45rem;border-radius:6px}
.ux-results .ux-rd{font-size:.85rem;color:var(--muted-2);margin-top:.15rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ux-results mark{background:rgba(245,158,11,.28);color:inherit;border-radius:3px;padding:0 .1em}
.ux-empty{padding:1.6rem 1rem;text-align:center;color:var(--muted);font-size:.92rem}
.ux-sfoot{display:flex;gap:1rem;padding:.6rem 1.1rem;border-top:1px solid var(--ux-line);font-size:.72rem;color:var(--muted)}
.ux-sfoot kbd{font-weight:600;font-size:.68rem;font-family:var(--f-body);border:1px solid var(--ux-line);border-radius:4px;padding:.15rem .3rem;margin-right:.25rem}

/* ---------- 10. Cookie banner + toast ---------- */
.ux-cookie{position:fixed;left:22px;bottom:22px;z-index:9990;max-width:380px;background:var(--ux-card);color:var(--ux-ink);border:1px solid var(--ux-line);border-radius:16px;box-shadow:var(--ux-shadow);padding:1.05rem 1.15rem;transform:translateY(24px);opacity:0;transition:transform .4s var(--ux-ease),opacity .35s}
.ux-cookie.on{transform:none;opacity:1}
.ux-cookie p{margin:0 0 .8rem;font-size:.86rem;line-height:1.55;color:var(--muted-2)}
.ux-cookie p b{color:var(--ux-ink)}
.ux-cookie .ux-actions{justify-content:flex-start}
.ux-cookie .ux-btn{padding:.5rem .85rem;font-size:.84rem}
@media (max-width:640px){.ux-cookie{left:12px;right:12px;bottom:88px;max-width:none}}
.ux-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);z-index:10001;background:var(--ux-ink);color:var(--white);padding:.7rem 1.1rem;border-radius:999px;font-size:.88rem;font-weight:600;box-shadow:var(--ux-shadow);opacity:0;pointer-events:none;transition:opacity .25s,transform .3s var(--ux-ease);display:flex;align-items:center;gap:.5rem}
.ux-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 11. Navigation loader ---------- */
.ux-loader{position:fixed;top:0;left:0;height:3px;width:0;background:var(--g-iris);z-index:10002;opacity:0;transition:width .4s var(--ux-ease),opacity .3s;box-shadow:0 0 12px rgba(96,165,250,.8)}
.ux-loader.on{opacity:1;animation:uxLoad 1.6s var(--ux-ease) forwards}
@keyframes uxLoad{0%{width:0}40%{width:55%}80%{width:82%}100%{width:92%}}

/* ---------- 12. FAQ accordion ---------- */
details.faq-item{transition:border-color .25s,box-shadow .25s}
details.faq-item summary{cursor:pointer;list-style:none;transition:color .2s}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary:hover{color:var(--blue)}
details.faq-item .faq-toggle i{transition:transform .35s var(--ux-ease)}
details.faq-item[open] .faq-toggle i{transform:rotate(180deg)}
details.faq-item[open]{border-color:rgba(37,99,235,.35)}
details.faq-item[open]>p{animation:uxFaq .38s var(--ux-ease)}
@keyframes uxFaq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 13. 404 page ---------- */
.ux-404{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:5rem 1.2rem 4rem}
.ux-404 .ux-code{font-family:var(--f-disp);font-weight:800;font-size:clamp(5rem,16vw,9rem);line-height:.9;background:var(--g-iris);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.04em}
.ux-404 h1{font-family:var(--f-disp);font-size:clamp(1.5rem,3.4vw,2.1rem);margin:.8rem 0 .6rem;color:var(--ux-ink)}
.ux-404 p{color:var(--muted-2);max-width:520px;margin:0 auto 1.4rem;line-height:1.65}
.ux-404 .ux-actions{justify-content:center;margin-bottom:1.8rem}
.ux-404-links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.ux-404-links a{padding:.5rem .9rem;border-radius:999px;border:1px solid var(--ux-line);background:var(--ux-card);color:var(--ux-ink);text-decoration:none;font-size:.86rem;font-weight:600;transition:transform .25s var(--ux-ease),border-color .2s,color .2s}
.ux-404-links a:hover{transform:translateY(-2px);border-color:rgba(37,99,235,.45);color:var(--blue)}

/* ---------- 14. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html.js main{animation:none;opacity:1}
  .ux-hub-main::before,.ux-loader.on{animation:none}
  .btn-p::after,.btn-nav::after,.btn-submit::after,.btn-w::after{display:none}
  .ux-ibtn,.ux-btn,.ux-hub-list a,.ux-dialog,.ux-cookie,.ux-toast,.svc-card,.ind-card,.cap-card,.why-card,.res-card,.rel-card,.art-card,.price-card,.testi-card{transition:none !important;animation:none !important}
}

/* ---------- 15. Print ---------- */
@media print{
  *,*::before,*::after{animation:none !important;transition:none !important;box-shadow:none !important;text-shadow:none !important}
  html,body{background:#fff !important;color:#000 !important}
  #mainHeader,.nav-links,.nav-actions,.menu-toggle,.skip,.progress,.totop,.wa-float,.ux-hub,.ux-cookie,.ux-toast,.ux-loader,.ux-dim,.ux-overlay,.orb,footer .f-soc,.f-cta,.btn-p,.btn-s,.btn-o,.btn-w,.btn-nav,.btn-ghost{display:none !important}
  main{opacity:1 !important;transform:none !important}
  .reveal,.svc-card,.ind-card,.testi-card,.cap-card,.why-card,.res-card,.cs-card,.price-card,.proc-step,.step,.rel-card{opacity:1 !important;transform:none !important}
  section{page-break-inside:auto;padding:1rem 0 !important;background:#fff !important;color:#000 !important}
  h1,h2,h3{page-break-after:avoid;color:#000 !important;-webkit-text-fill-color:#000 !important}
  .cs-card,.price-card,.svc-card,.testi-card{page-break-inside:avoid;border:1px solid #bbb !important;background:#fff !important}
  a{color:#000 !important;text-decoration:underline}
  a[href^="http"]:not([href*="jillanisoftech.com"])::after{content:" (" attr(href) ")";font-size:.8em;color:#444}
  details.faq-item{page-break-inside:avoid}
  details.faq-item>p{display:block !important}
  svg{max-width:100% !important}
  @page{margin:1.6cm}
}

/* ---------- 16. Dark-theme overrides for rules that hard-code light backgrounds ---------- */
[data-theme="dark"] .res-card,[data-theme="dark"] .testi-card,[data-theme="dark"] .tp,[data-theme="dark"] .contact-box,[data-theme="dark"] .faq-item,[data-theme="dark"] .jump a,[data-theme="dark"] .step,[data-theme="dark"] .tbl-wrap,[data-theme="dark"] .rel-card,[data-theme="dark"] .field input:focus,.field select:focus,.field textarea:focus{background:var(--ux-card) !important;border-color:var(--ux-line) !important;color:var(--slate)}
[data-theme="dark"] .c-item:hover,[data-theme="dark"] .pn-card:hover{background:var(--ux-card-2) !important}
[data-theme="dark"] .testi-card p,[data-theme="dark"] .res-card p,[data-theme="dark"] .rel-card p,[data-theme="dark"] .step p{color:var(--muted-2)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:var(--ux-card-2);color:var(--slate);border-color:var(--ux-line)}

/* ---------- 17. Dark-theme text and surface fixes (generated from styles.css audit) ---------- */
[data-theme="dark"] header.scrolled .logo-text,[data-theme="dark"] .dd-item h4,[data-theme="dark"] .cred:hover,[data-theme="dark"] .h2,[data-theme="dark"] .cap-card h3,[data-theme="dark"] .svc-card h3,[data-theme="dark"] .pc-name,[data-theme="dark"] .pc-price,[data-theme="dark"] .pc-btn,[data-theme="dark"] .testi-name,[data-theme="dark"] .tech-cat-t,[data-theme="dark"] .about-text strong,[data-theme="dark"] .contact-box h3,[data-theme="dark"] .c-det h4,[data-theme="dark"] .faq-item summary,[data-theme="dark"] .prose h3,[data-theme="dark"] .prose strong,[data-theme="dark"] .callout h4,[data-theme="dark"] .step h4,[data-theme="dark"] .check b,[data-theme="dark"] table.cmp th,[data-theme="dark"] table.cmp td:first-child,[data-theme="dark"] .rel-card h4,[data-theme="dark"] .pn-card b,[data-theme="dark"] .field label,[data-theme="dark"] .article h2,[data-theme="dark"] .article h3,[data-theme="dark"] .article strong,[data-theme="dark"] .article code,[data-theme="dark"] .pull p,[data-theme="dark"] .art-card h3,[data-theme="dark"] table.cmp tbody td:first-child{color:var(--ux-ink) !important}
[data-theme="dark"] .tp,.tag,.form-note,.field .hint,.prose p,.prose li,.step p,.check,.callout p,table.cmp td,[data-theme="dark"] .sec-white .rel-card p,.sec-surface .rel-card p,[data-theme="dark"] .sec-white .evid p,.sec-surface .evid p,[data-theme="dark"] .w3,[data-theme="dark"] .lp-meta,[data-theme="dark"] .toc a,[data-theme="dark"] .article p,[data-theme="dark"] .article li,[data-theme="dark"] .takeaways li,[data-theme="dark"] .art-card p,[data-theme="dark"] .art-card .foot,[data-theme="dark"] table.cmp tbody td,[data-theme="dark"] table.cmp tbody td:first-child::after{color:var(--muted-2) !important}
[data-theme="dark"] table.cmp thead th{background:rgba(96,165,250,.09) !important;color:var(--glow) !important;border-bottom-color:rgba(96,165,250,.28) !important}
[data-theme="dark"] table.cmp tbody td{color:var(--muted-2) !important;border-bottom-color:var(--ux-line) !important}
[data-theme="dark"] table.cmp tbody td:first-child{color:var(--ux-ink) !important}
[data-theme="dark"] table.cmp tbody tr:hover{background:rgba(96,165,250,.07) !important}
[data-theme="dark"] table.cmp .yes{color:var(--green-l) !important}
[data-theme="dark"] table.cmp .no{color:var(--rose-l) !important}
[data-theme="dark"] table.cmp a{color:var(--glow) !important}
[data-theme="dark"] .tbl-wrap{background:var(--ux-card) !important;border-color:var(--ux-line) !important}
[data-theme="dark"] .logo-plate{background:var(--ux-card);border-color:var(--ux-line)}
[data-theme="dark"] header.scrolled .logo-text{color:#fff !important}
[data-theme="dark"] header.scrolled .nav-links>li>a{color:rgba(255,255,255,.82)}
[data-theme="dark"] header.scrolled .nav-links>li>a:hover,[data-theme="dark"] header.scrolled .nav-links>li>a.here{color:var(--glow)}
[data-theme="dark"] .menu-toggle{color:#fff}

/* ---------- 18. Comparison table: keep cells as table cells (fixes column collapse at all widths) ---------- */
@media (min-width:761px){
  table.cmp td.yes,table.cmp td.no{display:table-cell !important;position:relative;padding-left:2.45rem !important}
  table.cmp td.yes::before,table.cmp td.no::before{position:absolute;left:1.25rem;top:1.22rem;margin:0}
  table.cmp thead th,table.cmp tbody td{vertical-align:top}
}


/* ---------- 19. Utility controls: contact strip on desktop, drawer on mobile ---------- */
.logo,.logo-text{white-space:nowrap}
.logo{flex-shrink:0}
.ux-utils{display:none;align-items:center;gap:.45rem}
.cstrip .ux-ibtn{width:30px;height:30px;font-size:.8rem;margin:0;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);color:#fff}
.cstrip .ux-ibtn:hover{background:rgba(255,255,255,.3);color:#fff;border-color:rgba(255,255,255,.55);transform:translateY(-1px)}
.ux-utils-li{display:none}
@media (min-width:969px){
  .ux-utils{display:flex;align-items:center;gap:.4rem;margin-right:.2rem}
}
@media (min-width:969px) and (max-width:1199px){.cstrip .cs-lbl{display:none}}
@media (max-width:968px){
  .ux-utils-li{display:flex !important;gap:.5rem;margin-top:.5rem;width:100%}
  .ux-dbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-weight:600;font-size:.9rem;font-family:var(--f-body);cursor:pointer}
  .ux-dbtn:hover{background:rgba(255,255,255,.12)}
}

/* ---------- 20. Consent component ---------- */
.ux-consent{position:fixed;left:50%;bottom:20px;transform:translate(-50%,24px);width:calc(100% - 24px);max-width:760px;z-index:9990;background:var(--ux-card);color:var(--ux-ink);border:1px solid var(--ux-line);border-radius:16px;box-shadow:var(--ux-shadow);padding:1.05rem 1.25rem;display:block;opacity:0;transition:transform .4s var(--ux-ease),opacity .35s}
.ux-consent>div:first-child{padding-right:350px}
.ux-consent>.ux-actions{position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);width:330px;justify-content:flex-end}
.ux-consent.on{transform:translate(-50%,0);opacity:1}
.ux-consent h4{margin:0 0 .25rem;font-weight:700;font-size:.95rem;font-family:var(--f-disp);color:var(--ux-ink)}
.ux-consent p{margin:0;font-size:.85rem;line-height:1.55;color:var(--muted-2)}
.ux-consent p a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.ux-consent .ux-actions{justify-content:flex-end;flex-wrap:nowrap}
.ux-consent .ux-btn{padding:.55rem .9rem;font-size:.84rem;white-space:nowrap}
.ux-consent .ux-link{background:none;border:0;color:var(--muted-2);font-weight:600;font-size:.82rem;font-family:var(--f-body);cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:.4rem .2rem}
.ux-consent .ux-link:hover{color:var(--blue)}
@media (max-width:760px){.ux-consent{bottom:12px;padding:.95rem 1rem}.ux-consent>div:first-child{padding-right:0}.ux-consent>.ux-actions{position:static;transform:none;margin-top:.8rem}.ux-consent .ux-actions{justify-content:flex-start;flex-wrap:wrap}}
.ux-crow{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0;border-top:1px solid var(--ux-line)}
.ux-crow:first-of-type{border-top:0}
.ux-crow b{display:block;font-size:.92rem;color:var(--ux-ink)}
.ux-crow small{display:block;font-size:.8rem;color:var(--muted-2);line-height:1.5;margin-top:.15rem}
.ux-switch{position:relative;width:44px;height:24px;flex-shrink:0;border-radius:999px;background:rgba(100,116,139,.35);border:0;cursor:pointer;transition:background .25s}
.ux-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .25s var(--ux-ease);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.ux-switch[aria-checked="true"]{background:var(--blue)}
.ux-switch[aria-checked="true"]::after{transform:translateX(20px)}
.ux-switch[disabled]{opacity:.7;cursor:not-allowed}
.ux-flink{background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px;opacity:.8;padding:0;margin-left:.9rem}
.ux-flink:hover{opacity:1}
@media print{.ux-consent{display:none !important}}

/* ---------- 21. Main navigation: stepped fit from 969px to 1400px (original only trimmed below 1090px) ---------- */
@media (min-width:969px){
  #mainHeader nav{gap:1rem}
  #mainHeader .nav-links{flex-wrap:nowrap}
  #mainHeader .nav-actions{flex-shrink:0}
}
@media (min-width:969px) and (max-width:1400px){
  #mainHeader .nav-actions .btn-ghost{display:none}
}
@media (min-width:969px) and (max-width:1240px){
  #mainHeader .nav-links{gap:.75rem}
  #mainHeader .nav-links>li>a{font-size:.78rem}
  #mainHeader .logo-text{font-size:1.05rem}
  #mainHeader .btn-nav{padding:.6rem .9rem;font-size:.8rem}
}
@media (min-width:969px) and (max-width:1090px){
  #mainHeader .nav-links{gap:.6rem}
  #mainHeader .nav-links>li>a{font-size:.75rem}
  #mainHeader .logo-text{display:none}
}

/* ---------- 22. Contact strip on small screens: 1 line, no wasted height ---------- */
@media (max-width:968px){.cstrip .cs-lbl{display:none}.cstrip-in{gap:.9rem}}
@media (max-width:560px){.cstrip .cs-sep,.cstrip .cs-chip[href^="mailto"]{display:none}.cstrip{padding:.5rem 1rem}}

/* ---------- 23. Dark theme, generated from a luminance audit of styles.css and inline styles ---------- */
[data-theme="dark"] header.scrolled,[data-theme="dark"] .dropdown-content,[data-theme="dark"] .res-card,[data-theme="dark"] .testi-card,[data-theme="dark"] .tp,[data-theme="dark"] .contact-box,[data-theme="dark"] .c-item:hover,[data-theme="dark"] .btn-w,[data-theme="dark"] .faq-item,[data-theme="dark"] .jump a,[data-theme="dark"] .step,[data-theme="dark"] .tbl-wrap,[data-theme="dark"] .rel-card,[data-theme="dark"] .pn-card:hover,[data-theme="dark"] .field input:focus,.field select:focus,.field textarea:focus{background:var(--ux-card) !important}
[data-theme="dark"] header.scrolled .logo-text,[data-theme="dark"] .dd-item h4,[data-theme="dark"] .cred:hover,[data-theme="dark"] .h2,[data-theme="dark"] .cap-card h3,[data-theme="dark"] .svc-card h3,[data-theme="dark"] .pc-name,[data-theme="dark"] .pc-price,[data-theme="dark"] .pc-btn,[data-theme="dark"] .testi-name,[data-theme="dark"] .tech-cat-t,[data-theme="dark"] .about-text strong,[data-theme="dark"] .contact-box h3,[data-theme="dark"] .c-det h4,[data-theme="dark"] .faq-item summary,[data-theme="dark"] .prose h3,[data-theme="dark"] .prose strong,[data-theme="dark"] .callout h4,[data-theme="dark"] .step h4,[data-theme="dark"] .check b,[data-theme="dark"] table.cmp th,[data-theme="dark"] table.cmp td:first-child,[data-theme="dark"] .rel-card h4,[data-theme="dark"] .pn-card b,[data-theme="dark"] .field label,[data-theme="dark"] .article h2,[data-theme="dark"] .article h3,[data-theme="dark"] .article strong,[data-theme="dark"] .article code,[data-theme="dark"] .pull p,[data-theme="dark"] .art-card h3,[data-theme="dark"] table.cmp tbody td:first-child{color:var(--ux-ink) !important}
[data-theme="dark"] [style*="color:var(--navy)"]{color:var(--ux-ink) !important}
[data-theme="dark"] [style*="background:var(--surface)"]{background:var(--ux-card) !important}
[data-theme="dark"] [style*="background:var(--white)"]{background:var(--ux-card) !important}
[data-theme="dark"] .dropdown-content{background:rgba(14,23,48,.98) !important;border-color:var(--ux-line) !important;box-shadow:var(--ux-shadow) !important}
[data-theme="dark"] .dd-item:hover{background:rgba(96,165,250,.1) !important}
[data-theme="dark"] .dd-item h4{color:var(--ux-ink) !important}
[data-theme="dark"] .dd-item:hover h4{color:var(--glow) !important}
[data-theme="dark"] .dd-item p{color:var(--muted-2) !important}

/* ---------- 24. Floating controls: no overlap, no stolen clicks ---------- */
.ux-hub{pointer-events:none}
.ux-hub-main,.ux-hub.open .ux-hub-list a{pointer-events:auto}
.totop{right:100px !important;bottom:32px !important;z-index:9998 !important}
@media (max-width:640px){.ux-hub{right:16px;bottom:16px}.totop{right:86px !important;bottom:22px !important}}

/* ---------- 25. Utility controls live in the sticky header (icon-only) and in the mobile drawer ---------- */
.nav-actions .ux-ibtn{width:34px;height:34px;font-size:.85rem;margin:0}
.nav-actions .ux-theme{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
header.scrolled .nav-actions .ux-ibtn{background:var(--surface);border-color:rgba(15,23,42,.22);color:var(--ux-ink)}
header.scrolled .nav-actions .ux-ibtn:hover{background:rgba(37,99,235,.1);border-color:var(--blue);color:var(--blue)}
header:not(.scrolled) .nav-actions .ux-ibtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
[data-theme="dark"] header.scrolled .nav-actions .ux-ibtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
@media (max-width:968px){.nav-actions .ux-utils{display:none}}