:root {
  --color-primary: #0A1A2F;   /* deep navy */
  --color-accent: #06B6D4;    /* electric blue */
  --color-secondary: #F5F7FA; /* light gray background */
  --color-neutral: #E5E7EB;   /* soft neutral */
  --color-highlight: #0891B2; /* darker blue */
  --color-text-dark: #111827; /* near black */
  --color-text-light: #F9FAFB;/* near white */
}
/* ---------------------- GLOBAL -------------------------- */
body {
    background-color: white;
    font-family: 'Raleway', sans-serif;
} 

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* section padding consistent */
.section-padding {
  padding: 3rem 1.5rem;        /* base mobile padding */
}

@media (min-width: 768px) {    /* tablets and up */
  .section-padding {
    padding: 4rem 3rem;
  }
}

@media (min-width: 1200px) {   /* desktops and up */
  .section-padding {
    padding: 5rem 6rem;
  }
}

/* normalize every container INSIDE sections */
.section-padding > .container {
  padding-left: 1rem;       /* comfy side “safe area” on phones */
  padding-right: 1rem;
}

@media (min-width: 576px){
  .section-padding > .container {
    padding-left: 1.5rem;   /* small devices/tablets */
    padding-right: 1.5rem;
  }
}
@media (min-width: 768px){
  .section-padding > .container {
    padding-left: 2rem;     /* tablet */
    padding-right: 2rem;
  }
}

/* ---------------------- NAVBAR -------------------------- */
.navbar-custom {
    --bs-navbar-bg: #0A1A2F;
    --bs-navbar-color: var(--color-text-light); /* default links */
    --bs-navbar-hover-color: var(--color-accent); /* hover/focus */
    --bs-navbar-brand-color: white; /* brand */
    --bs-navbar-brand-hover-color: var(--color-accent);
    background-color: var(--color-primary);
}

.navbar-contact-btn {
    color: white;
    border-color: var(--color-accent);
    border-radius: 1rem;
}

.navbar-contact-btn:hover {
    background-color: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}

.logo {
    transform: scale(4.0); /* 150% zoom */
    transform-origin: center; /* keep it centered */
}


@media (max-width: 991.98px) { /* below lg breakpoint */
  .navbar.sticky-top {
    position: static !important; /* disable menu stickiness */
  }
}

#navbar .nav-link.active {
  color: var(--color-accent) !important;
  font-weight: 600;
}

/* neutralize active state just for the contact button */
#navbar .navbar-contact-btn.active {
  background: transparent !important;
  color: #fff !important;
  border-color: var(--color-accent) !important;
  box-shadow: none !important;
}

/* ---------------------- HERO -------------------------- */
.hero-wrapper {
  background-color: #0A1A2F;
  color: var(--color-text-light);
}

.hero-btn {
  color: white; /* text color */
  background-color: var(--color-accent);
  border-radius: 1rem;
  width: 150px;
}

.hero-btn:hover {
  color: white;
  background-color: #0891B2;
}

/* ---------------------- INTRO -------------------------- */
.intro-wrapper {
  min-height: 100vh; /* adjust */
}

.demo-pic img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  filter: drop-shadow(0 12px 20px rgba(10,26,47,0.25));
}

