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

	.sample-report-btn {
		border: none !important;
		padding: 0 !important;
		border-radius: 0 !important;
		background: none !important;
		text-decoration: underline !important;
		text-underline-offset: 3px;
		color: #2D68C4 !important;
		cursor: pointer;
		width: 100% !important;
		flex-basis: 100% !important;
		text-align: left;
	}

	.sample-report-btn:hover {
		background: none !important;
		color: #02A9F7 !important;
	}

	@media (max-width: 1023px) {
		.banner-left {
			align-items: center;
			text-align: center;
		}

		.banner-heading {
			text-align: center;
		}

		.banner-desc {
			text-align: center;
		}

		.banner-buttons {
			justify-content: center;
			flex-direction: column;
			align-items: center;
			width: 100%;
		}

		.play-btn-sm,
		.banner-buttons a {
			width: auto;
			max-width: 90px;
			text-align: center;
		}

		.sample-report-btn {
			text-align: center !important;
			max-width: 170px;
		}
	}
	

	.play-btn-sm {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 12px;
		width: auto;
		padding: 0 20px;
		height: 2.9rem;
		overflow: hidden;
		background-size: 300% 300%;
		-webkit-backdrop-filter: blur(1rem);
		backdrop-filter: blur(1rem);
		border-radius: 14px;
		transition: 0.5s;
		animation: gradient_301 5s ease infinite;
		background-image: linear-gradient(#ffffff, #ffffff),
			linear-gradient(137.48deg, #2D68C4 10%, #02A9F7 45%, #2D68C4 67%, #02A9F7 87%);
		background-origin: border-box;
		-webkit-background-clip: content-box, border-box;
		background-clip: content-box, border-box;
		cursor: pointer;
		position: relative;
		flex-shrink: 0;
	}
    @media (min-width: 160rem) {
    .play-btn-sm{
        height: 3.8rem;
    }}

	@media (max-width: 1023px) {

  .banner-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .play-btn-sm {
    min-width: 170px;   /* almost same as desktop */
    height: 2.6rem;     /* slightly smaller */
    padding: 0 16px;
    border-radius: 10px;
  }

  .play-btn-sm strong {
    font-size: 13px;
  }


}

	.play-btn-sm #container-stars {
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
		overflow: hidden;
		transition: 0.5s;
		-webkit-backdrop-filter: blur(1rem);
		backdrop-filter: blur(1rem);
		border-radius: 10px;
		background-color: #ffffff;
	}

	.play-btn-sm strong {
		z-index: 2;
		font-family: "Outfit", sans-serif;
		font-size: 15px;
		font-weight: 600;
		letter-spacing: 2px;
		color: #2D68C4;
		-webkit-text-fill-color: #2D68C4;
		text-shadow: none;
	}

	#glow {
		position: absolute;
		display: flex;
		width: 12rem;
		pointer-events: none;
	}

	.circle-container {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.circle {
		position: absolute;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		filter: blur(2rem);
	}

	.circle:nth-of-type(1) {
		background: rgba(45, 104, 196, 0.7);
		animation: orbit 8s linear infinite;
	}

	.circle:nth-of-type(2) {
		background: rgba(2, 169, 247, 0.7);
		animation: orbit 10s linear infinite;
	}


	.play-btn-sm:hover {
		transform: scale(1.05);
	}

	.play-btn-sm:active {
		border: double 4px #02A9F7;
		background-origin: border-box;
		background-clip: content-box, border-box;
		animation: none;
	}

	.play-btn-sm:active .circle {
		background: #2D68C4;
	}

	#stars {
		position: relative;
		background: transparent;
		width: 200rem;
		height: 200rem;
	}

	#stars::after {
		content: "";
		position: absolute;
		top: -10rem;
		left: -100rem;
		width: 100%;
		height: 100%;
		animation: animStarRotate 90s linear infinite;
		background-image: radial-gradient(#2D68C4 1px, transparent 1%);
		background-size: 50px 50px;
	}

	#stars::before {
		content: "";
		position: absolute;
		top: 0;
		left: -50%;
		width: 170%;
		height: 500%;
		animation: animStar 60s linear infinite;
		background-image: radial-gradient(#02A9F7 1px, transparent 1%);
		background-size: 50px 50px;
		opacity: 0.5;
	}

	@keyframes orbit {
		from {
			transform: rotate(0deg) translateX(100px) rotate(0deg);
		}

		to {
			transform: rotate(360deg) translateX(100px) rotate(-360deg);
		}
	}

	@keyframes animStar {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-135rem);
		}
	}

	@keyframes animStarRotate {
		from {
			transform: rotate(360deg);
		}

		to {
			transform: rotate(0);
		}
	}

	@keyframes gradient_301 {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	/* ── VIDEO MODAL ── */
	#videoModalOverlay {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 99999;
		background: rgba(0, 0, 0, 0.88);
		align-items: center;
		justify-content: center;
		padding: 1rem;
	}

	#videoModalOverlay.is-open {
		display: flex;
	}


