<style>
	/* For the text that fades in */
	.delayed-text {
	  will-change: opacity;
	}

	/* For the top image wipe animation (clip-path animation) */
	.trading-image.wipe-animation {
	  will-change: clip-path;
	}

	/* For the text overlays that animate opacity and movement 
	.text-overlay {
	  will-change: opacity, transform;
	}*/

	body { background-color: #000; }

    /* Enhanced Section */
    .enhanced-section {
        background: rgba(25,25,25,1);
		box-shadow: 0 4px 80px 0 rgba(255,255,0,0.5);
        color: #ffffff;
		padding: 0vw 0.2vw 0vw 0.2vw;
        border-radius: 5vh;
        margin-bottom: 1rem;
    	opacity: 1; /* Default state */
		scroll-snap-align: start;
	    transition: opacity 1s ease-in-out;
    }

	.enhanced-section {
	  border-top: 4px solid #FFD700;
	}
	#pricing.enhanced-section {
	  border-top: 4px solid #1e90ff;
	}

	#get-access.enhanced-section {
	  background: none !important;
	  border-top: none !important;
	  box-shadow: none !important;
	  padding-bottom: 1.5vh;
	}

	/* Contact Form */
	.contact-input {
	  background-color: rgba(255, 255, 255, 0.15);
	  color: #ffffff;
	  border: 1px solid #777;
	  border-radius: 0.3rem;
	  padding: 0.8rem;
	  width: 100%;
	  transition: border-color 0.3s ease, box-shadow 0.3s ease;
	  text-align: center;
	}

	@keyframes errorGlow {
	  0% {
		box-shadow: 0 0 8px 2px #ff5555, 0 0 0px 0 #ff5555;
	  }
	  50% {
		box-shadow: 0 0 24px 8px #ff5555, 0 0 10px 2px #ff5555;
	  }
	  100% {
		box-shadow: 0 0 8px 2px #ff5555, 0 0 0px 0 #ff5555;
	  }
	}

	.contact-input:invalid {
	  border-color: #ff5555;
	  box-shadow: 0 0 5px #ff5555;
	}
	.contact-input:focus:invalid {
	  border-color: #ff5555;
	  box-shadow: 0 0 8px #ff5555;
	}
	.contact-input.error {
	  border: 3px solid #ff5555 !important;
	  background: rgba(64, 0, 0, 0.5) !important;
	  animation: errorGlow 1.2s infinite;
	}

	.captcha-box {
	  width: fit-content;
	  min-width: 340px;
	  display: flex;
	  align-items: center;      /* Vertically center */
	  justify-content: center;  /* Horizontally center */
	  min-height: 70px;
	  margin: 0 auto 1rem auto;
	  background: rgba(64, 0, 0, 0.15);
	  color: #fff;
	  border: 1.5px solid #777;
	  border-radius: 0.3rem;
	  padding: 18px 18px;
	  transition: border-color 0.3s, box-shadow 0.3s;
	  text-align: center;
	  box-sizing: border-box;
	}

	.captcha-box .h-captcha {
	  margin: 0 !important;
	  padding: 0 !important;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}

	.captcha-box.error {
	  border: 3px solid #ff5555 !important;
	  background: rgba(64, 0, 0, 0.5) !important;
	  animation: errorGlow 1.2s infinite;
	}

	#warning-message {
	  color: red;
	  margin-left: 5px;
	}

	textarea.contact-input,
	#message {
	  background-color: rgba(255, 255, 255, 0.15);
	  color: #ffffff;
	  resize: vertical;
	  max-width: 100%;
	}

	.contact-input:focus {
	  border-color: #1e90ff;
	  box-shadow: 0 0 5px rgba(30, 144, 255, 0.6);
	  outline: none;
	}
	
	.contact-input::placeholder {
	  color: #ccc;
	  text-align: center;
	}

	#submit-button {
	  background: linear-gradient(90deg, #1e90ff 0%, #3d5a80 100%);
	  color: #ffffff;
	  cursor: pointer;
	  transition: background-color 0.3s, transform 0.3s;
	  padding: 0.8rem 1.2rem;
	  border: none;
	  border-radius: 0.5rem;
	}

	#submit-button:hover {
	  background: linear-gradient(90deg, #3d5a80 0%, #1e90ff 100%);
	  transform: scale(1.05);
	}

	#submit-button:focus {
	  box-shadow: 0 0 8px rgba(30, 144, 255, 0.6);
	  outline: none;
	}

	a {
		color: #1e90ff; /* Bright blue */
		text-decoration: none;
	}

	a:hover {
		color: #0a74da !important; /* Slightly darker but still bright */
		text-decoration: underline;
	}

	a:active {
		color: #1c86ee !important; /* Ensures it's still readable when clicked */
	}

