/* ==== Hero Component Styles ==== */
#hero {
  padding: 1rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
}

/* BG glow */
.hero-glow-bg {
  content: '';
  position: absolute;
  bottom: -15%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #00bfffb9, transparent 70%);
  filter: blur(60px);
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: auto;
}

/* original: 35px; keep exact */
#hero div {
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.main-title {
  font-size: clamp(2.3rem, 4.5vw, 3.1rem);
  padding-bottom: clamp(2.5rem, 3vw, 3.5rem);
  font-weight: 800;
  padding-top: clamp(3.5rem, 7.5vw, 7rem);
  line-height: 1.2em;
  margin-top: 40px;
}

#hero .hero-buttons-sec a {    
  font-family: 'Poppins', sans-serif;
  font-size: clamp(0.9rem, 3vw, 1rem);  
  border-radius: 1px;
}

#hero p { 
  opacity: 0.9; 
}

.hero-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.85rem;
  opacity: 0.9;
}

.hero-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-weight: bold;
  color: rgb(19, 170, 190);
}

.pulse-glow {
  color: #00bfff;
  text-shadow: 0 0 8px rgba(0, 191, 255, 0.158);
  animation: pulseGlow 2.5s ease-in-out infinite;
}

.hero-buttons-sec {
  display: flex;
  gap: 1rem;
}

#hero .limit-strip {
  padding-top: 35px;
  padding-bottom: 0;
}

.limit-copy {
  margin: 0;
  text-align: left;
  font-size: 1rem;
  color: var(--text-colour-1);
  opacity: 1;
  font-weight: 500;
}

.limit-link {
  color: var(--main-brand-blue);
  text-decoration: none;
  font-weight: 700;
  margin-left: .25rem;
}

.tag-line {
  font-family: 'Poppins', sans-serif;
  letter-spacing: 4px;
  font-weight: 600;
  opacity: 0.9;
  text-align: center;
  font-size: 1.1rem;
  color: var(--main-brand-blue);
}

/* Starry BG */
.starfield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.stars::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow:
    50vw 10vh white,
    20vw 30vh white,
    70vw 20vh white,
    40vw 60vh white,
    80vw 80vh white,
    25vw 75vh white,
    10vw 50vh white,
    60vw 40vh white,
    90vw 90vh white,
    15vw 15vh white;
  opacity: 1;
  animation: twinkle 8s infinite ease-in-out alternate;
  filter: brightness(1.2);
}

.stars2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow:
    12vw 12vh white, 32vw 22vh white, 52vw 32vh white,
    72vw 42vh white, 22vw 52vh white, 42vw 62vh white,
    62vw 72vh white, 82vw 82vh white, 92vw 92vh white;
  opacity: 1;
  animation: twinkle 5s infinite ease-in-out alternate;
  filter: brightness(1.2);
}

.twinkle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow:
    5vw 10vh white, 15vw 20vh white, 25vw 30vh white,
    35vw 40vh white, 45vw 50vh white, 55vw 60vh white,
    65vw 70vh white, 75vw 80vh white, 85vw 90vh white,
    95vw 15vh white, 10vw 25vh white, 20vw 35vh white,
    30vw 45vh white, 40vw 55vh white, 50vw 65vh white,
    60vw 75vh white, 70vw 85vh white, 80vw 95vh white,
    90vw 20vh white, 100vw 30vh white, 15vw 45vh white,
    25vw 55vh white, 35vw 65vh white, 45vw 75vh white,
    55vw 85vh white, 65vw 95vh white, 75vw 25vh white,
    85vw 35vh white, 95vw 45vh white;
  animation: twinkle 2s infinite ease-in-out alternate;
  opacity: 0.9;
  filter: brightness(1.2);
}

@keyframes twinkle { 
  0% { 
    opacity: 0.1; 
  } 
  100% { 
    opacity: 0.9; 
  } 
}

.shooting-star::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 40%;
  width: 2px;
  height: 80px;
  background: linear-gradient(45deg, white, transparent);
  opacity: 0;
  transform: rotate(-45deg);
  animation: shoot 10s ease-in-out infinite;
}

