/* ===== Nenyoo — shared styles (split static site) ===== */
*{box-sizing:border-box;}
html,body{margin:0;background:#07060c;}
::selection{background:rgba(139,92,246,0.35);}
input:focus,button:focus{outline:none;}
input::placeholder{color:#5d5670;}
a{color:inherit;text-decoration:none;}
@keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:#07060c;}
::-webkit-scrollbar-thumb{background:#221a33;}

/* root background canvas + gradients (was the rootRef div inline style) */
.bg-root{
  min-height:100vh;
  background-color:#07060c;
  background-image:
    radial-gradient(820px 520px at 12% -8%,rgba(124,58,237,0.18),transparent 62%),
    radial-gradient(760px 560px at 102% 4%,rgba(99,49,168,0.14),transparent 58%),
    radial-gradient(900px 640px at 50% 118%,rgba(124,58,237,0.10),transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  background-attachment:fixed,fixed,fixed,fixed;
  background-size:auto,auto,auto,160px 160px;
  color:#ECEAF2;
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
  position:relative;
  overflow-x:hidden;
}
.fx-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;}
#fx{z-index:0;}
#catFx{z-index:40;}

/* ============================================================
   Responsive — phones & tablets (site-wide)
   The site is built with inline styles, so these rules target
   the inline patterns directly via attribute selectors. One
   place fixes every page that links this stylesheet.
   ============================================================ */

/* Tablets: dense multi-column grids drop to 2 columns. */
@media (max-width: 980px){
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:repeat(2,1fr) !important;}
}

/* Phones: every multi-column grid collapses to a single column. */
@media (max-width: 640px){
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.15fr 1fr"]{grid-template-columns:1fr !important;}

  /* Shared sticky nav: wrap + center instead of overflowing the screen.
     max-width:100% forces the bordered link group to wrap its links
     rather than keep its intrinsic width and overflow off-screen. */
  header > div{flex-direction:column !important;align-items:center !important;gap:12px !important;}
  header > div > div{flex-wrap:wrap !important;justify-content:center !important;max-width:200px !important;min-width:0 !important;border:4px solid #00ff00 !important;background:#ff0000 !important;}
  header a[style*="padding:10px 18px"]{padding:9px 12px !important;font-size:12.5px !important;}

  /* Large display headings would otherwise overflow narrow screens. */
  [style*="font-size:66px"]{font-size:38px !important;line-height:1.05 !important;}
  [style*="font-size:56px"]{font-size:34px !important;line-height:1.06 !important;}
  [style*="font-size:46px"]{font-size:31px !important;line-height:1.08 !important;}
  [style*="font-size:42px"]{font-size:29px !important;line-height:1.1  !important;}
}