/* Base and Reset Styles */
*, *:before, *:after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	overscroll-behavior-y: contain;
}

body {
	font-family: 'Montserrat', sans-serif;
	line-height: 1.6;
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding-top: 6vh;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

.index-page {
    background-size: cover;
}

.container {
	animation: fadeIn 1s ease-in-out;
	animation-fill-mode: forwards;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0 auto;
	padding: 0 10px;
	text-align: center;
	width: 100%;
	max-width: 1200px;
	min-height: 50vh;
	opacity: 0;
	scroll-snap-type: y mandatory;
	scroll-padding-top: 60px;
	transition: opacity 1s;
}

/* Header */
header { 
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5vh;
  width: 100%;
  background-color: rgba(51,51,51,0.85);
  z-index: 1000;
}


#pricing {
  background: rgba(25,25,25,1);
  border-radius: 24px;
  box-shadow: 0 4px 80px 0 rgba(30,144,255,0.5);
  max-width: 800px;
  margin: 1rem auto 1rem auto;
  text-align: center;
}


.cta-button {
  background: linear-gradient(90deg, #FFD700, #1e90ff);
  font-size: 1.2em;
  color: #111;
  border: none;
  border-radius: 2em;
  padding: 0.75em 1.5em;
  font-weight: bold;
  margin-top: 1.5rem;
  margin-bottom: 1.2rem;
  cursor: pointer;
  box-shadow: 0 2px 10px 0 rgba(255, 215, 0, 0.12);
  transition: background 0.2s, transform 0.2s;
}
.cta-button:hover {
  background: linear-gradient(90deg, #1e90ff, #FFD700);
  transform: scale(1.05);
}
.plans-container {
  display: flex;
  gap: 1vw;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.plan-card {
  background: #161a25;
  border-radius: 18px;
  box-shadow: 0 2px 8px 0 rgba(30,144,255,0.08);
  padding: 0.3rem 0.3rem;
  min-width: 180px;
  max-width: 380px;
  text-align: left;
  color: #fff;
}
.plan-card.annual { border: 2px solid #FFD700; }
.plan-card.monthly { border: 2px solid #1e90ff; }
.plan-card ul { list-style: none; padding: 0; }
.plan-card li {
  margin: 0 0;
  padding-left: 0.8em;
  font-size: 1em;
}

.stripe-container {
  margin-top: 2.5rem;
}
.trust-signals {
  margin-top: 1rem;
  color: #FFD700;
}



/* More Transparency When Scrolling */
.scrolled header {
    background-color: rgba(51, 51, 51, 0.7); /* More transparent */
    backdrop-filter: blur(8px); /* Increase blur */
}

/* Header  */
.tanhef-image {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: auto;
}
.tanhef-image svg {
  display: block;
  max-height: 20vh;
  max-width: 20vh;
}

.tanhef-image img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s;
}

.tanhef-image img:hover {
	transform: scale(1.05);
}

/* Base Nav Styles */
nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
  align-items: center;
}

nav li a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  transition: background-color 0.3s;
}

nav li a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Sub-Menu container */
.has-submenu {
  position: relative;
}

/* Arrow indicator on parent link */
.has-submenu > a::after {
  content: "▼";
  display: inline-block;
  margin-left: 0.3em;
  transition: transform 0.3s;
}

/* When toggled open on mobile */
.has-submenu.open > a::after {
  content: "▲";
}

/* Sub-Menu Styles (Desktop) */
.sub-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: rgba(51, 51, 51, 0.9);
  border-radius: 4px;
  min-width: 160px;
  z-index: 9999;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav .has-submenu.open .sub-menu {
  display: flex;
  position: static;   /* so it flows down with the list */
  background: none;
  min-width: 0;
  box-shadow: none;
  padding-left: 1.5em; /* indent for clarity (optional) */
}

.desktop-nav .has-submenu:hover .sub-menu {
  display: flex;
  flex-direction: column;
}

.sub-menu li a {
  padding: 10px 20px;
}

/* Desktop Menu */
.desktop-nav ul {
    display: hidden;
    gap: 20px;
}

.desktop-nav .hamburger {
    display: none;
}

/* Mobile Menu */
  .mobile-nav nav ul {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 5vh;
    left: 0;
    right: 0;
    width: 100vw;
    background: #191b1e;
    border-radius: 0 0 1.2em 1.2em;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    padding: 12px 0 10px 0;
    z-index: 2002;
    animation: fadeInMenu 0.22s;
    align-items: stretch;
  }

  .mobile-nav nav ul.show {
    display: flex;
  }

  .mobile-nav nav li {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
  }

  .mobile-nav nav li a {
    font-size: 1.15rem;
    padding: 16px 0;
    border-radius: 0.9em;
    margin: 0 10px;
    background: none;
    transition: background 0.16s, color 0.16s;
    color: #fff;
    display: block;
    width: 100%;
  }

  .mobile-nav nav li a:active,
  .mobile-nav nav li a:hover {
    background: #1e90ff;
    color: #fff !important;
  }
  .mobile-nav .hamburger {
    display: block;
    position: absolute;
    color: #fff;
    background: none;
    border: none;
    z-index: 2200;
    cursor: pointer;
    box-shadow: none;
  }
  /* Sub-menu (dropdown) on mobile: full width, indented */
  .mobile-nav .has-submenu .sub-menu {
    display: none;
    flex-direction: column;
    background: #181b21;
    position: static;
    margin: 6px 0 0 0;
    box-shadow: none;
    padding: 0 0 0 20px;
    width: 100%;
    border-radius: 0;
  }
  .mobile-nav .has-submenu.open .sub-menu {
    display: flex;
  }
  .mobile-nav .sub-menu li a {
    font-size: 1.05rem;
    padding: 13px 0 13px 18px;
    margin: 0 14px;
    border-radius: 0.8em;
    background: none;
    text-align: left;
    width: 100%;
  }
  .mobile-nav .sub-menu li a:hover {
    background: rgba(30,144,255,0.15);
    color: #fff;
  }

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  display: block;
  position: absolute;
  width: 2em;
  height: 0.22em;
  background: #fff;
  border-radius: 0.11em;
  transition: all 0.3s cubic-bezier(.4,2,.6,1);
  content: '';
}

.hamburger-icon {
  width: 2em;
  height: 0.22em;
  position: relative;
  display: block;
  background: #fff;
  top: 0.8em;
  margin-top: 0;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 2em;
  height: 0.22em;
  background: #fff;
  border-radius: 0.11em;
  transition: all 0.3s cubic-bezier(.4,2,.6,1);
}
.hamburger-icon::before { top: -0.59em; }
.hamburger-icon::after  { top: 0.59em; }

/* Hamburger to X animation (all em units!) */
header.menu-open .hamburger-icon {
  background: transparent;
}
header.menu-open .hamburger-icon::before {
  transform: translateY(0.59em) rotate(45deg);
}
header.menu-open .hamburger-icon::after {
  transform: translateY(-0.59em) rotate(-45deg);
}



.mobile-nav ul.show {
    display: flex;
}

.mobile-nav .hamburger {
    display: block;
}



.tanhef-ranks-image img {
	max-width: 70%;
	height: auto;
	border-radius: 10px;
}

.tanhef-ranks-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
    height: 100%;
    text-align: center;
    margin-top: 2rem;
}