/* Shooting Star 2 */
.shooting-star-2::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  width: 2px;
  height: 80px;
  background: linear-gradient(235deg, white, transparent);
  opacity: 0;
  transform: rotate(235deg);
  animation: shoot2 10s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes shoot2 {
  0% { 
    transform: translate(0, 0) rotate(235deg);
    opacity: 0
  }
  5% { 
    opacity: 1;
  }
  15% { 
    transform: translate(-600px, 400px) rotate(235deg);
    opacity: 0;
  }
  100% { 
    transform: translate(-600px, 400px) rotate(235deg);
    opacity: 0;
  }
}

@keyframes shoot {
  0% { 
    transform: translate(0, 0) rotate(-45deg); 
    opacity: 0; 
  }
  5% { 
    opacity: 1; 
  }
  15% { 
    transform: translate(300px, 300px) rotate(-45deg); 
    opacity: 0; 
  }
  100% { 
    transform: translate(300px, 300px) rotate(-45deg); 
    opacity: 0; 
  }
}

@media screen and (min-width: 1024px) {
  /* BG glow sizing */
  .hero-glow-bg {
    bottom: -40%;
    width: 800px;
    height: 500px;
    filter: blur(100px);
  }

  .hero-list li {
    font-size: 0.9rem;
  }

  #hero {
    padding-top: 80px;
    padding-bottom: 100px;
  }

  .main-title { 
    font-weight: 800; 
  }

  .hero-list { 
    grid-template-columns: repeat(3, 1fr); 
  }
}
/* ==== Hero Component End ==== */


/* ==== You'll Never Section Styles Start ==== */
#never-worry {
  padding: var(--space-xs);
  background-color: var(--bg-colour-1);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

/* Title & Heading */
.never-worry-title-sec > h2 {
  padding-bottom: var(--space-md);
  text-align: center;
}

.never-worry-heading {
  margin-top: 1rem;
}

.never-worry-title-sec p {
  padding-bottom: var(--space-sm);
  text-align: center;
  color: var(--text-colour-1);
  opacity: 0.9;
}

.never-worry-title-sec {
  padding-bottom: var(--space-md);
  max-width: 850px;
  margin: 0 auto;
}

/* Cards container: 1 col on mobile */
.never-worry-features-sec {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 0 auto;
  background: var(--bg-colour-1);
  color: #222;
  font-family: 'Inter', sans-serif;
  max-width: 1050px;
}

/* Feature Card */
.never-worry-feature-card {
  background: var(--bg-colour-2);
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  border-radius: 2px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Icon Circle */
.icon-circle {
  width: clamp(40px, 6.5vw, 48px);
  height: clamp(40px, 6.5vw, 48px);
  background: #00c3ff27;
  color: var(--main-brand-blue);
  border-radius: 50%;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}

/* Heading */
.never-worry-feature-card h3 {
  margin-bottom: 1rem;
}

/* Text */
.never-worry-feature-card p {
  color: var(--text-colour-1);
  opacity: 0.9;
  font-size: 0.95rem;
}

/* CTA Section */
.cta {
  text-align: center;
  margin-top: 2rem;
}

.cta-text {
  font-size: clamp(1.05rem, 2.8vw, 1.2rem);
  margin-bottom: 3rem;
  margin-top: 3rem;
}

@media (max-width: 767px) {
  .never-worry-title-sec, .never-worry-features-sec {
    max-width: 550px;
  }
}

/* Tablet: 2 columns, full width */
@media (min-width: 768px) {
  .never-worry-features-sec {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ==== You'll Never Section Styles End ==== */

/* ==== why-design-matters Section Styles start ==== */
#why-design-matters {
  padding: clamp(0.8rem, 2.5vw, 1.25rem);
  background-color: var(--bg-colour-3);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* left glow */
#why-design-matters::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -100px;
  transform: translateY(-50%);
  width: 80px;
  height: 1100px;
  background: radial-gradient(circle, rgba(0, 179, 255, 0.527) 0%, rgba(0, 180, 255, 0) 70%);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}


#why-design-matters .tag-line {
  text-align: left;
}

#why-design-matters .sub-heading {
  padding-bottom: var(--space-sm);
  color: var(--main-brand-blue);
  margin-top: 4rem;
}

.why-design-matters-title-sec {
  max-width: 1000px;
  margin: 0 auto;
}

