:root{--bg:#fff;--bg2:#f8fafc;--tx:#0f172a;--tx2:#475569;--bd:rgba(0,0,0,.1);--gb:rgba(255,255,255,.7);--gbd:rgba(255,255,255,.3)}
.dark{--bg:#0f172a;--bg2:#1e293b;--tx:#f1f5f9;--tx2:#94a3b8;--bd:rgba(255,255,255,.1);--gb:rgba(15,23,42,.7);--gbd:rgba(255,255,255,.1)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans SC',sans-serif;background:var(--bg);color:var(--tx);transition:background .3s,color .3s;overflow-x:hidden}

/* Glass */
.glass{background:var(--gb);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--gbd);border-radius:16px}

/* Gradient Text */
.gtxt{background:linear-gradient(135deg,#0ea5e9,#0284c7,#0369a1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Magnetic Button */
.mbtn{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.mbtn:hover{transform:scale(1.05) translateY(-2px)}

/* Product Card */
.pcard{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.pcard:hover{transform:translateY(-8px);box-shadow:0 25px 50px -12px rgba(0,0,0,.15)}
.dark .pcard:hover{box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}

/* Nav Link */
.nlink{position:relative}
.nlink::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:linear-gradient(90deg,#0ea5e9,#0284c7);transition:width .3s}
.nlink:hover::after{width:100%}

/* Fade Animation */
.fade{opacity:0;transform:translateY(30px);transition:opacity .6s,transform .6s}
.fade.show{opacity:1;transform:translateY(0)}

/* Hero Pattern */
.hero-bg{background-image:radial-gradient(circle at 20% 50%,rgba(14,165,233,.1) 0%,transparent 50%),radial-gradient(circle at 80% 50%,rgba(2,132,199,.1) 0%,transparent 50%),radial-gradient(circle at 50% 80%,rgba(3,105,161,.05) 0%,transparent 50%)}
.dark .hero-bg{background-image:radial-gradient(circle at 20% 50%,rgba(14,165,233,.15) 0%,transparent 50%),radial-gradient(circle at 80% 50%,rgba(2,132,199,.15) 0%,transparent 50%),radial-gradient(circle at 50% 80%,rgba(3,105,161,.1) 0%,transparent 50%)}

/* Input Focus */
.inp{transition:border-color .3s,box-shadow .3s}
.inp:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.2)}

/* Float */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.floater{animation:float 3s ease-in-out infinite}

/* Pulse */
@keyframes pglow{0%,100%{box-shadow:0 0 20px rgba(14,165,233,.3)}50%{box-shadow:0 0 40px rgba(14,165,233,.6)}}
.pulse{animation:pglow 2s ease-in-out infinite}

/* Smooth scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#64748b}