:root{ --volt:#4F46E5; --volt2:#06B6D4; }
*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; }
body{ font-family:'Inter',sans-serif; background:#FFFFFF; color:#0F172A; }

.font-display{ font-family:'Space Grotesk',sans-serif; letter-spacing:-.01em; }
.font-mono{ font-variant-numeric: tabular-nums; }

.volt-grad{ background:linear-gradient(110deg,#4F46E5 0%,#6366F1 40%,#06B6D4 100%); }
.volt-text{ background:linear-gradient(110deg,#6366F1,#22D3EE); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ring-volt{ box-shadow:0 0 0 2px rgba(79,70,229,.45); }

.circuit{
  background-color:#0A0E1A;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(79,70,229,.30), transparent 42%),
    radial-gradient(circle at 88% 14%, rgba(6,182,212,.22), transparent 40%),
    linear-gradient(rgba(99,102,241,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.08) 1px, transparent 1px);
  background-size:auto, auto, 34px 34px, 34px 34px;
  background-position:0 0, 0 0, -1px -1px, -1px -1px;
}

.trace-line{ stroke:url(#voltStroke); fill:none; stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray:6 10; animation:flow 14s linear infinite; opacity:.7; }
@keyframes flow{ to{ stroke-dashoffset:-160; } }
.trace-dead{ stroke:#E11D48; stroke-dasharray:5 9; opacity:.55; animation:none; }
.node-pulse{ animation:nodePulse 2.6s ease-in-out infinite; transform-origin:center; }
@keyframes nodePulse{ 0%,100%{ opacity:.35; r:3 } 50%{ opacity:1; r:5 } }

.pcard{ transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s; }
.pcard:hover{ transform:translateY(-6px); box-shadow:0 18px 44px -16px rgba(79,70,229,.40); }
.pcard .pimg{ transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.pcard:hover .pimg{ transform:scale(1.06); }
.pcard .accent{ transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.pcard:hover .accent{ transform:scaleX(1); }

.cat-tile{ transition:transform .2s, box-shadow .2s, border-color .2s; }
.cat-tile:hover{ transform:translateY(-4px); border-color:rgba(79,70,229,.4); box-shadow:0 14px 30px -16px rgba(79,70,229,.45); }
.cat-tile:hover .cat-ic{ background:linear-gradient(110deg,#4F46E5,#06B6D4); }
.cat-tile:hover .cat-ic svg{ stroke:#fff; }

.no-bar{ scrollbar-width:none; }
.no-bar::-webkit-scrollbar{ display:none; }

.marquee{ display:flex; width:max-content; gap:2.5rem; align-items:center; animation:scrollx 30s linear infinite; will-change:transform; }
.marquee:hover{ animation-play-state:paused; }
.marquee-item{ flex:0 0 auto; white-space:nowrap; }
.marquee-mask{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
@keyframes scrollx{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

#toast{ transition:transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s; }
#cartDrawer{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
#overlay{ transition:opacity .3s; }
.heart.on svg{ fill:#E11D48; stroke:#E11D48; }

/* ===== HERO SLIDER (crossfade halus) ===== */
#slides{ position:relative; }
.slide{
  position:absolute; inset:0;
  opacity:0; transform:translateY(12px) scale(.992);
  transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.4,0,.2,1);
  pointer-events:none; will-change:opacity, transform;
}
.slide.is-active{ opacity:1; transform:none; pointer-events:auto; }
.dot{ transition:width .45s cubic-bezier(.4,0,.2,1), background-color .45s ease; }

/* ===== 404 ===== */
.glow{ filter:drop-shadow(0 0 10px rgba(79,70,229,.55)); }
.flick{ animation:flick 3.2s steps(1) infinite; }
@keyframes flick{ 0%,7%,9%,100%{opacity:1} 8%{opacity:.25} 48%,50%{opacity:.4} }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
  .slide{ opacity:1; transform:none; }
  .slide:not(.is-active){ opacity:0; }
}