/* Larnexous Solutions — App CSS (Bootstrap 5.3+) */

:root{
  /* Brand (from logo) */
  --brand:#39ff14;          /* neon green accent */
  --brand2:#b6ff9b;         /* softer green */

  /* Theme (less white) */
  --ink:#0b1220;
  --muted:#5b6675;

  --bg: #f2f6f3;             /* page background (soft green tint) */
  --surface:#ffffff;        /* cards */
  --surface-2:rgba(255,255,255,.72); /* sections / light blocks (lets blobs show through) */

  /* Hero gradient text colors (changes per slide via JS) */
  --hero-g1: var(--brand);
  --hero-g2: #eaffde;

  /* Motion */
  --mech-ease:cubic-bezier(.16,1,.3,1);
}

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

/* ================================
   Modern Theme Scrollbar
   Black + Neon Green
================================ */

/* Firefox */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(57,255,20,.75) rgba(255,255,255,.08);
}

/* Chrome / Edge / Safari */
::-webkit-scrollbar{
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  margin: 10px; /* nicer spacing top/bottom */
}

::-webkit-scrollbar-thumb{
  background: linear-gradient(
    180deg,
    rgba(57,255,20,.95),
    rgba(182,255,155,.85)
  );
  border-radius: 999px;

  /* creates "padding" effect around thumb */
  border: 3px solid rgba(0,0,0,.75);
  box-shadow:
    0 0 12px rgba(57,255,20,.35),
    inset 0 0 10px rgba(255,255,255,.10);
}

::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(
    180deg,
    rgba(57,255,20,1),
    rgba(255,255,255,.75)
  );
  box-shadow:
    0 0 16px rgba(57,255,20,.55),
    inset 0 0 12px rgba(255,255,255,.14);
}

::-webkit-scrollbar-corner{
  background: transparent;
}


body{
  color:var(--ink);
  background:var(--bg);
}

/* Bootstrap helpers overrides */
.text-secondary{ color: var(--muted) !important; }
.bg-light{ background-color: var(--surface-2) !important; }

/* Accessibility */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:12px;
  top:12px;
  width:auto;
  height:auto;
  padding:.5rem .75rem;
  background:#111827;
  color:#fff;
  border-radius:.75rem;
  z-index:9999;
}

/* Navbar */
.navbar{
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.navbar .nav-link{
  color:#111827;
  opacity:.86;
}
.navbar .nav-link:hover{ opacity:1; }
.navbar .nav-link.active{
  color: var(--brand) !important;
  opacity:1;
  font-weight:600;
}
.text-brand{ color: var(--brand) !important; }

/* Buttons */
.btn-brand{
  background: linear-gradient(135deg,var(--brand),var(--brand2));
  border: none;
  color:#0b1220;
  box-shadow: 0 10px 25px rgba(57,255,20,.16);
}
.btn-brand:hover{ filter: brightness(.98); color:#0b1220; }

.section-pad{ padding: 84px 0; }
@media (max-width: 768px){ .section-pad{ padding: 64px 0; } }

.anchor{ scroll-margin-top: 110px; }
.page-hero{ padding: 18px 0 0 0; }

/* Cards */
.card-min{
  background: var(--surface);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  transition: transform .18s var(--mech-ease), box-shadow .18s var(--mech-ease), border-color .18s var(--mech-ease);
}
.card-min:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(15,23,42,.10);
  border-color: rgba(57,255,20,.45);
}

.icon-pill{
  width:42px;
  height:42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(57,255,20,.12);
  color: #0b1220;
  flex: 0 0 auto;
}

/* Avatars */
.avatar{
  width:56px;
  height:56px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#0b1220;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 12px 24px rgba(57,255,20,.16);
}
.avatar-sm{
  width:42px;
  height:42px;
  font-weight:900;
}

/* Steps */
.step-num{
  width:34px;
  height:34px;
  border-radius: 12px;
  background: rgba(57,255,20,.14);
  color: #0b1220;
  display:grid;
  place-items:center;
  font-weight:900;
  flex:0 0 auto;
}

/* HERO */
.hero{
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: #000;
}

.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item{ height:100%; }

.hero-bg{
  height:100%;
  width:100%;
  background-size:cover;
  background-position:center;
  filter: saturate(1.06) contrast(1.02);
  transform: scale(1.02);
}

/* Backgrounds */
.hero-bg-1{
  background-image:
    linear-gradient(120deg, rgba(0,0,0,.76), rgba(0,0,0,.22)),
    url("/public/assets/images/b1.webp");
    filter: brightness(150%);
}
.hero-bg-2{
  background-image:
    linear-gradient(120deg, rgba(5,10,16,.78), rgba(57,255,20,.10)),
    url("/public/assets/images/b2.webp");
    filter: brightness(150%);
    
}
.hero-bg-3{
  background-image:
    linear-gradient(120deg, rgba(0,0,0,.78), rgba(255,255,255,.06)),
    url("/public/assets/images/b3.webp");
    filter: brightness(150%);
}

/* Ken-burns zoom on active slide */
.carousel-item.active .hero-bg{
  animation: heroKen 6.0s linear both;
}
@keyframes heroKen{
  from{ transform: scale(1.02); }
  to{ transform: scale(1.08); }
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:10;
  display:flex;
  align-items:center;
}

.hero-logo-only{
  width: min(520px, 92%);
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.32));
}

