/* ============================================================
   SISGAIN — End-to-End Product Engineering page
   Scoped styles: every rule starts with .ete-page so nothing
   leaks into global/body styles. No external font-family is
   loaded — system font stack keeps LCP/CLS fast.
   ============================================================ */

.ete-page {
  --ete-black: #0A1128;
  --ete-navy: #101C40;
  --ete-blue: #1D5CF0;
  --ete-blue-dark: #123B9C;
  --ete-blue-light: #EAF1FF;
  --ete-white: #FFFFFF;
  --ete-bg-alt: #F5F8FD;
  --ete-text: #1B2033;
  --ete-text-muted: #5B6377;
  --ete-border: #E4E9F2;
  --ete-radius: 14px;
  --ete-shadow: 0 10px 30px rgba(16, 28, 64, 0.08);
  --ete-shadow-hover: 0 16px 40px rgba(29, 92, 240, 0.18);
  --ete-transition: all .3s ease;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ete-text);
  background: var(--ete-white);
  overflow-x: hidden;
}

.ete-page *,
.ete-page *::before,
.ete-page *::after { box-sizing: border-box; }

.ete-page img { max-width: 100%; height: auto; display: block; }

.ete-page a { text-decoration: none; color: inherit; }
.ete-page a:hover, .ete-page a:focus { text-decoration: none; color: var(--ete-blue); }

.ete-page button:focus,
.ete-page a:focus,
.ete-page input:focus,
.ete-page textarea:focus {
  outline: 3px solid rgba(29, 92, 240, .4);
  outline-offset: 2px;
}
.product-heading{
  color: #1b5ef7;
 font-size: 2.6rem;
 font-weight: 700;

}
/* ---- Base section rhythm : 30px vertical padding everywhere ---- */
.ete-page .ete-section { padding: 30px 0; }
.ete-page .ete-section:nth-of-type(even) { background: var(--ete-bg-alt); }

.ete-page .ete-section__title { font-size: 2rem; padding-bottom: 1rem; }
.ete-page .ete-section__lead { color: var(--ete-text-muted); max-width: 760px; margin: 0 auto 1.5rem; }
.ete-page .text-center .ete-section__lead { margin-left: auto; margin-right: auto; }

.ete-page .ete-eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ete-blue);
  margin-bottom: 1rem;
}

.ete-page .ete-inline-h3 { font-size: 1.05rem; margin-top: 1rem; }

/* ---- Buttons ---- */
.ete-page .btn { border-radius: 50px; font-weight: 600; padding: .65rem 1.5rem; cursor: pointer; transition: var(--ete-transition); border: 2px solid transparent; }
.ete-page .ete-btn-lg { padding: .85rem 2rem; font-size: 1.05rem; }
.ete-page .ete-btn-primary { background: var(--ete-blue); color: var(--ete-white); }
.ete-page .ete-btn-primary:hover, .ete-page .ete-btn-primary:focus { background: var(--ete-blue-dark); color: var(--ete-white); transform: translateY(-3px); box-shadow: var(--ete-shadow-hover); }
.ete-page .ete-btn-outline { background: transparent; color: var(--ete-black); border-color: var(--ete-border); }
.ete-page .ete-btn-outline:hover { background: var(--ete-black); color: var(--ete-white); border-color: var(--ete-black); transform: translateY(-3px); }
.ete-page .ete-btn-outline-light { background: transparent; color: var(--ete-white); border-color: rgba(255,255,255,.35); }
.ete-page .ete-btn-outline-light:hover { background: var(--ete-blue); border-color: var(--ete-blue); color: var(--ete-white); }

/* ---- Hero ---- */
.ete-page .ete-hero { padding-top: 60px; padding-bottom: 60px; background: linear-gradient(180deg, var(--ete-blue-light) 0%, var(--ete-white) 100%); }
.ete-page .ete-hero__title { font-size: 2.6rem; line-height: 1.15; margin-bottom: 1.1rem; }
.ete-page .ete-hero__lead { font-size: 1.05rem; margin-bottom: 1.8rem; }
.ete-page .ete-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.ete-page .ete-hero__highlights-col { margin-top: 1.5rem; }
.ete-page .ete-hero__highlights { display: flex; flex-wrap: nowrap; gap: .5rem 1.5rem; overflow-x: auto; overflow-y: hidden; padding-bottom: .3rem; margin: 0; }
.ete-page .ete-hero__highlights::-webkit-scrollbar { height: 4px; }
.ete-page .ete-hero__highlights::-webkit-scrollbar-thumb { background: var(--ete-border); border-radius: 10px; }
.ete-page .ete-hero__highlights li { font-weight: 600; font-size: .92rem; }
.ete-page .ete-hero__highlights i { color: var(--ete-blue); margin-right: .35rem; }
.ete-page .ete-hero__media { position: relative; }
.ete-page .ete-hero__img { border-radius: var(--ete-radius); box-shadow: var(--ete-shadow); animation: ete-float 5s ease-in-out infinite; }
@media (max-width: 576px) {
  .ete-page .ete-hero__highlights {
    flex-wrap: wrap;
  }
}
@keyframes ete-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ---- Trusted by / logos / stats ---- */

