/* Reset & Base */
* { box-sizing:border-box; margin:0; padding:0; }
body{
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: linear-gradient(135deg, #e0f7fa, #fff9c4);
  color:#333;
  min-height:100vh;
  transition: background 0.5s, color 0.5s;
}

/* Dark Theme */
body.dark{
  background: #1e1e2f;
  color:#ddd;
}

/* Theme Toggle */
.theme-toggle{
  position:fixed;
  top:20px; right:20px;
  z-index:100;
}
.theme-toggle button{
  background:#0077b6;
  color:white;
  border:none;
  padding:10px 15px;
  border-radius:30px;
  cursor:pointer;
  font-weight:700;
  transition: all 0.3s;
}
.theme-toggle button:hover{
  background:#023e8a;
  transform: scale(1.05);
}

/* Container */
.container{
  max-width:900px;
  margin:80px auto;
  padding:0 20px;
}

/* Header */
header{
  text-align:center;
  margin-bottom:50px;
}
header h1{ font-size:3em; color:#0077b6; margin-bottom:10px; letter-spacing:1px; }
header p{ font-size:1.2em; color:#555; }

/* FAQ */
.faq{
  display:flex;
  flex-direction:column;
  gap:25px;
}

.faq-item{
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 15px 40px rgba(0,0,0,0.12);
  transition: transform 0.4s, box-shadow 0.4s, opacity 0.6s, background 0.6s;
  cursor:pointer;
  opacity:0;
  transform: translateY(60px) scale(0.95);
}

/* Visible on scroll */
.faq-item.visible{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* Hover */
.faq-item:hover{
  transform: translateY(-5px) scale(1.02);
  box-shadow:0 25px 50px rgba(0,0,0,0.18);
}

/* Gradient Colors */
.gradient1{ background: linear-gradient(135deg, #ffffff, #a0e7e5); }
.gradient2{ background: linear-gradient(135deg, #ffffff, #b4f8c8); }
.gradient3{ background: linear-gradient(135deg, #ffffff, #ffdac1); }
body.dark .gradient1{ background: linear-gradient(135deg, #2a2a40, #3e3e60); }
body.dark .gradient2{ background: linear-gradient(135deg, #2a3e40, #3e605e); }
body.dark .gradient3{ background: linear-gradient(135deg, #40302a, #60453e); }

/* Question */
.faq-question{
  padding:25px 30px;
  font-size:1.3em;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:15px;
  position:relative;
  color:#023e8a;
}
.faq-question i{ font-size:1.3em; color:#0077b6; }
.faq-question::after{
  content:'+';
  position:absolute;
  right:30px;
  font-size:1.5em;
  transition: transform 0.4s;
}
.faq-item.active .faq-question::after{
  transform: rotate(45deg);
}

/* Answer */
.faq-answer{
  max-height:0;
  overflow:hidden;
  padding:0 30px;
  font-size:1.05em;
  color:#555;
  line-height:1.6;
  background: rgba(255,255,255,0.7);
  transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.5s ease;
  opacity:0;
}
.faq-item.active .faq-answer{
  padding:20px 30px 25px 30px;
  max-height:500px;
  opacity:1;
}
body.dark .faq-answer{ background: rgba(50,50,50,0.5); color:#ddd; }

/* CTA */
.cta{ text-align:center; margin-top:50px; }
.cta a{
  text-decoration:none;
  background:#0077b6;
  color:white;
  padding:18px 35px;
  border-radius:50px;
  font-weight:700;
  font-size:1.1em;
  transition: all 0.3s;
}
.cta a:hover{
  background:#023e8a;
  transform: scale(1.05);
}

/* Responsive */
@media(max-width:768px){
  header h1{ font-size:2.2em; }
  .faq-question{ font-size:1.1em; padding:20px 20px; }
  .faq-answer{ font-size:1em; padding:0 20px; }
}