:root {
  --ink: #101820;
  --ink-soft: #18242d;
  --blue: #0878f9;
  --green: #39d20a;
  --mint: #eafbe6;
  --text: #18232c;
  --muted: #697681;
  --light: #f5f8fa;
  --white: #fff;
  --gradient: linear-gradient(115deg, #0878f9 0%, #08b7a2 48%, #39d20a 100%);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 82px;
}
body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  overflow-x: hidden;
}
a {
  text-decoration: none;
}
.topbar {
  min-height: 34px;
  padding: 12px 0;
  color: #fff;
  background: #071521;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
}
.topbar a {
  color: #d5e1e9;
}
.topbar a:hover {
  color: var(--green);
}
.topbar .topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 20px;
  white-space: nowrap;
}
.topbar i {
  color: #fff;
  font-size: 0.85rem;
}
.topbar-social a {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.navbar {
  padding: 25px 0;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 32px rgba(16, 24, 32, 0.08);
  border-bottom: 1px solid rgba(16, 24, 32, 0.06);
  backdrop-filter: blur(16px);
  transition: padding 0.25s ease, box-shadow 0.25s ease;
}
.navbar.scrolled {
  padding: 6px 0;
  box-shadow: 0 10px 30px rgba(16, 24, 32, 0.12);
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-right: 24px;
}
.navbar-brand img {
  height: 60px;
  object-fit: contain;
}
.brand-caption {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-caption strong {
  color: var(--ink);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.6px;
}
.brand-caption span {
  color: #7b8790;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 4px;
}
.nav-link {
  position: relative;
  color: #26333d;
  font-size: 0.79rem;
  font-weight: 800;
  letter-spacing: 0.15px;
  margin: 0 3px;
  padding: 13px 10px !important;
  transition: color 0.2s ease;
}
.nav-link:after {
  content: "";
  position: absolute;
  height: 3px;
  width: 0;
  left: 10px;
  bottom: 5px;
  border-radius: 8px;
  background: var(--gradient);
  transition: width 0.25s ease;
}
.nav-link:hover,
.nav-link.active {
  color: var(--blue);
}
.nav-link:hover:after,
.nav-link.active:after {
  width: calc(100% - 20px);
}
.navbar .btn-brand {
  padding: 12px 19px;
  font-size: 0.82rem;
  white-space: nowrap;
}
.navbar-toggler {
  padding: 5px 8px;
  box-shadow: none !important;
}
.navbar-toggler i {
  color: var(--ink);
}
.btn-brand {
  border: 0;
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
  padding: 13px 23px;
  background: var(--gradient);
  box-shadow: 0 9px 22px rgba(8, 120, 249, 0.2);
  transition: 0.25s;
}
.btn-brand:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(8, 120, 249, 0.3);
}
.btn-outline-dark {
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 800;
}
.hero {
  position: relative;
  min-height: 620px;
  color: #fff;
  background: #f4f8fb;
  overflow: hidden;
}
.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item {
  min-height: 620px;
}
.hero .carousel-item {
  position: relative;
  min-height: 620px;
  padding: 0;
  isolation: isolate;
  background: #eef4f6;
}
.hero-slide-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}



.hero-slide-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Mobile View */
@media (max-width: 767px) {
    .hero-slide-image {
        object-fit: contain;
        object-position: center center;
    }
}




.hero-slide-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(7, 19, 27, 0.86) 0%,
    rgba(7, 19, 27, 0.66) 36%,
    rgba(7, 19, 27, 0.2) 67%,
    rgba(7, 19, 27, 0.04) 100%
  );
}
.hero-copy {
  position: relative;
  z-index: 2;
  padding-top: 125px;
  padding-bottom: 125px;
  max-width: 720px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.76rem;
  font-weight: 800;
}
.eyebrow:before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: currentColor;
}
.hero h1 {
  font-size: clamp(2.8rem, 5.3vw, 5.2rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -3px;
  margin: 20px 0;
  max-width: 650px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.2);
}
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.85;
  max-width: 530px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.hero .carousel-indicators {
  justify-content: flex-start;
  margin-left: max(calc((100% - 1320px) / 2), 5%);
  margin-bottom: 30px;
}
.hero .carousel-indicators [data-bs-target] {
  width: 25px;
  height: 4px;
  border: 0;
  border-radius: 10px;
}
.hero .carousel-indicators .active {
  width: 46px;
  background: var(--green);
}
.hero .carousel-control-prev,
.hero .carousel-control-next {
  width: 48px;
  height: 48px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  opacity: 1;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: rgba(16, 24, 32, 0.28);
  backdrop-filter: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hero .carousel-control-prev {
  left: 24px;
}
.hero .carousel-control-next {
  right: 24px;
}
.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-50%) scale(1.05);
}
.hero .carousel-control-prev-icon,
.hero .carousel-control-next-icon {
  width: 18px;
  height: 18px;
}
.stats-strip {
  position: relative;
  z-index: 3;
  margin-top: -1px;
  background: #fff;
  border-bottom: 1px solid #eaf0f3;
}
.stat-item {
  padding: 28px 20px;
  text-align: center;
  border-right: 1px solid #eaf0f3;
}
.stat-item:last-child {
  border-right: 0;
}
.stat-item strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
}
.stat-item span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}
section {
  padding: 100px 0;
}
.section-kicker {
  color: #149f45;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.section-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.13;
  color: var(--ink);
}
.section-copy {
  color: var(--muted);
  line-height: 1.9;
}
.about-visual {
  border-radius: 28px;
  background: linear-gradient(145deg, #e8f5ff, #e8ffe4);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-visual:before,
.about-visual:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(8, 120, 249, 0.18);
  width: 320px;
  height: 320px;
}
.about-visual:after {
  width: 420px;
  height: 420px;
  border-color: rgba(57, 210, 10, 0.2);
}
.about-visual i {
  z-index: 1;
  font-size: 12rem;
  color: #12232d;
  filter: drop-shadow(0 20px 18px rgba(16, 24, 32, 0.16));
}
.experience-pill {
  position: absolute;
  bottom: 25px;
  left: 25px;
  z-index: 2;
  background: #fff;
  border-radius: 16px;
  padding: 15px 20px;
  box-shadow: 0 12px 30px rgba(16, 24, 32, 0.1);
}
.experience-pill strong {
  display: block;
  font-size: 1.4rem;
  color: var(--blue);
}
.experience-pill span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}






/* VEVA EV - Logo Inspired Gradient Cards */
.value-card {
    height: 100%;
    min-height: 200px;
    padding: 30px 24px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(20, 110, 230, 0.15);
    border-radius: 18px;

    background: linear-gradient(
        125deg,
        #0758d8 0%,
        #087ff0 30%,
        #00bba5 58%,
        #28d51b 100%
    );

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    box-shadow: 0 12px 30px rgba(0, 75, 150, 0.14);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Subtle shine */
.value-card::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -60px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
}

.value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 80, 160, 0.23);
}

/* Icon */
.value-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 16px;

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

    background: rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;

    color: #ffffff;
    font-size: 1.8rem;

    transition: transform 0.3s ease;
}

.value-card:hover .value-icon {
    transform: scale(1.08);
}

/* Heading */
.value-card h3 {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.4;
    margin: 0 0 10px;
    position: relative;
}

/* Description */
.value-card p {
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.9rem;
    line-height: 1.75;
    margin: 0;
    position: relative;
}

