/* Reparatii Telefoane Bârgău v2 (pro) */
:root{
  --bg0:#050712;
  --bg1:#0a1030;
  --glass: rgba(10,16,48,.55);
  --glass2: rgba(10,16,48,.38);
  --line: rgba(215,230,255,.12);
  --text:#d7e6ff;
  --muted: rgba(215,230,255,.74);
  --muted2: rgba(215,230,255,.62);
  --accent1:#37f3c0;
  --accent2:#3aa3ff;
  --warn:#ffd166;
  --danger:#ff5f72;
  --radius: 18px;
  --radius2: 24px;
  --shadow: 0 18px 55px rgba(0,0,0,.50);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);
  --max: 1180px;
  --ease: cubic-bezier(.2,.9,.2,1);
}
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(55,243,192,.16), transparent 60%),
    radial-gradient(1100px 700px at 90% 15%, rgba(58,163,255,.14), transparent 55%),
    radial-gradient(1000px 700px at 50% 90%, rgba(55,243,192,.08), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}
a{ color: inherit; text-decoration:none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
img{ max-width:100%; height:auto; }
button, input, textarea, select{ font:inherit; }
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.container{ width: min(92vw, var(--max)); margin:0 auto; }
.hidden{ display:none !important; }

.skip-link{
  position:absolute; left:-999px; top:0;
  background: rgba(10,16,48,.92);
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: 12px;
  z-index: 9999;
}
.skip-link:focus{ left: 16px; top: 16px; }

#pcbCanvas{ position:fixed; inset:0; z-index:-3; width:100%; height:100%; display:block; }
#glowLayer{ position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 500px at 18% 12%, rgba(55,243,192,.10), transparent 60%),
    radial-gradient(900px 650px at 85% 12%, rgba(58,163,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(5,7,18,.58), rgba(10,16,48,.78));
  backdrop-filter: blur(2px);
}
#noise{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  opacity: .12;
  mix-blend-mode: overlay;
}

/* Header */
header.siteHeader{
  position: sticky;
  top:0;
  z-index: 1100;
  border-bottom: 1px solid var(--line);
  background: rgba(5,7,18,.55);
  backdrop-filter: blur(12px);
}
.headerRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 12px 0;
}
.brand{ display:flex; align-items:center; gap: 10px; }
.brand img{ width: 210px; height:auto; }
.nav{
  display:flex;
  align-items:center;
  gap: 10px;
}
.nav a{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: var(--muted);
  font-weight: 760;
  letter-spacing: .15px;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.nav a:hover{
  color: var(--text);
  background: rgba(10,16,48,.45);
  border-color: rgba(215,230,255,.14);
  transform: translateY(-1px);
  text-decoration:none;
}
.nav a[aria-current="page"]{
  color: var(--text);
  border-color: rgba(55,243,192,.28);
  background: linear-gradient(90deg, rgba(55,243,192,.10), rgba(58,163,255,.10));
}
.headerActions{ display:flex; align-items:center; gap: 10px; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(215,230,255,.16);
  background: rgba(10,16,48,.45);
  color: var(--text);
  font-weight: 820;
  box-shadow: var(--shadow2);
  transition: transform .18s var(--ease);
}
.btn:hover{ transform: translateY(-1px); text-decoration:none; }
.btn:active{ transform: translateY(0); }
.btn.primary{
  border-color: rgba(55,243,192,.35);
  background: linear-gradient(90deg, rgba(55,243,192,.14), rgba(58,163,255,.14));
}
.hamburger{
  display:none;
  appearance:none;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(215,230,255,.16);
  background: rgba(10,16,48,.45);
  color: var(--text);
}
.hamburger span:first-child{ font-size: 18px; line-height: 1; }

:focus-visible{ outline: 2px solid rgba(55,243,192,.55); outline-offset: 2px; }
main{ padding: 22px 0 46px; }

/* Cards & sections */
.section{ padding: 18px 0; }
.kicker{
  color: var(--muted2);
  font-weight: 750;
  letter-spacing:.22px;
  text-transform: uppercase;
  font-size: 12px;
}
.h1{
  font-size: clamp(30px, 3.3vw, 46px);
  line-height: 1.05;
  letter-spacing: -.5px;
  margin: 10px 0 12px;
}
.lead{
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 16px;
}
.grid{ display:grid; gap: 16px; }
.card{
  border: 1px solid rgba(215,230,255,.12);
  background: linear-gradient(180deg, rgba(10,16,48,.55), rgba(10,16,48,.38));
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow:hidden;
  position: relative;
}
.card::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(800px 200px at 20% 0%, rgba(55,243,192,.12), transparent 60%),
              radial-gradient(800px 200px at 80% 0%, rgba(58,163,255,.12), transparent 60%);
  opacity: .65;
  pointer-events:none;
}
.card > *{ position: relative; }
.pad{ padding: 18px; }

