:root {
    --primary: #0a66c2;
    --accent: #00d4ff;
    --dark: #0f172a;
    --gray: #64748b;
    --light: #f8fafc;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter', sans-serif; line-height:1.7; color:#333; background:#fff; }

.container { max-width:1280px; margin:0 auto; padding:0 24px; }

h1, h2, h3 { font-family:'Playfair Display', serif; font-weight:700; }

.header {
    position: fixed;
    top:0; left:0; right:0;
    background:rgba(15,23,42,0.95);
    backdrop-filter:blur(8px);
    z-index:1000;
    padding:16px 0;
}
.header .container { display:flex; justify-content:space-between; align-items:center; }
.logo img { height:50px; }
.nav ul { display:flex; list-style:none; }
.nav li { margin-left:32px; }
.nav a { color:#fff; text-decoration:none; font-weight:500; transition:0.3s; }
.nav a:hover { color:var(--accent); }

/* Hero with dynamic animated background */
.hero {
    height: 100vh;
    min-height: 700px;
    position: relative;
    display: flex;
    align-items: center;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.hero-bg-animation {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0a1f44 0%, #0a66c2 50%, #001f3f 100%);
    z-index: 1;
    animation: gradientShift 18s ease infinite;
}

.hero-bg-animation::before,
.hero-bg-animation::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(0, 212, 255, 0.12) 0%, transparent 60%);
    opacity: 0.7;
    animation: pulseGlow 8s ease-in-out infinite alternate;
}

.hero-bg-animation::after {
    background: radial-gradient(circle at 60% 20%, rgba(10, 102, 194, 0.18) 0%, transparent 50%),
                radial-gradient(circle at 30% 80%, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
    animation-delay: 4s;
}

/* Subtle moving light streaks (LED strip feel) */
.hero-bg-animation {
    background-size: 200% 200%;
}

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

@keyframes pulseGlow {
    0% { opacity: 0.5; transform: scale(1); }
    100% { opacity: 0.9; transform: scale(1.15); }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10,102,194,0.55), rgba(10,102,194,0.75));
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

.hero h1 {
    font-size: 4.5rem;
    margin-bottom: 16px;
    line-height: 1.1;
    text-shadow: 0 4px 20px rgba(0, 212, 255, 0.4);
}

.lead {
    font-size: 1.8rem;
    margin-bottom: 24px;
    opacity: 0.95;
    animation: fadeInUp 1.2s ease-out;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Optional: Add a subtle scan line or particle effect if you want more dynamism later */

.btn-primary, .btn-secondary {
    display:inline-block;
    padding:14px 36px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:0.3s;
}
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:#094e9e; transform:translateY(-3px); }
.btn-secondary { background:transparent; border:2px solid var(--accent); color:var(--accent); }
.btn-secondary:hover { background:var(--accent); color:#000; }

.section { padding:120px 0; }
.about-grid, .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-image img { width:100%; border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,0.15); }

.product-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:40px; margin-top:60px; }
.product-card {
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:0.4s;
}
.product-card:hover { transform:translateY(-12px); box-shadow:0 20px 50px rgba(0,0,0,0.12); }
.product-image img { width:100%; height:240px; object-fit:cover; }
.product-card h3 { padding:24px 24px 8px; font-size:1.6rem; }
.product-card p { padding:0 24px 24px; color:var(--gray); }
.product-card .btn-secondary { margin:0 24px 32px; }

.features-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:40px; margin-top:60px; text-align:center; }
.feature i { font-size:3rem; color:var(--accent); margin-bottom:20px; }

.check-list { list-style:none; margin:32px 0; }
.check-list li { margin:16px 0; font-size:1.1rem; }
.check-list i { color:var(--primary); margin-right:12px; }

.contact-form { background:#f8fafc; padding:48px; border-radius:16px; }
.contact-form input, .contact-form textarea {
    width:100%; padding:16px; margin:12px 0; border:1px solid #ddd; border-radius:8px; font-size:1rem;
}
.contact-form button { width:100%; margin-top:16px; }

footer { background:var(--dark); color:#fff; text-align:center; padding:60px 0; font-size:0.95rem; }

@media (max-width:992px) {
    .about-grid, .contact-grid { grid-template-columns:1fr; }
    .hero h1 { font-size:3.5rem; }
}
@media (max-width:768px) {
    .nav ul { flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--dark); padding:20px; display:none; }
    /* Add hamburger menu JS if needed */
}