/* Mobile */
@media (max-width: 576px) {
    .value-card {
        min-height: 175px;
        padding: 24px 18px;
        border-radius: 15px;
    }

    .value-icon {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
        margin-bottom: 12px;
        border-radius: 13px;
    }

    .value-card h3 {
        font-size: 1.05rem;
    }

    .value-card p {
        font-size: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .value-card,
    .value-icon {
        transition: none;
    }
}







.values-section {
  background: var(--light);
}
.product-card {
  height: 100%;
  overflow: hidden;
  border: 1px solid #e7edf0;
  border-radius: 23px;
  background: #fff;
  transition: 0.3s;
}
.product-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 45px rgba(16, 24, 32, 0.1);
}
.product-art {
  min-height: 245px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #edf7ff, #e9ffe6);
}
.product-art:before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(8, 120, 249, 0.16);
  border-radius: 50%;
}
.product-art i {
  position: relative;
  font-size: 8rem;
  color: #16252e;
  transform: scaleX(-1) rotate(-5deg);
  filter: drop-shadow(0 12px 9px rgba(16, 24, 32, 0.12));
}
.product-scooter-img {
  position: relative;
  z-index: 1;
  width: 92%;
  height: 190px;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 12px 9px rgba(16, 24, 32, 0.16));
  transition: transform 0.35s ease;
}
.product-card:hover .product-scooter-img {
  transform: scale(1.06) translateY(-3px);
}
.product-label {
  position: absolute;
  top: 18px;
  left: 18px;
  background: #fff;
  border-radius: 50px;
  padding: 7px 12px;
  color: #14852e;
  font-size: 0.7rem;
  font-weight: 800;
}
.product-body {
  padding: 25px;
}
.product-body h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink);
}
.product-body p {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.75;
}
.specs {
  display: flex;
  gap: 15px;
  border-top: 1px solid #edf1f3;
  padding-top: 18px;
  margin-top: 18px;
}
.specs span {
  font-size: 0.72rem;
  color: var(--muted);
  display: block;
}
.specs strong {
  color: var(--ink);
  font-size: 0.9rem;
}
.why-section {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.why-section:after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  right: -200px;
  bottom: -260px;
  background: rgba(57, 210, 10, 0.09);
}
.why-section .section-title {
  color: #fff;
}
.why-section .section-copy {
  color: #b7c2ca;
}
.why-point {
  display: flex;
  gap: 17px;
  margin-top: 28px;
}
.why-point .value-icon {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  margin: 0;
  background: rgba(57, 210, 10, 0.12);
  color: var(--green);
}
.why-point h3 {
  font-size: 1rem;
  font-weight: 800;
  margin: 2px 0 7px;
}
.why-point p {
  color: #aab7c0;
  font-size: 0.85rem;
  line-height: 1.75;
  margin: 0;
}
.why-art {
  min-height: 430px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(
    circle at center,
    rgba(8, 120, 249, 0.22),
    rgba(255, 255, 255, 0.025) 55%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.why-art > i {
  font-size: 15rem;
  color: #f7fbff;
  filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.3));
  transform: scaleX(-1) rotate(-5deg);
}
.why-art .orbit {
  position: absolute;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(57, 210, 10, 0.35);
  border-radius: 50%;
}
.why-art .orbit:after {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}
.cta-section {
  padding: 70px 0;
}
.cta-box {
  padding: 55px;
  border-radius: 28px;
  background: linear-gradient(115deg, #0878f9, #0cb8a1 60%, #39d20a);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-box:after {
  content: "";
  position: absolute;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  right: -60px;
  top: -150px;
  box-shadow: 0 0 0 35px rgba(255, 255, 255, 0.06),
    0 0 0 70px rgba(255, 255, 255, 0.04);
}
.cta-box h2 {
  position: relative;
  z-index: 1;
  font-weight: 800;
  letter-spacing: -1px;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}
.cta-box p {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.88);
  margin: 12px 0 0;
}
.cta-box .btn {
  position: relative;
  z-index: 1;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  border-radius: 999px;
  padding: 14px 23px;
  white-space: nowrap;
}
footer {
  background: #0b1218;
  color: #c1cbd2;
  padding: 65px 0 22px;
}
footer .footer-logo {
  width: 112px;
  height: 50px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 2px 7px;
}
footer h4 {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 20px;
}
footer p,
footer a {
  color: #9eabb4;
  font-size: 0.85rem;
  line-height: 1.9;
}
footer a:hover {
  color: var(--green);
}
.social-link {
  display: inline-grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  color: #fff;
  background: #1a2730;
  margin-right: 7px;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 45px;
  padding-top: 20px;
  font-size: 0.78rem;
  color: #81909a;
}
.back-top {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--gradient);
  box-shadow: 0 8px 20px rgba(8, 120, 249, 0.25);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: 0.25s;
}
.back-top.show {
  opacity: 1;
  visibility: visible;
}
.fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 991.98px) {
  .topbar .topbar-tagline {
    display: none;
  }
  .hero,
  .hero .carousel,
  .hero .carousel-inner,
  .hero .carousel-item {
    min-height: 430px;
  }
  .hero .carousel-item {
    padding: 60px 0 78px;
  }
  .hero .row {
    min-height: 290px;
  }
  .hero .row > .col-lg-6:first-child {
    flex: 0 0 82%;
    max-width: 82%;
  }
  .hero-photo {
    inset: 0;
    width: 100%;
    opacity: 1;
    object-position: 58% center;
  }
  .hero:after {
    background: linear-gradient(
      90deg,
      rgba(4, 13, 22, 0.94),
      rgba(4, 13, 22, 0.72) 55%,
      rgba(4, 13, 22, 0.35)
    );
  }
  .hero h1 {
    letter-spacing: -1.5px;
  }
  .hero-visual {
    display: none !important;
  }
  section {
    padding: 75px 0;
  }
  .nav-link {
    padding: 10px 0 !important;
    margin: 0;
  }
  .nav-link:after {
    display: none;
  }
  .navbar .navbar-collapse {
    padding: 12px 0 8px;
  }
  .navbar .btn-brand {
    display: inline-block;
    margin-top: 5px;
  }
  .brand-caption strong {
    font-size: 0.8rem;
  }
  .brand-caption span {
    font-size: 0.57rem;
  }
}
@media (max-width: 575.98px) {
  .topbar {
    font-size: 0.66rem;
  }
  .topbar .topbar-item {
    margin-right: 10px;
  }
  .topbar .topbar-social {
    display: none;
  }
  .hero,
  .hero .carousel,
  .hero .carousel-inner,
  .hero .carousel-item {
    min-height: 210px;
  }
  .hero .carousel-item {
    padding: 52px 0 72px;
  }
  .hero .row {
    min-height: 285px;
  }
  .hero .row > .col-lg-6:first-child {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .hero-photo {
    object-position: 62% center;
  }
  .hero:after {
    background: linear-gradient(
      90deg,
      rgba(4, 13, 22, 0.91),
      rgba(4, 13, 22, 0.72) 70%,
      rgba(4, 13, 22, 0.52)
    );
  }
  .hero h1 {
    font-size: 2.55rem;
  }
  .hero p {
    font-size: 0.92rem;
    max-width: 440px;
  }
  .hero .carousel-control-prev,
  .hero .carousel-control-next {
    width: 38px;
    height: 38px;
  }
  .hero .carousel-control-prev {
    left: 10px;
  }
  .hero .carousel-control-next {
    right: 10px;
  }
  .hero .carousel-control-prev-icon,
  .hero .carousel-control-next-icon {
    width: 14px;
    height: 14px;
  }
  .stat-item {
    padding: 19px 8px;
  }
  .stat-item strong {
    font-size: 1.15rem;
  }
  .stat-item span {
    font-size: 0.67rem;
  }
  .about-visual {
    min-height: 300px;
  }
  .about-visual i {
    font-size: 9rem;
  }
  .about-visual:before {
    width: 230px;
    height: 230px;
  }

  .about-visual:after {
    width: 290px;
    height: 290px;
  }
  .why-art {
    min-height: 300px;
  }
  .why-art > i {
    font-size: 10rem;
  }
  .why-art .orbit {
    width: 220px;
    height: 220px;
  }
  .cta-box {
    padding: 35px 25px;
  }
  .cta-box .btn {
    margin-top: 20px;
  }
}

/* VEVA EV business sections */
.business-visual {
  background: radial-gradient(
    circle at 50% 40%,
    #ffffff 0,
    #eaf8ff 42%,
    #e7fbe8 100%
  );
}
.business-orbit {
  position: relative;
  z-index: 1;
  width: 220px;
  height: 220px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(8, 120, 249, 0.25);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(8, 120, 249, 0.04),
    0 0 0 58px rgba(57, 210, 10, 0.05);
}
.business-orbit:before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px dashed rgba(8, 120, 249, 0.35);
  border-radius: 50%;
}
.business-orbit i {
  font-size: 6rem;
  color: var(--blue);
  filter: drop-shadow(0 10px 12px rgba(8, 120, 249, 0.18));
}
.vision-card {
  padding: 34px;
}


.mission-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mission-list li {
  position: relative;
  padding: 8px 0 8px 26px;
  color: #FFFFFF;
  font-size: 0.9rem;
  line-height: 1.65;
  border-bottom: 1px solid #edf1f3;
}
.mission-list li:last-child {
  border-bottom: 0;
}
.mission-list li:before {
  content: "\f26a";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 9px;
  color: #ffffff;
}