.heroGrid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 16px; align-items: stretch; }
.heroAside{ display:flex; flex-direction:column; gap: 12px; }
.badges{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 12px; }
.badge{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(215,230,255,.14);
  background: rgba(10,16,48,.35);
  font-weight: 740;
  font-size: 13px;
}
.badge i{ width: 8px; height: 8px; border-radius:999px; background: linear-gradient(90deg, var(--accent1), var(--accent2)); box-shadow: 0 0 14px rgba(55,243,192,.38); }

.quickList{ list-style:none; margin:0; padding:0; display:grid; gap: 10px; }
.quickList li{ display:flex; gap: 10px; align-items:flex-start; }
.dot{ width: 10px; height: 10px; border-radius: 999px; margin-top: 6px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  box-shadow: 0 0 16px rgba(58,163,255,.32);
}
.mini{ font-size: 13px; color: var(--muted2); line-height: 1.4; }

.sectionTitle{ font-size: 22px; margin: 0 0 12px; }
.featureGrid{ grid-template-columns: repeat(3, 1fr); }
.feature h3{ margin: 0 0 8px; font-size: 16px; }
.feature p{ margin:0; color: var(--muted); line-height: 1.55; }

.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pillRow{ display:flex; flex-wrap:wrap; gap: 10px; }
.pill{
  border: 1px solid rgba(215,230,255,.14);
  background: rgba(10,16,48,.32);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 740;
}
.table{
  width:100%;
  border-collapse: collapse;
  border-radius: 16px;
  overflow:hidden;
}
.table th, .table td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(215,230,255,.10);
  text-align:left;
  vertical-align: top;
}
.table th{
  background: rgba(10,16,48,.55);
  color: var(--muted2);
  font-size: 12px;
  letter-spacing: .25px;
  text-transform: uppercase;
}
.table tr:last-child td{ border-bottom:none; }

.notice{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(215,230,255,.12);
  background: rgba(10,16,48,.34);
  color: var(--muted);
  line-height: 1.55;
}
.notice.good{ border-color: rgba(55,243,192,.30); color: rgba(215,230,255,.86); }
.notice.bad{ border-color: rgba(255,95,114,.38); color: rgba(215,230,255,.86); }

/* Accordion */
.accordion{ display:grid; gap: 10px; }
details.acc{
  border: 1px solid rgba(215,230,255,.12);
  background: rgba(10,16,48,.34);
  border-radius: 16px;
  overflow:hidden;
}
details.acc summary{
  cursor:pointer;
  list-style:none;
  padding: 12px 14px;
  font-weight: 850;
  color: rgba(215,230,255,.90);
}
details.acc summary::-webkit-details-marker{ display:none; }
details.acc .content{
  padding: 0 14px 14px;
  color: var(--muted);
  line-height: 1.55;
}