.candles-iframe {
	border: none;
    position: absolute;
    top: 39%;
    left: 28%;
	width: 44%;
	height: 37%;
}

.styled-dropdown {
    font-size: 2vh;
    padding: 0vh 2vh;
    height: 4vh;
}

.styled-dropdown option:hover, .styled-dropdown option:focus {
    background-color: rgba(255, 255, 255, 0.2);
}

.styled-dropdown:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Arrow for dropdown */
.styled-dropdown::-ms-expand {
    display: none;
}

.styled-dropdown::after {
    content: "▼";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #ffffff;
}

/* Animation */
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Footer */
footer {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 1vh 1vh;
    font-size: 1vh;
    display: flex;
    justify-content: center; /* Centers the content horizontally */
    margin-top: auto; /* Push footer to bottom */
    min-height: 10vh; /* Ensures visibility */
    position: relative;
    z-index: 100;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

p {
    line-height: 1.25;
    margin-bottom: 1vh;
    margin-top: 1vh;
}

footer p {
    line-height: 1; /* Reduces spacing between lines */
    margin-bottom: 0.5vh; /* Adjusts spacing between paragraphs */
}

.social-media-icons {
    display: flex;
    gap: 3vh;
    justify-content: center; /* Centers the icons */
    margin-top: 2vh;
}

.social-media-icons img {
	width: 10vw;
	height: 10vw;
	max-height: 50px;
	max-width: 50px;
	cursor: pointer;
	transition: transform 0.3s;
}

.social-media-icons img:hover {
	transform: scale(1.1);
}



/* Make buttons responsive */
.toggle-buttons {
    display: flex;
    flex-wrap: nowrap; /* Ensures buttons stay in one row */
    justify-content: center;
    gap: 0.2rem;
    width: 100%; /* Ensures proper alignment */
}


/* Adjust button sizing for smaller screens */
.toggle-btn {
	font-family: inherit;
	font-size: inherit;
    flex: 1; 
    min-width: 2rem; 
    padding: 0.1rem;
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 2rem;
    border: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
}


.toggle-btn:focus {
    outline: none;
}

.subsection {
    display: none;
    padding: 1vh 0;
    margin-bottom: 1vh;
}

.subsection h3 {
    font-size: 1.5rem;
    margin-top: 1vh;
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 10px rgba(30, 144, 255, 0.8); }
    50% { transform: scale(1.05); box-shadow: 0 0 40px rgba(30, 144, 255, 1); }
    100% { transform: scale(0.95); box-shadow: 0 0 10px rgba(30, 144, 255, 0.8); }
}