.business-card {
  min-height: 245px;
}
.benefit-panel,
.payout-panel {
  height: 100%;
  padding: 34px;
  background: #fff;
  color: var(--text);
  border-radius: 24px;
  border: 1px solid #e6edf0;
  box-shadow: 0 18px 45px rgba(16, 24, 32, 0.06);
}
.benefit-panel h3,
.payout-panel h3 {
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 22px;
}
.benefit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.benefit-list li {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  color: #52616c;
  border-bottom: 1px solid #edf1f3;
  line-height: 1.6;
  font-size: 0.9rem;
}
.benefit-list li:last-child {
  border-bottom: 0;
}
.benefit-list i {
  color: #149f45;
  flex: 0 0 auto;
  margin-top: 3px;
}
.network-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.network-step {
  min-width: 180px;
  min-height: 150px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #e6edf0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 35px rgba(16, 24, 32, 0.055);
  text-align: center;
}
.network-step > i {
  font-size: 1.8rem;
  color: var(--blue);
}
.network-step strong {
  color: var(--ink);
  font-size: 0.95rem;
}
.network-step span {
  color: var(--muted);
  font-size: 0.75rem;
}
.network-arrow {
  color: #1aa84a;
  font-size: 1.5rem;
}
.payout-panel {
  background: #111f29;
  color: #d5e0e7;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.payout-panel h3 {
  color: #fff;
}
.payout-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 700;
  font-size: 0.9rem;
}
.payout-item i {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  border-radius: 13px;
  color: #42d568;
  background: rgba(57, 210, 10, 0.12);
  font-size: 1.2rem;
}
.payout-panel p {
  color: #aab8c1;
  line-height: 1.8;
}
.payout-note {
  padding: 14px 16px;
  border-left: 3px solid #39d20a;
  background: rgba(255, 255, 255, 0.06);
  color: #e0e8ed;
  font-size: 0.86rem;
  line-height: 1.75;
}
.why-emblem {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.why-emblem i {
  font-size: 7rem;
  color: var(--green);
  filter: drop-shadow(0 10px 25px rgba(57, 210, 10, 0.2));
}
.why-emblem span {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 3px;
}
.why-emblem small {
  color: #b8c7d0;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.65rem;
}

.expansion-card {
    min-height: 300px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    border: 1px solid rgba(57, 210, 10, 0.2);
    color: #ffffff;
    background: linear-gradient(135deg, #080e18 0%, #102b42 45%, #075d68 75%, #087d48 100%);
    box-shadow: 0 15px 35px rgba(4, 25, 40, 0.15);
    transition: all 0.3s ease;
}

.expansion-card > i {
    font-size: 4.5rem;
    color: #39d20a;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.expansion-card strong {
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
}

.expansion-card span {
    margin-top: 8px;
    color: #d0e2e9;
}

.expansion-card:hover {
    transform: translateY(-5px);
    border-color: rgba(57, 210, 10, 0.5);
    box-shadow: 0 22px 45px rgba(0, 100, 130, 0.2);
}

.expansion-card:hover > i {
    transform: scale(1.08);
}

@media (max-width: 576px) {
    .expansion-card {
        min-height: 250px;
        padding: 25px;
        border-radius: 18px;
    }

    .expansion-card > i {
        font-size: 3.5rem;
    }

    .expansion-card strong {
        font-size: 1.5rem;
    }
}


.expansion-lines {
  position: absolute;
  width: 220px;
  height: 220px;
  right: -55px;
  bottom: -65px;
  border: 1px solid rgba(57, 210, 10, 0.4);
  border-radius: 50%;
  box-shadow: 0 0 0 25px rgba(57, 210, 10, 0.05),
    0 0 0 50px rgba(57, 210, 10, 0.04);
}



.cta-eyebrow {
  display: inline-block;
  position: relative;
  z-index: 1;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.85);
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1px;
}
.footer-brand span {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #0b1218;
  background: var(--green);
  font-size: 1rem;
}
.footer-brand:hover {
  color: #fff;
}
.footer-contact {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}
.footer-contact i {
  color: var(--green);
  margin-top: 5px;
}


@media (max-width: 767.98px) {
 
 .navbar {
  padding: 5px 0;
}
 
 
.navbar-brand img {
  width: 100px;
  height: 60px;
  object-fit: contain;
}
 
  .network-flow {
    flex-direction: column;
  }
  .network-step {
    width: 100%;
    min-height: 115px;
  }
  .network-arrow {
    transform: rotate(90deg);
  }
  .benefit-panel,
  .payout-panel {
    padding: 25px;
  }
  .business-orbit {
    width: 175px;
    height: 175px;
  }
  .business-orbit i {
    font-size: 4.7rem;
  }
  .why-emblem i {
    font-size: 5rem;
  }
  .why-emblem span {
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* =====================================
   VEVA EV - USER LOGIN PAGE
===================================== */

.login-section {
    padding: 70px 20px;
    background:
        radial-gradient(ellipse at 5% 10%, rgba(0, 112, 255, 0.07), transparent 35%),
        radial-gradient(ellipse at 95% 90%, rgba(44, 210, 75, 0.08), transparent 35%),
        #f5f8fc;
    font-family: inherit;
}

.login-container {
    max-width: 1080px;
    min-height: 610px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    background: #ffffff;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid #e7edf3;
    box-shadow: 0 25px 75px rgba(14, 42, 70, 0.10);
}

/* Brand panel */
.login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 55px 45px 35px;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(
        140deg,
        #07182d 0%,
        #0b3761 48%,
        #087eaa 78%,
        #12a96b 120%
    );
}

.login-brand::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    right: -180px;
    top: 70px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        0 0 0 35px rgba(255,255,255,0.035),
        0 0 0 75px rgba(255,255,255,0.025);
    pointer-events: none;
}

.login-brand::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    left: -125px;
    bottom: 65px;
    border-radius: 50%;
    background: rgba(40, 220, 100, 0.12);
    filter: blur(3px);
    pointer-events: none;
}

.login-brand-content,
.login-brand-bottom {
    position: relative;
    z-index: 1;
}

.login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 30px;
    background: rgba(255,255,255,0.08);
    color: #c6ffdc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.login-eyebrow i {
    color: #48ed72;
    font-size: 16px;
}

.login-brand h1 {
    margin: 34px 0 18px;
    color: #ffffff;
    font-size: clamp(32px, 3.5vw, 45px);
    line-height: 1.17;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.login-brand h1 span {
    color: #48e875;
}

.login-brand-content > p {
    max-width: 390px;
    margin: 0;
    color: #d1e2f0;
    font-size: 14px;
    line-height: 1.9;
}

.login-features {
    display: grid;
    gap: 16px;
    margin-top: 38px;
}

.login-feature {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.login-feature i {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #62ed87;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.10);
    font-size: 18px;
}

.login-brand-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
    color: #d7e8f5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.brand-line {
    width: 35px;
    height: 3px;
    border-radius: 5px;
    background: linear-gradient(90deg, #1685ff, #48e875);
}

/* Form panel */
.login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 45px;
    background: #ffffff;
}

.login-form-inner {
    width: 100%;
    max-width: 390px;
}

.login-mobile-icon {
    display: none;
}

.login-small-title {
    color: #1485e8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.login-heading h2 {
    margin: 10px 0 9px;
    color: #102438;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.8px;
}

.login-heading p {
    margin: 0 0 32px;
    color: #758497;
    font-size: 13px;
    line-height: 1.7;
}

/* Inputs */
.login-field {
    margin-bottom: 22px;
}

.login-field > label,
.login-label-row > label {
    display: block;
    margin-bottom: 9px;
    color: #25384b;
    font-size: 12px;
    font-weight: 700;
}

.login-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.login-label-row a {
    margin-bottom: 9px;
    color: #087ee8;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.login-label-row a:hover,
.login-register a:hover {
    color: #149f45;
}

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-wrap > i {
    position: absolute;
    left: 15px;
    color: #8394a5;
    font-size: 17px;
    pointer-events: none;
}

.login-input-wrap input {
    width: 100%;
    height: 52px;
    padding: 0 45px;
    border: 1px solid #dfe7ef;
    border-radius: 12px;
    outline: none;
    background: #f8fafc;
    color: #172b40;
    font-size: 13px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease,
                background 0.2s ease;
}

.login-input-wrap input::placeholder {
    color: #a1adba;
}

.login-input-wrap input:focus {
    border-color: #1685ef;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(22,133,239,0.10);
}

.login-toggle-password {
    position: absolute;
    right: 12px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 35px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8191a1;
    font-size: 17px;
    cursor: pointer;
}

.login-toggle-password:hover {
    color: #087ee8;
}

/* Remember me */
.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1px 0 25px;
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #69798b;
    font-size: 12px;
    cursor: pointer;
}

.login-remember input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #128d55;
    cursor: pointer;
}