.carousel {
  width: 420px;
  height: 350px;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.55s ease,
              opacity 0.55s ease;
}


.carousel .img-wrap {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  bottom: 68px;          
  border-radius: 8px;
  overflow: hidden;
}

.carousel .img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       
  object-position: center top;
  display: block;
}

.carousel .card-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 0 12px;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}

.carousel .card-label span {
  font-size: 13.5px;
  font-weight: 500;
  color: #475569;
  line-height: 1.35;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}
  
  @media (min-width: 2560px) {
  .text-4k {
    font-size: 40px;
    line-height: 1.2;
  }
}
@media (min-width: 2560px) {
  .banner-4k {
    max-width: 1500px;  
  }
}
@media (min-width: 2560px) {
  .banner-mt-4k {
    margin-top: 80px;
  }
}
       /* .step-card {
      {% comment %} transition: all 0.3s ease; {% endcomment %}
      } */

     /* Colored glow shadow on hover — no fill */
        .card-1:hover {
        border-color: #02A9F7 !important;
    }

    .card-2:hover {
       border-color: #FBBF24 !important;
    }

     .card-3:hover {
     border-color: #15803D !important;
   }
    /* ── Desktop card row — scales with viewport ── */
    .desktop-cards-row {
      display: flex;
      gap: clamp(24px, 4vw, 80px);
      width: 100%;
      max-width: 986px;
      justify-content: center;
    }

    .desktop-card {
      flex: 1 1 0;
      min-width: 0;
      max-width: 294px;
      height: 268px;
    }

    /* ── Desktop connector lines — adapt to fluid gap ── */
    .connector-wrap {
      position: relative;
      width: 100%;
      max-width: 986px;
      height: 50px;
    }

    /* Lines positioned as % of container so they always sit under the banner hotspots */
    .vline { position: absolute; top: 0; width: 2px; height: 50px; opacity: 0.5; transform: translateX(-50%); }
    .vline-1 { background: #2D68C4; left: 14%; }
    .vline-2 { background: #FF6F00; left: 50%; }
    .vline-3 { background: #1FAB89; left: 85.9%; }

    /* ── Banner scales with max-width container ── */
    .banner-img {
      width: 100%;
      max-width: 790px;
      height: auto;
      display: block;
    }
	.dna-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .dna-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 40px rgba(30, 58, 138, 0.15);
    }

    /* ── image zoom on hover ── */
    .dna-card img {
      transition: transform 0.5s ease;
    }

    .cta-section {
    background-image:
      linear-gradient(rgba(18, 19, 22, 0.52), rgba(6, 6, 7, 0.938)),
      url('{% static "images/img-banner.webp" %}');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }



    /* ── fade-in animation on load ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fade-up { animation: fadeUp 0.65s ease both; }
    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.2s; }
    .delay-3 { animation-delay: 0.3s; }
    .delay-4 { animation-delay: 0.4s; }
    .delay-5 { animation-delay: 0.5s; }

    /* ── CTA button glow ── */
    .cta-btn {
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    }

     .cta-btn:hover {
    box-shadow: 0 0 28px rgba(45, 104, 196, 0.55); 
   }
   /* All cards: scale on hover */
.plan-card {
  transition: border-color 0.3s ease;
}

.plan-card:hover {
  border-color: #333B73;
  box-shadow: none; /* remove shadow */
}

    /* Card title: default #333B73, hover #2D68C4 */
.card-title {
  transition: color 0.25s ease;
}


    /* Popular card glow */
    .popular-card {
      box-shadow: 0 8px 40px rgba(37,99,235,0.18), 0 2px 8px rgba(0,0,0,0.07);
     
    }

	 @media (min-width: 767px) {
        .popular-card {
             height: 780px;
    }
    }

    /* Popular card: taller image + extra padding ONLY on desktop (md+) */
@media (min-width: 768px) {
  .popular-card .pop-img  { height: 240px; }

  .popular-card .pop-body {
    padding: 2rem;
    position: relative;
    top: -2rem; /* move up */
  }
}
    /* Mobile: popular card same as others */
    @media (max-width: 767px) {
      .popular-card .pop-img  { height: 156px; }   /* same as h-44 */
      .popular-card .pop-body { padding: 2rem; }  /* same as p-6 */
    }

    /* Gradient text */
    .gradient-text {
      background: linear-gradient(135deg, #1e40af 0%, #06b6d4 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .strike { text-decoration: line-through; }
    .check-icon { color: #10b981; flex-shrink: 0; }

    /* Image overlay */
    .img-overlay { position: relative; }
    .img-overlay::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 60%, rgba(10,20,60,0.45) 100%);
      border-radius: inherit;
    }

    /* Buttons */
    .btn-primary { transition: background 0.25s, box-shadow 0.25s, transform 0.15s; }
    .btn-primary:hover { box-shadow: 0 6px 24px rgba(37,99,235,0.35); 	}
    .btn-outline { transition: background 0.25s, color #2D68C4, transform 0.15s; }
    .btn-outline:hover { background: #2D68C4; color: #fff; transform: scale(1.02); }

    /* Fade-in */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fade-up { animation: fadeUp 0.65s ease both; }
    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.22s; }
    .delay-3 { animation-delay: 0.34s; }

    /* Mobile accordion */
    @media (max-width: 767px) {
      .features-body { display: none; }
      .features-body.open { display: block; }
      .accordion-btn { display: flex; }
    }
    @media (min-width: 768px) {
      .accordion-btn { display: none !important; }
      .features-body { display: block !important; }
    }
    .chevron { transition: transform 0.3s ease; }
    .chevron.rotated { transform: rotate(180deg); }
	.bg-genix-frame {
  background-color: #FFFFFF !important;
}
    .tab-btn { transition: all 0.25s ease; }
    .tab-btn.active { background-color: rgba(30, 79, 163, 0.1); color: #02A9F7; }
    .tab-btn:not(.active):hover { background: rgba(30, 79, 163, 0.1); color: #02A9F7; }

    .tab-panel { display: none; }
    .tab-panel.active { display: flex; }

    .feature-icon {
      width: 40px; height: 40px;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    .notify-input:focus { outline: none; border-color: #2D68C4; }

    .coming-soon-badge {
      color: #FF6F00;
      font-size: 12px; font-weight: 600;
    }

    .right-panel {
      background: #ffffff;
      border: 1px solid #e5edf8;
      border-radius: 20px;
      overflow: visible;
    }

    .bar-fill { transition: width 1s ease; }
    .week-bar { transition: height 0.8s ease; }

    /* ── SM / MD: stack panels vertically, fix padding & font sizes ── */
    @media (max-width: 1023px) {
      /* Tab bar: shrink text + padding */
      .tab-btn { padding: 10px 8px; font-size: 12px; }

      /* Panels always column on < lg */
      .tab-panel.active { flex-direction: column !important; }

      /* Right panels: full width on small screens */
      .right-panel-col { width: 100% !important; }

      /* Phone showcase card: tighter padding */
      .phone-card { padding: 20px 16px 0 16px !important; }

      /* Heading sizes for sm/md */
      .section-heading { font-size: 28px !important; }

      /* Store cards: always row on sm+ */
      .store-cards { flex-direction: row !important; }

      /* Notify row: keep row layout but wrap on very small */
      .notify-row { flex-wrap: wrap; gap: 8px; }
      .notify-row input { min-width: 0; flex: 1 1 160px; }
      .notify-row button { flex-shrink: 0; }
    }

    @media (max-width: 639px) {
      /* xs: store cards stack */
      .store-cards { flex-direction: column !important; }
      /* Tab text hidden on xs already handled by sm:hidden/sm:inline */
      .section-heading { font-size: 24px !important; }
      /* Stat chips 2-col still fine */
    }

    /* Phone image container – responsive height */
    .phone-showcase-wrap {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 260px;
      overflow: visible;
    }
    @media (min-width: 1024px) {
      .phone-showcase-wrap { height: 345px; }
    }
    .phone-showcase-wrap img {
      width: 100%;
      max-width: 300px;
      object-fit: contain;
      drop-shadow: xl;
      position: relative;
      bottom: -20px;
      transform: scale(1.1);
    }
    @media (min-width: 1024px) {
      .phone-showcase-wrap img {
        max-width: 369px;
        bottom: -39.5px;
        transform: scale(1.2);
      }
    }	
        .font-heading {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
    }

    /* ── Slider container: clips overflow ── */
    #slider-viewport {
      position: relative;
      overflow: hidden;
      width: 100%;
    }

    /* ── Slides track ── */
    #slides-track {
      display: flex;
      width: 100%;
      will-change: transform;
    }

    /* ── Each slide ── */
    .slide {
      flex: 0 0 100%;
      width: 100%;
      display: grid;
      grid-template-columns: 365px 1fr;
      gap: 0;
      min-height: 460px;
    }

    /* ── Slide image ── */
    .slide-image {
      width: 365px;
      height: 460px;
      object-fit: cover;
      object-position: top center;
      display: block;
      filter: grayscale(100%);
    }

    /* ── Quote content ── */
    .slide-content {
      padding: 0 0 0 56px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* ── Stars ── */
    .stars {
      display: flex;
      gap: 4px;
      margin-bottom: 24px;
    }
    .star-icon {
      width: 18px;
      height: 18px;
      color: #c9a96e;
      fill: #c9a96e;
    }

    /* ── Quote text ── */
    .quote-text {
      font-family: 'Inter', sans-serif;
      font-size: 1.0625rem;
      font-weight: 300;
      line-height: 1.75;
      color: #2a2a2a;
      margin-bottom: 32px;
      max-width: 420px;
    }

    /* ── Divider ── */
    .quote-divider {
      width: 100%;
      max-width: 420px;
      height: 1px;
      background: #e5e5e5;
      margin-bottom: 20px;
    }

    /* ── Author ── */
    .author-name {
      font-family: 'Inter', sans-serif;
      font-size: 0.875rem;
      font-weight: 500;
      color: #1a1a1a;
      margin-bottom: 3px;
    }
    .author-role {
      font-family: 'Inter', sans-serif;
      font-size: 0.75rem;
      font-weight: 300;
      color: #888;
      margin-bottom: 2px;
    }
    .author-company {
      font-family: 'Inter', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      color: #555;
      letter-spacing: 0.01em;
    }

    /* ── Navigation row ── */
    .nav-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0 0 0;
    }

    /* ── Counter ── */
    .counter {
      font-family: 'Inter', sans-serif;
      font-size: 0.875rem;
      font-weight: 300;
      color: #1a1a1a;
      display: flex;
      align-items: baseline;
      gap: 4px;
    }
    .counter-current {
      font-size: 0.875rem;
      font-weight: 500;
      color: #1a1a1a;
    }
    .counter-slash {
      color: #bbb;
      font-size: 0.75rem;
    }
    .counter-total {
      font-size: 0.75rem;
      color: #bbb;
    }

    /* ── Progress bar ── */
    .progress-track {
      flex: 1;
      height: 2px;
      background: #e5e5e5;
      margin: 0 24px;
      position: relative;
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      background: #1a1a1a;
      transition: width 0.5s ease;
    }

    /* ── Arrow buttons ── */
    .arrow-btn {
      width: 40px;
      height: 40px;
      border: 1px solid #d0d0d0;
      background: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, border-color 0.2s;
      flex-shrink: 0;
    }
    .arrow-btn:hover {
      background: #1a1a1a;
      border-color: #1a1a1a;
    }
    .arrow-btn:hover svg {
      stroke: #fff;
    }
    .arrow-btn svg {
      width: 14px;
      height: 14px;
      stroke: #1a1a1a;
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.2s;
    }
    .arrow-btns {
      display: flex;
      gap: 4px;
    }

    /* ── Stats row ── */
    .stats-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      border-top: 1px solid #e5e5e5;
      margin-top: 0;
    }
    .stat-item {
      padding: 32px 0;
      text-align: center;
    }
    .stat-item:not(:last-child) {
      border-right: 1px solid #e5e5e5;
    }
    .stat-value {
      font-family: 'Inter', sans-serif;
      font-size: 1.875rem;
      font-weight: 300;
      color: #c9a96e;
      letter-spacing: -0.02em;
      margin-bottom: 4px;
    }
    .stat-label {
      font-family: 'Inter', sans-serif;
      font-size: 0.625rem;
      font-weight: 500;
      color: #aaa;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    /* ── SLIDE TRANSITION ── */
    #slides-track {
      transition: transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
    }

    /* ── Content fade ── */
    .slide-content {
      opacity: 1;
      transition: opacity 0.2s ease;
    }
    .slide-content.fading {
      opacity: 0;
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {
      .slide {
        grid-template-columns: 1fr;
        min-height: auto;
      }
      .slide-image {
        width: 100%;
        height: 280px;
      }
      .slide-content {
        padding: 28px 20px;
      }
      .stats-row {
        grid-template-columns: 1fr;
      }
      .stat-item:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
      }
    }
     .t-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
    .t-card {
  box-shadow: 0px 1px 12px -1px rgba(2, 169, 247, 0.15);
  transition: all 0.3s ease;
}

.t-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(30, 58, 110, 0.13);
}
    /* Star pop
     */
    @keyframes starPop {
      0%  { transform:scale(1); }
      50% { transform:scale(1.35); }
      100%{ transform:scale(1); }
    }

    /* Fade-up (tablet / desktop) */
  

    /* ── Mobile slider ── */
    /* Testimonial mobile slider */
/* {% comment %} #sliderViewport {
  overflow: hidden;
  width: 100%;
} {% endcomment %} */
.slider-track {
  display: flex;                          /* ← THIS was missing */
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.slide-item {
  flex: 0 0 100%;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}

.dot {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  background-color: #d1d5db;
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease;
  display: inline-block;
}

.dot.active {
  width: 1.5rem;
  background-color: #2D68C4;
}

/* Section */
.rp-section {
  padding: 64px 0;
  font-family: 'Outfit', sans-serif;
}
.rp-container {
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 1024px) {
  .rp-container { padding: 0 64px; }
}

#rp-slider-wrap {
    position: relative;
}

/* Header */
.rp-header { text-align: center; margin-bottom: 80px; }
.rp-title  { font-size: clamp(22px, 3vw, 34px); font-weight: 600; margin: 0 0 8px; }
.rp-sub    { font-size: 16px; margin: 0 0 28px; line-height: 1.8; }
@media(min-width: 160rem){
    .rp-sub    { 
        font-size: 1.2rem !important;
    }
}
.rp-btns   { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

@media(min-width: 160rem){
    .rp-btns  { 
        gap: 1.4rem !important;
    }
    .rp-btn-outline{
        font-size: 1.3rem !important;
    }
}
 
.rp-btn-primary {
  background: #2D68C4; color: #fff; font-weight: 600; font-size: 14px;
  padding: 10px 22px; border-radius: 10px; text-decoration: none;
  transition: background .2s;
}
.rp-btn-primary:hover { background: #02a9f7; }

.btn-icon {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1) contrast(4);
}
 
.rp-btn-outline {
  font-weight: 600; font-size: 14px; padding: 12px 64px; border-radius: 10px;
  text-decoration: none; transition: all .2s;
}
 
/* Carousel outer */
.rp-outer { position: relative; }
 
/* Nav buttons */
.rp-nav {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 20;
   width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #475569;
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    cursor: pointer;
}


.rp-nav:hover {
    border-color: #2D68C4;
}

.rp-nav svg {
    flex-shrink: 0;
}


/* 🔥 Change SVG stroke on hover */
.rp-nav:hover svg {
  stroke: white;
}
#rp-prev { left: -58px; }
#rp-next { right: -58px; }
 
/* Tighten nav on small screens */
@media (max-width: 1100px) {
  #rp-prev { left: -20px; }
  #rp-next { right: -20px; }
}
/* Hide nav arrows on very small screens — swipe only */
@media (max-width: 480px) {
  .rp-nav { display: none; }
}
 
/* Viewport — overflow-x hidden, overflow-y visible for shadow */
.rp-viewport {
  overflow: hidden;
  /* allow card shadows to bleed vertically */
  padding-bottom: 28px;
  /* {% comment %} margin-bottom: -28px; {% endcomment %} */
  position: relative;
z-index: 1;
}
 
/* Track */
.rp-track {
  display: flex;
  gap: 20px;
  transition: transform 500ms cubic-bezier(.4, 0, .2, 1);
  padding-bottom: 28px; /* bottom room for shadow */
}
 
/* ── Card ──────────────────────────────────────────────────────────────── */
.rp-card {
    width: 17rem !important;

    min-height: 31rem;

    background: #111827B2;
    border: 0.0625rem solid rgba(45, 104, 196, 0.25);
    border-radius: 0.625rem;

    overflow: hidden;
    display: flex;
    flex-direction: column;

    padding: 1rem;

    transition: all .3s ease;
    flex-shrink: 0;
}

@media(min-width: 160rem){
    .rp-card {
        width: 24rem !important;
    }
}

.rp-card {
    flex-shrink: 0;
}


.rp-card:hover {
    border-color: #2D68C4;
}

.rp-card img {
    width: 100%;
    height: 10.5625rem;
    object-fit: cover;
    border-radius: 0.625rem;
    margin-bottom: 0.875rem;
}

.rp-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.rp-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    color: #FF6F00;

    font-size: 0.75rem;
    font-weight: 500;

    margin-bottom: 0.625rem;
}

.rp-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: #FF6F00;
}


.rp-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;

    min-height: 3.5rem;
}

.rp-card-name {
    flex: 1;
    min-width: 0;

    font-family: 'Outfit', sans-serif;
    font-weight: 600;

    font-size: 16px;
    line-height: 1.4;

    color: #fff;
}

.rp-price {
    flex-shrink: 0;

    font-size: 1rem;
    font-weight: 700;
    color: #22D3A6;
}



.rp-desc {
    color: #CBD5E1;
    font-size: 0.875rem;
    line-height: 1.5;

    min-height: 6rem;
}

.rp-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rp-know-more {
    width: 100%;
    text-align: center;
    text-decoration: none;

    border: 1px solid rgba(148, 163, 184, .4);
    border-radius: 10px;

    padding: 10px 20px;

    color: #E2E8F0;
    font-weight: 500;

    transition: all .3s ease;
}

.rp-buy,
.rp-know-more {
    font-size: 0.875rem;
}

.rp-know-more:hover {
    border-color: #2D68C4;
    color: #fff;
}

.rp-buy {
    width: 100%;
    text-align: center;
    text-decoration: none;

    background: #2457B8;
    color: white;

    padding: 10px 20px;
    border-radius: 10px;

    font-size: 16px;
    font-weight: 600;

    transition: all .3s ease;
}

.rp-buy:hover {
    background: #2D68C4;
}

@media (max-width: 640px) {
    .rp-card {
        width: 15rem;
        min-width: 15rem;
        min-height: 28rem;
    }

    .rp-card-name {
        font-size: 1.125rem;
    }

    .rp-price {
        font-size: 0.9375rem;
    }
}

@media (max-width: 768px) {

    .rp-card {
        padding: 16px;
    }

    .rp-card img {
        height: 180px;
    }

    .rp-card-name {
        font-size: 20px;
    }

    .rp-price {
        font-size: 18px;
    }

    .rp-desc {
        font-size: 15px;
    }
}

@media(min-width: 160rem){
    .rp-desc {
        font-size: 1rem !important;
    }
}
@media(min-width: 160rem){
    .rp-card-name {
        font-size: 1.2rem !important;
    }
}

/* ── Mobile arrow + counter ─────────────────────────────────────────────── */
.rp-sl-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;

    background: #334155;
    border: 1px solid #475569;

    display: flex;
    align-items: center;
    justify-content: center;
}

.rp-sl-arrow:hover {
    background: #eff6ff;
}

.rp-sl-arrow:hover svg {
    stroke: #1e293b;
}

.rp-sl-arrow:active {
    background: #2D68C4;
}

.rp-sl-arrow:active svg {
    stroke: white;
}

    @keyframes pulseRing {
      0%   { transform: scale(1);   opacity: 0.6; }
      100% { transform: scale(1.9); opacity: 0; }
    }
    .pulse-ring {
      position: absolute; inset: 0; border-radius: 50%;
      background: rgba(45,104,196,0.3);
      animation: pulseRing 2s ease-out infinite;
    }
    .pulse-ring-2 { animation-delay: 0.7s; }
 
    @keyframes blink {
      0%,80%,100% { opacity: 0.2; transform: scale(0.8); }
      40%          { opacity: 1;   transform: scale(1); }
    }
    .dot { width:6px; height:6px; border-radius:50%; background:#60a5fa; display:inline-block; animation: blink 1.4s infinite ease-in-out; }
    .dot:nth-child(2) { animation-delay:.2s; }
    .dot:nth-child(3) { animation-delay:.4s; }
 
    @keyframes dashMove { to { stroke-dashoffset: -200; } }
    .ecg-line {
      stroke-dasharray: 200; stroke-dashoffset: 0;
      animation: dashMove 2s linear infinite;
    }
 
    @keyframes fillBar { from { width: 0%; } }
    .bar-fill { animation: fillBar 1.6s ease forwards; }
 
    @keyframes slideUp {
      from { opacity:0; transform:translateY(16px); }
      to   { opacity:1; transform:translateY(0); }
    }
    .slide-up { animation: slideUp 0.5s ease forwards; }
    .d1 { animation-delay:0.2s; opacity:0; }
    .d2 { animation-delay:0.4s; opacity:0; }
    .d3 { animation-delay:0.6s; opacity:0; }
    .d4 { animation-delay:0.8s; opacity:0; }
 
    @keyframes float {
      0%,100% { transform:translateY(0); }
      50%      { transform:translateY(-6px); }
    }
    .float-badge { animation: float 3s ease-in-out infinite; }
    .float-badge-2 { animation: float 3s ease-in-out infinite; animation-delay:1.1s; }
 
    @keyframes ringFill {
      from { stroke-dashoffset: 220; }
      to   { stroke-dashoffset: 50; }
    }

    
    .ring-progress {
      stroke-dasharray: 220; stroke-dashoffset: 220;
      animation: ringFill 2.2s ease forwards 0.5s;
    }
 
    @keyframes screenScroll {
      0%,12%  { transform:translateY(0); }
      30%,42% { transform:translateY(-33.33%); }
      60%,72% { transform:translateY(-66.66%); }
      90%,100%{ transform:translateY(0); }
    }
    .screen-scroll { animation: screenScroll 9s ease-in-out infinite; }
 
    .play-wrap:hover .play-circle { transform: scale(1.1); }
    .play-circle { transition: transform 0.2s ease; }
 
    .store-btn { transition: opacity 0.2s, transform 0.15s; }
    .store-btn:hover { opacity:0.85; transform:translateY(-1px); }
 
    #videoPopup { display:none; }
    #videoPopup.open { display:flex; }
    /* ── Report Pill ── */
.report-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  user-select: none;
  background: #fff;
}

.report-pill input[type="radio"] {
  accent-color: #02A9F7;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ✅ Active state — driven by :has() so it always reflects current checked state */
.report-pill:has(input[type="radio"]:checked) {
  border-color: #02A9F7;
  background: #EFF6FF;
  color: #02A9F7;
}

/* OTP boxes — match figma design */
.dl-otp-box {
  width: 54px;
  height: 46px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #334155;
  outline: none;
  background: #f1f5f9;   /* ← light gray fill like in screenshot */
  transition: border-color .2s, background .2s;
}
.dl-otp-box:focus {
  border-color: #1E4FA3;
  background: #fff;
}
.gp-toasts {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gp-toast {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  animation: gpSlideIn 0.2s ease;
}

.gp-toast svg { flex-shrink: 0; width: 13px; height: 13px; }

.gp-toast.success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.gp-toast.error   { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
.gp-toast.info    { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

.mol-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(52,211,153,.2)}
.mol-line{position:absolute;height:1px;background:linear-gradient(90deg,rgba(52,211,153,.1),transparent)}

.grid-bg{background-image:linear-gradient(rgba(52,211,153,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(52,211,153,.025) 1px,transparent 1px);background-size:60px 60px}

.grid-bg-dark {
    background-color: #0b111a;

    background-image:
        linear-gradient(rgba(52,211,153,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(52,211,153,.03) 1px, transparent 1px),
        radial-gradient(ellipse 18.50% 18.50% at 50.00% 50.00%, rgba(22.90, 31.88, 45.36, 0.96) 0%, rgba(11, 17, 26, 0.96) 100%);

    background-size:
        60px 60px,
        60px 60px,
        100% 100%;
}

@keyframes gpSlideIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

section{
    font-family: 'Outfit', sans-serif;
}


.health-tab {
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;

    background-color: #0F172A;
    color: #CBD5E1;

    transition: all 300ms ease;
    cursor: pointer;
}

.health-tab:hover {
    background-color: #1E4FA3;
    color: #ffffff;
}

.active-tab {
    background-color: #02A9F7;
    color: #ffffff;
}

.responsive-break {
    display: block;
}

@media (min-width: 470px) {
    .responsive-break {
        display: none;
    }
}
@media (min-width: 1024px) {
    .responsive-break {
        display: none;
    }
}

@media (min-width: 470px) and (max-width: 500px) {
    .feature-list {
        justify-content: center;
    }
}