/* ============================================================
   NEXTECH STORE — Electronics Shop Styles
   Theme: Dark navy / electric blue / purple — tech forward
   ============================================================ */

body { font-family:'Inter','Segoe UI',sans-serif;background:#060d1a;color:#c8d6f0; }
h1,h2,h3 { font-family:'Space Grotesk','Inter',sans-serif; }

/* Nav */
.site-nav { position:fixed;top:0;left:0;right:0;z-index:100;padding:1.2rem 0;transition:all 0.4s ease; }
.site-nav.scrolled { background:rgba(6,13,26,0.96);backdrop-filter:blur(12px);box-shadow:0 2px 30px rgba(0,200,255,0.1);padding:0.75rem 0; }
.nav-logo { font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:-0.5px; }
.nav-logo span { color:#00c8ff; }
.nav-links { display:flex;gap:2.5rem;list-style:none; }
.nav-links a { font-size:0.87rem;font-weight:500;color:rgba(200,214,240,0.7);position:relative;transition:color 0.3s; }
.nav-links a::after { content:'';position:absolute;bottom:-3px;left:0;width:0;height:2px;background:linear-gradient(90deg,#00c8ff,#7c3aed);transition:width 0.3s; }
.nav-links a:hover,.nav-links a.active { color:#00c8ff; }
.nav-links a:hover::after,.nav-links a.active::after { width:100%; }
.nav-cta { background:linear-gradient(90deg,#00c8ff,#7c3aed);color:#fff !important;padding:0.6rem 1.5rem;border-radius:8px;font-size:0.85rem;font-weight:600;transition:opacity 0.3s; }
.nav-cta:hover { opacity:0.85; }
.hamburger { background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:5px;padding:4px; }
.hamburger span { width:24px;height:2px;background:#00c8ff;display:block;border-radius:2px;transition:all 0.3s; }
.mobile-nav { list-style:none;max-height:0;overflow:hidden;background:rgba(6,13,26,0.98);transition:max-height 0.4s ease; }
.mobile-nav.open { max-height:300px;padding:1rem 0; }
.mobile-nav li a { display:block;padding:0.85rem 1.5rem;font-size:0.9rem;color:rgba(200,214,240,0.7);border-bottom:1px solid rgba(255,255,255,0.05);transition:color 0.3s; }
.mobile-nav li a:hover { color:#00c8ff; }

/* Hero */
.hero-section { position:relative;min-height:100vh;background:#060d1a;display:flex;align-items:center;overflow:hidden; }
.hero-content { position:relative;z-index:2;padding-top:100px; }
.hero-tagline { display:inline-block;background:rgba(0,200,255,0.1);border:1px solid rgba(0,200,255,0.3);color:#00c8ff;font-size:0.75rem;letter-spacing:2px;text-transform:uppercase;padding:0.4rem 1rem;border-radius:20px;margin-bottom:1.5rem; }
.hero-title { font-size:clamp(2.5rem,6vw,5rem);color:#fff;line-height:1.05;font-weight:800;margin-bottom:1.5rem; }
.hero-title span { background:linear-gradient(90deg,#00c8ff,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.hero-subtitle { font-size:1.05rem;color:rgba(200,214,240,0.65);max-width:480px;line-height:1.7;margin-bottom:2.5rem; }
.hero-cta { display:flex;flex-wrap:wrap;gap:1rem;align-items:center; }
.btn-tech-primary { background:linear-gradient(90deg,#00c8ff,#7c3aed);color:#fff;padding:0.9rem 2.2rem;border-radius:10px;font-weight:700;font-size:0.95rem;border:none;cursor:pointer;transition:opacity 0.3s,transform 0.3s;letter-spacing:0.3px; }
.btn-tech-primary:hover { opacity:0.85;transform:translateY(-2px); }
.btn-tech-outline { border:2px solid rgba(0,200,255,0.35);color:#00c8ff;padding:0.9rem 2.2rem;border-radius:10px;font-weight:600;font-size:0.95rem;background:transparent;cursor:pointer;transition:all 0.3s; }
.btn-tech-outline:hover { border-color:#00c8ff;background:rgba(0,200,255,0.05); }
.hero-features { display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2.5rem; }
.hero-feat { display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;color:rgba(200,214,240,0.6); }
.hero-feat span:first-child { color:#00c8ff; }

/* Stats */
.stats-bar { background:linear-gradient(90deg,#00c8ff,#7c3aed);padding:2.5rem 0; }
.stats-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;text-align:center; }
.stat-item { color:#fff; }
.stat-num { display:block;font-size:2.4rem;font-weight:800; }
.stat-label { font-size:0.82rem;opacity:0.85;letter-spacing:0.5px; }

/* Section */
.section-label { font-size:0.75rem;letter-spacing:3px;text-transform:uppercase;color:#00c8ff;font-weight:600;margin-bottom:0.75rem;display:block; }
.section-title { font-size:clamp(1.8rem,3.5vw,2.6rem);color:#fff;line-height:1.2;margin-bottom:1.5rem;font-weight:700; }
.section-body { color:rgba(200,214,240,0.65);line-height:1.8;margin-bottom:1rem;max-width:520px;font-size:0.95rem; }
.section-header { text-align:center;margin-bottom:3.5rem; }
.section-cta { text-align:center;margin-top:3rem; }

/* Product Cards */
.products-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2rem; }
.product-card { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;overflow:hidden;transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s;cursor:pointer; }
.product-card:hover { transform:translateY(-6px);border-color:rgba(0,200,255,0.3);box-shadow:0 20px 50px rgba(0,200,255,0.1); }
.product-img { height:200px;display:flex;align-items:center;justify-content:center;font-size:4rem;position:relative; }
.product-badge { position:absolute;top:1rem;left:1rem;background:linear-gradient(90deg,#00c8ff,#7c3aed);color:#fff;font-size:0.7rem;font-weight:700;padding:0.2rem 0.7rem;border-radius:20px;letter-spacing:1px;text-transform:uppercase; }
.product-info { padding:1.5rem; }
.product-category { font-size:0.72rem;letter-spacing:2px;text-transform:uppercase;color:#00c8ff;margin-bottom:0.4rem; }
.product-name { font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:0.5rem; }
.product-desc { font-size:0.82rem;color:rgba(200,214,240,0.55);line-height:1.5;margin-bottom:1rem; }
.product-footer { display:flex;align-items:center;justify-content:space-between; }
.product-price { font-size:1.3rem;font-weight:800;color:#fff; }
.product-price-old { text-decoration:line-through;color:rgba(200,214,240,0.35);font-size:0.9rem;margin-right:0.4rem; }
.product-btn { background:rgba(0,200,255,0.12);border:1px solid rgba(0,200,255,0.25);color:#00c8ff;font-size:0.75rem;font-weight:600;padding:0.4rem 0.9rem;border-radius:6px;cursor:pointer;transition:all 0.3s; }
.product-btn:hover { background:rgba(0,200,255,0.25);border-color:#00c8ff; }

/* Category Cards */
.categories-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.5rem; }
.cat-card { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:2rem 1rem;text-align:center;transition:border-color 0.3s,background 0.3s;cursor:pointer; }
.cat-card:hover { border-color:rgba(0,200,255,0.3);background:rgba(0,200,255,0.05); }
.cat-icon { font-size:2.2rem;margin-bottom:0.8rem;display:block; }
.cat-name { font-size:0.9rem;font-weight:600;color:#fff; }
.cat-count { font-size:0.75rem;color:rgba(200,214,240,0.4);margin-top:0.2rem; }

/* Testimonials */
.testimonials-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;margin-top:3rem; }
.t-card { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:2rem;transition:border-color 0.3s; }
.t-card:hover { border-color:rgba(0,200,255,0.3); }
.t-card p { color:rgba(200,214,240,0.75);font-size:0.9rem;line-height:1.7;margin:1rem 0; }
.reviewer { font-size:0.8rem;color:rgba(200,214,240,0.4); }
.reviewer strong { color:#fff; }
.stars { color:#fbbf24;font-size:0.95rem; }

/* CTA Banner */
.cta-banner { background:linear-gradient(135deg,#060d1a,#0d1a2e);padding:5rem 0;text-align:center;border-top:1px solid rgba(0,200,255,0.1); }
.cta-banner h2 { font-size:clamp(1.8rem,3vw,2.5rem);color:#fff;margin-bottom:1rem;font-weight:700; }
.cta-banner p { color:rgba(200,214,240,0.6);margin-bottom:2rem; }

/* Footer */
.site-footer { background:#030810;color:rgba(200,214,240,0.55);padding:4rem 0 2rem;border-top:1px solid rgba(0,200,255,0.08); }
.footer-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:3rem;margin-bottom:3rem; }
.footer-grid h4 { color:#fff;font-size:0.85rem;font-weight:600;margin-bottom:1rem; }
.footer-grid ul { list-style:none; }
.footer-grid ul li,.footer-grid p { font-size:0.83rem;line-height:2; }
.footer-grid ul li a { color:rgba(200,214,240,0.5);transition:color 0.3s; }
.footer-grid ul li a:hover { color:#00c8ff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.05);padding-top:1.5rem;text-align:center;font-size:0.8rem;opacity:0.4; }

@media(max-width:640px) { .hero-title{font-size:2.3rem} .hero-cta{flex-direction:column} }