@font-face {
  font-family: Inter;
  src: url(../fonts/Inter/Inter-VariableFont_opsz\,wght.ttf);
}

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

body,
html {
  overflow-x: hidden;
  font-family: Inter;
  line-height: 1;
}

a {
  text-decoration: none;
}

/* Home page styles */

.home-hero,
.succeed-section {
  padding: 5rem 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background: linear-gradient(129deg, #f3f0ff 0%, #fff 100%);
}

.home-hero h1 {
  text-align: center;
  font-size: 4.5rem;
  font-weight: 800;
  letter-spacing: -0.01125rem;
  background: linear-gradient(90deg, #111827 0%, #4b5563 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 100%;
  max-width: 57rem;
}

.home-hero .hero-text {
  margin-top: 1.5rem;
  color: #6b7280;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75rem;
  width: 100%;
  max-width: 40rem;
}

.home-hero .buttons-container {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.home-hero .buttons-container .start-free-btn {
  padding: 1rem 2rem;
  border-radius: 624.9375rem;
  background: #7c5cfc;
  box-shadow: 0 0 20px 0 rgba(124, 92, 252, 0.15);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  letter-spacing: -0.00194;
}

.home-hero .buttons-container .watch-demo-btn {
  padding: 1rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 624.9375rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  color: #111827;
  font-size: 1rem;

  font-weight: 600;
  line-height: 1.5rem;

  letter-spacing: 0.00588rem;
}

.home-hero .buttons-container .watch-demo-btn img {
  width: 1rem;
  height: 1rem;
}

.home-hero .home-purple-blur,
.contact-page-hero .contact-purple-blur {
  width: 16rem;
  height: 16rem;
  border-radius: 624.9375rem;
  opacity: 0.1;
  background: #7c5cfc;
  mix-blend-mode: multiply;
  filter: blur(32px);
  position: absolute;
  top: 0;
  left: 2rem;
}

.home-hero .home-blue-blur,
.contact-page-hero .contact-blue-blur {
  width: 18rem;
  height: 18rem;
  border-radius: 624.9375rem;
  opacity: 0.1;
  background: #0fa3b1;
  mix-blend-mode: multiply;
  filter: blur(32px);
  position: absolute;
  top: 4rem;
  right: 4rem;
}

.home-hero .product-launch-screen {
  width: 100%;
  margin-top: 5rem;
}

.succeed-section h2 {
  color: #111827;
  text-align: center;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 2.5rem;
}

.succeed-section .heading-text {
  margin-top: 1rem;
  color: #6b7280;
  text-align: center;
  font-size: 1.1125rem;
  line-height: 1.75rem;
}

.succeed-section .succeed-grid {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.succeed-section .succeed-grid .succeed-item {
  padding: 2rem 2rem 3.625rem 2rem;
  border-radius: 1.25rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.succeed-section .succeed-grid .succeed-item img {
  width: 3rem;
  height: 3rem;
}

.succeed-section .succeed-grid .succeed-item h3 {
  margin-top: 0.75rem;
  color: #111827;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75rem;
}

.succeed-section .succeed-grid .succeed-item .body-text {
  margin-top: 0.75rem;
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.625rem;
}

.testimonial-section {
  padding: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.testimonial-section .five-stars {
  height: 0.875rem;
  width: auto;
}

.testimonial-section .quote {
  margin-top: 2rem;
  color: #1f2937;
  text-align: center;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 2.5rem;
  letter-spacing: -0.00219rem;
  max-width: 47rem;
}

.testimonial-section .author-container {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testimonial-section .author-container .avatar {
  width: 3.5rem;
  height: 3.5rem;
}

.testimonial-section .author-container .text-section h4 {
  color: #111827;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  letter-spacing: 0.00294rem;
}

.testimonial-section .author-container .text-section p {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.ready-flow-section {
  padding: 5rem 6rem;
  background: linear-gradient(106deg, #7c5cfc 0%, #5e3de3 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ready-flow-section h2 {
  color: #fff;
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
}

.ready-flow-section .body-text {
  margin-top: 1.5rem;
  color: #efebfd;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  letter-spacing: 0.00113rem;
  width: 100%;
  max-width: 40rem;
}

.ready-flow-section .input-container {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  justify-content: center;
}

.ready-flow-section .input-container input {
  padding: 1.125rem 1.5rem;
  border-radius: 624.9375rem;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: none;
  outline: none;
  flex: 1;
  max-width: 30rem;
}

.ready-flow-section .input-container .get-started-btn {
  padding: 1rem 2rem;
  border-radius: 624.9375rem;
  background: #111827;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  letter-spacing: -0.00681rem;
}

.ready-flow-section .free-trial {
  margin-top: 1rem;
  color: #efebfd;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.00075rem;
}

/* Features page styles */

.features-hero-section {
  padding: 5rem 6rem;
  background: linear-gradient(106deg, #f3f0ff 0%, #fff 60%, #faf9f6 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.features-hero-section .features-container {
  padding: 0.375rem 1rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border-radius: 624.9375rem;
  background: #efebfd;
}

.features-container img {
  width: 0.625rem;
  height: 0.625rem;
}

.features-container p {
  color: #7c5cfc;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  letter-spacing: 0.075rem;
  text-transform: uppercase;
}

.features-hero-section h1 {
  margin-top: 1.25rem;
  color: #111827;
  text-align: center;
  font-size: 3rem;
  font-weight: 800;
  line-height: 3.75rem;
  letter-spacing: -0.075rem;
}

.features-hero-section .hero-text {
  margin-top: 1.25rem;
  color: #6b7280;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 2rem;
  width: 100%;
  max-width: 40rem;
}

.features-hero-section .features-purple-circle {
  width: 20rem;
  height: 20rem;
  border-radius: 624.9375rem;
  opacity: 0.07;
  background: #7c5cfc;
  mix-blend-mode: multiply;
  filter: blur(32px);
  position: absolute;
  top: -2.5rem;
  left: 30%;
}

.features-hero-section .features-blue-circle {
  width: 16rem;
  height: 16rem;
  border-radius: 624.9375rem;
  opacity: 0.07;
  background: #0fa3b1;
  mix-blend-mode: multiply;
  filter: blur(32px);
  position: absolute;
  bottom: 0;
  right: 30%;
}

.task-management-section {
  padding: 6rem 5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  place-items: center;
}

.task-management-section.purple-bg {
  background-color: #faf9f6;
}

.task-management-section .time-management-screen {
  width: 100%;
}

.task-management-section .text-section .task-management {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.task-management-section .text-section .task-management img {
  height: 0.75rem;
}

.task-management-section .text-section .task-management p {
  color: #7c5cfc;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  letter-spacing: 0.075rem;
  text-transform: uppercase;
}

.task-management-section .text-section h3 {
  margin-top: 1.25rem;
  color: #111827;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 2.8rem;
  letter-spacing: -0.05626rem;
  width: 100%;
  max-width: 20rem;
}

.task-management-section .text-section .body-text {
  margin-top: 1.25rem;
  color: #6b7280;
  font-size: 1.125rem;
  line-height: 1.8rem;
}

.task-management-section .smart-task-list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.task-management-section .smart-task-item {
  display: flex;
  gap: 0.75rem;
}

.task-management-section .smart-task-item img {
  width: 1.25rem;
  height: 1.25rem;
}

.task-management-section .item-text h5 {
  color: #111827;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.task-management-section .item-text p {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: -0.00088rem;
}

.favourite-tools {
  padding: 5rem 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.favourite-tools .integrations-container {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.favourite-tools .integrations-container img {
  height: 0.75rem;
}

.favourite-tools .integrations-container p {
  color: #7c5cfc;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  letter-spacing: 0.075rem;
  text-transform: uppercase;
}

.favourite-tools h2 {
  margin-top: 1rem;
  color: #111827;
  text-align: center;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 2.5rem;
  letter-spacing: -0.05625rem;
}

.favourite-tools .heading-text {
  margin-top: 1rem;
  color: #6b7280;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  max-width: 35rem;
}

.favourite-tools .integrations-grid {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.favourite-tools .integrations-grid .integration-item {
  width: 8.5rem;
  height: 6.75rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.favourite-tools .integrations-grid .integration-item img {
  width: 2.5rem;
  height: 2.5rem;
}

.favourite-tools .integration-item p {
  color: #111827;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  letter-spacing: 0.01319rem;
}

.get-started-section {
  padding: 5rem 6rem;
  background: linear-gradient(109deg, #7c5cfc 0%, #5e3de3 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.get-started-section .get-started-container {
  padding: 0.375rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 624.9375rem;
  background: rgba(255, 255, 255, 0.1);
}

.get-started-section .get-started-container img {
  width: 0.625rem;
  height: 0.625rem;
}

.get-started-section .get-started-container p {
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.075rem;
  text-transform: uppercase;
}

.get-started-section h2 {
  margin-top: 1.5rem;
  color: #fff;
  text-align: center;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 2.5rem;
  letter-spacing: -0.00219rem;
  width: 100%;
  max-width: 20rem;
}

.get-started-section .heading-text {
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  font-family: Inter;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: 0.00113rem;
  max-width: 30rem;
}

.get-started-section .buttons-container {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.get-started-section .start-free-btn {
  padding: 1rem 2rem;
  border-radius: 624.9375rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  color: #7c5cfc;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  letter-spacing: 0.00294rem;
}

.get-started-section .watch-demo-btn {
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  letter-spacing: 0.00588rem;
  border-radius: 624.9375rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
}

.get-started-section .watch-demo-btn img {
  width: 1rem;
  height: 1rem;
}

.get-started-section .free-trial {
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1rem;
  letter-spacing: 0.00075rem;
}

/* Pricing page styles */

.pricing-hero-section {
  padding: 5rem 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pricing-hero-section .pricing-container {
  display: flex;
  padding: 0.375rem 1rem;
  align-items: center;
  gap: 0.5rem;
  border-radius: 624.9375rem;
  background: #efebfd;
}

.pricing-hero-section .pricing-container img {
  height: 0.625rem;
}

.pricing-hero-section .pricing-container p {
  color: #7c5cfc;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  letter-spacing: 0.075rem;
  text-transform: uppercase;
}

.pricing-hero-section h1 {
  color: #111827;
  text-align: center;
  font-size: 3rem;
  font-weight: 800;
  line-height: 3.75rem;
  letter-spacing: -0.075rem;
  margin-top: 1.25rem;
}

.pricing-hero-section .heading-text {
  margin-top: 1.25rem;
  color: #6b7280;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.8rem;
}

.billing-toggle {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 3rem;
}

.billing-btn {
  border: 1px solid #7c5cfc;
  background: transparent;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  border-radius: 999px;
}

.billing-btn.active {
  background: #fff;
  color: #7c5cfc;
}

.billing-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
}

.switch {
  position: relative;
  width: 4.5rem;
  height: 2.25rem;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  inset: 0;
  background: #ddd;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.3s;
}

.slider::before {
  content: "";
  position: absolute;
  width: 1.75rem;
  height: 1.75rem;
  left: 0.25rem;
  top: 0.25rem;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
}

.switch input:checked + .slider {
  background: #7c5cfc;
}

.switch input:checked + .slider::before {
  transform: translateX(2.25rem);
}

.pricing-hero-section .pricing-section {
  margin-top: 2.5rem;
}

.active-label {
  color: #111827;
}

.save-amount {
  color: #16a34a;
  font-size: 0.75rem;
  font-weight: 700;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
}

.price-card {
  padding: 2rem;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.price-card .price-icon {
  width: 2.5rem;
  height: 2.5rem;
}

.price-card h3 {
  margin-top: 0.75rem;
  color: #111827;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75rem;
}

.price-card .best-for {
  margin-top: 0.25rem;
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.price-card .price-container {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.price-card .price,
.price-card .custom {
  color: #111827;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 2.5rem;
  letter-spacing: -0.05056rem;
}

.price-card .billing-text {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.00513rem;
}

.price-card .price-features {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.87rem;
}

.price-card .price-feature {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.price-card .price-feature img {
  height: 0.75rem;
}

.price-card .price-feature p {
  color: #6b7280;
  font-size: 0.875rem;
  letter-spacing: 0.00088rem;
}

.price-card .get-started-btn {
  margin-top: 2rem;
  padding: 0.88rem 2rem;
  width: 100%;
  border-radius: 624.9375rem;
  border: 2px solid #7c5cfc;
  color: #7c5cfc;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: -0.00681rem;
}

.price-card.highlight {
  border-radius: 1.5rem;
  background: #5e3de3;
  box-shadow: 0 8px 40px -8px rgba(124, 92, 252, 0.35);
  transform: scale(1.05);
}

.price-card.highlight h3 {
  color: #fff;
}

.price-card.highlight .best-for {
  color: rgba(255, 255, 255, 0.7);
}

.price-card.highlight .price {
  color: #fff;
}

.price-card.highlight .billing-text {
  color: rgba(255, 255, 255, 0.7);
}

.price-card.highlight .price-feature p {
  color: rgba(255, 255, 255, 0.9);
}

.price-card.highlight .get-started-btn {
  background-color: #fff;
  border: none;
}

.compare-features-section {
  padding: 5rem 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #faf9f6;
}

.compare-features-section img {
  width: 100%;
}

.faq-section {
  padding: 5rem 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #faf9f6;
}

.faq-section h2 {
  color: #111827;
  text-align: center;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 2.25rem;
  letter-spacing: -0.00369rem;
}

.faq-section .heading-text {
  margin-top: 0.75rem;
  color: #6b7280;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
}

.faq-section .faqs-container {
  margin-top: 3.5rem;
  width: 100%;
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.faq-section .faqs-container .faq {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.faq-section .faqs-container .faq h4 {
  color: #111827;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.faq-section .faqs-container .faq p {
  margin-top: 0.75rem;
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

/* Contact page styles */

.contact-page-hero {
  padding: 9rem 5rem 4rem 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(108deg, #f3f0ff 0%, #fff 60%, #faf9f6 100%);
  position: relative;
}

.contact-page-hero .contact-container {
  padding: 0.375rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 624.9375rem;
  background: #efebfd;
}

.contact-page-hero .contact-container p,
.contact-page-hero .contact-container i {
  color: #7c5cfc;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  letter-spacing: 0.075rem;
  text-transform: uppercase;
}

.contact-page-hero h1 {
  margin-top: 1.5rem;
  color: #111827;
  font-size: 3rem;
  font-weight: 800;
  line-height: 3.75rem;
  width: 100%;
  max-width: 25rem;
  text-align: center;
}

.contact-page-hero .heading-text {
  margin-top: 1.25rem;
  color: #6b7280;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.8rem;
  width: 100%;
  max-width: 35rem;
}

.contact-form-section {
  padding: 5rem 6rem;
  background: #faf9f6;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-form-container {
  padding: 2.5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.08);
}

.contact-form-container h2 {
  color: #111827;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
}

.contact-form-container .heading-text {
  margin-top: 0.5rem;
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.contact-form-container form {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-form-container .form-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.contact-form-container .form-section .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.contact-form-container label {
  color: #111827;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.contact-form-container input {
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background: #fafafa;
}

.contact-form-container textarea {
  display: block;
  margin-top: 0.25rem;
  width: 100%;
  height: 8.125rem;
  padding: 0.8125rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background: #fafafa;
  font-family: inherit;
}

.contact-form-container .privacy-policy {
  display: flex;
  gap: 1rem;
}

.contact-form-container input[type="checkbox"] {
  accent-color: #7c5cfc;
}

.contact-form-container .privacy-policy p {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.4rem;
}

.contact-form-container .privacy-policy span {
  color: #7c5cfc;
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.42188rem;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.contact-form-container button {
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  background: #7c5cfc;
  box-shadow: 0 0 20px 0 rgba(124, 92, 252, 0.15);
  border: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.001rem;
}

.contact-form-container button img {
  height: 0.875rem;
}

/* Responsive Home Page */

@media (max-width: 1100px) {
  .home-hero,
  .succeed-section,
  .testimonial-section,
  .ready-flow-section {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .home-hero h1 {
    font-size: 3.75rem;
  }

  .succeed-section .succeed-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonial-section .quote {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}

@media (max-width: 768px) {
  .home-hero,
  .succeed-section,
  .testimonial-section,
  .ready-flow-section {
    padding: 4rem 1.5rem;
  }

  .home-hero h1 {
    font-size: 2.75rem;
    line-height: 3.25rem;
  }

  .home-hero .hero-text,
  .ready-flow-section .body-text {
    font-size: 1rem;
    line-height: 1.6rem;
  }

  .home-hero .buttons-container {
    flex-direction: column;
    width: 100%;
  }

  .home-hero .buttons-container .start-free-btn,
  .home-hero .buttons-container .watch-demo-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .home-hero .product-launch-screen {
    margin-top: 3rem;
  }

  .home-hero .home-purple-blur,
  .home-hero .home-blue-blur {
    width: 10rem;
    height: 10rem;
  }

  .succeed-section h2,
  .ready-flow-section h2 {
    font-size: 2.25rem;
    line-height: 2.75rem;
  }

  .succeed-section .succeed-grid {
    grid-template-columns: 1fr;
    margin-top: 3rem;
  }

  .testimonial-section .quote {
    font-size: 1.6rem;
    line-height: 2.1rem;
  }

  .ready-flow-section .input-container {
    flex-direction: column;
  }

  .ready-flow-section .input-container input,
  .ready-flow-section .input-container .get-started-btn {
    width: 100%;
    max-width: none;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .home-hero h1 {
    font-size: 2.25rem;
    line-height: 2.75rem;
  }

  .succeed-section h2,
  .ready-flow-section h2 {
    font-size: 2rem;
    line-height: 2.4rem;
  }

  .testimonial-section .author-container {
    align-items: flex-start;
  }

  .succeed-section .succeed-grid .succeed-item {
    padding: 1.5rem;
  }
}

/* Responsive Contact Page */

@media (max-width: 1100px) {
  .contact-page-hero,
  .contact-form-section,
  .ready-flow-section {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (max-width: 768px) {
  .contact-page-hero {
    padding: 6rem 1.5rem 3rem;
  }

  .contact-page-hero h1 {
    font-size: 2.5rem;
    line-height: 3rem;
  }

  .contact-page-hero .heading-text {
    font-size: 1rem;
    line-height: 1.6rem;
  }

  .contact-page-hero .contact-purple-blur,
  .contact-page-hero .contact-blue-blur {
    width: 10rem;
    height: 10rem;
  }

  .contact-form-section {
    padding: 3rem 1.5rem;
  }

  .contact-form-container {
    width: 100%;
    padding: 1.5rem;
  }

  .contact-form-container .form-section {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-form-container input,
  .contact-form-container textarea {
    width: 100%;
  }

  .contact-form-container .privacy-policy {
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .contact-page-hero h1 {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .contact-form-container {
    padding: 1.25rem;
  }

  .contact-form-container button {
    width: 100%;
  }
}

/* Responsive Features Page */

@media (max-width: 1100px) {
  .features-hero-section,
  .task-management-section,
  .favourite-tools,
  .get-started-section {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .task-management-section {
    gap: 3rem;
  }

  .task-management-section .text-section h3 {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}

@media (max-width: 768px) {
  .features-hero-section,
  .task-management-section,
  .favourite-tools,
  .get-started-section {
    padding: 4rem 1.5rem;
  }

  .features-hero-section h1 {
    font-size: 2.5rem;
    line-height: 3rem;
  }

  .features-hero-section .hero-text {
    font-size: 1rem;
    line-height: 1.6rem;
  }

  .features-hero-section .features-purple-circle,
  .features-hero-section .features-blue-circle {
    width: 10rem;
    height: 10rem;
  }

  .task-management-section {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }

  /* Keep image first for every section */
  .task-management-section.purple-bg {
    display: flex;
    flex-direction: column-reverse;
  }

  .task-management-section .text-section {
    width: 100%;
  }

  .task-management-section .text-section .task-management {
    justify-content: center;
  }

  .task-management-section .text-section h3 {
    max-width: none;
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .task-management-section .smart-task-item {
    text-align: left;
  }

  .task-management-section .time-management-screen {
    max-width: 600px;
    width: 100%;
  }

  .favourite-tools h2,
  .get-started-section h2 {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .favourite-tools .heading-text,
  .get-started-section .heading-text {
    font-size: 1rem;
    line-height: 1.6rem;
  }

  .favourite-tools .integrations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .favourite-tools .integration-item {
    width: 100%;
  }

  .get-started-section .buttons-container {
    flex-direction: column;
    width: 100%;
  }

  .get-started-section .start-free-btn,
  .get-started-section .watch-demo-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .features-hero-section h1 {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .task-management-section .text-section h3 {
    font-size: 1.75rem;
    line-height: 2.2rem;
  }

  .task-management-section .body-text {
    font-size: 1rem;
    line-height: 1.7rem;
  }

  .task-management-section .smart-task-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .favourite-tools .integrations-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .get-started-section h2 {
    font-size: 1.8rem;
    line-height: 2.3rem;
  }
}

/* Responsive Pricing Page */

@media (max-width: 1100px) {
  .pricing-hero-section,
  .compare-features-section,
  .faq-section,
  .ready-flow-section {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .pricing-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .price-card.highlight {
    transform: none;
  }
}

@media (max-width: 768px) {
  .pricing-hero-section,
  .compare-features-section,
  .faq-section,
  .ready-flow-section {
    padding: 4rem 1.5rem;
  }

  .pricing-hero-section h1 {
    font-size: 2.5rem;
    line-height: 3rem;
  }

  .pricing-hero-section .heading-text {
    font-size: 1rem;
    line-height: 1.6rem;
  }

  .billing-toggle {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .annual-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .pricing-cards {
    grid-template-columns: 1fr;
  }

  .price-card {
    padding: 1.5rem;
  }

  .price-card .price-container {
    align-items: flex-start;
    flex-direction: column;
  }

  .price-card .price,
  .price-card .custom {
    font-size: 2rem;
    line-height: 2.4rem;
  }

  .compare-features-section {
    overflow-x: auto;
    justify-content: flex-start;
  }

  .compare-features-section img {
    min-width: 45rem;
  }

  .faq-section .faqs-container {
    margin-top: 2.5rem;
  }
}

@media (max-width: 480px) {
  .pricing-hero-section h1 {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .pricing-hero-section .pricing-container {
    text-align: center;
  }

  .price-card {
    padding: 1.25rem;
  }

  .price-card .price-feature {
    align-items: flex-start;
  }

  .price-card .get-started-btn {
    padding: 0.875rem 1.25rem;
  }

  .faq-section h2 {
    font-size: 1.6rem;
    line-height: 2rem;
  }
}

/* Header styles */

header {
  padding: 1.5rem 6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1000;
}

header .logo {
  width: 10rem;
}

header nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

header nav a {
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.00769rem;
}

header nav a:hover,
header nav a.active {
  color: #7c5cfc;
  font-weight: 600;
}

.header-cta-btn {
  padding: 0.625rem 1.25rem;
  border-radius: 999px;
  background: #7c5cfc;
  color: #fff;
  box-shadow: 0 0 20px rgba(124, 92, 252, 0.15);
}

.desktop-cta {
  display: inline-flex;
}

.mobile-cta {
  display: none;
}

/* Hamburger */

.hamburger {
  display: none;
  width: 2rem;
  height: 1.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger span {
  width: 100%;
  height: 3px;
  background: #111827;
  border-radius: 10px;
  transition: 0.3s;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* Mobile Header */

@media (max-width: 900px) {
  header {
    padding: 1rem 1.5rem;
  }

  .desktop-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  header nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition: 0.3s;
  }

  header nav.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .mobile-cta {
    display: inline-flex;
  }
}

/* Footer styles */

footer {
  padding: 2rem 6rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
}

footer .footer-logo {
  width: 10rem;
}

footer p,
footer li {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

footer .footer-text,
footer .sm-container {
  margin-left: 1rem;
}

footer .sm-container {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #9ca3af;
}

footer .section-two,
footer .section-three,
footer .section-four {
  margin-top: 1.5rem;
}

footer h4 {
  color: #111827;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  margin-bottom: 1.5rem;
}

footer ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style-type: none;
}

/* ===========================
   Responsive Footer
=========================== */

@media (max-width: 1000px) {
  footer {
    padding: 3rem;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
  }

  footer .section-one {
    grid-column: 1 / -1;
    text-align: center;
  }

  footer .footer-logo {
    margin: 0 auto;
  }

  footer .footer-text,
  footer .sm-container {
    margin-left: 0;
  }

  footer .footer-text {
    margin-top: 1rem;
    max-width: 32rem;
    margin-inline: auto;
  }

  footer .sm-container {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  footer {
    padding: 3rem 1.5rem;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }

  footer .section-one,
  footer .section-two,
  footer .section-three,
  footer .section-four {
    margin-top: 0;
  }

  footer .footer-logo {
    margin: 0 auto;
  }

  footer .footer-text {
    margin: 1rem auto 0;
    max-width: 28rem;
  }

  footer .sm-container {
    justify-content: center;
    margin: 1.5rem 0 0;
  }

  footer ul {
    align-items: center;
  }

  footer h4 {
    margin-bottom: 1rem;
  }
}

@media (max-width: 480px) {
  footer {
    padding: 2.5rem 1.25rem;
  }

  footer .footer-logo {
    width: 8rem;
  }

  footer h4 {
    font-size: 0.95rem;
  }

  footer p,
  footer li {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  footer .sm-container {
    font-size: 1.25rem;
    gap: 1rem;
  }
}