.why-design-matters-heading {
  margin-top: 1rem;
  text-align: left;
  padding-bottom: var(--space-md);
}

.why-design-matters-title-sec p {
  padding-bottom: var(--space-sm);
  color: var(--text-colour-1);
  opacity: 0.9;
  text-align: left;
}

.button-sec {
  max-width: 850px;
  margin: 0 auto;
}

.list-con-outer {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 2rem;
  border-radius: 2px;
  background-color: var(--bg-colour-2);
}

.why-design-matters-img-con {
  max-width: 100%;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 13 / 10; 
}

.why-design-matters-img-con img {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.why-design-matters-list-con {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.matters-list-subheading {
  font-family: 'Poppins';
  font-weight: 500;
}

/* --- Lists  --- */
.why-design-matters-list {
  list-style: none;  
  padding: 0;
}

.why-design-matters-list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: var(--space-xs);
  opacity: 0.9;
}

/* Faux markers  */
.why-design-matters-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0; 
  font-weight: 600;
}

/* Cross (red) for "problem" items */
.why-design-matters-list li::before {
  content: "•";
  color: var(--main-brand-blue);
}

@media (max-width: 560px) {
  .why-design-matters-list-con {
    grid-template-columns: none;
    gap: 2rem;
  }
}
/* ==== why-design-matters Section Styles end ==== */

/* ============ Section: Why Choose SemDev ============ */
.choose-sec {
  padding: var(--space-xs);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  margin: 0 auto;
  background: var(--bg-colour-2);
  position: relative;
  z-index: 1;
}

/* left glow */
.choose-sec::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -100px;
  transform: translateY(-50%);
  width: 100px;
  height: 1500px;
  background: radial-gradient(circle, rgba(0, 179, 255, 0.527) 0%, rgba(0, 180, 255, 0) 70%);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}

.choose-outer {
  display: flex;
  flex-direction: row;
  max-width: 1150px;
  margin: auto;
  gap: 2rem;
  justify-content: center;
}

.choose-sec-con {
  max-width: 700px;
}

.choose-sec-con .tag-line {
  text-align: left;
}

.choose-img-con {
  max-width: 400px;
  position: relative;
}

.choose-img-con img {
  width: 100%;
  display: block;
}

/* Badge attached to the image */
.choose-img-badge {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 0.75rem 0.9rem;
  border-radius: 2px;
  line-height: 1.2;
  max-width: calc(100% - 2rem);
}

.choose-img-name {
  display: block;
  font-weight: 700;
  font-size: 1rem;
}

.choose-img-meta {
  display: block;
  font-size: 0.9rem;
  opacity: 0.9;
  margin-top: 0.25rem;
}

/* Heading baseline */
.choose-heading {
  text-align: left;
  margin-top: 1rem;
  margin-bottom: var(--space-md);
  margin-left: auto;
  margin-right: auto;
  max-width: clamp(640px, 86vw, 700px);
}

.choose-sec-intro {
  max-width: 850px;
  margin: 0 auto;
  padding-bottom: var(--space-smmd);
}

.choose-sec-intro p {
  opacity: 0.9;
  padding-bottom: var(--space-sm);
  text-align: left;
}

/* --- Cards container: GRID --- */
/* Mobile: 1 column */
.choose-sec-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: var(--maxw);
  margin: 0 auto var(--space-md) auto;
}

/* Card */
.choose-sec-feature-card {
  background: var(--bg-colour-1);
  padding: 2rem;
  border-radius: 2px;
  z-index: 1;
  position: relative;
  width: 100%; /* fill grid cell */

  display: flex;
  flex-direction: column;
}

/* Icon + text */
.choose-sec-icon-circle {
  border-radius: 50%;
  font-size: 1.5rem;
  align-items: center;
  justify-content: center;
  color: var(--main-brand-blue);
  padding-bottom: 0.8rem;
}

.choose-sec-feature-card h3 {
  color: var(--main-brand-blue);
  padding-bottom: 1rem;
}

.choose-card-head {
  display: flex;
  flex-direction: row;
  padding-bottom: 0.7rem;
  gap: 1rem;
}

.choose-sec-feature-card p {
  opacity: 0.9;
  font-size: 0.95rem;
  padding-bottom: 0.8rem;
}