/* ---------------------- FEATURES -------------------------- */
.card-feature {
  border: 1px solid white;
  border-radius: 1rem;
  background-color: white;
  box-shadow: 0 12px 20px rgba(0,0,0,0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.card-feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

.card-icon {
  color: var(--color-accent);
}

.card-text {
  color: #6b7280;
}

.card .bi {
  display: block;       /* ignore text baseline */
  line-height: 1;       /* kill extra vertical space */
  font-size: 2.5rem;    /* same size for all */
  margin: .5rem auto 1rem; /* centers + spaces */
}

/* ---------------------- HOW IT WORKS V1 -------------------------- */
.how-it-works-wrapper {
    background-color: white;
}

/* How It Works - simple numbered steps */
.hiw-step {
  text-align: center;
  padding: 1rem;
}

.hiw-num {
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.5rem);
  color: var(--color-accent); 
  margin-bottom: .25rem;
  line-height: 1;
}

.hiw-title {
  font-weight: 600;
  margin-bottom: .25rem;
}

.hiw-text {
  color: #6b7280;   /* muted gray */
  font-size: .95rem;
  margin-bottom: 0;
}

/* ---------------------- HOW IT WORKS V2-------------------------- */

.timeline-section {
  position: relative;
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); /* text | rail | image */
  row-gap: 2.5rem;
  column-gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* one continuous vertical rail */
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;                 /* rail always stays dead center */
  transform: translateX(-50%);
  width: 4px;
  background: var(--color-neutral);
  border-radius: 2px;
}

/* left column (text) */
.timeline .step-text {
  grid-column: 1;
  align-self: center;
}

/* middle column (dot) */
.timeline .step-dot {
  grid-column: 2;
  align-self: center;
  justify-self: center;      /* centers dot on the rail column */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 4px solid var(--color-accent);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--color-accent);
  z-index: 1;                /* sits above the rail */
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

/* Right column (image) */
.timeline .step-media {
  grid-column: 3;
  align-self: center;
}

.timeline h5 {
  margin-bottom: .25rem;
  font-weight: 700;
}

.timeline p {
  margin: 0;
  color: #6b7280;
}

/* images */
.timeline .step-media img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  filter: drop-shadow(0 12px 20px rgba(10,26,47,0.25));
}

/* keep a real center rail on phones, just narrow the rail column */
@media (max-width: 767.98px) {
  .timeline {
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    row-gap: 1.75rem;
  }
  .timeline .step-dot {
    width: 36px;
    height: 36px;
    border-width: 3px;
    font-size: .95rem;
  }
}

/* ------------------------- USE CASES --------------------------- */
.usecases-wrapper {
  background: white;
}

.usecase-item {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.usecase-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

.usecase-item h5 {
  margin-bottom: .25rem;
}

#use-cases .badge {
  font-weight: 600;
}

.custom-badge {
    background-color: white;
    border: 1.5px solid var(--color-accent);
    color: var(--color-accent);
    font-weight: 600;
}


/* ---------------------- ABOUT MISSION -------------------------- */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.mission-wrapper {
    background-color: var(--color-primary);
    color: white;
    padding: 0 !important;
}

.mission-btn {
    --bs-btn-color: white; /* text color */
    --bs-btn-hover-color: white; /* text color on hover */
    --bs-btn-bg: var(--color-accent);
    --bs-btn-hover-bg: #0891B2;
    --bs-btn-border-radius: 1rem;
    width: 160px;
}

/* ---------------------- CONTACT FORM -------------------------- */

.contact-list i {
    color: var(--color-accent);
}

.contact-list a {
    color:#1b3c53;
}

.contact-list:hover a {
    color:var(--color-accent);
}

.form-link-privacy {
    color: inherit;
}

.form-link-privacy:hover {
    color: var(--color-accent);
}

.form-link-tos {
    color: inherit;
}

.form-link-tos:hover {
    color: var(--color-accent);
}

.submit-wrapper {
  display: flex;
  flex-direction: column; /* stack button and messages vertically */
  align-items: center;    /* center horizontally */
}

.cta-text {
    color: var(--color-accent);
}
/* ---------------------- FOOTER -------------------------- */
.footer-wrapper {
    background-color: var(--color-primary);
    color: white;
}

footer a {
    color: white;
}

footer a:hover {
  color: var(--color-accent);
}

.footer-bar{
  font-size: 12px;
}

.footer a i {
  transition: color 0.3s ease;
}

.footer a:hover i {
  color: var(--color-accent) !important; /* same hover color as link */
}


/* ---------------------- PRIVACY POLICY & TOS -------------------------- */
.privacy-policy-wrapper, .tos-wraper {
    background-color: var(--color-secondary);
}