/*
  Primary stylesheet for the Zev Rou landing page.  
  The design is inspired by the Echo Acquisition site but uses
  custom colours and layouts tailored to this project.
  Colours are anchored in deep purples and blues with crisp
  highlights to keep the focus on the content and calls to action.  
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #050513;
    color: #ffffff;
    line-height: 1.5;
    overflow-x: hidden;
}

/* Fixed star/dust pattern across the entire page */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    /*
      Subtle cosmic texture: two diffuse radial gradients create coloured
      glows at different corners while a faint dotted layer adds a starlike
      texture. The opacity is kept low so the design doesn't overpower
      the content.
    */
    background-image:
        radial-gradient(circle at 25% 30%, rgba(122, 80, 255, 0.25), transparent 60%),
        radial-gradient(circle at 70% 75%, rgba(92, 255, 215, 0.15), transparent 65%);
    background-size: 100% 100%, 100% 100%;
    opacity: 0.2;
}

/* Swirling glow behind hero text */
.hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    border-radius: 50%;
    /* layered radial gradients to emulate the purple/blue glow from the
       reference site */
    background:
        radial-gradient(circle at 50% 50%, rgba(122, 80, 255, 0.7) 0%, rgba(122, 80, 255, 0.35) 40%, transparent 70%),
        radial-gradient(circle at 60% 40%, rgba(92, 255, 215, 0.5) 0%, transparent 70%);
    /* stronger glow with less blur to make it more pronounced */
    filter: blur(60px);
    mix-blend-mode: screen;
    z-index: -1;
    pointer-events: none;
}

/* Faint Z watermark behind the hero heading. The ZevRou logo is used at low opacity */
.hero::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    width: 70%;
    height: 70%;
    background-image: url('zevrou-logo-cropped.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.08;
    pointer-events: none;
    z-index: -1;
}

/* Navigation bar */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background-color: rgba(0, 0, 0, 0.8);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.navbar .logo img {
    height: 40px;
    display: block;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

/* Instagram icon inside the nav list */
.nav-instagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: #9a83ff;
    transition: color 0.3s;
}

/* Ensure the SVG inside the nav Instagram link scales and inherits colour */
.nav-instagram svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.nav-instagram:hover {
    color: #b8a4ff;
}

.nav-links a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #9a83ff;
}

.cta {
    display: inline-block;
    background-color: #7a50ff;
    color: #fff;
    padding: 0.5rem 1.2rem;
    border-radius: 2rem;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s;
}

.cta:hover {
    background-color: #9a83ff;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 6rem 1rem 4rem;
    position: relative;
    overflow: hidden;
    /* Override the global background pattern within the hero.  
       A custom radial gradient gives a soft purple/blue glow behind
       the main heading, inspired by the ZevRou reference site. */
    background:
        radial-gradient(circle at center, rgba(122, 80, 255, 0.35) 0%, rgba(122, 80, 255, 0.15) 40%, transparent 75%),
        radial-gradient(circle at 75% 25%, rgba(92, 255, 215, 0.25) 0%, transparent 65%);
}

.hero .badge {
    display: inline-block;
    background-color: #7a50ff;
    color: #fff;
    padding: 0.4rem 1rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.hero h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin: 0 0 1rem;
    font-weight: 700;
}

.hero p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 2rem;
    color: #d4d7f7;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero-buttons a {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 2rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.primary-btn {
    background-color: #7a50ff;
    color: #fff;
}

.primary-btn:hover {
    background-color: #9a83ff;
}

.secondary-btn {
    background-color: transparent;
    color: #9a83ff;
    border: 2px solid #9a83ff;
}

.secondary-btn:hover {
    background-color: #7a50ff;
    color: #fff;
}

/* Steps Section */
.steps {
    text-align: center;
    padding: 5rem 1rem;
    background-color: #0a0a25;
}

.steps h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #ffffff;
}

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

.step {
    background-color: #0f0f23;
    padding: 1.5rem;
    border-radius: 0.75rem;
    max-width: 320px;
    flex: 1 1 280px;
}

.step h3 {
    color: #7a50ff;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.step p {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #c5c8e6;
}

