*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --pri:#6366f1;--pri-l:#818cf8;--pri-d:#4f46e5;
    --acc:#ec4899;--cyan:#06b6d4;--green:#10b981;
    --bg:#050507;--bg2:#0a0a0f;--card:rgba(22,22,30,.65);
    --tx:#fafafa;--tx2:#a1a1aa;--brd:rgba(99,102,241,.12);
}
html{scroll-behavior:smooth}
body{
    font-family:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
    background:var(--bg);color:var(--tx);line-height:1.6;overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
#particles{position:fixed;inset:0;z-index:0;pointer-events:none}
.noise-overlay{
    position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.03;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* NAV */
.navbar{position:fixed;top:0;width:100%;z-index:100;background:rgba(9,9,11,.75);backdrop-filter:blur(16px);border-bottom:1px solid var(--brd);transition:all .3s}
.nav-inner{max-width:1280px;margin:0 auto;padding:.9rem 2rem;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.logo span{font-size:1.05rem;font-weight:700;background:linear-gradient(135deg,#fff,#c7d2fe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;list-style:none;gap:2.2rem}
.nav-links a{color:var(--tx2);text-decoration:none;font-size:.88rem;font-weight:500;transition:color .25s;position:relative}
.nav-links a:hover{color:#fff}
.nav-links a::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--pri),var(--acc));transition:width .3s}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:.75rem}
.lang-switcher{display:flex;gap:.4rem}
.lang-btn{background:rgba(99,102,241,.06);border:1px solid var(--brd);color:var(--tx2);padding:.35rem .7rem;border-radius:5px;font-size:.75rem;cursor:pointer;transition:all .25s;font-family:inherit}
.lang-btn:hover{background:rgba(99,102,241,.15);color:#fff}
.lang-btn.active{background:var(--pri);border-color:var(--pri);color:#fff}
.hamburger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:4px}
.hamburger span{display:block;width:22px;height:2px;background:var(--tx);border-radius:2px;transition:.3s}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:7rem 0 3rem}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(99,102,241,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 40% 50%,#000 0%,transparent 65%);-webkit-mask-image:radial-gradient(ellipse at 40% 50%,#000 0%,transparent 65%)}
.glow{position:absolute;border-radius:50%;filter:blur(100px);opacity:.35;pointer-events:none}
.glow-1{width:500px;height:500px;background:var(--pri);top:-15%;right:-5%;animation:glowPulse 8s ease-in-out infinite}
.glow-2{width:350px;height:350px;background:var(--acc);bottom:5%;left:10%;animation:glowPulse 8s ease-in-out 2.5s infinite}
.glow-3{width:280px;height:280px;background:var(--cyan);top:30%;left:45%;animation:glowPulse 8s ease-in-out 5s infinite}
@keyframes glowPulse{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.45;transform:scale(1.08)}}

.hero-inner{max-width:1280px;margin:0 auto;padding:0 2rem;width:100%;display:flex;align-items:center;justify-content:space-between;gap:4rem;position:relative;z-index:1}
.hero-left{max-width:540px;flex:1}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem 1rem;background:rgba(99,102,241,.08);border:1px solid var(--brd);border-radius:100px;font-size:.78rem;color:var(--pri-l);font-weight:600;letter-spacing:.5px;margin-bottom:2rem}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--pri);animation:dotPulse 2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
.hero-h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:900;line-height:1.08;margin-bottom:1.5rem;letter-spacing:-.02em}
.h1-line{display:block}
.h1-w{background:linear-gradient(135deg,#fff 0%,#c7d2fe 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.h1-g{background:linear-gradient(135deg,var(--pri) 0%,var(--acc) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-desc{font-size:1.02rem;color:var(--tx2);margin-bottom:2.5rem;line-height:1.85}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
.btn-p,.btn-g{padding:.8rem 1.8rem;border-radius:10px;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .3s;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;border:none;font-family:inherit}
.btn-p{background:linear-gradient(135deg,var(--pri),var(--acc));color:#fff;box-shadow:0 4px 24px rgba(99,102,241,.35)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(99,102,241,.55)}
.btn-g{background:transparent;color:var(--tx2);border:1px solid var(--brd)}
.btn-g:hover{color:#fff;border-color:var(--pri-l);background:rgba(99,102,241,.06)}

/* Hero cards - 4 items */
.hero-right{flex:1;max-width:420px;position:relative}
.hero-cards{display:flex;flex-direction:column;gap:1rem}
.hcard{display:flex;align-items:center;gap:1.1rem;background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--brd);border-radius:14px;padding:1rem 1.3rem;text-decoration:none;color:inherit;transition:all .4s cubic-bezier(.22,1,.36,1);opacity:0;animation:hcardIn .7s ease forwards}
.hcard:nth-child(1){animation-delay:.2s;transform:translateX(30px)}
.hcard:nth-child(2){animation-delay:.35s;transform:translateX(45px)}
.hcard:nth-child(3){animation-delay:.5s;transform:translateX(60px)}
.hcard:nth-child(4){animation-delay:.65s;transform:translateX(75px)}
@keyframes hcardIn{to{opacity:1;transform:translateX(0)}}
.hcard:hover{border-color:var(--pri-l);transform:translateX(6px) scale(1.02) !important;box-shadow:0 12px 40px rgba(99,102,241,.18)}
.hcard-icon{flex-shrink:0}
.hcard-text{flex:1}
.hcard-text strong{display:block;font-size:.95rem;font-weight:700;color:#fff;margin-bottom:1px}
.hcard-text small{font-size:.78rem;color:var(--tx2)}
.hcard-arrow{color:var(--pri-l);font-size:1.1rem;transition:transform .3s}
.hcard:hover .hcard-arrow{transform:translateX(4px)}
.hcard-soon{font-size:.62rem;font-weight:600;color:var(--acc);background:rgba(236,72,153,.08);border:1px solid rgba(236,72,153,.18);padding:.2rem .55rem;border-radius:4px}
.hero-scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%)}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--pri-l),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;height:30px}50%{opacity:.8;height:45px}}

