html {
  scroll-behavior: smooth;
}
/* RESET + SYSTEM BASE */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background-color: #060d1c;
  color: #f0f0f0;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
}
button {
  cursor: pointer;
  border: none;
  outline: none;
  transition: all 0.3s ease;
}

/* ===============================
   NAVBAR
================================== */
.navbar {
  background: rgba(10, 20, 35, 0.9);
  backdrop-filter: blur(10px);
  padding: 1.2rem 2rem;
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 0 20px #00eaff33;
}
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  font-size: 1.8rem;
  font-weight: bold;
  color: #00f0ff;
  text-shadow: 0 0 12px #00f0ff;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* ── Cedar Capital Group brand lockup ───────────────────────────────
   logo-img.png is a STACKED lockup (chart mark above the wordmark), which
   is unreadable at navbar height. So the navbar crops to just the chart
   mark and sets the name as text beside it; the sidebars on the app pages
   have room for the full artwork.

   Crop values come from the artwork itself: the mark occupies
   x 102–224, y 15–155 of the 334×272 image (scale 114/334 = 0.3413).
   Re-measure these four numbers if the logo file is ever replaced.       */
.logo {
  gap: 0.7rem;
  text-shadow: none;
}

.brand-mark {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 48px;
  overflow: hidden;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.45));
  transition: filter 0.25s ease;
}

.brand-mark img {
  position: absolute;
  top: -5px;
  left: -35px;
  width: 114px;
  max-width: none;
  height: auto;
  display: block;
}

.logo:hover .brand-mark {
  filter: drop-shadow(0 0 16px rgba(0, 240, 255, 0.8));
}

.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-name-main {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  color: #4fd8f5;
  text-shadow: 0 0 14px rgba(0, 240, 255, 0.5);
}

.brand-name-sub {
  font-size: 0.53rem;
  font-weight: 500;
  letter-spacing: 0.29em;
  color: #8fa6bb;
  text-shadow: none;
}

/* Between the mobile breakpoint (900px) and ~1150px the full nav is still
   shown but space is tight, so drop back to the mark alone. Below 900px the
   links collapse into the hamburger, so the name fits again. */
@media (max-width: 1150px) and (min-width: 901px) {
  .brand-name { display: none; }
}
.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.nav-links li {
  list-style: none;
}
.nav-links a {
  font-weight: 500;
  color: #c9d4e0;
  text-decoration: none;
}
.nav-links a:hover {
  color: #00f0ff;
  text-shadow: 0 0 5px #00f0ff;
}
.auth-buttons {
  display: flex;
  gap: 1rem;
}

/* BUTTONS */
.btn {
  padding: 0.6rem 1.4rem;
  font-weight: bold;
  font-size: 0.95rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease; /* ✅ smooth animation */
  transform: scale(1);
}