@keyframes submitPulse {
  0% { transform: scale(0.97); box-shadow: 0 0 10px 2px #1e90ff; }
  50% { transform: scale(1.08); box-shadow: 0 0 32px 8px #1e90ff; }
  100% { transform: scale(0.97); box-shadow: 0 0 10px 2px #1e90ff; }
}

#submit-button.active {
  animation: submitPulse 1.2s infinite;
  border: 2.5px solid #fff;
  background: linear-gradient(90deg, #1e90ff 0%, #3d5a80 100%);
  color: #fff;
  z-index: 1;
}

.toggle-btn.active {
    background-color: #1e90ff;
    color: #fff;
    border-radius: 2rem;
	border: 2px solid #fff;
    animation: pulse 1.5s infinite ease-in-out;
}

.toggle-btn:hover {
    background-color: rgba(30, 144, 255, 0.7);
    transform: scale(1.05);
}

.sub-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Hamburger Icon (Desktop hidden) */
.hamburger {
  position: absolute;
  top: 0;
  right: 0;
  width: 12vw;
  min-width: 48px;
  height: 5vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2200;
  padding: 0;
}


.sub-menu a .submenu-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  margin-right: 0.4em;
}		
		
		
		
		
/* Responsive Design */
@media only screen and (max-width: 950px) {
  .tanhef-image {
    width: 100%;
  }

  nav ul {
    gap: 10px;
    justify-content: center;
  }

  nav li a {
    padding-inline: 1vh;
    font-size: 3vw;
  }
}


@media only screen and (max-width: 768px) {
	
    .prev-btn, .next-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
        padding: 15px;
    }

    .prev-btn {
        left: 2vw;
    }

    .next-btn {
        right: 2vw;
    }
}

.image-carousel {
  position: relative;
  width: 100%;
  height: auto;
  margin: auto;
  overflow: hidden;
}





/* Demo (left-aligned) caption: use a Y-only animation so X doesn't shift */
#intro .carousel-caption{
  left: 2%;
  transform: none;
  max-width: 96%;
  text-align: left;
  z-index: 10;               /* keep above image */
}

@keyframes fadeInUpLeft {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Override the default center-anim just for Demo */
#intro .slide.active .carousel-caption{
  animation: fadeInUpLeft 0.6s ease-out forwards;
}



.carousel-slide {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-slide img {
  flex: 0 0 auto;
  display: flex;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  margin: auto;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  --lb-top-offset: 5%;
}

.lightbox-caption {
  position: absolute;
  top: 5%;
  left: -50vw; /* 50% */
  transform: translateX(50vw); /* -50% */
  background: rgba(0,0,0,0.6);
  color: rgba(255, 255, 255, 1);
  text-align: left;
  padding: 1rem 1rem;
  border-radius: 0.5rem;
  font-size: clamp(1.6vh, 2.1vw, 2.6vh);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
  top: var(--lb-top-offset);
  z-index: 2002;
}
.lightbox.show .lightbox-caption {
  opacity: 1;
}

.lightbox.show {
  display: flex;
}

.lightbox-close {
  position: absolute;
  top: var(--lb-top-offset);
  right: calc((100vw - 90vw) / 2 + 0.5rem);
  font-size: 5rem;
  line-height: 1;
  color: white;
  cursor: pointer;
  z-index: 2003;
  width: auto;
  height: auto;
  padding: 0.25em;
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

/* make lightbox arrows match carousel arrows */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 20px;
  font-size: 40px;
  z-index: 2001;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.lightbox-nav.prev { left: 10px; }
.lightbox-nav.next { right: 10px; }

/* optionally, hide the oversized close-icon arrows on desktop */
.lightbox .prev-btn,
.lightbox .next-btn {
  display: none;
}

/* make each slide take the full width */
.slide {
  position: relative;
  flex: 0 0 100%;
}

/* style & hide captions by default */
.carousel-caption {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);     /* keep centered */
  max-width: min(96%, 780px);      /* NEW: prevent side clipping */
  padding: 0.4rem 0.6rem;          /* NEW: more readable padding */
  box-sizing: border-box;          /* NEW */
  white-space: normal;             /* NEW */
  word-break: break-word;          /* NEW */
  overflow-wrap: anywhere;         /* NEW */
  z-index: 5;                      /* NEW: ensure above image */
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 1);
  border-radius: 0.5rem;
  font-size: clamp(1.1vh, 1.6vw, 2.1vh);
  opacity: 0;
  pointer-events: none;
}

