* { 
  box-sizing: border-box; 
  margin:0; 
  padding:0; 
  scroll-behavior: smooth;
}


:root {
  --primary:   #7C3AED;  /* έντονο μωβ */
  --secondary: #A78BFA;  /* απαλό μωβ */
  --accent:    #4C1D95;  /* σκούρο μωβ */
  --bg:        #F9FAFB;  /* πολύ ανοιχτό γκρι / σχεδόν λευκό */
  --text:      #111827;  /* σχεδόν μαύρο */
  --border:    #E5E7EB;  /* ανοιχτό περίγραμμα */
  --shadow:    rgba(76, 29, 149, 0.25); /* μωβ σκιά */
}

/* background + βασικό text */
body {
  background-color: var(--bg);
  color: var(--text);
}

body {
  background: linear-gradient(
    135deg,
    #F3F0FF,
    #FFFFFF
  );
  color: var(--text);
  font-family: cursive;
  scroll-behavior: smooth;
}
#header {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.2rem 2rem;

  justify-content: space-between;
  align-items: center;

  background-color: #111827;   /* ίδιο με footer */
  border-bottom: 3px solid var(--primary);

  z-index: 1000;

  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* Logo area */
#header-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: fantasy;
}

#header-left img {
  width: 50px;
  filter: brightness(0) invert(1); 
}

#header-left h1 {
  font-size: 32px;
  margin: 0;
  color: white; 
}

/* Navbar */
#nav-bar {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  text-decoration: none;
  font-size: 22px;
  color: #E5E7EB;      
  transition: 0.2s ease;
}

.nav-link:hover {
  color: var(--primary);   
}



/* MAIN CONTENT */
.main-content{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: cursive;
  margin-top:150px;
  padding:10px;
  
}

#form{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:.5rem;
}

.main-content h2{
  font-size:22px;
  margin-bottom:10px;
}

#email{
  width:300px;
  padding:.4rem;
  border-radius:5px;
  border:2px solid var(--primary);
  box-shadow: 5px 5px 8px var(--shadow);
}


button,
#submit{
  border-radius:10px;
  width:150px;
  padding:0.5em;
  cursor:pointer;
  background-color: var(--primary);
  color: #fff;
  border: none;
  font-family: cursive;
  margin-top:10px;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

button:hover,
#submit:hover{
  background-color: var(--accent);
  transform: translateY(-1px);
}

/* FEATURES */
#features{
  padding:2em 2em;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  margin:0 auto;
  max-width: 800px; 
  margin-top:50px;
  gap:2rem;
  
}



.feature-box {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
}

.feature-icon {
  font-size: 40px;
  color: var(--primary); 
  flex-shrink: 0;        
}

.feature-box h3 {
  font-size: 28px;
  margin-bottom: 5px;
}

.feature-box p {
  font-size: 18px;
  line-height: 1.5;
}

/*VIDEO-SECTION*/
#how-it-works {
  max-width: 900px;
  margin: 150px auto 0 auto;
  padding: 1rem;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; 
}

#video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}



@media(max-width:768px){
  .nav-link{
    font-size:15px;
  }

}

/* PRICING */
#pricing{
  display:flex;
  gap: 2rem;
  justify-content:space-between;
  align-items:flex-start;
  max-width:900px;
  width:100%;
  height:50vh;
  padding:2rem;
  margin:0 auto;
}

.free,
.pro,
.zen{
  display:flex;
  flex-direction: column;
  justify-content:space-between;
  align-items:center;
  width: 300px;
  height:35vh;
  padding: 1rem;
  border: 2px solid var(--border);
  font-family:cursive;
  background-color: #fff;
}

.pricing-content{
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
}

.pricing-content h3{
  font-size:20px;
  color:var(--primary);
  margin-bottom:15px;
}

.pricing-content p{
  font-size:15px;
  font-family:cursive;
}


#footer {
  background-color: #111827; 
  color: #eee;
  text-align: right;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
}

#footer a{
  text-decoration:none;
  color: var(--secondary);
}

#footer a:hover{
  text-decoration:underline;
  color: #fff;
}