/* Forms */
.formRow{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label{ display:block; font-size: 13px; color: var(--muted2); font-weight: 750; margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 16px;
  border:  1px solid rgba(215,230,255,.14);
  background: rgba(10,16,48,.40);
  color: var(--text);
}
textarea{ min-height: 150px; resize: vertical; }
.help{ font-size: 12px; color: rgba(215,230,255,.62); margin-top: 6px; line-height: 1.45; }
.checkbox{ display:flex; gap: 10px; align-items:flex-start; }
.checkbox input{ margin-top: 4px; }
.submitRow{ display:flex; flex-wrap:wrap; gap: 10px; align-items:center; margin-top: 12px; }
.tagRow{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 10px; }
.tag{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(215,230,255,.14);
  background: rgba(10,16,48,.30);
  color: rgba(215,230,255,.82);
}
.tag.on{
  border-color: rgba(55,243,192,.28);
  background: rgba(55,243,192,.10);
}

/* Footer */
footer.siteFooter{
  border-top: 1px solid var(--line);
  background: rgba(5,7,18,.55);
  backdrop-filter: blur(12px);
}
.footerGrid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; padding: 18px 0; }
.footerBrand img{ width: 240px; }
.footerBrand p{ margin: 10px 0 0; color: var(--muted); line-height:1.55; }
.footerTitle{
  font-size: 13px;
  color: var(--muted2);
  font-weight: 900;
  letter-spacing: .25px;
  text-transform: uppercase;
  margin: 4px 0 10px;
}
.footerLinks{ display:grid; gap: 8px; }
.footerLinks a{ color: rgba(215,230,255,.82); }
.iconRow{ display:flex; flex-wrap:wrap; gap: 10px; align-items:center; }
.iconBtn{
  width: 40px; height: 40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 14px;
  border: 1px solid rgba(215,230,255,.16);
  background: rgba(10,16,48,.35);
  transition: transform .18s var(--ease);
}
.iconBtn:hover{ transform: translateY(-1px); text-decoration:none; }
.iconBtn svg{ width: 18px; height: 18px; fill: currentColor; }
.coffeeBtn{
  display:inline-flex; align-items:center; gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,209,102,.35);
  background: rgba(10,16,48,.35);
  font-weight: 900;
  transition: transform .18s var(--ease);
}
.coffeeBtn:hover{ transform: translateY(-1px); text-decoration:none; }
.subFooter{ border-top: 1px solid rgba(215,230,255,.10); padding: 12px 0 18px; color: rgba(215,230,255,.62); font-size: 12px; line-height:1.45; }
.subFooter .row{ display:flex; justify-content:space-between; gap: 12px; flex-wrap:wrap; }
.smallLinks{ display:flex; flex-wrap:wrap; gap: 10px; }

/* Mobile bottom CTA bar */
.mobileBar{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 1200;
  display:none;
  border: 1px solid rgba(215,230,255,.12);
  background: rgba(5,7,18,.58);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  box-shadow: var(--shadow2);
  padding: 8px;
}
.mobileBar .row{ display:flex; gap: 8px; }
.mobileBar a{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(215,230,255,.14);
  background: rgba(10,16,48,.35);
  font-weight: 900;
}
.mobileBar a.primary{
  border-color: rgba(55,243,192,.35);
  background: linear-gradient(90deg, rgba(55,243,192,.14), rgba(58,163,255,.14));
}
.mobileBar svg{ width: 16px; height: 16px; fill: currentColor; }

/* Cookie banner */
.cookieBanner{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 78px;
  z-index: 1200;
  display:none;
}
.cookieCard{
  border: 1px solid rgba(215,230,255,.12);
  background: rgba(5,7,18,.58);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  box-shadow: var(--shadow2);
  padding: 12px;
}
.cookieCard p{ margin: 0; color: rgba(215,230,255,.78); line-height: 1.45; }
.cookieActions{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 10px; }
.cookieActions button{
  cursor:pointer;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(215,230,255,.16);
  background: rgba(10,16,48,.35);
  color: var(--text);
  font-weight: 900;
}
.cookieActions button.primary{
  border-color: rgba(55,243,192,.35);
  background: linear-gradient(90deg, rgba(55,243,192,.14), rgba(58,163,255,.14));
}

/* Responsive */
@media (max-width: 980px){
  .heroGrid{ grid-template-columns: 1fr; }
  .featureGrid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .footerGrid{ grid-template-columns: 1fr; }
  .brand img{ width: 190px; }
}
@media (max-width: 820px){
  .nav{ display:none; position:absolute; left:0; right:0; top: 64px; padding: 10px 0 16px;
        background: rgba(5,7,18,.88); border-bottom: 1px solid rgba(215,230,255,.10); }
  .nav.open{ display:grid; gap: 6px; }
  .nav a{ padding: 12px 16px; border-radius: 0; }
  .hamburger{ display:inline-flex; align-items:center; gap: 10px; }
  .headerRow{ position:relative; }
  .formRow{ grid-template-columns: 1fr; }
  .mobileBar{ display:block; }
}
@media (prefers-reduced-motion: reduce){
  .nav a, .btn, .iconBtn, .coffeeBtn, .mobileBar a{ transition:none; }
}