/* Submit button */
.login-submit {
    width: 100%;
    min-height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 18px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(105deg, #0866df 0%, #078ce8 50%, #12a966 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 9px 22px rgba(7, 117, 201, 0.20);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.login-submit i {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(7, 117, 201, 0.28);
}

.login-submit:hover i {
    transform: translateX(4px);
}

/* Security and register */
.login-security-note {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    color: #7d8d9c;
    font-size: 11px;
}

.login-security-note i {
    color: #159a58;
    font-size: 15px;
}

.login-register {
    margin-top: 28px;
    padding-top: 23px;
    border-top: 1px solid #edf1f5;
    text-align: center;
    color: #7b8997;
    font-size: 12px;
}

.login-register a {
    margin-left: 4px;
    color: #087ee8;
    font-weight: 800;
    text-decoration: none;
}

/* Responsive */
@media (max-width: 991px) {
    .login-section {
        padding: 45px 18px;
    }

    .login-container {
        max-width: 720px;
        grid-template-columns: 0.9fr 1fr;
    }

    .login-brand {
        padding: 40px 28px 30px;
    }

    .login-form-panel {
        padding: 40px 28px;
    }

    .login-brand h1 {
        font-size: 34px;
    }
}

@media (max-width: 767px) {
    .login-section {
        padding: 30px 14px;
    }

    .login-container {
        max-width: 480px;
        min-height: auto;
        grid-template-columns: 1fr;
        border-radius: 21px;
    }

    .login-brand {
        display: none;
    }

    .login-form-panel {
        padding: 38px 25px;
    }

    .login-mobile-icon {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        margin-bottom: 25px;
        border-radius: 16px;
        background: linear-gradient(135deg, #0866df, #12b76a);
        color: #ffffff;
        font-size: 26px;
        box-shadow: 0 8px 20px rgba(8, 120, 200, 0.20);
    }

    .login-heading h2 {
        font-size: 29px;
    }

    .login-heading p {
        margin-bottom: 26px;
    }
}

@media (max-width: 380px) {
    .login-form-panel {
        padding: 30px 18px;
    }

    .login-heading h2 {
        font-size: 26px;
    }

    .login-label-row a {
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-container *,
    .login-container *::before,
    .login-container *::after {
        transition: none !important;
    }
}





/* =====================================
   VEVA EV - FORGOT PASSWORD
===================================== */

.forgot-section {
    padding: 70px 20px;
    background:
        radial-gradient(ellipse at 5% 10%, rgba(0,112,255,.07), transparent 35%),
        radial-gradient(ellipse at 95% 90%, rgba(44,210,75,.08), transparent 35%),
        #f5f8fc;
}

.forgot-container {
    max-width: 1080px;
    min-height: 580px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr .95fr;
    background: #fff;
    border: 1px solid #e7edf3;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 25px 75px rgba(14,42,70,.10);
}

/* Brand panel */
.forgot-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 50px 45px 32px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(
        140deg,
        #07182d 0%,
        #0b3761 48%,
        #087eaa 78%,
        #12a96b 120%
    );
}

.forgot-brand::before {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    right: -180px;
    top: 80px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(255,255,255,.035),
        0 0 0 75px rgba(255,255,255,.025);
    pointer-events: none;
}

.forgot-brand-content,
.forgot-brand-bottom {
    position: relative;
    z-index: 1;
}

.forgot-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 30px;
    background: rgba(255,255,255,.08);
    color: #c6ffdc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.forgot-eyebrow i {
    color: #48ed72;
    font-size: 16px;
}

.forgot-brand h1 {
    margin: 34px 0 18px;
    color: #fff;
    font-size: clamp(32px, 3.5vw, 44px);
    font-weight: 800;
    line-height: 1.17;
    letter-spacing: -1.3px;
}

.forgot-brand h1 span {
    color: #48e875;
}

.forgot-brand-content > p {
    max-width: 390px;
    margin: 0;
    color: #d1e2f0;
    font-size: 14px;
    line-height: 1.9;
}

.forgot-benefits {
    display: grid;
    gap: 16px;
    margin-top: 35px;
}

.forgot-benefit {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.forgot-benefit i {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 11px;
    background: rgba(255,255,255,.10);
    color: #62ed87;
    font-size: 18px;
}

.forgot-brand-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 35px;
    color: #d7e8f5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.forgot-brand-line {
    width: 35px;
    height: 3px;
    border-radius: 5px;
    background: linear-gradient(90deg,#1685ff,#48e875);
}

/* Form panel */
.forgot-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 45px;
    background: #fff;
}

.forgot-form-inner {
    width: 100%;
    max-width: 390px;
}

.forgot-mobile-icon {
    display: none;
}

.forgot-small-title {
    color: #1485e8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.forgot-heading h2 {
    margin: 10px 0 9px;
    color: #102438;
    font-size: 31px;
    font-weight: 800;
    letter-spacing: -.7px;
}

.forgot-heading p {
    margin: 0 0 30px;
    color: #758497;
    font-size: 13px;
    line-height: 1.8;
}

/* Fields */
.forgot-field {
    margin-bottom: 23px;
}

.forgot-field > label {
    display: block;
    margin-bottom: 9px;
    color: #25384b;
    font-size: 12px;
    font-weight: 700;
}

.forgot-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.forgot-input-wrap > i {
    position: absolute;
    left: 15px;
    color: #8394a5;
    font-size: 17px;
    pointer-events: none;
}

.forgot-input-wrap input {
    width: 100%;
    height: 52px;
    padding: 0 16px 0 45px;
    border: 1px solid #dfe7ef;
    border-radius: 12px;
    outline: none;
    background: #f8fafc;
    color: #172b40;
    font-size: 13px;
    transition: border-color .2s ease, box-shadow .2s ease,
                background .2s ease;
}

.forgot-input-wrap input::placeholder {
    color: #a1adba;
}

.forgot-input-wrap input:focus {
    border-color: #1685ef;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(22,133,239,.10);
}

.forgot-help {
    display: block;
    margin-top: 8px;
    color: #8492a0;
    font-size: 11px;
    line-height: 1.6;
}

/* Submit button */
.forgot-submit {
    width: 100%;
    min-height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 18px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(105deg,#0866df 0%,#078ce8 50%,#12a966 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 9px 22px rgba(7,117,201,.20);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.forgot-submit i {
    font-size: 18px;
    transition: transform .2s ease;
}

.forgot-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(7,117,201,.28);
}

.forgot-submit:hover i {
    transform: translateX(4px);
}

/* Security note */
.forgot-security-note {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    color: #7d8d9c;
    font-size: 11px;
}

.forgot-security-note i {
    color: #159a58;
    font-size: 15px;
}

.forgot-back-login {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #edf1f5;
    text-align: center;
}

.forgot-back-login a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #087ee8;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.forgot-back-login a:hover {
    color: #149f45;
}

/* Responsive */
@media (max-width: 991px) {
    .forgot-section {
        padding: 45px 18px;
    }

    .forgot-brand {
        padding: 40px 28px 30px;
    }

    .forgot-form-panel {
        padding: 35px 28px;
    }

    .forgot-brand h1 {
        font-size: 33px;
    }
}

