/* ===== Base / tokens ===== */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --brand-500: #1F6F79;
  --brand-600: #17565E;

  --text-900: #0F172A;
  --text-800: #1F2937;
  --text-600: #475569;

  --radius-lg: 24px;
  --radius-md: 16px;

  --shadow-sm: 0 2px 8px rgba(2, 8, 20, .06);
  --shadow-md: 0 10px 24px rgba(2, 8, 20, .08);
  --shadow-lg: 0 20px 40px rgba(2, 8, 20, .12);

  /* Card theme (mobile = light) */
  --card-bg:       #E6F4F6;
  --card-text:     #1F2937;
  --card-heading:  #0F5A63;
  --card-border:   #CFE7EA;
  --icon-pill:     #F8FBFC;
}

/* Desktop: invert cards (dark) */
@media (min-width: 1000px){
  :root{
    --card-bg:       var(--brand-500);
    --card-text:     #EAF4F6;
    --card-heading:  #FFFFFF;
    --card-border:   rgba(255,255,255,.12);
    --icon-pill:     rgba(255,255,255,.16);
  }
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text-800);
  background: #FBFDFE;
  overflow-x: hidden;
}

/* ===== Navbar ===== */
.navbar{
  position: sticky; top: 0; z-index: 40;
  height: 72px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: saturate(180%) blur(8px);
  background: rgba(255,255,255,.86);
  border-bottom: 1px solid #EEF2F4;
}

.navbar-logo{
  position: absolute; left: 24px;
  display: flex; align-items: center;
}
.navbar-logo img{ height: 36px; width: auto; }

.footer-logo{ height: auto; width: 160px; }

.navbarul{
  display: flex; gap: 48px;
  list-style: none; padding: 0; margin: 0;
  font-size: 18px; font-weight: 500;
}

.navbarli a{ text-decoration: none; color: var(--text-800); }
.navbarli a:hover{ color: var(--brand-600); }

.signup-button{
  position: absolute; right: 24px;
  background: var(--brand-500); color: #fff;
  padding: 10px 22px; border-radius: 999px;
  text-decoration: none; font-size: 16px; font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: transform .08s ease, background .2s ease;
}
.signup-button:hover{ background: var(--brand-600); }
.signup-button:active{ transform: translateY(1px); }

/* Desktop auth elements — visible on desktop, hidden on mobile */
.nav-desktop-auth{
  position: absolute; right: 24px;
  display: flex; align-items: center;
}

/* Mobile-only right cluster — hidden on desktop */
.navbar-mobile-right{ display: none; }

.mobile-nav-dashboard{
  font-size: 15px; font-weight: 500;
  color: var(--text-800); text-decoration: none;
}
.mobile-nav-dashboard:hover{ color: var(--brand-500); }

.nav-user-icon{
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-500); color: #fff;
  text-decoration: none;
  transition: background .2s ease;
}
.nav-user-icon:hover{ background: var(--brand-600); }

