:root {
    --bg-color: #0f0f15;
    --text-color: #e0e0e0;
    --accent-color: #00f0ff;
    --card-bg: rgba(30,30,50,0.7);
    --btn-gradient: linear-gradient(90deg, #00f0ff, #ff00ff);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Arial', sans-serif; background: var(--bg-color); color: var(--text-color); line-height: 1.8; }
a { color: var(--accent-color); text-decoration: none; transition: 0.3s; }
a:hover { color: #fff; }

header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: rgba(20,20,35,0.9); position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(10px); }
.logo { font-weight: bold; font-size: 1.8rem; color: var(--accent-color); }

.hero { text-align: center; padding: 4rem 2rem; position: relative; overflow: hidden; }
.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg,#0f0f15,#1c1c2e); animation: bgMove 20s linear infinite; z-index: -1; }
@keyframes bgMove { 0%{background-position:0 0;} 100%{background-position:400px 400px;} }
.hero h1 { font-size: 3rem; margin-bottom: 1rem; color: #fff; }
.hero p { font-size: 1.2rem; margin-bottom: 2rem; color: #ccc; }
.cta-btn { padding: 0.8rem 2rem; background: var(--btn-gradient); color: #fff; font-weight: bold; border-radius: 50px; display: inline-block; transition: 0.3s; }
.cta-btn:hover { transform: scale(1.05); }

.section { padding: 3rem 2rem; text-align: center; max-width: 1200px; margin: auto; }
.section-title { font-size: 2rem; margin-bottom: 2rem; color: var(--accent-color); text-align: center; }
.section p { max-width: 900px; margin: 1rem auto; color: #ccc; text-align: justify; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 2rem; }
.card { background: var(--card-bg); border-radius: 20px; padding: 1.5rem; transition: transform 0.3s, box-shadow 0.3s; backdrop-filter: blur(10px); }
.card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,240,255,0.4); }
.card img { width: 100%; border-radius: 15px; margin-bottom: 1rem; }
.card h3 { margin-bottom: 0.5rem; color: var(--accent-color); }
.card p { font-size: 0.95rem; color: #ccc; margin-bottom: 1rem; }

.software-list { list-style: none; padding: 0; max-width: 800px; margin: 1rem auto; text-align: left; }
.software-list li { margin-bottom: 1rem; padding-left: 1.2rem; position: relative; font-size: 1rem; line-height: 1.6; }
.software-list li::before { content: "•"; position: absolute; left: 0; color: var(--accent-color); font-weight: bold; }

.btn { display: inline-block; padding: 0.5rem 1.2rem; border-radius: 50px; background: var(--btn-gradient); color: #fff; text-decoration: none; font-weight: bold; transition: 0.3s; }
.btn:hover { transform: scale(1.05); }

footer { text-align: center; padding: 2rem; background: rgba(20,20,35,0.9); backdrop-filter: blur(10px); }
footer a { color: var(--accent-color); }

#scrollTopBtn { position: fixed; bottom: 2rem; right: 2rem; padding: 0.6rem 1rem; border: none; border-radius: 50%; background: var(--accent-color); color: #000; cursor: pointer; display: none; font-size: 1.2rem; z-index: 1000; transition: 0.3s; }
#scrollTopBtn:hover { transform: scale(1.2); }

@media(max-width: 900px){ .cards-grid{grid-template-columns:1fr;} }

.hero-image {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.hero-image img {
    width: 100%;
    max-width: 1200px; /* optional max width */
    height: auto;
    border-radius: 15px; /* optional rounded corners */
    box-shadow: 0 8px 25px rgba(0, 240, 255, 0.3); /* optional shadow */
    transition: transform 0.3s ease;
}

.hero-image img:hover {
    transform: scale(1.03); /* subtle zoom effect on hover */
}

@media(max-width: 768px) {
    .hero-image img {
        max-width: 95%;
    }
}