/* fade-in & slide-up keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate(-50%, 50px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* when a slide is “active” show its caption */
.slide.active .carousel-caption {
  opacity: 1;
  animation: fadeInUp 0.6s ease-out forwards;
}


.prev-btn, .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    padding: 20px;
    font-size: 40px;
    z-index: 100;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    display: flex;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.prev-btn:hover, .next-btn:hover {
  background: rgba(30,144,255,0.75);            /* match site blue hover */
  transform: translateY(-50%) scale(1.08);      /* subtle grow */
  box-shadow: 0 0 20px rgba(30,144,255,0.9),    /* glow */
              0 0 0 2px rgba(255,255,255,0.9) inset;
  border: 2px solid #fff;
}

.prev-btn:active, .next-btn:active {
  transform: translateY(-50%) scale(0.97);      /* press feedback */
}

.prev-btn:focus-visible, .next-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(30,144,255,0.7); /* keyboard ring */
}

/* Lightbox arrows: mirror the same effect */
.lightbox-nav {
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.lightbox-nav:hover {
  background: rgba(30,144,255,0.75);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 0 20px rgba(30,144,255,0.9);
  border: 2px solid #fff;
}
.lightbox-nav:active { transform: translateY(-50%) scale(0.97); }
.lightbox-nav:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(30,144,255,0.7);
}



.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

.image-carousel-dots {
    text-align: center;
    margin-top: 20px;
}

/* Carousel track animates horizontally */
.image-carousel .carousel-slide {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
}

/* Each slide fills the viewport width (you already have the flex rule) */
.image-carousel .slide { flex: 0 0 100%; }

.image-carousel-dots .dot.active {
  animation: pulse 1.5s infinite ease-in-out;
}


.dot {
    height: 1.75vh;
    width: 1.75vh;
    margin: 0 0.5vh;
    background-color: #717171;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: #fff;
}