.choose-sec-inner > .choose-sec-feature-card:last-child {
    grid-column: 1 / -1;
}

.choose-sec-more-link {
  font-weight: 500;
  margin-top: auto;
  padding-top: 1rem;
  color: var(--text-colour-1);
  opacity: 0.9;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.3s ease;
}

.choose-sec-more-link:hover {
  transform: translateX(6px);
  transition: transform 0.3s ease;
}

@media (max-width: 767px) {
  .choose-sec-inner {
    max-width: 550px;
  }
}

/* Tablet: 2 columns, full width */
@media (min-width: 768px) {
  .choose-sec-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 2) Sticky column */
@media (min-width: 651px) {
  .choose-img-con {
    position: sticky;
    top: 6rem;          
    align-self: flex-start;
    max-width: 400px;
  }
}

@media (max-width: 768px) {
  .choose-outer {
    flex-direction: column;
    gap: 2.5rem;
  }

  .choose-img-con {
    position: static;     /* disable sticky */
    max-width: 550px;     
    margin: 0 auto;
  }

  .choose-img-con img {
    aspect-ratio: 1 / 1; 
    object-fit: cover;
    border-radius: 2px;  
  }

  .choose-img-badge {
    position: static;      
    border-radius: 2px;
    max-width: none;
  }

  .choose-sec-con {
    max-width: 550px;
    margin: 0 auto;
  }
}

/* ============ Section: Why Choose SemDev End ============ */

/* ========== Recent Projects Section ========== */
.projects-sec {
  padding: var(--space-xs);
  margin: 0 auto;
  background: var(--bg-colour-3);
  padding-bottom: var(--space-lg);
  padding-top: var(--space-lg);
}

.projects-outer {
  max-width: 800px;
  margin: auto;
}

.projects-heading-con {
  display: flex;
  flex-direction: row;
  align-self: center;
  justify-content: space-between;
  padding-bottom: var(--space-md);
  gap: 1rem;
}

.projects-sec .tag-line {
  text-align: left;
  padding-bottom: 0.5rem;
}

.projects-heading {
  text-align: left;
}

.projects-accent { 
  font-weight: 700; 
}

.projects-subtext {
  text-align: left;
  opacity: 0.9;
  max-width: 500px;
}

.project-card {
  border-radius: 2px;
  height: 100%;
}

.project-card:hover .project-title {
  color: var(--main-brand-blue);
  transition: color 0.3s ease;
}

.project-card a {
  text-decoration: none;
}

.projects-info { 
  padding: clamp(0.8rem, 2.5vw, 1rem); 
  display: flex;
  flex-direction: column;
}

.project-img {
  width: 100%;
  border-radius: 2px 2px 0 0;
}

.project-title {
  margin-bottom: 1rem;
  transition: color 0.3s ease;
}

