:root{--bg:#0a0a0f;--bg2:#11121a;--text:#e8f0f5;--muted:#9aa3b0;--accent:#00ffd5;--accent2:#00a3ff;--border:rgba(0,255,213,0.15);--glow:0 0 30px rgba(0,255,213,0.3)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
a{color:var(--accent);text-decoration:none;transition:all 0.3s}
a:hover{color:var(--accent2);text-shadow:0 0 8px rgba(0,255,213,0.5)}
.container{max-width:1280px;margin:0 auto;padding:0 24px}
header{position:sticky;top:0;background:rgba(10,10,15,0.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:100}
nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-size:1.5rem;font-weight:800;color:var(--accent);letter-spacing:0.1em;text-shadow:0 0 12px rgba(0,255,213,0.4)}
.logo span{color:#fff}
nav ul{display:flex;gap:32px;list-style:none}
nav a{color:var(--text);font-size:0.95rem;font-weight:500}
nav a:hover{color:var(--accent)}
.hero{position:relative;min-height:90vh;display:flex;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse at top,rgba(0,255,213,0.08) 0%,var(--bg) 60%);overflow:hidden}
.hero::before{content:'';position:absolute;top:20%;left:50%;width:1px;height:60%;background:linear-gradient(180deg,transparent,var(--accent),transparent);box-shadow:var(--glow);animation:pulse 3s infinite}
@keyframes pulse{0%,100%{opacity:0.3}50%{opacity:1}}
.hero h1{font-size:clamp(2.5rem,7vw,5.5rem);font-weight:900;line-height:1.1;margin-bottom:24px;background:linear-gradient(135deg,#fff 0%,var(--accent) 50%,#fff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 4s linear infinite;background-size:200% auto}
@keyframes shimmer{0%{background-position:0% center}100%{background-position:200% center}}
.hero p{font-size:clamp(1rem,2vw,1.35rem);color:var(--muted);max-width:680px;margin:0 auto 40px}
.btn{display:inline-block;padding:16px 36px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);color:#000;font-weight:700;border-radius:6px;letter-spacing:0.05em;text-transform:uppercase;font-size:0.9rem;box-shadow:0 4px 20px rgba(0,255,213,0.3);transition:all 0.3s;border:none;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,255,213,0.5);color:#000}
.btn-outline{background:transparent;border:2px solid var(--accent);color:var(--accent)}
.btn-outline:hover{background:var(--accent);color:#000}
.marquee{padding:14px 0;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));color:#000;font-weight:700;overflow:hidden;white-space:nowrap}
.marquee-content{display:inline-block;animation:scroll 20s linear infinite}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
section{padding:100px 0}
.section-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;margin-bottom:16px;text-align:center;background:linear-gradient(135deg,#fff,var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-subtitle{color:var(--muted);text-align:center;margin-bottom:64px;font-size:1.1rem;max-width:680px;margin-left:auto;margin-right:auto}

/* Product card with per-product gradient */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:32px;margin-top:48px}
.product-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all 0.3s;position:relative;display:block}
.product-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,255,213,0.15)}
.product-img{aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(135deg,#1a1b2e 0%,#0a0a0f 100%)}
.product-img::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(0,255,213,0.15) 0%,transparent 60%),radial-gradient(circle at 70% 70%,rgba(0,163,255,0.1) 0%,transparent 60%);z-index:0}
.product-img::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(0,255,213,0.03) 20px,rgba(0,255,213,0.03) 21px);z-index:1}
.product-icon{position:relative;z-index:2;font-size:7rem;filter:drop-shadow(0 0 24px rgba(0,255,213,0.4));transition:all 0.3s}
.product-card:hover .product-icon{transform:scale(1.05) rotate(-3deg);filter:drop-shadow(0 0 36px rgba(0,255,213,0.7))}
.product-info{padding:20px;position:relative;z-index:2}
.product-info h3{font-size:1.05rem;margin-bottom:8px;color:#fff;line-height:1.3;min-height:2.6em}
.product-info .price{font-size:1.4rem;color:var(--accent);font-weight:700;margin-top:12px}
.product-info .btn{width:100%;margin-top:16px;padding:12px;font-size:0.85rem;text-align:center}
.product-badge{position:absolute;top:12px;right:12px;background:rgba(0,255,213,0.9);color:#000;padding:4px 10px;border-radius:4px;font-size:0.7rem;font-weight:700;letter-spacing:0.05em;z-index:3}

/* Product page detail */
.product-detail-img{aspect-ratio:1;background:linear-gradient(135deg,#1a1b2e 0%,#0a0a0f 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);position:relative;overflow:hidden}
.product-detail-img::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(0,255,213,0.2) 0%,transparent 60%),radial-gradient(circle at 70% 70%,rgba(0,163,255,0.15) 0%,transparent 60%);z-index:0}
.product-detail-img::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(0,255,213,0.03) 20px,rgba(0,255,213,0.03) 21px);z-index:1}
.product-detail-icon{position:relative;z-index:2;font-size:12rem;filter:drop-shadow(0 0 32px rgba(0,255,213,0.5))}

/* Features */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;margin-top:64px}
.feature{text-align:center;padding:40px 24px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;transition:all 0.3s}
.feature:hover{border-color:var(--accent);transform:translateY(-2px)}
.feature-icon{font-size:3.5rem;margin-bottom:20px;display:block;filter:drop-shadow(0 0 12px var(--accent))}
.feature h3{color:#fff;margin-bottom:12px;font-size:1.25rem}
.feature p{color:var(--muted);font-size:0.95rem}
.contact-section{background:linear-gradient(135deg,var(--bg) 0%,rgba(0,255,213,0.04) 100%)}
.contact-form{max-width:560px;margin:48px auto 0;background:var(--bg2);padding:48px;border-radius:12px;border:1px solid var(--border)}
.form-group{margin-bottom:24px}
.form-group label{display:block;margin-bottom:8px;color:#fff;font-weight:500;font-size:0.9rem}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:14px 18px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:1rem;font-family:inherit;transition:all 0.3s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,255,213,0.1)}
.form-group textarea{min-height:120px;resize:vertical}
footer{background:#050508;padding:60px 0 30px;border-top:1px solid var(--border);text-align:center;color:var(--muted);font-size:0.9rem}
footer a{color:var(--accent)}
@media(max-width:768px){nav ul{gap:18px;font-size:0.85rem}nav ul li a{font-size:0.85rem}.hero{min-height:80vh}.contact-form{padding:32px 20px}.product-info h3{font-size:0.95rem;min-height:3em}}