.details-content {
	display: none;
	background-color: rgba(255, 255, 255, 0.1);
	padding: 1rem;
	border-radius: 5px;
	margin-top: 1rem;
	transition: all 0.3s ease-in-out;
}


		.hand-wrapper {
			position: absolute;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

	.image-container {
	  position: relative;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  width: 100%;
	  max-width: 100vw;
	  overflow: hidden;
	}

	.image-container img.trading-image:not(.blank-image) {
	  display: block;
	  margin: 0 auto;
	  max-width: 100%;
	  height: auto;
	  z-index: 0;
	}

	.image-container img.trading-image {
	  position: relative; /* underlying image: lower z-index */
	  z-index: 0;
	}
	
	.blank-image {
	  z-index: 1;
	  clip-path: inset(0 0 0 0);
	}

	.image-container img.trading-image.wipe-animation {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 3; /* Must be higher than the main image’s z-index */
	}

	.interactive-image {
		width: 100%;
		max-width: 90vw; /* Make it consistent across all tabs */
		height: auto;
		display: block;
		margin: 0 auto; /* Center it properly */
	}


	.marker {
		position: absolute;
		width: clamp(2rem, 3vw, 2.8rem); /* Ensures consistent scaling */
		height: clamp(2rem, 3vw, 2.8rem);
		font-size: clamp(1rem, 1.5vw, 1.4rem); /* Scale font based on screen size */
		font-weight: bold;
		border-radius: 50%; /* Ensure circular shape */
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: transform 0.2s ease-in-out;
		z-index: 10; /* Ensure it's above the background */
	}

	/* Slightly enlarge on hover for better interaction */
	.marker:hover {
		transform: scale(1.1);
	}



	.marker,
	.toggle-btn,
	nav li a {
		user-select: none; /* Prevents text selection */
		-webkit-user-select: none; /* For Safari */
		-moz-user-select: none; /* For Firefox */
		-ms-user-select: none; /* For older IE */
		pointer-events: auto; /* Ensures clickability */
		-webkit-user-drag: none; /* Prevents dragging */
	}

	.marker, .tooltip-marker {
	  position: absolute;
	  z-index: 10;
	  width: 1.5rem;
	  height: 1.5rem;
	  background-color: rgba(255, 255, 255, 0.8);
	  color: black;
	  font-size: 1rem;
	  font-weight: bold;
	  border-radius: 50%;
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  vertical-align: middle;      /* Ensures inline elements align properly */
	  line-height: 1.5rem;         /* Matches the element height */
	  cursor: pointer;
	  transition: transform 0.2s ease-in-out;
	  margin-right: 5px;
	}


	.marker:hover, .tooltip-marker:hover {
		transform: scale(1.3); /* Increase size */
		box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); /* Optional: glowing effect */
	}
	
	.info-box {
		position: absolute;
		touch-action: none;
		pointer-events: auto;
		box-sizing: border-box;
	    background-color: rgba(0, 123, 255, 0.9); /* A nice blue */
	    color: #fff;
	    box-shadow: 0 0 8px rgba(0, 123, 255, 0.7); /* Blue glow */
		border-radius: 0.5em;
		text-align: center;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		width: fit-content;
		max-width: 50vw;
		height: auto;
		max-height: 50vh;
		overflow: hidden;
		transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}
	
	/* Mobile-specific adjustments */
	@media (max-width: 768px) {
		.info-box {
			max-width: 80vw;
			max-height: 40vh;
			overflow-y: auto; /* Scroll if content exceeds height */
			z-index: 1000; /* Ensure it’s above other content */
		}
	}

	/* Position Each Info Box */
	#info1 {
		top: auto;
		left: 50%;
		right: 7%;
		bottom: 52%;
	}

	#info2 {
		top: auto;
		left: 48%;
		right: 23%;
		bottom: 5%;
	}

	#info3 {
		top: 24%;
		left: 2%;
		right: 65%;
		bottom: auto;
	}

	#info4 {
		top: 2%;
		left: 48%;
		right: 19%;
		bottom: auto;
	}

	#info5 {
		top: auto%;
		left: 2%;
		right: 65%;
		bottom: 30%;
	}

	.info-box-content {
		display: flex;
		flex-direction: column; /* Stack items vertically */
		align-items: center; /* Center items */
		text-align: center;
	}

	.info-box-content .title {
		display: block; /* Ensures it takes the full width */
		font-weight: bold;
		text-align: center;
		margin-bottom: 0.5rem;
		white-space: nowrap; /* Prevents breaking */
		align-self: flex-start; /* Forces alignment at the top */
	}


	.info-box-content span {
		display: block;
		width: 100%;
		text-align: center;
		transform-origin: center;
		white-space: normal;
	}

	/* Ensure visibility */
	.info-box.show {
		opacity: 1;
		visibility: visible;
	}

	@media (max-width: 600px) {
		.marker, .tooltip-marker {
		  width: 1.1rem;
		  height: 1.1rem;
		}
	}

	@media (max-width: 480px) {
		.prev-btn, .next-btn {
			width: 30px;
			height: 30px;
			font-size: 14px;
			padding: 10px;
		}
	}

	/* Ensure visibility */
	.info-box.show {
		opacity: 1;
		visibility: visible;
	}

	.logic-item p {
	  margin: 0;
	}

	.logic-grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	  row-gap: 0.5rem;
	  column-gap: 1.5rem;
	  row-gap: 1rem; 
	}

	.logic-item {
	  background-color: rgba(30, 144, 255, 0.1);
	  color: white;
	  padding: 0.01vh;
	  border-radius: 1vh;
	  text-align: center;
	  font-weight: bold;
	  cursor: pointer;
	  transition: all 0.3s ease;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	}

	.logic-item h3 {
	  margin: 0;
	  transition: color 0.3s ease;
	}

	.logic-info {
		font-size: 1.0rem;
		opacity: 0;
		max-height: 0;
		overflow: hidden;
		transition: opacity 0.3s ease, max-height 0.3s ease;
	}

	.logic-item:hover, .logic-item.active {
		background-color: rgba(30, 144, 255, 0.8);
		transform: scale(1.05);
	}

	.logic-item:hover h3, .logic-item.active h3 {
		color: yellow;
	}

	.logic-item.active .logic-info {
		opacity: 1;
		max-height: none;
	}

	.info-box.feature-tip {
	  background: linear-gradient(
		135deg,
		rgba(32, 32, 32, 0.8),
		rgba(36, 36, 36, 0.8)
	  );
	  color: #fff;
	}


	.info-box.positive {
	  background-color: rgba(0, 128, 0, 0.9);
	  border: 2px solid green;
	  color: #fff;
	  box-shadow: none;
	}

	.info-box.negative {
	  background-color: rgba(255, 0, 0, 0.9);
	  border: 2px solid red;
	  color: #fff;
	  box-shadow: none;
	}


	.comparison-table {
		width: 100%;
		font: 3vw;
		border-collapse: collapse;
		margin-top: 1rem;
		table-layout: fixed; /* Ensures all columns maintain equal width */
	}

	.comparison-table td {
		position: relative;
		border: 1px solid rgba(255, 255, 255, 0.2);
		text-align: left;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 0.4rem;
	}

	.comparison-table th {
		background-color: rgba(32, 32, 32, 0.2);
		color: white;
		text-transform: uppercase;
		padding: 1rem;
		border-radius: 5px;
		text-align: center;
	}
		
	.comparison-table td.feature-column,
	.comparison-table th.feature-column {
	  background: linear-gradient(
		135deg,
		rgba(32, 32, 32, 0.3),
		rgba(36, 36, 36, 0.3)
	  );
	}

	.comparison-table td.other-column,
	.comparison-table th.other-column {
	  background: linear-gradient(
		135deg,
		rgba(38, 38, 38, 0.3),
		rgba(42, 42, 42, 0.3)
	  );
	}

	.comparison-table th.highlight {
		background: linear-gradient(135deg, #ff007f, #ff4da6);
		color: white;
		font-size: clamp(1.5rem, 1.5vw, 1.3rem);
		text-transform: uppercase;
		padding: 1rem;
		box-shadow: 0 0 10px rgba(255, 0, 127, 0.7);
	}

	.comparison-table th.section-header {
	  background: linear-gradient(135deg, #1e90ff, #00bfff);
	  color: white;
	  font-weight: bold;
	  font-size: clamp(1.4rem, 1.5vw, 1.3rem);
	  text-transform: uppercase;
	  padding: 1rem;
	  border-radius: 5px;
	  box-shadow: 0 0 8px rgba(30, 144, 255, 0.7);
	}

	@media (max-width: 880px) {
		.comparison-table th,
		.comparison-table td {
			font-size: clamp(1.2rem, 1.5vw, 1rem);
		}
		
		.comparison-table th.highlight {
			font-size: clamp(1.3rem, 1.5vw, 1rem);
		}
	}

	@media (max-width: 790px) {
		.comparison-table th,
		.comparison-table td {
			font-size: clamp(1rem, 1.5vw, 1rem);
		}
		
		.comparison-table th.highlight {
			font-size: clamp(1rem, 1.5vw, 1rem);
		}
	}

	@media (max-width: 700px) {
		.comparison-table th,
		.comparison-table td {
			font-size: clamp(0.7rem, 1.5vw, 1rem);
		}
		
		.comparison-table th.highlight {
			font-size: clamp(0.6rem, 1.5vw, 1rem);
		}
	}

	@media (max-width: 480px) {
		.comparison-table th,
		.comparison-table td {
			font-size: clamp(0.6rem, 2vw, 0.9rem);
			
		}
		.comparison-table th.highlight {
			font-size: clamp(0.5rem, 1.5vw, 1rem);
		}
	}




	.comparison-table th {
		text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	}

/* Image with initial dark overlay */
.trading-image {
    width: 100%;
    height: auto;
    display: block;
}

.phone, .laptop, .laptop-text, .phone-text {
  opacity: 0;
  transform: translateX(150%);
}

/* Add this new keyframes animation */
@keyframes wipeLeft {
  0%   { clip-path: inset(0 0 0 0); }
  20%  { clip-path: inset(0 0 0 25%); }
  35%  { clip-path: inset(0 0 0 25%); }
  60%  { clip-path: inset(0 0 0 53%); }
  75%  { clip-path: inset(0 0 0 53%); }
  100% { clip-path: inset(0 0 0 100%); }
}

/* Apply the animation to the image */
.wipe-animation {
  /* Ensure the full image is shown initially */
  clip-path: inset(0 0 0 0);
  z-index: 3;
}

/* Text overlay for "Find Tops" and "Find Bottoms" */
.text-overlay {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: clamp(1vh, 2vw, 2.5vh); /* Dynamically scales based on viewport */
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    opacity: 0; /* Initially hidden */
    z-index: 10; /* Ensure it's above the reveal box */
}

/* Set exact positions */
#text-top {
	color: rgba(255, 77, 77, 1);
	text-shadow: 0px 0px 12px rgba(255, 77, 77, 0.8);
    top: -0.5%;
    left: -27%;  /* Moves in from the left */
	opacity: 0;
	transform: translateX(-20px);
}

#text-bottom {
	color: rgba(77, 255, 77, 1);
	text-shadow: 0px 0px 12px rgba(77, 255, 77, 0.8);
    top: 54.5%;
    right: -3%; /* Moves in from the right */
	opacity: 0;
	transform: translateX(20px);
}


	
	.hand-container {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
	}

	.phone, .laptop, .laptop-text, .phone-text {
		width: auto;
		max-width: auto;
		max-height: 100%;
		display: block; /* Ensures visibility */
		position: absolute;
		z-index: 1; /* Ensures it's above other content */
		opacity: 0;
		transform: translateX(150%);
	}

	.laptop, .laptop-text {
		clip-path: inset(0 0 40% 0); /* Show top half */
		top: 0; /* Align to top */
	}

	.phone, .phone-text {
		clip-path: inset(60% 0 0 0); /* Show bottom half */
		bottom: 0; /* Align to bottom */
	}
	
