/* ============================================================
   CYBER HOME THEME — homepage only (body.cyber-home)
   Neon-green "cyber tools hub" look. Pure CSS, GPU-cheap,
   slow animations. Nothing else on the site is touched.
   ============================================================ */
body.cyber-home{background:#010805;color:#d9ffe9;overflow-x:hidden}

/* ---------- slow matrix-rain backdrop (2 depth layers) ---------- */
body.cyber-home::before{
  content:"";position:fixed;left:0;right:0;top:-60%;height:220%;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    transparent 0 140px, rgba(0,255,140,.055) 140px 142px, transparent 142px 300px);
  animation:cyberRain 28s linear infinite;will-change:transform}
body.cyber-home::after{
  content:"";position:fixed;left:0;right:0;top:-60%;height:220%;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg, transparent 0 90px, rgba(0,255,140,.035) 90px 91px),
    radial-gradient(900px 480px at 50% -60px, rgba(0,255,140,.10), transparent 70%),
    radial-gradient(700px 500px at 8% 110%, rgba(120,60,255,.07), transparent 70%),
    radial-gradient(700px 500px at 95% 110%, rgba(40,120,255,.07), transparent 70%);
  animation:cyberRain 46s linear infinite reverse;will-change:transform}
@keyframes cyberRain{to{transform:translateY(27.5%)}}

/* keep real content above the rain */
body.cyber-home .site-header,body.cyber-home main,body.cyber-home .container,
body.cyber-home section,body.cyber-home footer{position:relative;z-index:1}

/* ---------- header tint ---------- */
body.cyber-home .site-header{background:rgba(1,10,6,.88);border-bottom:1px solid rgba(0,255,140,.22)}

/* ---------- hero ---------- */
body.cyber-home .hero{background:transparent;padding:74px 18px 46px}
body.cyber-home .hero h1{
  color:#a4ffc6;font-weight:800;letter-spacing:3px;
  text-shadow:0 0 16px rgba(0,255,140,.85),0 0 70px rgba(0,255,140,.35);
  animation:cyberGlow 9s ease-in-out infinite}
body.cyber-home .hero h1 .grad{background:none;-webkit-background-clip:initial;background-clip:initial;
  color:#a4ffc6;text-shadow:0 0 16px rgba(0,255,140,.85),0 0 70px rgba(0,255,140,.35)}
@keyframes cyberGlow{0%,100%{text-shadow:0 0 16px rgba(0,255,140,.85),0 0 70px rgba(0,255,140,.35)}
  50%{text-shadow:0 0 22px rgba(0,255,140,1),0 0 90px rgba(0,255,140,.5)}}
body.cyber-home .hero p{color:#9fd8b8}
body.cyber-home .hero::before{background:none}

/* ---------- cyber buttons (hero CTA) ---------- */
body.cyber-home .hero-cta{gap:14px}
body.cyber-home .hero-cta .btn{
  border-radius:6px;
  background:rgba(0,24,14,.78);border:1px solid #00ff8c;color:#8dffb6;
  font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:.86rem;
  box-shadow:0 0 16px rgba(0,255,140,.28),inset 0 0 14px rgba(0,255,140,.07);
  transition:box-shadow .25s,color .25s,transform .25s}
body.cyber-home .hero-cta .btn-rainbow::before{display:none}
body.cyber-home .hero-cta .btn:hover,body.cyber-home .hero-cta .btn:focus-visible{
  color:#eafff3;transform:translateY(-2px);
  box-shadow:0 0 34px rgba(0,255,140,.6),inset 0 0 18px rgba(0,255,140,.14)}
body.cyber-home .hero-cta .btn span{filter:drop-shadow(0 0 6px rgba(0,255,140,.8))}

/* ---------- section titles ---------- */
body.cyber-home .section-head h2 .grad{background:linear-gradient(90deg,#00ff8c,#a4ffc6);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- cards ---------- */
body.cyber-home .card{
  background:rgba(2,14,9,.88);border:1px solid rgba(0,255,140,.30);
  box-shadow:0 0 0 rgba(0,0,0,0),inset 0 0 22px rgba(0,255,140,.04);
  transition:border-color .25s,box-shadow .25s,transform .25s}
body.cyber-home .card:hover{
  border-color:rgba(0,255,140,.65);transform:translateY(-3px);
  box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 26px rgba(0,255,140,.20)}
body.cyber-home .card h3{color:#d9ffe9}
body.cyber-home .card-icon{border-color:rgba(0,255,140,.35);background:rgba(0,255,140,.07)}
body.cyber-home .price-new{color:#00ff8c}
body.cyber-home .off-badge{background:rgba(0,255,140,.16);color:#8dffb6;border:1px solid rgba(0,255,140,.4)}

/* card action buttons → cyber outline */
body.cyber-home .card .btn{
  border-radius:6px}
body.cyber-home .card .btn-grad{background:rgba(0,30,17,.85);border:1px solid rgba(0,255,140,.55);
  color:#8dffb6;box-shadow:0 0 12px rgba(0,255,140,.20)}
body.cyber-home .card .btn-grad:hover{color:#eafff3;box-shadow:0 0 24px rgba(0,255,140,.45)}

/* search + pills */
body.cyber-home .toolbar .search input{background:rgba(0,20,12,.8);border:1px solid rgba(0,255,140,.35);color:#d9ffe9}
body.cyber-home .cat-pills button{background:rgba(0,20,12,.7);border:1px solid rgba(0,255,140,.3);color:#9fd8b8}
body.cyber-home .cat-pills button.active{background:rgba(0,255,140,.16);border-color:#00ff8c;color:#eafff3;
  box-shadow:0 0 14px rgba(0,255,140,.3)}

/* footer tint */
body.cyber-home footer{border-top:1px solid rgba(0,255,140,.18)}

/* ---------- mobile: keep it tidy ---------- */
@media(max-width:640px){
  body.cyber-home .hero{padding:52px 14px 36px}
  body.cyber-home .hero h1{letter-spacing:1.5px}
  body.cyber-home .hero-cta .btn{font-size:.78rem;padding:12px 18px}
}

/* ---------- reduced motion: freeze the rain ---------- */
@media(prefers-reduced-motion:reduce){
  body.cyber-home::before,body.cyber-home::after{animation:none}
  body.cyber-home .hero h1{animation:none}
}