/* SECTION */
.sec-inner{max-width:1280px;margin:0 auto;padding:0 2rem}
.sec-head{text-align:center;margin-bottom:4rem}
.sec-tag{display:inline-block;font-size:.7rem;font-weight:700;color:var(--pri-l);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:.7rem}
.sec-title{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:800;margin-bottom:.8rem;background:linear-gradient(135deg,#fff,#a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sec-sub{font-size:1.05rem;color:var(--tx2)}

/* PRODUCTS - 2x2 grid */
.products{padding:7rem 0;position:relative}
.pgrid{display:grid;gap:1.8rem}
.pgrid-4{grid-template-columns:repeat(2,1fr)}
.pcard{position:relative;background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--brd);border-radius:18px;padding:2.2rem;transition:all .4s cubic-bezier(.22,1,.36,1);overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.pcard-glow{position:absolute;top:-60%;left:-60%;width:220%;height:220%;background:radial-gradient(circle,rgba(99,102,241,.1),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.pcard:hover .pcard-glow{opacity:1}
.pcard:hover{transform:translateY(-7px);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.pcard-hub:hover{border-color:#8b5cf6}
.pcard-hub .pcard-glow{background:radial-gradient(circle,rgba(139,92,246,.12),transparent 70%)}
.pcard-wan:hover{border-color:var(--cyan)}
.pcard-wan .pcard-glow{background:radial-gradient(circle,rgba(6,182,212,.12),transparent 70%)}
.pcard-comic:hover{border-color:var(--acc)}
.pcard-comic .pcard-glow{background:radial-gradient(circle,rgba(236,72,153,.12),transparent 70%)}
.pcard-train:hover{border-color:var(--green)}
.pcard-train .pcard-glow{background:radial-gradient(circle,rgba(16,185,129,.12),transparent 70%)}

.pcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6rem}
.pcard-url{font-size:.68rem;font-weight:600;color:var(--pri-l);background:rgba(99,102,241,.08);border:1px solid var(--brd);padding:.3rem .7rem;border-radius:5px;letter-spacing:.3px}
.pcard-coming{color:var(--acc) !important;background:rgba(236,72,153,.08) !important;border-color:rgba(236,72,153,.15) !important}
.pcard-service{color:var(--green) !important;background:rgba(16,185,129,.08) !important;border-color:rgba(16,185,129,.15) !important}
.pcard h3{font-size:1.4rem;font-weight:800;margin-bottom:.35rem}
.pcard-tl{font-size:.83rem;color:var(--pri-l);font-weight:600;margin-bottom:1rem}
.pcard-train .pcard-tl{color:var(--green)}
.pcard-desc{color:var(--tx2);font-size:.9rem;line-height:1.8;margin-bottom:1.5rem;flex:1}
.pcard-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.8rem}
.pcard-tags span{font-size:.7rem;font-weight:500;padding:.3rem .65rem;border-radius:5px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:var(--tx2)}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;padding-top:1.3rem;border-top:1px solid var(--brd)}
.pcard-foot span{font-size:.85rem;color:var(--pri-l);font-weight:600}

/* MARQUEE */
.marquee-wrap{padding:2.5rem 0;overflow:hidden;border-top:1px solid var(--brd);border-bottom:1px solid var(--brd);background:rgba(99,102,241,.015)}
.marquee{display:flex;gap:1.8rem;white-space:nowrap;animation:mq 28s linear infinite;font-size:1.15rem;font-weight:700;color:rgba(99,102,241,.25);letter-spacing:2px;text-transform:uppercase}
.marquee i{color:rgba(99,102,241,.15);font-style:normal}
@keyframes mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ABOUT */
.about{padding:7rem 0}
.about-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:3.5rem;align-items:start}
.about-p{color:var(--tx2);font-size:1rem;line-height:1.9;margin-bottom:1.3rem}
.about-vals{display:flex;flex-direction:column;gap:1.3rem;margin-top:2.5rem}
.aval{display:flex;gap:1.1rem;align-items:flex-start}
.aval-ico{flex-shrink:0;width:40px;height:40px;border-radius:9px;background:rgba(99,102,241,.06);border:1px solid var(--brd);display:flex;align-items:center;justify-content:center}
.aval h4{font-size:1rem;font-weight:700;margin-bottom:.15rem}
.aval p{color:var(--tx2);font-size:.85rem}
.about-side{display:flex;flex-direction:column;gap:1.1rem}
.stat{background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--brd);border-radius:14px;padding:1.8rem;text-align:center;transition:all .3s}
.stat:hover{border-color:var(--pri-l);transform:translateY(-3px)}
.stat-v{font-size:2.5rem;font-weight:900;background:linear-gradient(135deg,var(--pri),var(--acc));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.3rem}
.stat-l{color:var(--tx2);font-size:.88rem;font-weight:500}

/* CONTACT */
.contact{padding:7rem 0}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;max-width:880px;margin:0 auto}
.ccard{background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--brd);border-radius:14px;padding:2.2rem;text-align:center;transition:all .3s}
.ccard:hover{border-color:var(--pri-l);transform:translateY(-3px)}
.ccard svg{margin-bottom:.9rem}
.ccard h3{font-size:1rem;font-weight:700;margin-bottom:.45rem}
.ccard p{color:var(--tx2);font-size:.88rem}