.video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5vw;
}

.video-item {
    flex: 1 1 250px;
    max-width: 320px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5vw;
    background: rgba(30,144,255,0.07);
    border-radius: 1vw;
    padding: 1vw;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(30,144,255,0.05);
}

.video-item p {
    margin: 0 0 10px 0; /* Reduce spacing */
    font-weight: bold;
}

.video-title {
    font-weight: 600;
    font-size: 1.0rem;
    margin-bottom: 0.8vw;
    color: #fff;
    text-align: center;
    letter-spacing: 0.01em;
    text-shadow: 1px 2px 10px #000, 0 0 1px #1e90ff;
}

.yt-video {
    width: 100%;
    aspect-ratio: 9/16;
    min-height: 320px;
    max-height: 480px;
    border: none;
    border-radius: 1vw;
    background: #10151f;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    margin-bottom: 0.4vw;
    /* Remove if you want it shorter/taller: */
    max-width: 320px;
}

#video-carousel .slide { display: flex; justify-content: center; align-items: center; }

#video-carousel .slide .video-item {  margin: 0 auto; }

#video-carousel .yt-video { display: block; }

.enhanced-section.delayed {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

nav li a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: white;
  display: block;
  font-size: 2vh;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s;
}

.delayed-text {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.image-container .info-box {
  overflow: visible;
}
.image-carousel .image-container .text-overlay {
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: none;
}

nav li a,
nav li a:visited,
nav li a:active,
nav li a:hover {
  color: #fff !important;
  text-decoration: none !important;
  background: none !important;
}


h2 {
  /* top | right/left | bottom */
  /* margin: 1.25rem 0 0.75rem;   tweak to taste */
  margin: 0.75vh 0 0.75vh;
}

.quick-note {
	color:#ccc;
}

.hero-cta { display:flex; gap:.8rem; justify-content:center; align-items:center; flex-wrap:wrap; }

.cta-primary { padding: 0.9rem 1.6rem; font-size: 1.1em; border-radius: 999px; }

.cta-link { font-weight: 600; opacity: .9; }
.cta-link:hover { opacity: 1; text-decoration: underline; }


/* Underlines inside the image carousel */
.image-carousel {
  text-underline-position: under;       /* ensure it's below text */
}

.image-carousel u,
.image-carousel a {
  text-decoration-skip-ink: none;       /* keep line continuous */
  text-underline-offset: 0.02em;         /* positive = downward */
}

:root { --carousel-bg: #131722; }
.image-carousel .slide,
.image-carousel .slide img { background: var(--carousel-bg); }






/* Give room for bottom controls */
.image-carousel { position: relative; padding-bottom: 64px; }

/* Bottom control bar */
.image-carousel .carousel-controls {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.35);
  border-radius: 9999px;
  z-index: 15;
}

/* Make prev/next live inside the control bar (not overlay) */
.carousel-controls .prev-btn,
.carousel-controls .next-btn {
  position: static;
  transform: none;
  width: 36px;
  height: 36px;
  font-size: 20px;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
}

/* Hide overlay-style arrows before JS relocates them (prevents flash) */
.image-carousel > .prev-btn,
.image-carousel > .next-btn { opacity: 0; }

/* Dots inside the control bar */
.carousel-controls .image-carousel-dots {
  position: static;
  transform: none;
  margin: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  gap: clamp(2px, 0.6vw, 10px);
}

/* Dot sizing (tap friendly on phones) */
.carousel-controls .dot { width: 12px; height: 12px; }
@media (max-width: 480px) {
  .carousel-controls .dot { width: 14px; height: 14px; }
  .carousel-controls .prev-btn, .carousel-controls .next-btn {
    width: 32px; height: 32px; font-size: 18px;
  }
}








</style>