/* ===== v3 Motion + PCB Overlay Upgrade ===== */
@keyframes rtb-shift {
  0%   { transform: translate3d(-1.5%, -1.2%, 0) scale(1.02); filter: hue-rotate(0deg); }
  50%  { transform: translate3d( 1.2%,  1.1%, 0) scale(1.02); filter: hue-rotate(12deg); }
  100% { transform: translate3d(-1.5%, -1.2%, 0) scale(1.02); filter: hue-rotate(0deg); }
}
@keyframes rtb-scan {
  0%   { transform: translateY(-35%); opacity: .0; }
  10%  { opacity: .18; }
  50%  { opacity: .10; }
  90%  { opacity: .18; }
  100% { transform: translateY(125%); opacity: .0; }
}
@keyframes rtb-glowpulse {
  0%, 100% { box-shadow: 0 0 0 rgba(55,243,192,0), 0 0 0 rgba(58,163,255,0); }
  50% { box-shadow: 0 0 24px rgba(55,243,192,.20), 0 0 34px rgba(58,163,255,.14); }
}
@keyframes rtb-borderflow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* PCB overlay pattern (SVG) */
body::before{
  content:"";
  position:fixed;
  inset:-4%;
  z-index:-2;
  pointer-events:none;
  opacity:.22;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22260%22%20height=%22260%22%20viewBox=%220%200%20260%20260%22%3E%0A%3Cdefs%3E%0A%20%20%3ClinearGradient%20id=%22g%22%20x1=%220%22%20y1=%220%22%20x2=%221%22%20y2=%221%22%3E%0A%20%20%20%20%3Cstop%20offset=%220%22%20stop-color=%22%2337f3c0%22%20stop-opacity=%22.35%22/%3E%0A%20%20%20%20%3Cstop%20offset=%221%22%20stop-color=%22%233aa3ff%22%20stop-opacity=%22.30%22/%3E%0A%20%20%3C/linearGradient%3E%0A%3C/defs%3E%0A%3Cg%20fill=%22none%22%20stroke=%22url(%23g)%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%0A%20%20%3Cpath%20d=%22M18%2034h96v44h44v-22h84%22/%3E%0A%20%20%3Cpath%20d=%22M20%20186h78v-54h72v40h70%22/%3E%0A%20%20%3Cpath%20d=%22M46%2092h64v34h42v-16h88%22/%3E%0A%20%20%3Cpath%20d=%22M40%20222v-58h52v-38h48%22/%3E%0A%20%20%3Cpath%20d=%22M190%2018v50h-30v38h66v34%22/%3E%0A%3C/g%3E%0A%3Cg%20fill=%22url(%23g)%22%20opacity=%22.55%22%3E%0A%20%20%3Ccircle%20cx=%2218%22%20cy=%2234%22%20r=%223%22/%3E%3Ccircle%20cx=%22114%22%20cy=%2278%22%20r=%223%22/%3E%3Ccircle%20cx=%22158%22%20cy=%2256%22%20r=%223%22/%3E%0A%20%20%3Ccircle%20cx=%22240%22%20cy=%2256%22%20r=%223%22/%3E%3Ccircle%20cx=%2220%22%20cy=%22186%22%20r=%223%22/%3E%3Ccircle%20cx=%2298%22%20cy=%22132%22%20r=%223%22/%3E%0A%20%20%3Ccircle%20cx=%22170%22%20cy=%22172%22%20r=%223%22/%3E%3Ccircle%20cx=%22240%22%20cy=%22172%22%20r=%223%22/%3E%3Ccircle%20cx=%2246%22%20cy=%2292%22%20r=%223%22/%3E%0A%20%20%3Ccircle%20cx=%22110%22%20cy=%22126%22%20r=%223%22/%3E%3Ccircle%20cx=%22152%22%20cy=%22110%22%20r=%223%22/%3E%3Ccircle%20cx=%22240%22%20cy=%22110%22%20r=%223%22/%3E%0A%20%20%3Ccircle%20cx=%2240%22%20cy=%22222%22%20r=%223%22/%3E%3Ccircle%20cx=%2292%22%20cy=%22164%22%20r=%223%22/%3E%3Ccircle%20cx=%22140%22%20cy=%22126%22%20r=%223%22/%3E%0A%20%20%3Ccircle%20cx=%22190%22%20cy=%2218%22%20r=%223%22/%3E%3Ccircle%20cx=%22160%22%20cy=%22106%22%20r=%223%22/%3E%3Ccircle%20cx=%22226%22%20cy=%22140%22%20r=%223%22/%3E%0A%3C/g%3E%0A%3C/svg%3E");
  background-size: 360px 360px;
  animation: rtb-shift 16s linear infinite;
}