.hero-kicker{
  color: rgba(255,255,255,.78);
  font-size: .95rem;
  margin-bottom: .6rem;
  letter-spacing: .02em;
}

/* Gradient + glow */
.hero-title-gradient{
  font-weight: 900;
  line-height: 1.05;
  margin: 0 0 1rem 0;

  background-image: linear-gradient(90deg, var(--hero-g1), var(--hero-g2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 0 16px rgba(57,255,20,.28),
    0 0 34px rgba(57,255,20,.16);

  background-size: 220% 220%;
  animation: heroShimmer 4.6s ease-in-out infinite;
}

@keyframes heroShimmer{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.hero-subtitle{
  color: rgba(255,255,255,.88);
  font-size: 1.12rem;
  max-width: 62ch;
}

/* Mechanical text swap */
.hero-text.hero-swap{ animation: mechSwap .46s var(--mech-ease) both; }
@keyframes mechSwap{
  0%{ opacity:.15; transform: translateY(8px) translateX(-2px) rotateZ(-0.4deg); }
  55%{ opacity:1; transform: translateY(-2px) translateX(0) rotateZ(0.15deg); }
  100%{ opacity:1; transform: translateY(0) translateX(0) rotateZ(0); }
}

.hero .btn-outline-light{
  border-color: rgba(255,255,255,.72);
}
.hero .btn-outline-light:hover{
  background: rgba(255,255,255,.10);
}

/* Services carousel: hide controls if present */
.services-carousel .carousel-control-prev,
.services-carousel .carousel-control-next,
.services-carousel .carousel-indicators{ display:none !important; }

/* Stats */
.stat-card{ text-align:left; }
.stat-num{
  font-weight: 950;
  font-size: clamp(1.7rem, 2.3vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.stat-num::after{
  content: attr(data-suffix);
  margin-left: 2px;
}

/* Accordion */
.accordion-min .accordion-item{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  overflow:hidden;
  background: var(--surface);
  margin-bottom: 12px;
}
.accordion-min .accordion-button{
  background: var(--surface);
  font-weight: 700;
}
.accordion-min .accordion-button:focus{
  box-shadow: 0 0 0 .25rem rgba(57,255,20,.18);
}
.accordion-min .accordion-button:not(.collapsed){
  color: #0b1220;
  background: rgba(57,255,20,.10);
}

/* CTA wide */
.cta-wide{
  background:
    radial-gradient(1200px 300px at 20% 0%, rgba(57,255,20,.22), transparent 55%),
    radial-gradient(900px 260px at 90% 40%, rgba(182,255,155,.24), transparent 55%),
    var(--surface);
}

/* Footer */
.footer{
  background:#060b12;
  color: rgba(255,255,255,.88);
}
.footer-link{
  color: rgba(255,255,255,.86);
  text-decoration:none;
}
.footer-link:hover{ color:#fff; text-decoration: underline; }

/* Scroll animations (mechanical) */
[data-animate]{
  opacity: 0;
  transform: translateY(16px) rotateZ(-0.15deg);
  will-change: opacity, transform;
}
[data-animate].in-view{
  animation: mechReveal .72s var(--mech-ease) both;
  animation-delay: var(--d, 0ms);
}
@keyframes mechReveal{
  0%{ opacity:0; transform: translateY(18px) rotateZ(-0.25deg); }
  55%{ opacity:1; transform: translateY(-2px) rotateZ(0.12deg); }
  100%{ opacity:1; transform: translateY(0) rotateZ(0); }
}

@media (prefers-reduced-motion: reduce){
  [data-animate]{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ================================
   TEAM PAGE (responsive tree + tiles)
   ================================ */

.org-tree{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0 22px;
}

/* Use max-content so big teams don't squeeze and break lines */
.org-tree ul{
  width: max-content;
  min-width: max-content;
  margin: 0 auto;
  padding-top: 22px;
  position: relative;
  display: flex;
  justify-content: center;
  list-style: none;
  padding-left: 0;
  gap: 14px;
}

/* connector lines */
.org-tree li{
  text-align: center;
  position: relative;
  padding: 22px 10px 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.org-tree li::before,
.org-tree li::after{
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 22px;
  border-top: 2px solid rgba(15,23,42,.14);
}
.org-tree li::before{ right: 50%; }
.org-tree li::after{ left: 50%; border-left: 2px solid rgba(15,23,42,.14); }

/* remove lines for single / first / last */
.org-tree li:only-child::before,
.org-tree li:only-child::after{ display: none; }
.org-tree li:first-child::before,
.org-tree li:last-child::after{ border: 0 none; }
.org-tree li:last-child::before{
  border-right: 2px solid rgba(15,23,42,.14);
  border-radius: 0 10px 0 0;
}
.org-tree li:first-child::after{ border-radius: 10px 0 0 0; }

.org-tree ul ul::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 22px;
  border-left: 2px solid rgba(15,23,42,.14);
}

.org-node{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  padding: 8px 10px 0;
  width: clamp(150px, 18vw, 190px);
}
.org-node:hover .org-avatar{
  border-color: rgba(57,255,20,.55);
  transform: translateY(-2px);
}
.org-avatar{
  width: clamp(72px, 9vw, 96px);
  height: clamp(72px, 9vw, 96px);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(15,23,42,.10);
  transition: transform .18s ease, border-color .18s ease;
}
.org-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.org-name{
  font-weight: 800;
  line-height: 1.1;
}
.org-role{
  font-size: .85rem;
  color: rgba(15,23,42,.66);
  line-height: 1.2;
}

/* Gallery tiles (no card outlines) */
.team-grid .team-tile{
  display: block;
  text-decoration: none;
  color: inherit;
}
.team-photo{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(15,23,42,.04);
}
.team-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .25s ease;
}
.team-tile:hover .team-photo img{ transform: scale(1.03); }
.team-name{ font-weight: 800; font-size: 1.05rem; }
.team-role{ font-size: .95rem; }

/* Member profile */
.team-profile-photo{
  border-radius: 22px;
  overflow: hidden;
  background: rgba(15,23,42,.04);
}
.team-profile-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* ✅ Mobile-safe responsive mode (prevents broken connector lines) */
@media (max-width: 768px){
  .org-tree{
    overflow-x: visible;
    padding: 0;
  }

  .org-tree ul{
    width: 100%;
    min-width: 0;
    display: block;
    padding-top: 0;
  }

  .org-tree li{
    padding: 14px 0 0;
  }

  /* disable connector lines on mobile */
  .org-tree li::before,
  .org-tree li::after,
  .org-tree ul ul::before{
    display: none !important;
  }

  .org-node{
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(15,23,42,.08);
  }

  .org-avatar{
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
  }

  .org-name, .org-role{
    text-align: left;
  }
}

@media (max-width: 576px){
  .org-node{ width: 100%; }
  .org-avatar{ width: 52px; height: 52px; }
  .org-role{ font-size: .8rem; }
}

/* Small tweaks */
code{ background: rgba(15,23,42,.06); padding: .1rem .35rem; border-radius: .4rem; }

/* =========================================================
   BACKGROUND SPLASH / BLOBS (theme-based, no images)
   Put behind the entire website
========================================================= */
.bg-splashes{
  position: fixed;
  inset: 0;
  z-index: 0;                 /* behind site content */
  pointer-events: none;
  overflow: hidden;
}

/*
  Keep blobs behind the page WITHOUT breaking Bootstrap's sticky navbar.
  (Do NOT set `position: relative` on body children, it overrides `position: sticky`.)
*/
main,
footer{
  position: relative;
  z-index: 1;
}

/* Navbar already uses `position: sticky`; we only ensure it stays above backgrounds */
nav.navbar{
  z-index: 1030;
}

.bg-splashes .blob{
  position: absolute;
  border-radius: 999px;
  filter: blur(44px);
  opacity: .28;
  transform: translate3d(0,0,0);

  /* Theme splashes: neon green + soft green */
  background: radial-gradient(circle at 30% 30%,
    rgba(57,255,20,.55),
    rgba(57,255,20,0) 70%);
}

/* Each blob has different size/position to look "random" */
.bg-splashes .b1{
  width: clamp(260px, 34vw, 620px);
  height: clamp(260px, 34vw, 620px);
  top: -180px;
  left: -180px;
  opacity: .34;
}
.bg-splashes .b2{
  width: clamp(220px, 28vw, 520px);
  height: clamp(220px, 28vw, 520px);
  bottom: -200px;
  right: -190px;
  opacity: .26;
  background: radial-gradient(circle at 40% 40%,
    rgba(182,255,155,.55),
    rgba(182,255,155,0) 70%);
}
.bg-splashes .b3{
  width: clamp(180px, 22vw, 420px);
  height: clamp(180px, 22vw, 420px);
  top: 30%;
  left: 60%;
  opacity: .18;
  background: radial-gradient(circle at 30% 30%,
    rgba(57,255,20,.35),
    rgba(57,255,20,0) 70%);
}
.bg-splashes .b4{
  width: clamp(160px, 18vw, 360px);
  height: clamp(160px, 18vw, 360px);
  top: 62%;
  left: 8%;
  opacity: .16;
  background: radial-gradient(circle at 35% 35%,
    rgba(182,255,155,.45),
    rgba(182,255,155,0) 70%);
}
.bg-splashes .b5{
  width: clamp(200px, 24vw, 460px);
  height: clamp(200px, 24vw, 460px);
  top: 10%;
  right: 10%;
  opacity: .14;
}

/* Optional "random drift" animation (smooth + premium) */
@media (prefers-reduced-motion: no-preference){
  .bg-splashes .b1{ animation: blobFloat1 18s ease-in-out infinite; }
  .bg-splashes .b2{ animation: blobFloat2 22s ease-in-out infinite; }
  .bg-splashes .b3{ animation: blobFloat3 26s ease-in-out infinite; }
  .bg-splashes .b4{ animation: blobFloat4 20s ease-in-out infinite; }
  .bg-splashes .b5{ animation: blobFloat5 28s ease-in-out infinite; }

  @keyframes blobFloat1{
    0%,100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(40px, 30px) scale(1.06); }
  }
  @keyframes blobFloat2{
    0%,100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(-34px, -18px) scale(1.08); }
  }
  @keyframes blobFloat3{
    0%,100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(20px, -38px) scale(1.10); }
  }
  @keyframes blobFloat4{
    0%,100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(26px, 18px) scale(1.07); }
  }
  @keyframes blobFloat5{
    0%,100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(-22px, 26px) scale(1.09); }
  }
}