.sg-logos{
  /* scoped tokens */
  --line: rgba(255,255,255,0.07);
  --line-2: rgba(255,255,255,0.12);
 
  position: relative;
  padding: 26px 0;
  background: #f5f8fd;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  /* mask removed from here — it was fading the section's own dark background to
     transparent at the edges, letting the page's white background show through */
}
 
.sg-logos__track{
  display: flex;
  gap: 42px;
  align-items: center;
  width: max-content;
  animation: sg-logos-marq 42s linear infinite;
  /* mask now lives on the track only, so it fades the logo strip itself
     while the section background underneath stays solid #07080b */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
@keyframes sg-logos-marq{ to{ transform: translateX(-50%); } }
 
.sg-logos__item{
  height: 56px;
  min-width: 150px;
  padding: 12px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, border-color .25s ease;
}
.sg-logos__item:hover{
  transform: translateY(-2px);
  border-color: var(--line-2);
}
.sg-logos__item img{
  max-width: 118px;
  max-height: 34px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.sg-logos{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 26px 0;
}

.sg-logos .container{
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.sg-logos__track{
    width: max-content;
}
 
@media (prefers-reduced-motion: reduce){
  .sg-logos__track{ animation: none; }
}

.ete-page .ete-stats { margin-top: 1rem; }
.ete-page .ete-stat-card { background: var(--ete-white); border: 1px solid var(--ete-border); border-radius: var(--ete-radius); padding: 1.6rem 1rem; text-align: center; height: 100%; transition: var(--ete-transition); }
.ete-page .ete-stat-card:hover { transform: translateY(-6px); box-shadow: var(--ete-shadow-hover); border-color: transparent; }
.ete-page .ete-stat-card i { font-size: 1.6rem; color: var(--ete-blue); margin-bottom: .6rem; }
.ete-page .ete-stat-card__value { font-size: 1.7rem; font-weight: 800; color: var(--ete-black); }
.ete-page .ete-stat-card__label { font-weight: 700; font-size: .85rem; margin: .2rem 0 .4rem; }
.ete-page .ete-stat-card__desc { font-size: .78rem; margin: 0; }

/* ---- What is section / connected circular loop graphic ---- */
.ete-page .ete-loop-graphic { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1 / 1; margin: 0 auto; }
.ete-page .ete-loop-graphic__ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 78%; height: 78%; border-radius: 50%; border: 2px dashed rgba(29, 92, 240, .35);
}
.ete-page .ete-loop-graphic__center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40%; height: 40%; border-radius: 50%; background: var(--ete-black); color: var(--ete-white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font-weight: 700; font-size: .85rem; box-shadow: var(--ete-shadow); z-index: 2;
}
.ete-page .ete-loop-graphic__center i { font-size: 1.4rem; margin-bottom: .4rem; color: var(--ete-blue); }
.ete-page .ete-loop-node {
  position: absolute; background: var(--ete-white); border: 1px solid var(--ete-border); border-radius: 50px;
  padding: .45rem 1rem; font-size: .76rem; font-weight: 700; box-shadow: var(--ete-shadow); display: flex; align-items: center; gap: .35rem;
  color: var(--ete-text); transform: translate(-50%, -50%); white-space: nowrap; z-index: 3; transition: var(--ete-transition);
}
.ete-page .ete-loop-node:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: var(--ete-shadow-hover); }
.ete-page .ete-loop-node i { color: var(--ete-blue); }
.ete-page .ete-loop-arrow { position: absolute; color: var(--ete-blue); font-size: 1.3rem; z-index: 1; }

.ete-page .ete-check-list li { margin-bottom: .5rem; font-weight: 600; color: var(--ete-text); }
.ete-page .ete-check-list i { color: var(--ete-blue); margin-right: .5rem; }

/* ---- Grids: center a leftover last row instead of leaving it left-aligned ---- */
.ete-page .ete-grid-row { justify-content: center; }

/* ---- Lifecycle timeline ---- */
.ete-page .ete-timeline { display: flex; overflow-x: auto; overflow-y: hidden; gap: 0; padding: 20px 4px 1rem 20px; scroll-snap-type: x proximity; cursor: grab; user-select: none; }
.ete-page .ete-timeline:active,
.ete-page .ete-process-track:active { cursor: grabbing; }
.ete-page .ete-timeline::-webkit-scrollbar { height: 6px; }
.ete-page .ete-timeline::-webkit-scrollbar-thumb { background: var(--ete-border); border-radius: 10px; }
.ete-page .ete-timeline__item { display: flex; align-items: center; flex: 0 0 auto; scroll-snap-align: start; }
.ete-page .ete-timeline__card {
  background: var(--ete-white); border: 1px solid var(--ete-border); border-radius: var(--ete-radius);
  padding: 1.6rem 1.3rem; width: 250px; min-height: 260px; position: relative; transition: var(--ete-transition);
}
.ete-page .ete-timeline__card:hover { transform: translateY(-6px); box-shadow: var(--ete-shadow-hover); border-color: transparent; }
.ete-page .ete-timeline__num { position: absolute; top: -12px; left: -1px; background: var(--ete-black); color: var(--ete-white); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; }
.ete-page .ete-timeline__card i { font-size: 1.4rem; color: var(--ete-blue); margin-bottom: .6rem; }
.ete-page .ete-timeline__card h3 { font-size: 1.05rem; }
.ete-page .ete-timeline__card p { font-size: .85rem; margin-bottom: .6rem; }
.ete-page .ete-outcome { font-size: .78rem; color: var(--ete-blue-dark); background: var(--ete-blue-light); padding: .5rem .6rem; border-radius: 8px; }
.ete-page .ete-timeline__arrow { color: var(--ete-border); font-size: 1.2rem; margin: 0 .6rem; flex: 0 0 auto; }

/* ---- Generic card grid: services / capabilities / tech / mini ---- */
.ete-page .ete-card, .ete-page .ete-cap-card, .ete-page .ete-tech-card, .ete-page .ete-mini-card, .ete-page .ete-industry-card {
  background: var(--ete-white); border: 1px solid var(--ete-border); border-radius: var(--ete-radius);
  padding: 1.6rem 1.3rem; height: 100%; transition: var(--ete-transition);
}
.ete-page .ete-industry-card__link { color: var(--ete-black); transition: var(--ete-transition);  text-decoration: underline;}
.ete-page .ete-industry-card__link:hover { color: var(--ete-blue); text-decoration: underline; }
.ete-page .ete-card:hover, .ete-page .ete-cap-card:hover, .ete-page .ete-tech-card:hover, .ete-page .ete-mini-card:hover, .ete-page .ete-industry-card:hover {
  transform: translateY(-6px); box-shadow: var(--ete-shadow-hover); border-color: transparent;
}
.ete-page .ete-card__icon, .ete-page .ete-cap-card i, .ete-page .ete-tech-card i, .ete-page .ete-mini-card i, .ete-page .ete-industry-card > i {
  width: 52px; height: 52px; border-radius: 12px; background: var(--ete-blue-light); color: var(--ete-blue);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 1rem;
}
.ete-page .ete-mini-card i, .ete-page .ete-industry-card > i { width: 44px; height: 44px; font-size: 1.1rem; margin-bottom: .8rem; }
.ete-page .ete-card h3, .ete-page .ete-cap-card h3, .ete-page .ete-tech-card h3, .ete-page .ete-mini-card h3, .ete-page .ete-industry-card h3 { font-size: 1.1rem; }
.ete-page .ete-card p, .ete-page .ete-cap-card p, .ete-page .ete-tech-card p, .ete-page .ete-mini-card p, .ete-page .ete-industry-card p { font-size: .88rem; margin-bottom: .5rem; }
.ete-page .ete-card__link { font-weight: 700; color: var(--ete-blue); font-size: .8rem; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; text-align: left; }
.ete-page .ete-card__link i { margin-left: .4rem; transition: var(--ete-transition); }
.ete-page .ete-card__link:hover i { transform: translateX(4px); }

/* ---- Why choose / comparison ---- */
.ete-page .ete-compare { display: flex; align-items: stretch; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.ete-page .ete-compare__col { flex: 1 1 320px; border-radius: var(--ete-radius); padding: 1.8rem; }
.ete-page .ete-compare__col--old { background: var(--ete-bg-alt); border: 1px dashed var(--ete-border); }
.ete-page .ete-compare__col--new { background: var(--ete-black); color: var(--ete-white); }
.ete-page .ete-compare__col--new h3 { color: var(--ete-white); }
.ete-page .ete-compare__col--new p, .ete-page .ete-compare__col--new li { color: rgba(255,255,255,.85); }
.ete-page .ete-compare__col ul li { margin-bottom: .9rem; font-size: .9rem; display: flex; gap: .6rem; }
.ete-page .ete-compare__col--old i { color: #D9455F; margin-top: .2rem; }
.ete-page .ete-compare__col--new i { color: #4CD97B; margin-top: .2rem; }
.ete-page .ete-compare__vs {
  flex: 0 0 auto; align-self: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ete-blue);
  color: var(--ete-white); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem;
  box-shadow: var(--ete-shadow); margin: 0 auto;
}

/* ---- Process track ---- */
.ete-page .ete-process-track { display: flex; overflow-x: auto; overflow-y: hidden; gap: 1.3rem; padding-bottom: 1rem; cursor: grab; user-select: none; }
.ete-page .ete-process-step { flex: 0 0 220px; background: var(--ete-white); border: 1px solid var(--ete-border); border-radius: var(--ete-radius); padding: 1.4rem; transition: var(--ete-transition); }
.ete-page .ete-process-step:hover { transform: translateY(-6px); box-shadow: var(--ete-shadow-hover); border-color: transparent; }
.ete-page .ete-process-step__icon { width: 46px; height: 46px; border-radius: 50%; background: var(--ete-blue); color: var(--ete-white); display: flex; align-items: center; justify-content: center; margin-bottom: .8rem; font-size: 1.1rem; }
.ete-page .ete-process-step h3 { font-size: 1rem; }
.ete-page .ete-process-step p { font-size: .82rem; }

/* ---- Compliance ---- */
.ete-page .ete-compliance__img { border-radius: var(--ete-radius); box-shadow: var(--ete-shadow); }

/* ---- Success stories ---- */
.ete-page .ete-story-card { background: var(--ete-white); border: 1px solid var(--ete-border); border-radius: var(--ete-radius); overflow: hidden; height: 100%; transition: var(--ete-transition); }
.ete-page .ete-story-card:hover { transform: translateY(-6px); box-shadow: var(--ete-shadow-hover); }
.ete-page .ete-story-card__img-wrap { aspect-ratio: 700 / 467; overflow: hidden; background: var(--ete-bg-alt); }
.ete-page .ete-story-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ete-page .ete-story-card:hover .ete-story-card__img-wrap img { transform: scale(1.06); }
.ete-page .ete-story-card__body { padding: 1.4rem; }
.ete-page .ete-story-card__body h3 { font-size: 1.1rem; }
.ete-page .ete-story-card__body p { font-size: .85rem; }

/* ---- FAQ accordion ---- */
.ete-page .ete-accordion { max-width: 860px; margin: 0 auto; }
.ete-page .ete-accordion__item { border: 1px solid var(--ete-border); border-radius: 12px; margin-bottom: 1rem; overflow: hidden; }
.ete-page .ete-accordion__question { margin: 0; }
.ete-page .ete-accordion__btn {
  width: 100%; text-align: left; background: var(--ete-white); border: none; padding: 1.1rem 1.3rem;
  font-weight: 700; font-size: 1rem; color: var(--ete-black); display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; transition: var(--ete-transition);
}
.ete-page .ete-accordion__btn:hover { color: var(--ete-blue); }
.ete-page .ete-accordion__icon { transition: transform .3s ease; color: var(--ete-blue); }
.ete-page .ete-accordion__btn:not(.collapsed) .ete-accordion__icon { transform: rotate(45deg); }
.ete-page .ete-accordion__answer { padding: 0 1.3rem 1.2rem; font-size: .92rem; margin: 0; }




/* ---- Scroll reveal animation ---- */
.ete-page .ete-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.ete-page .ete-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .ete-page .ete-reveal { opacity: 1; transform: none; transition: none; }
  .ete-page .ete-hero__img { animation: none; }
  .ete-page * { scroll-behavior: auto !important; }
}

/* ---- Responsive tuning ---- */
@media (max-width: 991.98px) {
  .ete-page .ete-hero__title { font-size: 2.1rem; }
  .ete-page .ete-hero__media { margin-top: 2rem; }
  .ete-page .navbar-nav { padding-top: 1rem; }
  .ete-page .nav-item { margin-bottom: .3rem; }
}

@media (max-width: 767.98px) {
  .ete-page .ete-section__title { font-size: 1.6rem; padding-bottom: 1rem;}
  .ete-page .ete-hero__title { font-size: 1.8rem; }
  .ete-page .ete-hero__cta { flex-direction: column; }
  .ete-page .ete-hero__cta .btn { width: 100%; text-align: center; }
  .ete-page .ete-compare__vs { margin: .5rem auto; }
}

@media (max-width: 575.98px) {
  .ete-page .ete-stat-card__value { font-size: 1.4rem; }
  .ete-page .ete-loop-graphic { max-width: 300px; }
  .ete-page .ete-loop-node { font-size: .68rem; padding: .3rem .6rem; }
}