/* Scanline layer */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(55,243,192,0) 0%, rgba(55,243,192,.16) 45%, rgba(58,163,255,.10) 55%, rgba(58,163,255,0) 100%);
  mix-blend-mode: screen;
  opacity:.0;
  animation: rtb-scan 7.8s linear infinite;
}

/* Stronger glow layer */
#glowLayer{
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(55,243,192,.22), transparent 62%),
    radial-gradient(1200px 800px at 90% 12%, rgba(58,163,255,.20), transparent 62%),
    radial-gradient(900px 600px at 45% 90%, rgba(55,243,192,.12), transparent 62%),
    linear-gradient(180deg, rgba(5,7,18,.60), rgba(10,16,48,.88));
}

/* Header neon top border (animated) */
header.siteHeader{ position: sticky; }
header.siteHeader::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 2px;
  background: linear-gradient(90deg, rgba(55,243,192,.0), rgba(55,243,192,.55), rgba(58,163,255,.55), rgba(55,243,192,.0));
  background-size: 200% 100%;
  animation: rtb-borderflow 6s linear infinite;
  opacity: .7;
}

/* Nav micro-interactions */
.nav a{ position: relative; overflow: hidden; }
.nav a::after{
  content:"";
  position:absolute;
  left: 12px; right: 12px; bottom: 7px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(55,243,192,.0), rgba(55,243,192,.80), rgba(58,163,255,.80), rgba(55,243,192,.0));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s var(--ease);
  opacity: .85;
}
.nav a:hover::after{ transform: scaleX(1); }
.nav a[aria-current="page"]::after{ transform: scaleX(1); opacity: .95; }

/* CTA pulse */
.btn.primary{ position: relative; }
.btn.primary::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  border: 1px solid rgba(55,243,192,.35);
  pointer-events:none;
  animation: rtb-glowpulse 2.8s ease-in-out infinite;
  opacity:.9;
}

/* Cards hover */
.card{ transition: transform .18s var(--ease), border-color .18s var(--ease); }
.card:hover{ transform: translateY(-2px); border-color: rgba(55,243,192,.22); }

/* Reveal */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(1px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
  will-change: opacity, transform, filter;
}
.reveal.in{ opacity: 1; transform: none; filter: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  body::before, body::after, header.siteHeader::before, .btn.primary::before{ animation: none !important; }
  .reveal{ opacity:1; transform:none; filter:none; transition:none; }
}

/* ===== v4 PCB Visibility Boost ===== */
body::before{
  opacity: .38 !important;
  filter: saturate(1.25) contrast(1.05);
}
body::after{
  opacity: .10;
}

/* Add subtle copper-like microlines + silk layer */
#bgWrap::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(55,243,192,.055) 0 1px, rgba(55,243,192,0) 1px 26px),
    repeating-linear-gradient(0deg, rgba(58,163,255,.040) 0 1px, rgba(58,163,255,0) 1px 30px);
  mix-blend-mode: screen;
  opacity:.55;
}

/* Slightly darker FR4 base so copper pops */
#bgWrap{
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(8,40,34,.65), transparent 62%),
    radial-gradient(1200px 800px at 90% 12%, rgba(10,30,54,.62), transparent 62%),
    radial-gradient(900px 600px at 45% 90%, rgba(6,26,22,.55), transparent 62%),
    linear-gradient(180deg, rgba(3,6,16,.88), rgba(4,8,22,.96));
}

/* Make canvas traces brighter */
#pcbCanvas{
  opacity: .96 !important;
  filter: saturate(1.2) contrast(1.12);
}