/* FOOTER */
.footer{padding:1.8rem 0;border-top:1px solid var(--brd)}
.foot-inner{max-width:1280px;margin:0 auto;padding:0 2rem;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.foot-brand{display:flex;align-items:center;gap:.65rem}
.foot-brand span{font-size:.85rem;font-weight:600;color:var(--tx2)}
.foot-copy{color:var(--tx2);font-size:.78rem}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:all .65s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* RESPONSIVE */
@media(max-width:960px){
    .hero-inner{flex-direction:column;text-align:center;gap:3rem}
    .hero-left{max-width:100%}
    .hero-right{max-width:100%}
    .hero-cta{justify-content:center}
    .hcard:nth-child(1),.hcard:nth-child(2),.hcard:nth-child(3),.hcard:nth-child(4){transform:translateX(0)}
    @keyframes hcardIn{to{opacity:1;transform:translateX(0)}}
    .about-grid{grid-template-columns:1fr}
    .pgrid-4{grid-template-columns:1fr 1fr}
    .cgrid{grid-template-columns:1fr;max-width:380px}
    .nav-links{display:none}
    .hamburger{display:flex}
    .foot-inner{text-align:center}
}
@media(max-width:600px){
    .pgrid-4{grid-template-columns:1fr}
    .hero-h1{font-size:2rem}
}

/* Beian link */
.beian-link{color:var(--tx2);text-decoration:none;transition:color .25s}
.beian-link:hover{color:var(--pri-l)}

/* === ANIMATION ENHANCEMENTS === */

/* Section backgrounds with animated blobs */
.products, .about, .contact {
    position: relative;
    overflow: hidden;
}

.section-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.4;
    will-change: transform;
}

/* Products blobs - cyan/purple */
.blob-p1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.5), transparent 70%);
    top: 10%;
    left: -10%;
    animation: blobFloat1 18s ease-in-out infinite;
}