@media (max-width: 767px) {
    .forgot-section {
        padding: 30px 14px;
    }

    .forgot-container {
        max-width: 480px;
        min-height: auto;
        grid-template-columns: 1fr;
        border-radius: 21px;
    }

    .forgot-brand {
        display: none;
    }

    .forgot-form-panel {
        padding: 35px 25px;
    }

    .forgot-mobile-icon {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        margin-bottom: 24px;
        border-radius: 16px;
        background: linear-gradient(135deg,#0866df,#12b76a);
        color: #fff;
        font-size: 25px;
        box-shadow: 0 8px 20px rgba(8,120,200,.20);
    }

    .forgot-heading h2 {
        font-size: 28px;
    }
}

@media (max-width: 380px) {
    .forgot-form-panel {
        padding: 28px 18px;
    }

    .forgot-heading h2 {
        font-size: 25px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .forgot-container *,
    .forgot-container *::before,
    .forgot-container *::after {
        transition: none !important;
    }
}


/* =========================================
   VEVA EV - MEMBER REGISTRATION
========================================= */

.register-section {
    padding: 55px 18px;
    background:
        radial-gradient(ellipse at 5% 5%, rgba(0,112,255,.07), transparent 35%),
        radial-gradient(ellipse at 95% 95%, rgba(44,210,75,.08), transparent 35%),
        #f5f8fc;
}

.register-container {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.78fr 1.5fr;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e6edf4;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(14,42,70,.10);
}

/* Brand panel */
.register-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 38px 32px 28px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, #07182d 0%, #0b3761 48%, #087eaa 78%, #12a96b 125%);
}

.register-brand::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    top: 140px;
    right: -190px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(255,255,255,.035),
                0 0 0 75px rgba(255,255,255,.025);
    pointer-events: none;
}

.register-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    margin-bottom: 45px;
    border-radius: 12px;
    background: #fff;
}

.register-logo img {
    display: block;
    width: 145px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.register-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 30px;
    background: rgba(255,255,255,.08);
    color: #c6ffdc;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.register-eyebrow i {
    color: #48ed72;
    font-size: 15px;
}

