/* RESET */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family:'Inter',sans-serif; line-height:1.6; background:#f0f4f8; color:#222; cursor:auto;}

/* HEADER / NAV */
/* HEADER / NAV */
header {
    background: #fff;
    border-bottom: 1px solid #ccc;
    width: 100%;
    padding: 0; /* remove padding, we'll handle spacing inside nav */
}

nav {
    display: flex;
    justify-content: space-between; /* logo left, links right */
    align-items: center;
    width: 100%;
    padding: 0 2rem; /* give a little space from page edges */
    box-sizing: border-box;
}

/* Logo flush left */
.logo {
    font-weight: 700;
    font-size: 1.5rem;
    color: #0d6efd;
    margin: 0; /* ensure no margin */
}

/* Nav links on the right */
.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

/* Link styling */
.nav-links a {
    text-decoration: none;
    color: #222;
    font-weight: 600;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background: #0d6efd;
    transition: width 0.3s;
}

.nav-links a:hover::after {
    width: 100%;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        align-items: flex-start; /* stack logo & links on mobile */
    }
    .nav-links {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        margin-top: 1rem;
    }
}

/* HERO */
#hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* space between text and image */
    align-items: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #0d6efd33, #00d1ff33);
    gap: 2rem; /* adds space between columns */
}

.hero-content {
    flex: 1;
    min-width: 300px;
    max-width: 550px; /* tighter max-width so image has room */
    text-align: left; /* keep text on left side */
    margin-bottom: 2rem;
}

.hero-content h1 {
    font-size: 2.75rem;
    color: #003366;
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.hero-cta a {
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    font-weight: 600;
    margin-right: 1rem;
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-primary {
    background: #0d6efd;
    color: #fff;
}

.btn-primary:hover {
    background: #0056b3;
    transform: scale(1.05);
}

.btn-secondary {
    background: #fff;
    color: #0d6efd;
    border: 2px solid #0d6efd;
}

.btn-secondary:hover {
    background: #0d6efd;
    color: #fff;
    transform: scale(1.05);
}

.hero-visual {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-visual img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    object-fit: cover;
}

/* FEATURES */
#features {padding:4rem 2rem; text-align:center;}
.features-grid {display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; margin-top:2rem;}
.feature-item {flex:1; min-width:200px; max-width:250px; background:#f1f8ff; padding:1.5rem; border-radius:10px; box-shadow:0 6px 15px rgba(0,0,0,0.1); transition:0.3s;}
.feature-item:hover {transform:scale(1.05); box-shadow:0 12px 25px rgba(0,0,0,0.15);}
.feature-item img {width:60px; height:60px; margin-bottom:1rem;}

/* HOW IT WORKS */
#how-it-works {padding:4rem 2rem; background:#e8f1ff; text-align:center;}
.how-box {border:3px solid #0d6efd; border-radius:15px; padding:2rem; background:#fff; display:inline-block; max-width:600px; margin:2rem auto; box-shadow:0 12px 25px rgba(0,0,0,0.1);}
.how-box ol {text-align:left; padding-left:1.5rem;}

/* IMAGE PREVIEWS */
#previews {padding:4rem 2rem; background:#fff; text-align:center;}
.preview-grid {display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; margin-top:2rem;}
.preview-grid figure {flex:1; min-width:250px; max-width:300px; background:#f0f4f8; border-radius:10px; padding:1rem; box-shadow:0 6px 15px rgba(0,0,0,0.1); transition:0.3s;}
.preview-grid figure:hover {transform:scale(1.05); box-shadow:0 12px 25px rgba(0,0,0,0.15);}
.preview-grid img {width:100%; height:auto; border-radius:8px;}
.preview-grid figcaption {margin-top:0.5rem; font-size:0.9rem; color:#555;}

/* REVIEWS */
#reviews {padding:4rem 2rem; background:#e8f1ff; text-align:center;}
.reviews-container {display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; margin-top:2rem;}
.review-card {background:#fff; padding:2rem; border-radius:15px; width:300px; box-shadow:0 8px 20px rgba(0,0,0,0.15); text-align:center; transition:0.3s;}
.review-card:hover {transform:scale(1.05); box-shadow:0 15px 30px rgba(0,0,0,0.2);}
.review-card .stars {color:#ffd700; font-size:1.5rem; margin-bottom:0.5rem;}
.review-card cite {display:block; margin-top:0.5rem; font-style:normal; color:#555;}

/* PARALLAX */
#parallax {
    position: relative;
    width: 100%;
    height: 100vh;           /* full viewport height */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/Parallaxhero.jpg') center center / cover no-repeat fixed;
    z-index: -2;
}

#ai-nodes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.parallax-content {
    position: relative;
    z-index: 1;
    color: #fff;
    text-align: center;
    max-width: 800px;
    padding: 0 2rem;
}
.parallax-content h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.parallax-content p {
    font-size: 1.5rem;
}

/* NEWSLETTER */
#newsletter {padding:4rem 2rem; background:#0d6efd; color:#fff; text-align:center;}
#newsletter input {padding:0.75rem 1rem; border-radius:5px; border:none; width:250px; max-width:90%; margin-bottom:1rem; transition:0.3s;}
#newsletter input:focus {outline:none; box-shadow:0 0 8px rgba(255,255,255,0.5);}
#newsletter button {padding:0.75rem 1.5rem; border:none; border-radius:5px; background:#fff; color:#0d6efd; cursor:pointer; font-weight:600; transition:0.3s;}
#newsletter button:hover {background:#0056b3; color:#fff; transform:scale(1.05);}

/* CONTACT SECTION */
#contact {
    padding: 4rem 2rem;
    background: #f0f4f8;
    text-align: center;
}

#contact h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #003366;
}

.contact-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.contact-info {
    flex: 1;
    min-width: 250px;
    max-width: 400px;
    background: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    text-align: left;
}

.contact-form {
    flex: 1;
    min-width: 250px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form input,
.contact-form textarea {
    padding: 0.75rem 1rem;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 100%;
    resize: none;
}

.contact-form button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 5px;
    background: #0d6efd;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.contact-form button:hover {
    background: #0056b3;
    transform: scale(1.05);
}

/* RESPONSIVE */
@media(max-width: 768px){
    nav {
        flex-direction: column;
        align-items: flex-start;
    }
    .nav-links {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        margin-top: 1rem;
    }
    .contact-container {
        flex-direction: column;
        align-items: center;
    }
}

/* FOOTER */
footer {background:#003366; color:#fff; padding:2rem; text-align:center;}
footer a {color:#fff; text-decoration:underline;}
footer a:hover {color:#0d6efd;}

/* LIQUID CURSOR */
#liquid-cursor {
    position: fixed; width: 30px; height:30px;
    border-radius:50%; pointer-events:none;
    border:2px solid #fff; background: #fff;
    mix-blend-mode: difference; transform:translate(-50%,-50%);
    transition: transform 0.15s ease;
    z-index:9999;
}

/* RESPONSIVE */
@media(max-width:768px){
    #hero{flex-direction:column; align-items:center;}
    .hero-visual{margin-top:2rem; width:100%; height:auto;}
    .features-grid,.preview-grid,.reviews-container{flex-direction:column; align-items:center;}
    .how-box{width:90%;}
}