.project-desc {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.project-link {
  font-weight: 500;
  color: var(--main-brand-blue);
  text-decoration: none;
  display: inline-block;
  text-shadow: 0 0 12px #00bfff9d;

}

/* CTA Button */
.projects-cta { 
  text-align: center; 
  margin-top: var(--space-smmd); 
}

.projects-button {
  display: inline-block;
  padding: clamp(0.6rem, 2.6vw, 0.75rem) clamp(1rem, 3vw, 1.5rem);
  border-radius: 2px;
  text-decoration: none;
  font-size: clamp(0.9rem, 1.8vw, 0.95rem);
  font-weight: 600;
  background: transparent;
  box-shadow: 0 0 6px 2px #00c3ff65;
}

@media (max-width:767px) {
  .projects-cards-con {
    max-width: 550px;
    margin: 0 auto;
    gap: 2rem;
    display: flex;
    flex-direction: column;
  }

  .projects-heading-con {
    flex-direction: column;
  }

  .projects-outer {
    max-width: 550px;
  }
}

@media screen and (min-width: 768px) {
  .projects-cards-con { 
    display: grid;
    max-width: var(--maxw);
    gap: 3rem;
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ========== Projects End ========== */

/* ========== Testimonials Section ========== */
.testimonials-sec {
  padding: var(--space-xs);
  margin: 0 auto;
  background: var(--bg-colour-2);
  padding-bottom: var(--space-lg);
  padding-top: var(--space-lg);
}

.testimonials-heading {
  text-align: center;
  margin-bottom: var(--space-md);
  margin-top: 1rem;
}

.testimonials-accent { 
  font-weight: 700; 
}

.testimonial-card {
  background: var(--bg-colour-1);
  border-radius: 2px;
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  margin-bottom: 2.5rem;
}

.testimonial-quote {
  font-size: clamp(1.6rem, 4.8vw, 2rem);
  font-weight: bold;
  color: var(--main-brand-blue);
}

.testimonial-text {
  margin-bottom: clamp(1rem, 4vw, 1.5rem);
  opacity: 0.9;
  font-size: 0.9rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 0.75rem);
}

.testimonial-avatar {
  width: clamp(36px, 6vw, 40px);
  height: clamp(36px, 6vw, 40px);
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-name {
  font-weight: 600;
  font-size: clamp(0.9rem, 1.8vw, 0.95rem);
  margin: 0;
}

.testimonial-company {
  font-size: clamp(0.8rem, 1.6vw, 0.85rem);
  color: var(--text-colour-2);
  margin: 0;
}

@media (max-width:767px) {
  .testimonial-cards-sec {
    max-width: 550px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 768px) {
  .testimonial-cards-sec { 
    display: grid;
    margin: 0 auto;
    max-width: var(--maxw);
    gap: 3rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ========== Testimonials End ========== */

/* ==== right-fit-sec Section ==== */
#right-fit {
  padding: clamp(0.8rem, 2.5vw, 1.25rem);
  background: var(--bg-colour-2);
  padding-top: var(--space-md);
  padding-bottom: var(--space-lg);
}

.right-fit-title-sec {
  max-width: 1050px;
  margin: 0 auto var(--space-sm) auto;
}

.right-fit-heading {
  margin-top: 2rem;
  text-align: left;
  padding-bottom: var(--space-md);
}

/* Grid layout */
.right-fit-grid {
  max-width: 1050px;
  margin: 0 auto;
  display: grid;
  padding-top: var(--space-smmd);
  grid-template-columns: 1fr;
  gap: 2rem;
}

.right-fit-grid article {
  padding: 1.5rem;
  border-radius: 10px;
  background-color: var(--bg-colour-3);
}

.right-fit-grid h3 {
  margin: 0 0 1rem 0;
  font-weight: 600;
  font-size: 1.05rem;
}

@media (min-width: 980px) {
  .right-fit-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.included-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.included-col {
  border: 1px solid #00c3ff3a;
}

.included-list li {
  position: relative;
  padding-left: 1.2rem; 
  margin-bottom: var(--space-sm);
  color: var(--text-colour-1);
  opacity: .9;
}

.included-list li::before {
  content: "✓";
  color: var(--main-brand-blue);
  margin-right: 0.4rem;
  position: absolute;
  top: 0;
  left: 0;
}

.excluded-note {
  margin: 0 0 var(--space-xs) 0;
  color: var(--text-colour-1);
  opacity: .7;
  font-size: clamp(0.92rem, 1.1vw, .98rem);
}

.excluded-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.excluded-list li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: var(--space-sm);
  color: var(--text-colour-1);
  opacity: .9;
}

.excluded-list li::before {
  content: "\2716\FE0E";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: #ff3131;
}

/* ====== Pricing Section Styles ====== */
.pricing-sec {
  padding: var(--space-xs);
  margin: 0 auto;
  color: white;
  background: var(--bg-colour-2);
  overflow: hidden;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

#pricing .tag-line {
  padding-bottom: 1rem;
}

.pricing-heading {
  text-align: center;
  margin-bottom: var(--space-md);
}

.pricing-accent { color: #00bfff; }

.pricing-subtext {
  text-align: center;
  padding-bottom: var(--space-lg);
  opacity: 0.9;
}

/* Cards */
.pricing-card {
  background: var(--bg-colour-1);
  border-radius: 2px;
  padding: 2.1rem;
  margin-bottom: 1rem;
  position: relative;
}

.pricing-featured {
  border: 2px solid #00bfff;
  box-shadow: 0 0 8px 2px #00bfff55;
}

#onetime-card {
  border: 2px solid #00bfff00;
  box-shadow: 0 0 8px 2px #00bfff00;
}

.pricing-label {
  position: absolute;
  top: -1px;
  right: -1px;
  background: #00bfff;
  color: black;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.2rem 0.3rem;
  border-radius: 2px;
  border: 1px solid #00bfff;
  box-shadow: 0 0 6px 2px #00c3ff65;
  font-family: 'Poppins', sans-serif;
}

.pricing-title {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0.5rem;
  color: var(--text-colour-1);
  font-size: 1.3rem;
}

.pricing-subtitle {
  font-size: 0.8rem;
  margin-bottom: 1rem;
  color: #aaa;
}

.pricing-amount {
  font-size: 2rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  color: white;
}

.pricing-cycle {
  font-size: 1rem;
  font-weight: 400;
}

.pricing-note {
  font-size: 0.9rem;
  color: var(--text-colour-2);
  margin-bottom: 1.2rem;
}

/* Features List */
.pricing-list {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.pricing-list li {
  position: relative;
  padding-right: 1.1rem;
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
}

.pricing-list li::after {
  content: '✓';
  position: absolute;
  right: 0;
  top: 0;
  color: #00bfff;
  font-weight: bold;
}

.not-included { 
  color: #bbbbbb9f; 
  text-decoration: line-through;
}

.pricing-list .not-included::after {
  content: '✖';
  position: absolute;
  right: 0;
  top: 0;
  color: #747474;
  font-weight: bold;
}

.pricing-cta-button {
  display: inline-block;
  background: #00bfff;
  color: black;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 0 6px 2px #00c3ff65;
  padding: 0.75rem 1.5rem;
  border-radius: 2px;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s;
  width: 100%;
  font-family: 'Poppins', sans-serif;
}

.pricing-cta-button:hover {
  box-shadow:
    0 0 8px var(--main-brand-blue),
    0 0 12px var(--main-brand-blue),
    0 0 16px var(--main-brand-blue);
}

/* Guarantee Box */
.pricing-guarantee {
  padding: 1rem;
  border-radius: 2px;
  font-size: 0.9rem;
  margin: var(--space-sm) auto var(--space-sm) auto;
  text-align: center;
  background-color: var(--bg-colour-2);
}

.pricing-guarantee h3 {
  padding-bottom: var(--space-sm);
  color: var(--main-brand-blue);
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
}

.pricing-guarantee p { 
  opacity: 0.9; 
  max-width: 700px;
  margin: 0 auto;
}

.guarantee-icon {
  font-size: 1.1rem;
  color: #00bfff;
}

/* --- Mobile pricing toggle (hidden on desktop) --- */
.pricing-mobile-toggle {
  display: none;            
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin: 0 auto var(--space-smmd) auto;
  max-width: clamp(650px, 92vw, 760px);
}

.pricing-mobile-toggle .toggle-label {
  font-size: 1.1rem;
  color: var(--text-colour-1);
  opacity: .9;
}

/* Switch button */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.toggle-track {
  width: 58px;
  height: 30px;
  border-radius: 999px;
  background: rgb(0 0 0 / 70%);
  box-shadow: 0 0 6px 2px #00c3ff inset;
  display: inline-block;
  position: relative;
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #00bfff;
  box-shadow: 0 0 6px 2px #00c3ff65;
  transition: transform .25s ease;
}

/* When aria-checked="true" (One-Time active), move thumb to the right */
.toggle-switch[aria-checked="true"] .toggle-thumb {
  transform: translateX(28px);
}

/* --- Mobile logic: show only the active card --- */
@media (max-width: 767px) {
  .pricing-mobile-toggle { 
    display: flex; 
  }

  .pricing-sec-con {
    max-width: 600px;
    margin: auto;
  }

  .pricing-sec-inner {
    max-width: 550px;
    margin: 0 auto;
  }

  .pricing-cards-con {
    max-width: 500px;
    margin: auto;
  }

  /* On mobile, stack naturally, but only show the active one */
  .pricing-cards-con .pricing-card { 
    display: none; 
  }

  .pricing-cards-con[data-active="monthly"] 
  .pricing-card[data-plan="monthly"] {
    display: block;
  }

  .pricing-cards-con[data-active="onetime"] 
  .pricing-card[data-plan="onetime"] {
    display: block;
  }

  .pricing-mobile-toggle .toggle-label {
    color: var(--text-colour-1);
    font-family: 'Poppins';
    transition: color 0.25s ease, opacity 0.25s ease, font-weight 0.25s;
  }

  /* When monthly is active, colour the left label */
  .pricing-cards-con[data-active="monthly"] 
  ~ .pricing-mobile-toggle .toggle-label:first-of-type,
  .pricing-mobile-toggle[data-active="monthly"] .toggle-label:first-of-type {
    color: var(--main-brand-blue);
  }

  /* When one-time is active, colour the right label */
  .pricing-cards-con[data-active="onetime"] 
  ~ .pricing-mobile-toggle .toggle-label:last-of-type,
  .pricing-mobile-toggle[data-active="onetime"] .toggle-label:last-of-type {
    color: var(--main-brand-blue);
  }

  /* Pricing Card Mobile Animations */
  /* Disable any global fade-in on cards for mobile */
  .pricing-card.fade-in-up {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Make both cards use opacity transitions for the key visual parts */
  .pricing-featured,
  .pricing-card[data-plan="onetime"] {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }

  .pricing-label,
  .pricing-title,
  .pricing-amount {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  /* When One-Time is active */
  .pricing-cards-con[data-active="onetime"] .pricing-featured {
    box-shadow: 0 0 0 0 rgba(0, 191, 255, 0);
    border-color: rgba(255, 255, 255, 0.18);
  }

  .pricing-cards-con[data-active="onetime"] .pricing-featured .pricing-label,
  .pricing-cards-con[data-active="onetime"] .pricing-featured .pricing-title,
  .pricing-cards-con[data-active="onetime"] .pricing-featured .pricing-amount {
    opacity: 0;
    transform: translateY(-4px);
  }

  /* When Monthly is active (restore glow and visibility) */
  .pricing-cards-con[data-active="monthly"] .pricing-featured {
    box-shadow: 0 0 8px 2px #00bfff55;
    border-color: #00bfff;
  }

  .pricing-cards-con[data-active="monthly"] .pricing-featured .pricing-label,
  .pricing-cards-con[data-active="monthly"] .pricing-featured .pricing-title,
  .pricing-cards-con[data-active="monthly"] .pricing-featured .pricing-amount {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Availability Widget */
.availability-wrap {
  background-color: var(--bg-colour-3);
  padding: 2rem;
}

.availability-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 900px;
  margin: 0 auto;
  gap: clamp(2rem, 3vw, 3rem);
  align-items: center;
}

.availability-text {
  text-align: left;
  margin-bottom: auto;
  padding: 1rem;
}

.availability-heading {
  margin-top: 0;
  font-size: clamp(1.5rem, 2.5vw, 1.7rem);
  padding-bottom: var(--space-sm);
}

.availability-sub {
  color: var(--text-colour-1);
  opacity: .9;
}

/* Right side */
.availability-info {
  text-align: right;
}

.availability-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  background: var(--bg-colour-1);
  padding: 1rem;
  margin-bottom: var(--space-sm);
}

.availability-stat {
  background: var(--bg-colour-3);
  padding: 1.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.availability-label {
  display: block;
  opacity: .9;
  text-align: left;
  display: flex;
  align-items: center;
}

.availability-title {
  font-size: 1.2rem;
  font-weight: 500;
  padding-bottom: 0.5rem;
}

.availability-value {
  text-align: right;
  font-weight: 600;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  align-self: center;
}

.availability-remaining {
  color: var(--main-brand-blue);
}

/* CTA */
.availability-cta {
  display: flex;
  justify-content: center;
}

/* Responsive */
@media (max-width: 767px) {
  .availability-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .availability-text,
  .availability-info {
    text-align: center;
  }

  .availability-cta {
    justify-content: center;
  }
}


@media (min-width: 768px) {
  .pricing-cards-con {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    max-width: 900px;
    margin: 0 auto;
  }

  .pricing-card {
    flex: 1 1 0; /* evenly split */
    display: flex;
    flex-direction: column;
  }

  .pricing-cta-button {
    margin-top: auto; 
  }

  .pricing-heading {
    margin-bottom: 3rem;
  }
}
/* ====== Pricing Section End ====== */