/* Protyasha IT production enhancements */
.pi-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#087cff,#16c7ff);z-index:1000000}
.pi-backtop{position:fixed;right:20px;bottom:96px;width:42px;height:42px;border:1px solid var(--pi-border,#e2e8f0);border-radius:12px;background:var(--pi-surface,#fff);color:var(--pi-text,#172033);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;z-index:999990}
.pi-backtop.show{opacity:1;visibility:visible;transform:none}
.pi-cookie{position:fixed;left:18px;right:18px;bottom:18px;z-index:999995;max-width:760px;margin:auto;padding:14px 16px;border:1px solid var(--pi-border,#e2e8f0);border-radius:16px;background:var(--pi-surface,#fff);box-shadow:0 18px 55px rgba(15,23,42,.16);display:flex;gap:14px;align-items:center;justify-content:space-between}
.pi-cookie p{margin:0;font-size:12px;color:var(--pi-muted,#64748b);line-height:1.5}.pi-cookie-actions{display:flex;gap:8px;flex-shrink:0}.pi-cookie button{border:0;border-radius:10px;padding:9px 13px;cursor:pointer;font-weight:700}.pi-cookie-ok{background:#087cff;color:#fff}.pi-cookie-no{background:var(--pi-surface2,#f1f5f9);color:var(--pi-text,#172033)}
.pi-mobile-cta{display:none}
@media(max-width:600px){.pi-cookie{flex-direction:column;align-items:stretch}.pi-cookie-actions{justify-content:flex-end}.pi-backtop{right:14px;bottom:84px}.pi-mobile-cta{display:flex;position:fixed;left:14px;right:14px;bottom:14px;z-index:999980;justify-content:center;align-items:center;gap:8px;padding:12px 16px;border-radius:14px;background:linear-gradient(135deg,#087cff,#16c7ff);color:#fff!important;text-decoration:none;font-weight:800;box-shadow:0 12px 35px rgba(8,124,255,.3)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Final mobile safety */
html,body{max-width:100%;overflow-x:hidden}
img,video,svg,iframe{max-width:100%;height:auto}
section,.section,.container,.wrapper,.hero,.hero-section{max-width:100%}
@media(max-width:600px){
  .hero img,.hero-image,.hero-media,.showcase-image,.security-image{display:none!important}
  h1{font-size:clamp(34px,10vw,52px);line-height:1.04}
  h2{font-size:clamp(28px,8vw,40px);line-height:1.1}
  p{line-height:1.65}
}


/* ===== PROTYASHA IT — UNIFIED THEME SYSTEM v2 ===== */
:root{
  --bg:#f7f9fc;--surface:#ffffff;--surface2:#eef3f9;
  --line:rgba(15,23,42,.10);--text:#101827;--heading:#071226;
  --muted:#5f6f84;--purple:#7658ee;--cyan:#00b9ea;--green:#10b981;
  --shadow:0 24px 80px rgba(15,23,42,.10);
}
html.dark-mode{
  --bg:#070b13;--surface:#0d131f;--surface2:#121b2a;
  --line:rgba(255,255,255,.10);--text:#eaf2fb;--heading:#ffffff;
  --muted:#a6b3c5;--purple:#8a74ff;--cyan:#31d9ff;--green:#38df9b;
  --shadow:0 24px 80px rgba(0,0,0,.34);
}
html,body{background:var(--bg)!important;color:var(--text)!important}
body{transition:background-color .25s ease,color .25s ease}
h1,h2,h3,h4,h5,h6,strong,b{color:var(--heading)}
p,small,.muted,.text-muted{color:var(--muted)}
/* Header */
header,header.scrolled{background:color-mix(in srgb,var(--bg) 90%,transparent)!important;border-color:var(--line)!important}
.navlinks>a,.dropbtn{color:var(--muted)!important}
.navlinks>a:hover,.dropbtn:hover{color:var(--heading)!important}
.menu{background:var(--surface)!important;border-color:var(--line)!important}
.menu a{color:var(--muted)!important}.menu a:hover{background:var(--surface2)!important;color:var(--heading)!important}
.hamb{background:var(--surface2)!important;color:var(--text)!important;border-color:var(--line)!important}
/* Announcement */
.announcement{color:var(--muted)!important}
.announcement b{color:var(--purple)!important}.announcement a{color:var(--cyan)!important}
/* Hero */
.hero{background:
 radial-gradient(circle at 82% 12%,color-mix(in srgb,var(--purple) 15%,transparent),transparent 30%),
 radial-gradient(circle at 10% 70%,color-mix(in srgb,var(--cyan) 11%,transparent),transparent 28%),
 var(--bg)!important}
html:not(.dark-mode) .hero{background:
 radial-gradient(circle at 82% 12%,rgba(118,88,238,.14),transparent 30%),
 radial-gradient(circle at 10% 70%,rgba(0,185,234,.10),transparent 28%),
 #f7f9fc!important}
.grid{background-image:linear-gradient(color-mix(in srgb,var(--text) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--text) 6%,transparent) 1px,transparent 1px)!important}
.eyebrow{color:var(--purple)!important}
.gradient{background:linear-gradient(105deg,var(--heading) 5%,var(--purple) 52%,var(--cyan) 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important}
html.dark-mode .gradient{background:linear-gradient(105deg,#fff 8%,#b09fff 55%,#54e4ff 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
.hero-copy{color:var(--muted)!important}
.meta strong{color:var(--heading)!important}.meta span{color:var(--muted)!important}
/* Cards / surfaces */
.card,.service-card,.portfolio-card,.feature-card,.faq-item,.contact-card,.glass-card,.project-card,.blog-card,.process-card,.industry-card,.product-card,.team-card,.career-card,.support-card,.panel,.box,.item,.article-card,.stat-card,.pricing-card,.case-card{
 background:linear-gradient(145deg,var(--surface),var(--surface2))!important;color:var(--text)!important;border-color:var(--line)!important;box-shadow:var(--shadow)
}
.why-point,.eco-node,.logo-pill,.value,.step{background:color-mix(in srgb,var(--surface) 88%,transparent)!important;color:var(--text)!important;border-color:var(--line)!important}
.card h3,.value b,.step strong{color:var(--heading)!important}
.card p,.value span,.step small{color:var(--muted)!important}
.icon{background:color-mix(in srgb,var(--purple) 12%,var(--surface))!important;color:var(--purple)!important;border-color:color-mix(in srgb,var(--purple) 25%,var(--line))!important}
.stack span{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
/* Buttons */
.btn{color:var(--text);border-color:var(--line)}.btn.ghost{background:var(--surface2)!important}
.btn.primary{color:#fff!important}
.btn.login.academy{color:var(--cyan)!important}.btn.login.portal{color:var(--purple)!important}
/* Dashboard / visual panel */
.dashboard{background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--surface2) 92%,transparent))!important;border-color:var(--line)!important}
.chart{background:color-mix(in srgb,var(--surface2) 85%,transparent)!important;border-color:var(--line)!important}
.chart:before{background:repeating-linear-gradient(to bottom,transparent 0 35px,color-mix(in srgb,var(--text) 5%,transparent) 36px)!important}
/* Footer */
footer{background:#040b17!important;color:#dce8f6!important}.foot a{color:#9db0c5!important}
/* Inputs */
input,textarea,select{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
input::placeholder,textarea::placeholder{color:var(--muted)!important}
/* Theme toggle */
.pi-theme-toggle{width:42px;height:42px;border:1px solid var(--line)!important;border-radius:12px;display:inline-flex!important;align-items:center;justify-content:center;gap:7px;cursor:pointer;background:var(--surface)!important;color:var(--text)!important;transition:.25s;z-index:100000}
.pi-theme-toggle:hover{transform:translateY(-2px);border-color:var(--purple)!important}
.pi-theme-toggle i{font-size:15px}
@media(max-width:800px){.pi-theme-desktop{display:none!important}.pi-theme-mobile{display:inline-flex!important}}
@media(min-width:801px){.pi-theme-mobile{display:none!important}}
/* Never hide the page behind a fake loader */
#page-loader,.page-loader,.loader-overlay,.preloader{display:none!important}
@media(max-width:600px){
 .hero{min-height:auto!important;padding:82px 0 65px!important}
 .hero-grid{gap:32px!important}
 h1{font-size:clamp(39px,11vw,58px)!important;letter-spacing:-2.8px!important}
 .hero-copy{font-size:16px!important}
 .hero-meta{gap:22px!important;margin-top:34px!important}
}

/* =========================================================
   PROTYASHA IT — LIGHT MODE VISIBILITY PATCH
   Purpose: keep the premium dark design language while making
   every text, button, card and navigation element readable
   in LIGHT MODE.
   ========================================================= */

/* Core light palette */
html:not(.dark-mode){
  --bg:#f7f9fc;
  --surface:#ffffff;
  --surface2:#eef3fa;
  --line:rgba(15,23,42,.12);
  --text:#172033;
  --heading:#071226;
  --muted:#596a80;
  --purple:#6046d9;
  --cyan:#008fb8;
  --green:#079669;
  --shadow:0 24px 70px rgba(15,23,42,.09);
}

/* Navigation */
html:not(.dark-mode) header,
html:not(.dark-mode) header.scrolled{
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid rgba(15,23,42,.10)!important;
}
html:not(.dark-mode) .navlinks>a,
html:not(.dark-mode) .dropbtn{
  color:#435168!important;
}
html:not(.dark-mode) .navlinks>a:hover,
html:not(.dark-mode) .dropbtn:hover{
  color:#101827!important;
}
html:not(.dark-mode) .dropdown,
html:not(.dark-mode) .menu,
html:not(.dark-mode) .mobile-nav{
  background:#fff!important;
  border-color:#dce4ef!important;
  box-shadow:0 24px 65px rgba(15,23,42,.14)!important;
}
html:not(.dark-mode) .dropdown a,
html:not(.dark-mode) .menu a,
html:not(.dark-mode) .mobile-nav a{
  color:#526176!important;
}
html:not(.dark-mode) .dropdown a:hover,
html:not(.dark-mode) .menu a:hover,
html:not(.dark-mode) .mobile-nav a:hover{
  background:#f1f5fb!important;
  color:#111827!important;
}
html:not(.dark-mode) .hamb{
  background:#fff!important;
  color:#172033!important;
  border:1px solid #dce4ef!important;
}

/* Announcement */
html:not(.dark-mode) .announcement{
  color:#56657a!important;
  background:linear-gradient(90deg,#f0ebff,#ecfbff)!important;
}
html:not(.dark-mode) .announcement b{color:#6246d9!important}
html:not(.dark-mode) .announcement a{color:#007fa6!important}

/* Hero / main copy */
html:not(.dark-mode) .hero{
  background:
    radial-gradient(circle at 82% 12%,rgba(118,88,238,.16),transparent 30%),
    radial-gradient(circle at 10% 70%,rgba(0,185,234,.10),transparent 28%),
    #f7f9fc!important;
}
html:not(.dark-mode) .hero-copy{color:#596a80!important}
html:not(.dark-mode) .eyebrow{color:#6246d9!important}
html:not(.dark-mode) .gradient{
  background:linear-gradient(105deg,#071226 5%,#694de1 52%,#008eaf 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
}
html:not(.dark-mode) .meta strong{color:#071226!important}
html:not(.dark-mode) .meta span{color:#596a80!important}

/* Cards and all common surfaces */
html:not(.dark-mode) .card,
html:not(.dark-mode) .service-card,
html:not(.dark-mode) .portfolio-card,
html:not(.dark-mode) .feature-card,
html:not(.dark-mode) .faq-item,
html:not(.dark-mode) .contact-card,
html:not(.dark-mode) .glass-card,
html:not(.dark-mode) .project-card,
html:not(.dark-mode) .blog-card,
html:not(.dark-mode) .process-card,
html:not(.dark-mode) .industry-card,
html:not(.dark-mode) .product-card,
html:not(.dark-mode) .team-card,
html:not(.dark-mode) .career-card,
html:not(.dark-mode) .support-card,
html:not(.dark-mode) .panel,
html:not(.dark-mode) .box,
html:not(.dark-mode) .item,
html:not(.dark-mode) .article-card,
html:not(.dark-mode) .stat-card,
html:not(.dark-mode) .pricing-card,
html:not(.dark-mode) .case-card{
  background:linear-gradient(145deg,#fff,#f5f8fd)!important;
  color:#172033!important;
  border-color:#dce4ef!important;
  box-shadow:0 20px 55px rgba(15,23,42,.075)!important;
}
html:not(.dark-mode) .card h3,
html:not(.dark-mode) .card h2,
html:not(.dark-mode) .card b,
html:not(.dark-mode) .value b,
html:not(.dark-mode) .step strong,
html:not(.dark-mode) .service-detail h3,
html:not(.dark-mode) .industry b,
html:not(.dark-mode) .eco-item b,
html:not(.dark-mode) .person b{
  color:#101827!important;
}
html:not(.dark-mode) .card p,
html:not(.dark-mode) .value span,
html:not(.dark-mode) .step small,
html:not(.dark-mode) .service-detail p,
html:not(.dark-mode) .industry span,
html:not(.dark-mode) .person p{
  color:#596a80!important;
}

/* Secondary blocks that previously used white-on-dark alpha colors */
html:not(.dark-mode) .why-point,
html:not(.dark-mode) .eco-node,
html:not(.dark-mode) .logo-pill,
html:not(.dark-mode) .value,
html:not(.dark-mode) .step,
html:not(.dark-mode) .eco-item,
html:not(.dark-mode) .case-point,
html:not(.dark-mode) .industry,
html:not(.dark-mode) .tech,
html:not(.dark-mode) .badge2,
html:not(.dark-mode) .contact-item,
html:not(.dark-mode) .social-links a{
  background:#fff!important;
  color:#263348!important;
  border-color:#dce4ef!important;
}
html:not(.dark-mode) .logo-pill,
html:not(.dark-mode) .badge2,
html:not(.dark-mode) .tech{
  color:#4d5d73!important;
}
html:not(.dark-mode) .tech:hover,
html:not(.dark-mode) .social-links a:hover{
  color:#5039c7!important;
  background:#f4f1ff!important;
  border-color:#b9acf4!important;
}
html:not(.dark-mode) .industry span,
html:not(.dark-mode) .contact-item small{
  color:#66758a!important;
}

/* Icons */
html:not(.dark-mode) .icon{
  background:#f0ecff!important;
  color:#6246d9!important;
  border-color:#d3c9ff!important;
}
html:not(.dark-mode) .avatar{
  background:linear-gradient(135deg,#e6e0ff,#e4faff)!important;
  color:#6246d9!important;
}

/* Buttons — make every secondary CTA clearly visible */
html:not(.dark-mode) .btn{
  color:#172033!important;
  background:#fff!important;
  border-color:#cfd9e7!important;
}
html:not(.dark-mode) .btn:hover{
  color:#5039c7!important;
  border-color:#aa9af0!important;
  background:#f7f5ff!important;
}
html:not(.dark-mode) .btn.primary,
html:not(.dark-mode) .btn.primary:hover{
  color:#fff!important;
  background:linear-gradient(135deg,#7658ee,#5d43df)!important;
  border-color:transparent!important;
}
html:not(.dark-mode) .btn.ghost{
  background:#eef2f8!important;
  color:#25334a!important;
}
html:not(.dark-mode) .btn.login.academy{
  background:#effbff!important;
  border-color:#b7eaf5!important;
  color:#007e9f!important;
}
html:not(.dark-mode) .btn.login.portal{
  background:#f2efff!important;
  border-color:#d0c7fb!important;
  color:#5b42c9!important;
}
html:not(.dark-mode) .card-cta{
  background:#f1edff!important;
  color:#563cc7!important;
  border-color:#cfc4fb!important;
}
html:not(.dark-mode) .ecosystem-link-card:hover .card-cta{
  color:#fff!important;
  background:linear-gradient(135deg,#7658ee,#5d43df)!important;
}
html:not(.dark-mode) .link{
  color:#573dca!important;
}

/* Grid / decorative backgrounds */
html:not(.dark-mode) .grid{
  background-image:
    linear-gradient(rgba(15,23,42,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.045) 1px,transparent 1px)!important;
}

/* Dashboard and charts */
html:not(.dark-mode) .dashboard{
  background:linear-gradient(145deg,#fff,#f3f6fb)!important;
  border-color:#dce4ef!important;
}
html:not(.dark-mode) .chart{
  background:#f0f4fa!important;
  border-color:#dce4ef!important;
}
html:not(.dark-mode) .chart:before{
  background:repeating-linear-gradient(to bottom,transparent 0 35px,rgba(15,23,42,.055) 36px)!important;
}

/* Form controls */
html:not(.dark-mode) .field label{
  color:#506078!important;
}
html:not(.dark-mode) input,
html:not(.dark-mode) textarea,
html:not(.dark-mode) select{
  background:#fff!important;
  color:#172033!important;
  border-color:#cfd9e7!important;
}
html:not(.dark-mode) input::placeholder,
html:not(.dark-mode) textarea::placeholder{
  color:#8794a6!important;
}

/* Project/case visuals intentionally remain dark, but their text stays readable */
html:not(.dark-mode) .project-info h3,
html:not(.dark-mode) .project-info p{
  color:#fff!important;
}
html:not(.dark-mode) .tag{
  color:#6046d9!important;
}
html:not(.dark-mode) .project .tag{
  color:#d2caff!important;
}

/* FAQ / timeline */
html:not(.dark-mode) .faq details{
  background:#fff!important;
  border-color:#dce4ef!important;
}
html:not(.dark-mode) .faq summary{color:#172033!important}
html:not(.dark-mode) .faq p{color:#596a80!important}
html:not(.dark-mode) .timeline .year{color:#6246d9!important}

/* Filter controls */
html:not(.dark-mode) .filterbtn{
  background:#fff!important;
  color:#56657a!important;
  border-color:#d2dce9!important;
}
html:not(.dark-mode) .filterbtn.active,
html:not(.dark-mode) .filterbtn:hover{
  background:#f0ecff!important;
  color:#563cc7!important;
  border-color:#c9bef7!important;
}

/* Support floating widget */
html:not(.dark-mode) .pi-chat-panel{
  background:#fff!important;
  border-color:#dce4ef!important;
  box-shadow:0 25px 70px rgba(15,23,42,.18)!important;
}
html:not(.dark-mode) .pi-chat-item{
  color:#172033!important;
}
html:not(.dark-mode) .pi-chat-item:hover{
  background:#f1f5fb!important;
}
html:not(.dark-mode) .pi-chat-info strong{color:#172033!important}
html:not(.dark-mode) .pi-chat-info small{color:#718096!important}
html:not(.dark-mode) .pi-chat-footer{
  border-color:#e6ebf2!important;
  color:#7a8798!important;
}
html.dark-mode .pi-chat-panel{
  background:#fff!important;
  color:#172033!important;
}

/* Back-to-top */
html:not(.dark-mode) .pi-backtop{
  background:#fff!important;
  color:#172033!important;
  border-color:#dce4ef!important;
  box-shadow:0 12px 30px rgba(15,23,42,.10);
}

/* Preserve dark footer in both modes */
html:not(.dark-mode) footer{
  background:#040b17!important;
  color:#dce8f6!important;
}
html:not(.dark-mode) footer h4,
html:not(.dark-mode) footer .brand{
  color:#fff!important;
}
html:not(.dark-mode) footer a{color:#9db0c5!important}

/* Prevent hidden/washed text caused by inherited dark-theme opacity */
html:not(.dark-mode) .announcement *,
html:not(.dark-mode) .card *,
html:not(.dark-mode) .service-card *,
html:not(.dark-mode) .feature-card *,
html:not(.dark-mode) .industry-card *,
html:not(.dark-mode) .product-card *,
html:not(.dark-mode) .pricing-card *,
html:not(.dark-mode) .case-card *{
  text-shadow:none;
}

/* Mobile: remove oversized hero gap and keep controls visible */
@media(max-width:650px){
  html:not(.dark-mode) .hero{
    padding-top:72px!important;
    padding-bottom:55px!important;
  }
  html:not(.dark-mode) .hero-grid{gap:28px!important}
  html:not(.dark-mode) h1{
    font-size:clamp(40px,11vw,54px)!important;
    letter-spacing:-2.5px!important;
  }
  html:not(.dark-mode) .hero-copy{font-size:16px!important}
  html:not(.dark-mode) .hero-meta{margin-top:30px!important}
}