/* Benefits Section */
.benefits {
    text-align: center;
    padding: 5rem 1rem;
    background-color: #050513;
}

.benefits h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #ffffff;
}

.benefit-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.benefit {
    background-color: #0f0f23;
    padding: 1.5rem;
    border-radius: 0.75rem;
}

.benefit h4 {
    color: #7a50ff;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.benefit p {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #c5c8e6;
}

/* Contact Section */
.contact {
    text-align: center;
    padding: 5rem 1rem;
    background-color: #0a0a25;
}

.contact h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #ffffff;
}

.contact p {
    max-width: 600px;
    margin: 0 auto 2.5rem;
    color: #c5c8e6;
    font-size: 1rem;
}

.contact form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.contact input,
.contact textarea {
    padding: 1rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    background-color: #0f0f23;
    color: #ffffff;
}

.contact input::placeholder,
.contact textarea::placeholder {
    color: #888ca7;
}

.contact button {
    padding: 1rem;
    border: none;
    border-radius: 2rem;
    background-color: #7a50ff;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.contact button:hover {
    background-color: #9a83ff;
}

/* Instagram link styling */
.instagram-link {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #c5c8e6;
}

.instagram-link a {
    color: #9a83ff;
    text-decoration: underline;
}

/* Small Instagram icon in the header */
.instagram-icon {
    margin-left: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: #9a83ff;
    text-decoration: none;
}

.instagram-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Testimonials Section */
.testimonials {
    text-align: center;
    padding: 5rem 1rem;
    background-color: #050513;
}

/* Solutions Section */
.solutions {
    text-align: center;
    padding: 5rem 1rem;
    background-color: #0a0a25;
}

.solutions h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #7a50ff;
    font-weight: 600;
}

.solutions h3 {
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    color: #ffffff;
    font-weight: 700;
}

.solution-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.solution {
    background: linear-gradient(135deg, #0f0f23 0%, #28154d 100%);
    padding: 2rem 1.5rem;
    border-radius: 0.75rem;
    color: #d4d7f7;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.solution h4 {
    color: #7a50ff;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.solution p {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #c5c8e6;
    flex-grow: 1;
}

.solution-btn {
    margin-top: 1.5rem;
    display: inline-block;
    padding: 0.6rem 1.5rem;
    border-radius: 2rem;
    background-color: #7a50ff;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s;
}

.solution-btn:hover {
    background-color: #9a83ff;
}

/* FAQ Section */
.faq {
    text-align: center;
    padding: 5rem 1rem;
    background-color: #050513;
}

.faq h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #7a50ff;
    font-weight: 600;
}

.faq-items {
    max-width: 700px;
    margin: 0 auto;
    text-align: left;
}

.faq-items details {
    background-color: #0f0f23;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem 1.5rem;
}

.faq-items summary {
    cursor: pointer;
    font-weight: 600;
    color: #9a83ff;
    outline: none;
}

.faq-items p {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: #c5c8e6;
}

.faq-cta {
    margin-top: 2rem;
}

.faq-cta .primary-btn {
    background-color: #7a50ff;
    color: #fff;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 2rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s;
}

.faq-cta .primary-btn:hover {
    background-color: #9a83ff;
}

.testimonials h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #7a50ff;
    font-weight: 600;
}

.testimonials h3 {
    font-size: 1.6rem;
    margin-bottom: 2.5rem;
    color: #ffffff;
    font-weight: 700;
}

.testimonial-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.testimonial {
    position: relative;
    background: linear-gradient(135deg, #0f0f23 0%, #28154d 100%);
    padding: 2rem 1.5rem;
    border-radius: 0.75rem;
    color: #d4d7f7;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.testimonial .stars {
    font-size: 1.1rem;
    color: #ffdd57;
    margin-bottom: 1rem;
}

.testimonial .quote {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #c5c8e6;
    margin-bottom: 1.5rem;
}

.testimonial .author {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
}

.testimonial .author span {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: #9a83ff;
}

/* Footer */
footer {
    background-color: #0f0f23;
    text-align: center;
    padding: 1rem;
    font-size: 0.85rem;
    color: #888ca7;
}