/* Primary button */
.btn.primary {
  background: linear-gradient(90deg, #00f0ff, #00ffaa);
  color: #000;
  box-shadow: 0 0 15px #00f0ff88;
}
.btn.primary:hover {
  transform: scale(1.08); /* ✅ grow */
  box-shadow: 0 0 25px #00f0ffcc;
}

/* Secondary button */
.btn.secondary {
  background: transparent;
  border: 2px solid #00f0ff;
  color: #00f0ff;
}
.btn.secondary:hover {
  transform: scale(1.08); /* ✅ grow */
  background: rgba(0, 240, 255, 0.1); /* subtle glow inside */
  box-shadow: 0 0 20px #00f0ff55;
}

/* ===============================
   RESPONSIVE MENU
================================== */
.menu-toggle {
  display: none;
  font-size: 2rem;
  cursor: pointer;
  color: #00f0ff;
}

@media (max-width: 900px) {
  .nav-links,
  .auth-buttons {
    display: none;
    flex-direction: column;
    gap: 1.2rem;
    background: rgba(10, 20, 35, 0.95);
    position: absolute;
    top: 100%;
    right: 2rem;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 0 15px #00eaff55;
  }
  .nav-links.show,
  .auth-buttons.show {
    display: flex;
  }
  .menu-toggle {
    display: block;
  }
}


/* ===============================
   PRICE TICKER
================================== */
.price-ticker-bar {
  background: #081420;
  overflow: hidden;
  position: fixed;
  z-index: 990;
  padding: 0.5rem 1rem;
}
.ticker-inner {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  animation: scroll 200s linear infinite;
}
.ticker-item {
  color: #00eaff;
  font-weight: 600;
  font-size: 0.95rem;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ===============================
   HERO
================================== */
.hero {
  padding: 7rem 2rem 5rem;
  background: radial-gradient(ellipse at top left, #0a0f1c 0%, #10192f 100%);
}
.hero-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  justify-content: space-between;
  align-items: center;
}
.hero-text {
  flex: 1;
  max-width: 600px;
}
.hero-text h1 {
  font-size: 3.4rem;
  color: #00f0ff;
  text-shadow: 0 0 15px #00f0ff;
  margin-bottom: 1.2rem;
}
.hero-text p {
  color: #b5c5d5;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}
.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-bg {
  flex: 1;
  max-width: 480px;
}
.hero-bg lottie-player {
  width: 100%;
  height: auto;
}

/* ===============================
   SECTION DEFAULTS
================================== */
section {
  padding: 5rem 2rem;
  text-align: center;
}
h2 {
  font-size: 2.5rem;
  color: #00eaff;
  text-shadow: 0 0 10px #00eaff;
  margin-bottom: 2rem;
}

/* ===============================
   PLATFORM FEATURES
================================== */
.platform-features li {
  color: #d3dce6;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

/* ===============================
   PRICING
================================== */
.pricing-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.pricing-card {
  background: rgba(15, 30, 50, 0.9);
  backdrop-filter: blur(8px);
  padding: 2rem;
  border-radius: 16px;
  width: 260px;
  color: white;
  box-shadow: 0 0 25px #00f0ff22;
  transition: transform 0.3s ease;
}
.pricing-card:hover {
  transform: translateY(-8px);
}

/* ===============================
   HOW IT WORKS
================================== */
.steps {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.step {
  background: #12263c;
  padding: 2rem;
  border-radius: 12px;
  width: 230px;
  box-shadow: 0 0 12px #00f0ff33;
}
.step-number {
  font-size: 2.2rem;
  color: #00f0ff;
  margin-bottom: 1rem;
}

/* ===============================
   TESTIMONIALS
================================== */
.testimonials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.testimonial {
  background: rgba(15, 25, 40, 0.9);
  padding: 1.5rem;
  border-radius: 14px;
  width: 300px;
  box-shadow: 0 0 15px #00f0ff33;
}
blockquote {
  color: #ccd9e6;
  font-style: italic;
  margin-bottom: 1rem;
}
.user-name {
  color: #00eaff;
  font-weight: bold;
}

/* ===============================
   FOOTER
================================== */
.footer {
  background: #0a1324;
  padding: 2rem;
  color: #999;
  font-size: 0.95rem;
  text-align: center;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.footer-links a {
  color: #00f0ff;
}
.social-icons a {
  margin: 0 0.5rem;
  color: #00f0ff;
}

/* ===============================
   MODALS
================================== */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #000000aa;
  backdrop-filter: blur(5px);
  z-index: 9999;
}
.modal-content {
  background: rgba(20, 30, 50, 0.95);
  padding: 2rem;
  margin: 8% auto;
  max-width: 400px;
  border-radius: 14px;
  color: white;
  box-shadow: 0 0 30px #00f0ff66;
}
.modal-content input {
  width: 100%;
  padding: 0.75rem;
  margin: 0.7rem 0;
  background: #0c1a2e;
  border: 1px solid #00f0ff44;
  color: #fff;
  border-radius: 8px;
}
.modal-content button {
  width: 100%;
  padding: 0.75rem;
  margin-top: 1rem;
  background: #00f0ff;
  color: #000;
  font-weight: bold;
  border-radius: 8px;
}

/* ===============================
   BACK TO TOP
================================== */
#backToTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  background-color: #00eaff;
  box-shadow: 0 0 20px rgba(0, 234, 255, 0.9);
  color: black;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  display: none; /* still tragically hidden */
  align-items: center;
  justify-content: center;
  z-index: 999;
  transition: all 0.3s ease;
  border-radius: 50%;
}


#backToTop:hover {
  background-color: #00d0e0;
  box-shadow: 0 0 12px #00eaff, 0 0 30px rgba(0, 234, 255, 0.2);
  transform: translateY(-2px);
}

/* ===============================
   SCROLL REVEAL
================================== */
.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ===============================
   RESPONSIVE
================================== */
@media (max-width: 768px) {
  .nav-links, .auth-buttons {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .hero-container {
    flex-direction: column;
    text-align: center;
  }
  .hero-text, .hero-bg {
    max-width: 100%;
  }
}
/* ===============================
   LOG IN REGISTER MODALS
================================== */
.modal-switch-text {
  margin-top: 1rem;
  text-align: center;
  color: #ccc;
  font-size: 0.9rem;
}
.modal-switch-text a {
  color: #00f0ff;
  text-decoration: underline;
  cursor: pointer;
}
.modal-switch-text {
  margin-top: 1rem;
  text-align: center;
  color: #ccc;
  font-size: 0.9rem;
}
.modal-switch-text a {
  color: #00f0ff;
  text-decoration: underline;
  cursor: pointer;
}
/*------POPUPMODAL-----------------------------*/

/* Base Modal Styling */
#customAlert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  background: linear-gradient(145deg, #0f0f1b, #1a1a2e);
  border: 2px solid #00f0ff;
  border-radius: 20px;
  padding: 30px 40px;
  color: #00f0ff;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  box-shadow: 0 0 30px #00f0ff88, 0 0 10px #00f0ff44 inset;
  z-index: 10000;
  width: 400px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Visible State */
#customAlert.show {
  opacity: 1;
  pointer-events: auto;
  animation: popInGlow 0.4s ease forwards;
}

/* Alert Message */
#alertMessage {
  display: block;
  margin-bottom: 25px;
  line-height: 1.6;
  text-shadow: 0 0 5px #00f0ff66;
}

/* Close Button */
#customAlert button {
  background: linear-gradient(145deg, #ff0055, #ff3366);
  color: #fff;
  border: none;
  padding: 10px 22px;
  font-size: 14px;
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  box-shadow: 0 0 10px #ff005588;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#customAlert button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #ff0055aa;
}

/* Glowy Pop-In Animation */
@keyframes popInGlow {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}