/* ===== Hero ===== */
.imgmain{
  max-width: 1200px; margin: 24px auto 0;
  padding: 0 20px;
  display: flex; justify-content: center;
}
.landingimg{
  width: 100%; display: block; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ===== “How it works” cards ===== */
.row-container{
  display: flex; justify-content: center; gap: 32px;
  padding: 40px 20px 0;
  flex-wrap: wrap;
}

.box{
  width: min(560px, 100%);
  background: var(--card-bg);
  color: var(--card-text);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.box-header{
  padding: 22px 22px 8px;
  display: flex; align-items: center; gap: 14px;
}

.iconsquare{
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--icon-pill);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.iconsquare img{
  width: 26px; height: 26px; object-fit: contain;
  filter: none; opacity: 1; /* keep original icon colors */
}

.icon-text{
  margin: 0;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: var(--card-heading);
}

.description{ padding: 0 22px 22px; }
.descriptiontext{
  margin: 0 0 8px 0;
  color: var(--card-text);
  font-size: 16px; line-height: 1.65;
}

/* ===== Slider (brand logos) ===== */
:root{
  --slide-w: 240px;
  --slide-h: 160px;
  --slide-gap: 40px;
  --slide-speed: 38s;
}

.slider{
  height: calc(var(--slide-h) + 70px);
  margin-top: 48px;
  background: #1C232B;
  display: flex; align-items: center; overflow: hidden;
  padding: 20px 0;
}
.slide-track{
  display: flex; gap: var(--slide-gap); width: max-content;
  animation: scroll var(--slide-speed) linear infinite;
}
.slide{
  width: var(--slide-w); height: var(--slide-h);
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.imgslide{ width: 80%; height: 80%; object-fit: contain; display: block; }

@keyframes scroll{
  0% { transform: translateX(0); }
  100%{ transform: translateX(calc((var(--slide-w) + var(--slide-gap)) * -9)); }
}

/* ===== Reviews (kept) ===== */
.reviews-section{
  background: #1C232B; color: #fff; margin-top: 60px;
  padding: 60px 20px; text-align: center;
}
.reviews-title{ font-size: 32px; margin-bottom: 32px; }
.reviews-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px; max-width: 900px; margin: 0 auto;
}
.review-card{
  background: #fff; color: #333; padding: 20px 24px; border-radius: 12px;
  box-shadow: var(--shadow-md);
}

/* ===== Footer ===== */
.footer-content{
  display: flex; flex-wrap: wrap; gap: 40px;
  background: #1C232B; color: #fff;
  padding: 40px 20px; justify-content: center; margin-top: 60px;
}
.footer-left{ max-width: 520px; display: flex; flex-direction: column; gap: 16px; }
.footer-description{ max-width: 420px; color: #C8D2DA; font-size: 14px; }

.client-button{
  align-self: flex-start;
  background: #fff; color: #1C232B;
  padding: 10px 18px; border-radius: 999px; text-decoration: none; font-weight: 600;
}

.footer-right{ display: flex; flex-direction: column; gap: 22px; }
.footer-contact p{ margin: 0; font-size: 14px; }

.footer-links{ display: flex; gap: 48px; flex-wrap: wrap; }
.footer-column h4{ margin: 0 0 8px; font-size: 16px; }
.footer-column a{ color: #A8B3BC; text-decoration: none; font-size: 14px; display: block; margin: 6px 0; }
.footer-column a:hover{ color: #fff; }

.footer-bottom-bar{
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; background: #1C232B; color: #fff; font-size: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.btt{ color: #fff; }

/* ===== Responsive tweaks ===== */
@media (max-width: 1000px){
  .navbar{ height: 64px; }

  /* Hide desktop nav links and signup button on mobile */
  .navbar-center{ display: none; }
  .nav-desktop-auth{ display: none !important; }
  /* Hide the desktop standalone signup button, but keep the one inside the mobile cluster */
  .signup-button:not(.navbar-mobile-right .signup-button){ display: none !important; }

  /* Show the mobile right cluster */
  .navbar-mobile-right{
    display: flex; align-items: center; gap: 14px;
    position: absolute; right: 16px;
  }
  /* Reset the signup button inside the mobile cluster to a compact inline style */
  .navbar-mobile-right .signup-button{
    position: static;
    padding: 7px 16px;
    font-size: 14px;
    box-shadow: none;
  }

  .imgmain{ margin-top: 16px; }

  .row-container{ gap: 16px; padding: 24px 16px 0; }
  .box{ border-radius: 14px; }
  .box-header{ padding: 16px 16px 8px; }
  .iconsquare{ width: 44px; height: 44px; }
  .icon-text{ font-size: 20px; }
  .description{ padding: 0 16px 16px; }
  .descriptiontext{ font-size: 15px; }

  :root{ --slide-w: 180px; --slide-h: 120px; --slide-gap: 24px; --slide-speed: 32s; }
}