@media (prefers-reduced-motion: reduce){
  #bgWrap::before{ opacity:.35; }
}

/* ===== v5 PCB (dense) look aligned to reference ===== */
/* Let the canvas be the hero; reduce the SVG overlay from v3. */
body::before{
  background-image: none !important;
  opacity: .0 !important;
  animation: none !important;
}
body::after{
  opacity: .06;
}

/* Slightly darker, higher-contrast board base */
#bgWrap{
  background:
    radial-gradient(1200px 800px at 20% 15%, rgba(9,40,58,.55), transparent 62%),
    radial-gradient(1200px 800px at 85% 20%, rgba(8,50,44,.48), transparent 62%),
    radial-gradient(900px 600px at 50% 92%, rgba(8,26,50,.55), transparent 62%),
    linear-gradient(180deg, rgba(2,5,14,.92), rgba(3,7,20,.98));
}

/* Make the PCB plane pop (like a real high-density board) */
#pcbCanvas{
  opacity: 1 !important;
  filter: saturate(1.35) contrast(1.18) brightness(1.02);
}

/* Reduce microlines intensity so they don't fight with traces */
#bgWrap::before{
  opacity: .28 !important;
}

/* ===== v6 REAL PCB BACKGROUND (dense + realistic) ===== */
body::before{ content:none !important; }
body::after{ opacity: .04 !important; }

/* Make the canvas read like a real PCB (higher contrast) */
#pcbCanvas{
  opacity: 1 !important;
  filter: saturate(1.45) contrast(1.28) brightness(1.02) !important;
}

/* Reduce extra background layers that fight the PCB look */
#glowLayer{
  background:
    radial-gradient(1200px 800px at 12% 10%, rgba(55,243,192,.10), transparent 62%),
    radial-gradient(1200px 800px at 88% 12%, rgba(58,163,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(2,5,14,.35), rgba(2,5,14,.72));
  opacity: .70;
}
#bgWrap::before{ opacity:.12 !important; }

/* Optional: slightly sharpen cards over a more detailed background */
.card{
  backdrop-filter: blur(10px) saturate(1.2);
}

/* ===== v7: Photo-like PCB background (generated, not a borrowed image) ===== */
#pcbPlate{
  position: fixed;
  inset: -6%;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(1100px 700px at 20% 18%, rgba(55,243,192,.10), transparent 62%),
    radial-gradient(1100px 700px at 86% 16%, rgba(58,163,255,.08), transparent 62%),
    radial-gradient(900px 700px at 55% 85%, rgba(255,80,110,.06), transparent 66%),
    url("/img/bg/pcb_photo.png");
  background-size: cover;
  background-position: 50% 50%;
  filter: saturate(1.08) contrast(1.06) brightness(1.02);
  will-change: transform;
  transform: translate3d(0,0,0) scale(1.08);
  animation: pcbDrift 18s ease-in-out infinite;
}

@keyframes pcbDrift{
  0%   { transform: translate3d(0,0,0) scale(1.08); }
  45%  { transform: translate3d(-1.6%, -1.0%, 0) scale(1.12); }
  100% { transform: translate3d(0,0,0) scale(1.08); }
}

/* Canvas becomes only a subtle animated layer; the PCB detail comes from #pcbPlate. */
#pcbCanvas{
  opacity: .16 !important;
  filter: none !important;
}

/* Make sure glow doesn't wash out the PCB details. */
#glowLayer{
  opacity: .70;
  background:
    radial-gradient(900px 600px at 18% 12%, rgba(55,243,192,.10), transparent 60%),
    radial-gradient(900px 650px at 85% 12%, rgba(58,163,255,.10), transparent 60%),
    radial-gradient(900px 650px at 60% 82%, rgba(255,80,110,.06), transparent 62%),
    linear-gradient(180deg, rgba(5,7,18,.55), rgba(10,16,48,.66));
}

/* Reduce grid microlines from older versions (if present) so they don't fight the photo PCB. */
#bgWrap::before{ opacity: .0 !important; }
body::after{ opacity: .03 !important; }

@media (prefers-reduced-motion: reduce){
  #pcbPlate{ animation: none !important; transform: none !important; inset: 0; }
  #pcbCanvas{ opacity: 0 !important; }
}