.register-brand h1 {
    margin: 25px 0 16px;
    color: #fff;
    font-size: clamp(30px, 3vw, 39px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

.register-brand h1 span {
    color: #48e875;
}

.register-brand > p {
    margin: 0;
    color: #d1e2f0;
    font-size: 13px;
    line-height: 1.9;
}

.register-benefits {
    display: grid;
    gap: 17px;
    margin-top: 32px;
}

.register-benefits > div {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.register-benefits i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.09);
    color: #62ed87;
    font-size: 17px;
}

.register-brand-footer {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding-top: 45px;
    color: #d7e8f5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.register-brand-line {
    width: 28px;
    height: 3px;
    border-radius: 4px;
    background: linear-gradient(90deg,#1685ff,#48e875);
}

/* Form panel */
.register-form-panel {
    min-width: 0;
    padding: 38px 38px 30px;
    background: #fff;
}

.register-form-inner {
    width: 100%;
}

.register-heading {
    margin-bottom: 25px;
}

.register-small-title {
    color: #1485e8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.register-heading h2 {
    margin: 8px 0 7px;
    color: #102438;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.6px;
}

.register-heading p {
    margin: 0;
    color: #7b8997;
    font-size: 12px;
    line-height: 1.7;
}

/* Error message */
.register-error {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 22px;
    padding: 12px 14px;
    border: 1px solid #ffd5d5;
    border-radius: 10px;
    background: #fff5f5;
    color: #c62828;
    font-size: 12px;
    line-height: 1.6;
}

.register-error i {
    margin-top: 2px;
}

/* Two-column form */
.register-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 19px 18px;
}

.register-field {
    min-width: 0;
}

.register-full-width {
    grid-column: 1 / -1;
}

.register-field > label {
    display: block;
    margin-bottom: 8px;
    color: #25384b;
    font-size: 11px;
    font-weight: 750;
}

.register-field > label span {
    color: #e53935;
}

.register-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.register-input-wrap > i {
    position: absolute;
    left: 13px;
    color: #8797a7;
    font-size: 16px;
    pointer-events: none;
}

.register-input-wrap input,
.register-input-wrap select {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 13px 0 40px;
    border: 1px solid #dfe7ef;
    border-radius: 10px;
    outline: none;
    background: #f8fafc;
    color: #172b40;
    font-family: inherit;
    font-size: 12px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.register-input-wrap input::placeholder {
    color: #a1adba;
}

.register-input-wrap input:focus,
.register-input-wrap select:focus {
    border-color: #1685ef;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(22,133,239,.10);
}

.register-input-wrap input[readonly] {
    background: #f0f4f8;
    color: #687b8c;
    cursor: not-allowed;
}

.register-input-wrap select {
    appearance: auto;
    cursor: pointer;
}

.register-select-wrap > i {
    z-index: 1;
}

/* Password toggle */
.register-password-toggle {
    position: absolute;
    right: 8px;
    width: 32px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #8191a1;
    font-size: 16px;
    cursor: pointer;
}

.register-password-toggle:hover {
    color: #087ee8;
}

.register-input-wrap:has(.register-password-toggle) input {
    padding-right: 43px;
}

/* Placement radios */
.register-position-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.register-position-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #dfe7ef;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.register-position-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.register-radio-ui {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #eaf3ff;
    color: #087ee8;
    font-size: 19px;
    transition: all .2s ease;
}

.register-position-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.register-position-text strong {
    color: #20364a;
    font-size: 13px;
    font-weight: 800;
}

.register-position-text small {
    color: #8291a0;
    font-size: 10px;
}

.register-position-card:has(input:checked) {
    border-color: #1685ef;
    background: linear-gradient(135deg, #f0f7ff, #f0fff5);
    box-shadow: 0 0 0 2px rgba(22,133,239,.08);
}

.register-position-card:has(input:checked) .register-radio-ui {
    background: linear-gradient(135deg,#0866df,#12a966);
    color: #fff;
}

.register-position-card:focus-within {
    outline: 2px solid rgba(22,133,239,.35);
    outline-offset: 2px;
}

/* e-Pin actions */
.register-pin-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #087ee8;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
}

.register-pin-link:hover {
    color: #12984e;
}

/* Submit */
.register-submit {
    width: 100%;
    min-height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 28px;
    padding: 13px 18px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(105deg,#0866df 0%,#078ce8 50%,#12a966 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 9px 22px rgba(7,117,201,.18);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.register-submit i {
    font-size: 18px;
    transition: transform .2s ease;
}

.register-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(7,117,201,.26);
}

.register-submit:hover i {
    transform: translateX(4px);
}

.register-login-link {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #edf1f5;
    text-align: center;
    color: #7b8997;
    font-size: 12px;
}

.register-login-link a {
    margin-left: 4px;
    color: #087ee8;
    font-weight: 800;
    text-decoration: none;
}

.register-login-link a:hover {
    color: #149f45;
}

.register-security-note {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 17px;
    color: #8794a1;
    font-size: 10px;
}

.register-security-note i {
    color: #159a58;
    font-size: 14px;
}

.register-inline-error {
    color: #d32f2f;
    font-size: 11px;
    margin-top: 5px;
}

/* Responsive */
@media (max-width: 991px) {
    .register-section {
        padding: 35px 14px;
    }

    .register-container {
        grid-template-columns: .7fr 1.3fr;
    }

    .register-brand {
        padding: 30px 22px;
    }

    .register-form-panel {
        padding: 30px 24px;
    }

    .register-brand h1 {
        font-size: 30px;
    }

    .register-logo img {
        width: 120px;
    }
}

@media (max-width: 767px) {
    .register-container {
        max-width: 560px;
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .register-brand {
        padding: 25px 24px;
    }

    .register-logo {
        margin-bottom: 24px;
    }

    .register-brand h1 {
        margin-top: 20px;
        font-size: 30px;
    }

    .register-brand > p {
        max-width: 480px;
    }

    .register-benefits {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 22px;
    }

    .register-brand-footer {
        padding-top: 24px;
    }

    .register-form-panel {
        padding: 28px 22px;
    }
}

@media (max-width: 480px) {
    .register-section {
        padding: 22px 10px;
    }

    .register-form-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .register-full-width {
        grid-column: auto;
    }

    .register-heading h2 {
        font-size: 24px;
    }

    .register-position-options {
        gap: 10px;
    }

    .register-position-card {
        gap: 8px;
        padding: 10px 8px;
    }

    .register-radio-ui {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 17px;
    }

    .register-position-text strong {
        font-size: 12px;
    }

    .register-position-text small {
        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .register-container *,
    .register-container *::before,
    .register-container *::after {
        transition: none !important;
    }
}


/* ========================================
   VEVA EV - CONTACT US PAGE
======================================== */

.contactus-section {
    background: #f5f8fc;
    overflow: hidden;
}

/* Hero */
.contactus-hero {
    position: relative;
    padding: 75px 20px 90px;
    overflow: hidden;
    background: linear-gradient(125deg, #07182d 0%, #0b3761 48%, #087eaa 78%, #12a96b 125%);
    text-align: center;
}

.contactus-hero::before,
.contactus-hero::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
    pointer-events: none;
}

.contactus-hero::before {
    width: 380px;
    height: 380px;
    top: -220px;
    left: -90px;
    box-shadow: 0 0 0 35px rgba(255,255,255,.025),
                0 0 0 75px rgba(255,255,255,.02);
}

.contactus-hero::after {
    width: 350px;
    height: 350px;
    right: -130px;
    bottom: -250px;
    box-shadow: 0 0 0 35px rgba(255,255,255,.025),
                0 0 0 75px rgba(255,255,255,.02);
}

.contactus-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}

.contactus-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 30px;
    background: rgba(255,255,255,.08);
    color: #c6ffdc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.contactus-eyebrow i {
    color: #48ed72;
    font-size: 15px;
}

.contactus-hero h1 {
    margin: 24px 0 16px;
    color: #fff;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.contactus-hero h1 span {
    color: #48e875;
}

.contactus-hero-inner > p {
    max-width: 630px;
    margin: 0 auto;
    color: #d3e4f1;
    font-size: 14px;
    line-height: 1.9;
}

.contactus-hero-line {
    width: 65px;
    height: 4px;
    margin: 25px auto 0;
    border-radius: 5px;
    background: linear-gradient(90deg,#1685ff,#48e875);
}

/* Main layout */
.contactus-main {
    position: relative;
    z-index: 2;
    padding: 0 20px 75px;
    margin-top: -35px;
}

.contactus-grid {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: .82fr 1.35fr;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e5edf4;
    border-radius: 23px;
    overflow: hidden;
    box-shadow: 0 25px 65px rgba(14,42,70,.10);
}

/* Contact information */
.contactus-info {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 40px 32px 28px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(150deg,#081a30 0%,#0b3a60 55%,#087d78 100%);
}

.contactus-info::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -150px;
    bottom: 80px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    box-shadow: 0 0 0 30px rgba(255,255,255,.025),
                0 0 0 60px rgba(255,255,255,.02);
    pointer-events: none;
}

.contactus-info > * {
    position: relative;
    z-index: 1;
}

.contactus-info-label {
    color: #57e985;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.contactus-info h2 {
    margin: 13px 0 13px;
    color: #fff;
    font-size: 31px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.7px;
}

.contactus-info-description {
    margin: 0;
    color: #d1e1ed;
    font-size: 12px;
    line-height: 1.9;
}

.contactus-details {
    display: grid;
    gap: 24px;
    margin-top: 35px;
}

.contactus-detail {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.contactus-detail-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    background: rgba(255,255,255,.09);
    color: #61ed89;
    font-size: 18px;
}

.contactus-detail h3 {
    margin: 2px 0 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.contactus-detail p {
    margin: 0 0 5px;
    color: #c9dce9;
    font-size: 11px;
    line-height: 1.6;
}

.contactus-detail span {
    color: #66e98e;
    font-size: 11px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.contactus-info-footer {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding-top: 35px;
    color: #d9e9f3;
    font-size: 11px;
    font-weight: 700;
}

.contactus-info-footer i {
    color: #52e77d;
    font-size: 17px;
}

/* Form panel */
.contactus-form-panel {
    min-width: 0;
    padding: 40px;
    background: #fff;
}

.contactus-form-heading {
    margin-bottom: 27px;
}

.contactus-form-kicker {
    color: #1285e7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.contactus-form-heading h2 {
    margin: 9px 0 8px;
    color: #102438;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.7px;
}

.contactus-form-heading p {
    margin: 0;
    color: #7a8998;
    font-size: 12px;
    line-height: 1.8;
}

/* Fields */
.contactus-fields {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px 17px;
}

.contactus-field {
    min-width: 0;
}

.contactus-field-full {
    grid-column: 1 / -1;
}

.contactus-field > label {
    display: block;
    margin-bottom: 8px;
    color: #26394b;
    font-size: 11px;
    font-weight: 750;
}

.contactus-field > label span {
    color: #e53935;
}

.contactus-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.contactus-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 1;
    transform: translateY(-50%);
    color: #8797a7;
    font-size: 16px;
    pointer-events: none;
}

.contactus-input-wrap input,
.contactus-input-wrap select,
.contactus-input-wrap textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #dfe7ef;
    border-radius: 10px;
    outline: none;
    background: #f8fafc;
    color: #172b40;
    font-family: inherit;
    font-size: 12px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.contactus-input-wrap input,
.contactus-input-wrap select {
    height: 47px;
    padding: 0 12px 0 41px;
}

.contactus-input-wrap textarea {
    min-height: 130px;
    padding: 15px 14px 15px 41px;
    resize: vertical;
    line-height: 1.7;
}

.contactus-input-wrap textarea + i {
    top: 17px;
    transform: none;
}

.contactus-input-wrap input::placeholder,
.contactus-input-wrap textarea::placeholder {
    color: #a0adba;
}

.contactus-input-wrap input:focus,
.contactus-input-wrap select:focus,
.contactus-input-wrap textarea:focus {
    border-color: #1685ef;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(22,133,239,.10);
}

.contactus-textarea-wrap {
    align-items: flex-start;
}

.contactus-textarea-wrap > i {
    top: 16px;
    transform: none;
}

/* Submit button */
.contactus-submit {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 25px;
    padding: 13px 18px;
    border: none;
    border-radius: 11px;
    background: linear-gradient(105deg,#0866df 0%,#078ce8 50%,#12a966 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 9px 22px rgba(7,117,201,.18);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.contactus-submit i {
    font-size: 18px;
    transition: transform .2s ease;
}

.contactus-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(7,117,201,.26);
}

.contactus-submit:hover i {
    transform: translateX(4px);
}

.contactus-privacy {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    color: #83919e;
    font-size: 10px;
}

.contactus-privacy i {
    color: #159a58;
    font-size: 14px;
}

/* Server feedback messages */
.contactus-message {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 12px 14px;
    margin-bottom: 20px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.6;
}

.contactus-error {
    color: #b42318;
    background: #fff2f0;
    border: 1px solid #ffd6d1;
}

.contactus-success {
    color: #137547;
    background: #effcf4;
    border: 1px solid #c8f0d7;
}

/* Responsive */
@media (max-width: 991px) {
    .contactus-hero {
        padding: 60px 20px 75px;
    }

    .contactus-grid {
        grid-template-columns: .8fr 1.2fr;
    }

    .contactus-info {
        padding: 32px 24px 25px;
    }

    .contactus-info h2 {
        font-size: 27px;
    }

    .contactus-form-panel {
        padding: 30px 25px;
    }
}

@media (max-width: 767px) {
    .contactus-hero {
        padding: 50px 18px 65px;
    }

    .contactus-hero h1 {
        letter-spacing: -.8px;
    }

    .contactus-main {
        padding: 0 13px 45px;
        margin-top: -25px;
    }

    .contactus-grid {
        max-width: 560px;
        grid-template-columns: 1fr;
        border-radius: 19px;
    }

    .contactus-info {
        padding: 30px 25px;
    }

    .contactus-info h2 {
        font-size: 29px;
    }

    .contactus-details {
        gap: 20px;
        margin-top: 25px;
    }

    .contactus-info-footer {
        padding-top: 25px;
    }

    .contactus-form-panel {
        padding: 30px 23px;
    }

    .contactus-form-heading h2 {
        font-size: 25px;
    }
}

@media (max-width: 480px) {
    .contactus-fields {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .contactus-field-full {
        grid-column: auto;
    }

    .contactus-hero-inner > p {
        font-size: 13px;
    }

    .contactus-form-panel {
        padding: 27px 18px;
    }

    .contactus-info {
        padding: 27px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contactus-section *,
    .contactus-section *::before,
    .contactus-section *::after {
        transition: none !important;
    }
}

/* ========================================
   VEVA EV - REGISTRATION SUCCESS PAGE
======================================== */

.registration-success-section {
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 55px 18px;
    background:
        radial-gradient(ellipse at 5% 10%, rgba(0,112,255,.08), transparent 35%),
        radial-gradient(ellipse at 95% 90%, rgba(44,210,75,.09), transparent 35%),
        #f5f8fc;
}

.registration-success-card {
    width: 100%;
    max-width: 610px;
    padding: 38px 42px;
    border: 1px solid #e4edf4;
    border-radius: 24px;
    background: #fff;
    text-align: center;
    box-shadow: 0 22px 65px rgba(14,42,70,.10);
}

.success-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.success-logo img {
    display: block;
    width: 150px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.success-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    border: 7px solid #e8f9ee;
    border-radius: 50%;
    background: linear-gradient(135deg,#0c9c54,#46dc78);
    color: #fff;
    font-size: 33px;
    box-shadow: 0 8px 22px rgba(22,163,74,.18);
}

.success-eyebrow {
    display: inline-block;
    color: #159754;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.registration-success-card h1 {
    margin: 10px 0 12px;
    color: #102438;
    font-size: clamp(27px, 4vw, 35px);
    font-weight: 800;
    letter-spacing: -.8px;
}

.registration-success-card h1 span {
    color: #118a62;
}

.success-description {
    max-width: 440px;
    margin: 0 auto;
    color: #748394;
    font-size: 13px;
    line-height: 1.8;
}

.success-details-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 30px 0 13px;
    color: #20374b;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
}

.success-details-heading i {
    color: #118a62;
    font-size: 19px;
}

.success-details {
    padding: 4px 17px;
    border: 1px solid #e3ebf2;
    border-radius: 14px;
    background: #f8fafc;
    text-align: left;
}

.success-detail-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid #e7edf3;
}

.success-detail-row:last-child {
    border-bottom: 0;
}

.success-detail-label {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 38%;
    color: #748394;
    font-size: 12px;
    font-weight: 600;
}

.success-detail-label i {
    color: #1686d9;
    font-size: 16px;
}

.success-detail-value {
    min-width: 0;
    color: #1b3044;
    font-size: 12px;
    font-weight: 800;
    text-align: right;
    overflow-wrap: anywhere;
}

.success-member-id {
    color: #087eaa;
    letter-spacing: .3px;
}

.success-sponsor-name {
    color: #748394;
    font-weight: 500;
}

.success-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 20px 0;
    color: #748394;
    font-size: 11px;
}

.success-security-note i {
    color: #149754;
    font-size: 15px;
}

.success-login-button {
    min-height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 13px 20px;
    border-radius: 11px;
    background: linear-gradient(105deg,#0866df 0%,#078ce8 50%,#12a966 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 9px 22px rgba(7,117,201,.18);
    transition: transform .2s ease, box-shadow .2s ease;
}

.success-login-button i {
    font-size: 18px;
    transition: transform .2s ease;
}

.success-login-button:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(7,117,201,.25);
}

.success-login-button:hover i {
    transform: translateX(4px);
}

.success-home-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: #5d7184;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.success-home-link:hover {
    color: #087ee8;
}

.success-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 27px;
    padding-top: 19px;
    border-top: 1px solid #edf1f5;
    color: #81909e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
}

.success-footer i {
    color: #17a65b;
    font-size: 15px;
}

@media (max-width: 575px) {
    .registration-success-section {
        min-height: auto;
        padding: 30px 12px;
    }

    .registration-success-card {
        padding: 28px 18px;
        border-radius: 19px;
    }

    .success-logo img {
        width: 125px;
    }

    .success-icon {
        width: 64px;
        height: 64px;
        font-size: 29px;
    }

    .success-detail-row {
        gap: 10px;
    }

    .success-detail-label {
        flex-basis: 40%;
        gap: 6px;
        font-size: 11px;
    }

    .success-detail-value {
        font-size: 11px;
    }

    .success-details {
        padding: 3px 11px;
    }
}


/* ==============================
   VEVA EV PHOTO GALLERY
============================== */

.veva-gallery-section {
    padding: 75px 0;
    background: #f7fafb;
}

.veva-gallery-heading {
    text-align: center;
    margin-bottom: 42px;
}

.veva-gallery-tag {
    display: inline-block;
    color: #078b68;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.veva-gallery-heading h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    color: #142b3a;
    margin: 0 0 14px;
}

.veva-gallery-heading h2 span {
    background: linear-gradient(90deg, #0879bd, #08a879);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.veva-gallery-heading p {
    color: #687782;
    font-size: 15px;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.8;
}

/* 4 x 4 desktop grid */
.veva-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.veva-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #e7edf0;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(20, 43, 58, 0.08);
}

.veva-gallery-item::after {
    content: "\002B";
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 38px;
    font-weight: 300;
    background: linear-gradient(
        135deg,
        rgba(5, 116, 190, 0.65),
        rgba(4, 160, 112, 0.65)
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.veva-gallery-item:hover::after {
    opacity: 1;
}

.veva-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.veva-gallery-item:hover img {
    transform: scale(1.07);
}

/* Lightbox overlay */
.veva-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 65px 85px;
    background: rgba(5, 12, 18, 0.96);
}

.veva-lightbox.is-open {
    display: flex;
}

.veva-lightbox-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
}

.veva-lightbox-content img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 145px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 12px 45px rgba(0, 0, 0, 0.35);
}

.veva-lightbox-counter {
    color: #fff;
    font-size: 14px;
    margin-top: 16px;
    letter-spacing: 1px;
}

.veva-lightbox-close {
    position: absolute;
    top: 18px;
    right: 28px;
    z-index: 2;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 42px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}

.veva-lightbox-close:hover {
    color: #16c994;
}

.veva-lightbox-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-size: 21px;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.veva-lightbox-nav:hover {
    background: linear-gradient(135deg, #0879bd, #08a879);
    border-color: transparent;
}

.veva-lightbox-prev {
    left: 22px;
}

.veva-lightbox-next {
    right: 22px;
}

/* Tablet */
@media (max-width: 991px) {
    .veva-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .veva-gallery-section {
        padding: 55px 0;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .veva-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .veva-gallery-heading {
        margin-bottom: 28px;
    }

    .veva-gallery-heading p {
        font-size: 14px;
        padding: 0 8px;
    }

    .veva-gallery-item {
        border-radius: 8px;
    }

    .veva-lightbox {
        padding: 60px 45px;
    }

    .veva-lightbox-content img {
        max-height: calc(100vh - 130px);
    }

    .veva-lightbox-close {
        top: 15px;
        right: 16px;
    }

    .veva-lightbox-nav {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .veva-lightbox-prev {
        left: 5px;
    }

    .veva-lightbox-next {
        right: 5px;
    }
}

/* ===== VEVA EV LEGAL DOCUMENTS ===== */

.veva-legal-section {
    padding: 75px 0;
    background: #f7fafb;
}

.veva-legal-heading {
    text-align: center;
    margin-bottom: 42px;
}

.veva-legal-tag {
    display: inline-block;
    margin-bottom: 12px;
    color: #07966d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.veva-legal-heading h2 {
    margin: 0 0 14px;
    color: #142b3a;
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 800;
}

.veva-legal-heading h2 span {
    background: linear-gradient(90deg, #0879bd, #08a879);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.veva-legal-heading p {
    max-width: 650px;
    margin: 0 auto;
    color: #687782;
    font-size: 15px;
    line-height: 1.8;
}

/* 3 columns x 3 rows on desktop */
.veva-legal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.veva-legal-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e5ecef;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 22px rgba(20, 43, 58, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.veva-legal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(20, 43, 58, 0.12);
}

.veva-legal-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 245px;
    overflow: hidden;
    padding: 12px;
    background: #eef3f5;
    cursor: zoom-in;
}

.veva-legal-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.veva-legal-card:hover .veva-legal-image img {
    transform: scale(1.035);
}

.veva-legal-view {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(
        135deg,
        rgba(8, 121, 189, 0.78),
        rgba(8, 168, 121, 0.78)
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.veva-legal-card:hover .veva-legal-view,
.veva-legal-card:focus-within .veva-legal-view {
    opacity: 1;
}

.veva-legal-info {
    padding: 20px 20px 22px;
}

.veva-legal-number {
    display: block;
    margin-bottom: 8px;
    color: #07966d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.veva-legal-info h3 {
    margin: 0 0 8px;
    color: #142b3a;
    font-size: 18px;
    font-weight: 750;
    line-height: 1.45;
}

.veva-legal-info p {
    margin: 0;
    color: #75828b;
    font-size: 13px;
    line-height: 1.6;
}

/* ===== DOCUMENT LIGHTBOX ===== */

.veva-document-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 65px 85px;
    background: rgba(5, 12, 18, 0.96);
}

.veva-document-lightbox.is-open {
    display: flex;
}

.veva-document-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
}

.veva-document-preview img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 155px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 5px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.veva-document-preview h3 {
    margin: 15px 0 5px;
    color: #fff;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
}

.veva-document-preview span {
    color: #b9c8d1;
    font-size: 13px;
}

.veva-document-close {
    position: absolute;
    top: 15px;
    right: 25px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 43px;
    line-height: 1;
    cursor: pointer;
}

.veva-document-close:hover {
    color: #12c995;
}

.veva-document-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.25s ease;
}

.veva-document-nav:hover {
    background: linear-gradient(135deg, #0879bd, #08a879);
}

.veva-document-prev {
    left: 22px;
}

.veva-document-next {
    right: 22px;
}

/* Tablet */
@media (max-width: 991px) {
    .veva-legal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .veva-legal-section {
        padding: 55px 0;
    }

    .veva-legal-image {
        height: 225px;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .veva-legal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .veva-legal-image {
        height: 155px;
        padding: 8px;
    }

    .veva-legal-info {
        padding: 14px 12px 16px;
    }

    .veva-legal-info h3 {
        font-size: 15px;
    }

    .veva-legal-info p {
        font-size: 12px;
    }

    .veva-legal-number {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .veva-legal-heading p {
        padding: 0 10px;
        font-size: 14px;
    }

    .veva-document-lightbox {
        padding: 60px 42px;
    }

    .veva-document-preview img {
        max-height: calc(100vh - 145px);
    }

    .veva-document-nav {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .veva-document-prev {
        left: 4px;
    }

    .veva-document-next {
        right: 4px;
    }

    .veva-document-close {
        top: 14px;
        right: 15px;
    }
}
/* Mobile: Single card per row */
@media (max-width: 575px) {
    .veva-legal-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .veva-legal-image {
        height: 250px;
        padding: 10px;
    }

    .veva-legal-info {
        padding: 16px;
    }

    .veva-legal-info h3 {
        font-size: 16px;
    }

    .veva-legal-info p {
        font-size: 13px;
    }

    .veva-legal-number {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .veva-legal-heading p {
        padding: 0 10px;
        font-size: 14px;
    }

    .veva-document-lightbox {
        padding: 60px 42px;
    }

    .veva-document-preview img {
        max-height: calc(100vh - 145px);
    }

    .veva-document-nav {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .veva-document-prev {
        left: 4px;
    }

    .veva-document-next {
        right: 4px;
    }

    .veva-document-close {
        top: 14px;
        right: 15px;
    }
}









/* ===== VEVA EV PRODUCT LISTING ===== */

.veva-products-section {
    padding: 75px 0 85px;
    background: #f6f9fb;
}

.veva-products-heading {
    max-width: 720px;
    margin: 0 auto 38px;
    text-align: center;
}

.veva-products-tag {
    display: inline-block;
    margin-bottom: 12px;
    color: #07966d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.veva-products-heading h2 {
    margin: 0 0 14px;
    color: #142b3a;
    font-size: clamp(29px, 4vw, 43px);
    font-weight: 800;
    line-height: 1.25;
}

.veva-products-heading h2 span {
    background: linear-gradient(90deg, #0879bd, #08a879);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.veva-products-heading p {
    margin: 0;
    color: #6b7a85;
    font-size: 15px;
    line-height: 1.8;
}

/* Search and sort */
.veva-products-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.veva-products-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(100%, 380px);
    min-height: 48px;
    padding: 0 15px;
    border: 1px solid #e1e9ed;
    border-radius: 8px;
    background: #fff;
    color: #74838d;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.veva-products-search:focus-within {
    border-color: #07966d;
    box-shadow: 0 0 0 3px rgba(8, 168, 121, .10);
}

.veva-products-search i {
    font-size: 16px;
}

.veva-products-search input {
    width: 100%;
    min-width: 0;
    padding: 12px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #142b3a;
    font-size: 14px;
}

.veva-products-search input::placeholder {
    color: #98a5ad;
}

.veva-products-sort {
    display: flex;
    align-items: center;
    gap: 10px;
}

.veva-products-sort label {
    margin: 0;
    color: #647581;
    font-size: 13px;
    white-space: nowrap;
}

.veva-products-sort select {
    min-height: 46px;
    padding: 0 32px 0 12px;
    border: 1px solid #e1e9ed;
    border-radius: 8px;
    outline: none;
    background-color: #fff;
    color: #142b3a;
    font-size: 13px;
    cursor: pointer;
}

/* Category filters */
.veva-product-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 27px;
}

.veva-filter-btn {
    padding: 10px 18px;
    border: 1px solid #e0e8ec;
    border-radius: 6px;
    background: #fff;
    color: #536572;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s ease;
}

.veva-filter-btn:hover,
.veva-filter-btn.active {
    border-color: #0879bd;
    background: linear-gradient(110deg, #0879bd, #08a879);
    color: #fff;
}

/* Result count */
.veva-products-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 17px;
    color: #71808a;
    font-size: 12px;
}

.veva-products-result span:last-child {
    color: #07966d;
    font-weight: 600;
}

.veva-products-result i {
    margin-left: 3px;
}

/* Product grid: 3 desktop columns */
.veva-products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.veva-product-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e7edf0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 22px rgba(20, 43, 58, .045);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.veva-product-card:hover {
    transform: translateY(-5px);
    border-color: #d4e9e3;
    box-shadow: 0 15px 35px rgba(20, 43, 58, .10);
}

.veva-product-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 245px;
    overflow: hidden;
    padding: 15px;
    background: #edf3f5;
}

.veva-product-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .45s ease;
}

.veva-product-card:hover .veva-product-image img {
    transform: scale(1.055);
}

.veva-product-badge {
    position: absolute;
    z-index: 1;
    top: 14px;
    left: 14px;
    padding: 6px 9px;
    border-radius: 4px;
    background: linear-gradient(110deg, #0879bd, #08a879);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .8px;
}

.veva-product-image-label {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 5px;
    background: rgba(255,255,255,.92);
    color: #425766;
    font-size: 10px;
    font-weight: 700;
}

.veva-product-image-label i {
    color: #07966d;
}

.veva-product-content {
    padding: 21px 21px 18px;
}

.veva-product-category {
    display: inline-block;
    margin-bottom: 8px;
    color: #07966d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.veva-product-content h3 {
    margin: 0 0 9px;
    color: #142b3a;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.4;
}

.veva-product-content p {
    min-height: 44px;
    margin: 0;
    color: #74828c;
    font-size: 13px;
    line-height: 1.7;
}

.veva-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 19px;
    padding-top: 15px;
    border-top: 1px solid #edf1f3;
}

.veva-product-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #0879bd;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: color .2s ease, gap .2s ease;
}

.veva-product-link:hover {
    gap: 11px;
    color: #07966d;
}

.veva-product-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #eaf7f2;
    color: #07966d;
    font-size: 19px;
}

.veva-products-empty {
    padding: 45px 15px;
    text-align: center;
}

.veva-products-empty[hidden] {
    display: none !important;
}

.veva-products-empty > i {
    color: #07966d;
    font-size: 36px;
}

.veva-products-empty h3 {
    margin: 12px 0 8px;
    color: #142b3a;
    font-size: 20px;
    font-weight: 800;
}

.veva-products-empty p {
    margin: 0;
    color: #74828c;
    font-size: 14px;
}

/* Tablet */
@media (max-width: 991px) {
    .veva-products-section {
        padding: 55px 0 65px;
    }

    .veva-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .veva-product-image {
        height: 225px;
    }

    .veva-product-content {
        padding: 18px;
    }
}

/* Mobile: one product per row */
@media (max-width: 575px) {
    .veva-products-section {
        padding: 42px 0 50px;
    }

    .veva-products-heading {
        margin-bottom: 27px;
    }

    .veva-products-heading p {
        padding: 0 8px;
        font-size: 14px;
    }

    .veva-products-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 18px;
    }

    .veva-products-search {
        width: 100%;
    }

    .veva-products-sort {
        justify-content: space-between;
    }

    .veva-products-sort select {
        flex: 1;
        max-width: 220px;
    }

    .veva-product-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 7px;
        gap: 8px;
        scrollbar-width: thin;
    }

    .veva-filter-btn {
        flex: 0 0 auto;
        padding: 9px 13px;
        font-size: 12px;
    }

    .veva-products-result {
        align-items: flex-start;
        font-size: 11px;
    }

    .veva-products-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .veva-product-image {
        height: 250px;
        padding: 12px;
    }

    .veva-product-content {
        padding: 18px;
    }

    .veva-product-content h3 {
        font-size: 18px;
    }

    .veva-product-content p {
        min-height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .veva-product-card,
    .veva-product-image img,
    .veva-filter-btn,
    .veva-product-link {
        transition: none;
    }
}