.blob-p2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.5), transparent 70%);
    bottom: 5%;
    right: -5%;
    animation: blobFloat2 15s ease-in-out infinite;
}

.blob-p3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.4), transparent 70%);
    top: 50%;
    left: 50%;
    animation: blobFloat3 12s ease-in-out infinite;
}

/* About blobs - amber/rose */
.blob-a1 {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.45), transparent 70%);
    top: 15%;
    right: 10%;
    animation: blobFloat2 16s ease-in-out infinite;
}

.blob-a2 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.4), transparent 70%);
    bottom: 10%;
    left: 5%;
    animation: blobFloat1 14s ease-in-out infinite;
}

/* Contact blobs - indigo/teal */
.blob-c1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.5), transparent 70%);
    top: 20%;
    left: 15%;
    animation: blobFloat3 17s ease-in-out infinite;
}

.blob-c2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.45), transparent 70%);
    bottom: 15%;
    right: 20%;
    animation: blobFloat1 13s ease-in-out infinite;
}

@keyframes blobFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(80px, -60px) scale(1.1); }
    66% { transform: translate(-40px, 40px) scale(0.95); }
}

@keyframes blobFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-70px, 50px) scale(1.15); }
}

@keyframes blobFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(50px, 30px) scale(1.08); }
    75% { transform: translate(-60px, -40px) scale(0.92); }
}

/* Product card 3D tilt */
.pcard {
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    will-change: transform;
}

.pcard:hover {
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.2), 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Enhanced reveal animations */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Section title sweep animation */
.sec-title {
    background: linear-gradient(90deg, var(--tx) 0%, var(--pri-l) 50%, var(--tx) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleSweep 4s ease-in-out infinite;
}

@keyframes titleSweep {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Section tag pulse */
.sec-tag {
    animation: tagPulse 3s ease-in-out infinite;
}

@keyframes tagPulse {
    0%, 100% { 
        border-color: var(--brd);
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
    50% { 
        border-color: var(--pri-l);
        box-shadow: 0 0 20px 2px rgba(99, 102, 241, 0.3);
    }
}

/* Marquee gradient text */
.marquee {
    background: linear-gradient(90deg, var(--pri) 0%, var(--acc) 50%, var(--cyan) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: mq 28s linear infinite, marqueeGradient 8s ease-in-out infinite;
}

@keyframes marqueeGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* About value icons hover */
.aval-ico {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.aval:hover .aval-ico {
    transform: rotate(15deg) scale(1.1);
    box-shadow: 0 0 25px rgba(99, 102, 241, 0.4);
}

/* Contact card border glow */
.ccard {
    position: relative;
}

.ccard::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, transparent 0%, transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ccard:hover::before {
    background: linear-gradient(135deg, var(--pri), var(--acc), var(--cyan));
    opacity: 1;
    animation: borderGlow 3s linear infinite;
}

@keyframes borderGlow {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(60deg); }
}

/* Stat counter animation */
.stat-v {
    display: inline-block;
    will-change: transform;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .blob {
        opacity: 0.25;
    }
    .blob-p1, .blob-a1, .blob-c1 {
        width: 400px;
        height: 400px;
    }
    .blob-p2, .blob-a2, .blob-c2 {
        width: 300px;
        height: 300px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blob, .sec-title, .sec-tag, .marquee {
        animation: none;
    }
    .reveal-up, .reveal-scale, .reveal-left, .reveal-right {
        transition: opacity 0.3s ease;
        transform: none !important;
    }
}

/* === BACKGROUND OPTIMIZATION === */
body {
    background: 
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(99, 102, 241, 0.08), transparent),
        radial-gradient(ellipse 60% 40% at 80% 50%, rgba(139, 92, 246, 0.05), transparent),
        radial-gradient(ellipse 70% 50% at 20% 80%, rgba(6, 182, 212, 0.05), transparent),
        linear-gradient(180deg, #050507 0%, #0a0a0f 50%, #050507 100%);
    background-attachment: fixed;
}

/* Subtle vignette effect */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
}

/* Section backgrounds with subtle gradients */
.products {
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(99, 102, 241, 0.02) 50%, 
        transparent 100%
    );
}

.about {
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(236, 72, 153, 0.02) 50%, 
        transparent 100%
    );
}

.contact {
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(6, 182, 212, 0.02) 50%, 
        transparent 100%
    );
}