/* =========================================
   LSM UI KIT
   Reusable design system for all pages
   ========================================= */

/* =========================
   1. TOKENS / FALLBACKS
   ========================= */
:root{
  --lsm-primary: #d10000;
  --lsm-primary-dark: #b30000;
  --lsm-secondary: #0b1b3a;

  --lsm-text: #0b1b3a;
  --lsm-text-light: rgba(11,27,58,.74);
  --lsm-text-soft: rgba(11,27,58,.60);

  --lsm-white: #ffffff;
  --lsm-bg: #ffffff;
  --lsm-bg-soft: #f7f9fc;
  --lsm-bg-dark: #08162d;

  --lsm-border: rgba(0,0,0,.06);
  --lsm-border-strong: rgba(255,255,255,.10);

  --lsm-shadow-sm: 0 10px 22px rgba(2,12,27,.06);
  --lsm-shadow-md: 0 18px 40px rgba(2,12,27,.08);
  --lsm-shadow-lg: 0 24px 60px rgba(2,12,27,.14);

  --lsm-radius-xs: 10px;
  --lsm-radius-sm: 14px;
  --lsm-radius-md: 18px;
  --lsm-radius-lg: 24px;

  --lsm-space-1: 8px;
  --lsm-space-2: 12px;
  --lsm-space-3: 16px;
  --lsm-space-4: 20px;
  --lsm-space-5: 24px;
  --lsm-space-6: 32px;
  --lsm-space-7: 40px;
  --lsm-space-8: 56px;

  --lsm-container: min(1180px, 92%);
  --lsm-section-y: 84px;
}

/* =========================
   2. CONTAINER / SECTION
   ========================= */
.lsm-container{
  width: var(--lsm-container);
  margin: 0 auto;
}

.lsm-section{
  padding: var(--lsm-section-y) 0;
}

.lsm-section--soft{
  background: var(--lsm-bg-soft);
}

.lsm-section--white{
  background: var(--lsm-bg);
}

.lsm-section--dark{
  background: var(--lsm-bg-dark);
  color: rgba(255,255,255,.88);
}

.lsm-surface{
  background: var(--lsm-white);
  border: 1px solid var(--lsm-border);
  border-radius: var(--lsm-radius-md);
  box-shadow: var(--lsm-shadow-sm);
}

.lsm-surface--soft{
  background: var(--lsm-bg-soft);
}

.lsm-surface--dark{
  background: var(--lsm-secondary);
  color: #fff;
  border-color: rgba(255,255,255,.10);
}

/* =========================
   3. GRID
   ========================= */
.lsm-grid{
  display: grid;
  gap: 18px;
}

.lsm-grid-2{
  grid-template-columns: repeat(2, 1fr);
}

.lsm-grid-3{
  grid-template-columns: repeat(3, 1fr);
}

.lsm-grid-4{
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1000px){
  .lsm-grid-4,
  .lsm-grid-3{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .lsm-grid-2,
  .lsm-grid-3,
  .lsm-grid-4{
    grid-template-columns: 1fr;
  }
}

/* =========================
   4. SECTION HEADING
   ========================= */
.lsm-section-head{
  margin-bottom: 28px;
}

.lsm-section-head--center{
  text-align: center;
}

.lsm-section-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--lsm-text-light);
}

.lsm-section-kicker__dot,
.lsm-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--lsm-primary);
  box-shadow: 0 0 0 6px rgba(209,0,0,.12);
  flex: 0 0 auto;
}

.lsm-section-title{
  margin: 0 0 10px;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  font-weight: 950;
  color: var(--lsm-secondary);
  letter-spacing: .2px;
}

.lsm-section-text{
  margin: 0;
  max-width: 760px;
  color: var(--lsm-text-light);
  line-height: 1.75;
}

.lsm-section--dark .lsm-section-kicker,
.lsm-section--dark .lsm-section-text{
  color: rgba(255,255,255,.78);
}

.lsm-section--dark .lsm-section-title{
  color: #fff;
}

/* =========================
   5. BUTTONS
   ========================= */
.lsm-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 12px;
  border: 2px solid transparent;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  cursor: pointer;
}

.lsm-btn:hover{
  text-decoration: none;
  transform: translateY(-2px);
}

.lsm-btn--primary{
  background: var(--lsm-primary);
  color: #fff;
  border-color: var(--lsm-primary);
}

.lsm-btn--primary:hover{
  background: var(--lsm-primary-dark);
  color: #fff;
  border-color: var(--lsm-primary-dark);
}

.lsm-btn--light{
  background: #fff;
  color: var(--lsm-primary);
  border-color: #fff;
}

.lsm-btn--light:hover{
  background: var(--lsm-primary);
  color: #fff;
  border-color: var(--lsm-primary);
}

.lsm-btn--outline{
  background: transparent;
  color: var(--lsm-primary);
  border-color: var(--lsm-primary);
}

.lsm-btn--outline:hover{
  background: var(--lsm-primary);
  color: #fff;
}

.lsm-btn--dark{
  background: var(--lsm-secondary);
  color: #fff;
  border-color: var(--lsm-secondary);
}

.lsm-btn--dark:hover{
  background: #13274d;
  color: #fff;
  border-color: #13274d;
}

.lsm-btn--full{
  width: 100%;
}

/* =========================
   6. BADGES / TAGS
   ========================= */
.lsm-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 18px;
  background: rgba(11,27,58,.06);
  color: var(--lsm-secondary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.lsm-badge--light{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0,0,0,.06);
}

.lsm-badge--dark{
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
}

/* =========================
   7. BASE CARD
   ========================= */
.lsm-card{
  background: #fff;
  border: 1px solid var(--lsm-border);
  border-radius: var(--lsm-radius-md);
  box-shadow: var(--lsm-shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow: hidden;
}

.lsm-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--lsm-shadow-md);
}

.lsm-card__body{
  padding: 22px;
}

.lsm-card__title{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 950;
  color: var(--lsm-secondary);
}

.lsm-card__text{
  margin: 0;
  color: var(--lsm-text-light);
  line-height: 1.7;
}

/* =========================
   8. ICON BADGE / ICON BOX
   ========================= */
.lsm-iconbox{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--lsm-primary);
  color: #fff;
  flex: 0 0 auto;
  box-shadow: 0 12px 26px rgba(209,0,0,.20);
}

.lsm-iconbox i{
  font-size: 20px;
}

.lsm-iconbox--light{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
}

.lsm-iconbox--soft{
  background: rgba(11,27,58,.05);
  color: var(--lsm-secondary);
  box-shadow: none;
}

/* =========================
   9. FEATURE CARD
   Why choose us / values / simple services
   ========================= */
.lsm-feature{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--lsm-border);
  border-radius: var(--lsm-radius-md);
  box-shadow: var(--lsm-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.lsm-feature:hover{
  transform: translateY(-4px);
  box-shadow: var(--lsm-shadow-md);
}

.lsm-feature__content h3{
  margin: 2px 0 8px;
  font-size: 17px;
  font-weight: 950;
  color: var(--lsm-secondary);
}

.lsm-feature__content p{
  margin: 0;
  color: var(--lsm-text-light);
  line-height: 1.65;
}

/* =========================
   10. STAT CHIPS
   ========================= */
.lsm-stats{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.lsm-stat{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--lsm-border);
  box-shadow: var(--lsm-shadow-sm);
}

.lsm-stat__num{
  font-size: 16px;
  font-weight: 950;
  color: var(--lsm-secondary);
  line-height: 1;
}

.lsm-stat__label{
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--lsm-text-light);
}

/* =========================
   11. PAGE HERO
   ========================= */
.lsm-page-hero{
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--lsm-secondary);
}

.lsm-page-hero__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,.70), rgba(0,0,0,.35)),
    radial-gradient(900px 420px at 18% 20%, rgba(209,0,0,.18) 0%, rgba(209,0,0,0) 60%);
  pointer-events: none;
}

.lsm-page-hero__container{
  width: var(--lsm-container);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  color: #fff;
}

.lsm-page-hero__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.90);
}

.lsm-page-hero__title{
  max-width: 860px;
  margin: 0 0 14px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
  font-weight: 950;
  color: #fff;
}

.lsm-page-hero__sub{
  max-width: 760px;
  margin: 0;
  font-size: 18px;
  line-height: 1.75;
  color: rgba(255,255,255,.88);
}

/* =========================
   12. MEDIA CARD / SERVICE CARD
   ========================= */
.lsm-media-card{
  background: #fff;
  border-radius: var(--lsm-radius-md);
  overflow: hidden;
  border: 1px solid var(--lsm-border);
  box-shadow: var(--lsm-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}

.lsm-media-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--lsm-shadow-lg);
}

.lsm-media-card__media{
  position: relative;
  height: 200px;
  overflow: hidden;
}

.lsm-media-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.lsm-media-card:hover .lsm-media-card__media img{
  transform: scale(1.07);
}

.lsm-media-card__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
}

.lsm-media-card__tag{
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 2;
}

.lsm-media-card__body{
  padding: 18px 18px 20px;
}

.lsm-media-card__head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0px;
}

.lsm-media-card__title{
  margin: 0;
  font-size: 17px;
  font-weight: 950;
  color: var(--lsm-secondary);
}

.lsm-media-card__desc{
  margin: 10px 0 12px;
  color: var(--lsm-text-light);
  line-height: 1.7;
  font-size: 14px;
}

.lsm-media-card__list{
  margin: 0 0 14px;
  padding-left: 0;
  display: grid;
  gap: 6px;
}

.lsm-media-card__list li{
  list-style: none;
  position: relative;
  padding-left: 16px;
  color: var(--lsm-text-light);
  font-size: 13px;
}

.lsm-media-card__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(209,0,0,.85);
  box-shadow: 0 0 0 4px rgba(209,0,0,.12);
}

.lsm-media-card__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lsm-primary);
  font-weight: 950;
  text-decoration: none;
}

.lsm-media-card__link:hover{
  text-decoration: underline;
}

/* =========================
   13. TEAM CARD
   ========================= */
.lsm-team-card{
  background: #fff;
  border-radius: var(--lsm-radius-md);
  overflow: hidden;
  box-shadow: var(--lsm-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}

.lsm-team-card:hover{
  transform: translateY(-5px);
  box-shadow: var(--lsm-shadow-md);
}

.lsm-team-card__media{
  height: 270px;
  overflow: hidden;
}

.lsm-team-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lsm-team-card__body{
  padding: 16px 16px 18px;
  text-align: center;
}

.lsm-team-card__name{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 950;
  color: var(--lsm-secondary);
}

.lsm-team-card__role{
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--lsm-primary);
}

/* =========================
   14. VALUE CARD
   ========================= */
.lsm-value-card{
  background: var(--lsm-bg-soft);
  border: 1px solid var(--lsm-border);
  border-radius: var(--lsm-radius-md);
  padding: 24px;
  text-align: center;
  box-shadow: var(--lsm-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}

.lsm-value-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--lsm-shadow-md);
}

.lsm-value-card__icon{
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--lsm-shadow-sm);
}

.lsm-value-card__icon img{
  max-width: 42px;
  max-height: 42px;
}

.lsm-value-card h3{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 950;
  color: var(--lsm-secondary);
}

.lsm-value-card p{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--lsm-text-light);
}

/* =========================
   15. TRUST / INLINE LIST
   ========================= */
.lsm-inline-list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  line-height: 1.6;
  color: var(--lsm-text-light);
}

.lsm-inline-list strong{
  color: var(--lsm-secondary);
  margin-right: 4px;
}

.lsm-inline-list__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.lsm-inline-list__item .lsm-dot{
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 3px rgba(209,0,0,.10);
}

/* =========================
   16. CTA PANEL
   ========================= */
.lsm-cta-panel{
  position: relative;
  overflow: hidden;
  background: var(--lsm-secondary);
  color: #fff;
  border-radius: var(--lsm-radius-lg);
  padding: 42px 32px;
  box-shadow: var(--lsm-shadow-lg);
}

.lsm-cta-panel::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 260px at 20% 20%, rgba(209,0,0,.24) 0%, rgba(209,0,0,0) 60%);
  pointer-events: none;
}

.lsm-cta-panel__inner{
  position: relative;
  z-index: 1;
}

.lsm-cta-panel h2{
  margin: 0 0 12px;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 950;
  color: #fff;
}

.lsm-cta-panel p{
  margin: 0 0 20px;
  max-width: 760px;
  color: rgba(255,255,255,.86);
  line-height: 1.8;
}

/* =========================
   17. FORM UI
   ========================= */
.lsm-form{
  display: grid;
  gap: 16px;
}

.lsm-form__row{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.lsm-form__group{
  display: grid;
  gap: 8px;
}

.lsm-form label{
  font-size: 13px;
  font-weight: 800;
  color: var(--lsm-secondary);
}

.lsm-input,
.lsm-select,
.lsm-textarea{
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--lsm-border);
  background: #fff;
  color: var(--lsm-text);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.lsm-textarea{
  min-height: 140px;
  padding: 14px;
  resize: vertical;
}

.lsm-input:focus,
.lsm-select:focus,
.lsm-textarea:focus{
  border-color: rgba(209,0,0,.45);
  box-shadow: 0 0 0 4px rgba(209,0,0,.10);
}

/* =========================
   18. MARQUEE / LOGO CHIPS
   ========================= */
.lsm-logo-card{
  width: 180px;
  height: 86px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--lsm-border);
  box-shadow: var(--lsm-shadow-sm);
  position: relative;
  overflow: hidden;
}

.lsm-logo-card::after{
  content: "";
  position: absolute;
  inset: -40%;
  transform: rotate(25deg);
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity .25s ease;
}

.lsm-logo-card:hover::after{
  opacity: .9;
}

.lsm-logo-card img{
  max-width: 150px;
  max-height: 80px;
  width: auto;
  height: auto;
  opacity: .82;
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}

.lsm-logo-card:hover img{
  opacity: 1;
  transform: scale(1.03);
}

/* =========================
   19. RESPONSIVE HELPERS
   ========================= */
@media (max-width: 1000px){
  .lsm-page-hero{
    min-height: 320px;
  }

  .lsm-form__row{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  :root{
    --lsm-section-y: 64px;
  }

  .lsm-page-hero{
    min-height: 280px;
  }

  .lsm-btn{
    min-height: 44px;
  }

  .lsm-logo-card{
    width: 100%;
    height: 78px;
    border-radius: 14px;
  }

  .lsm-logo-card img{
    max-width: 110px;
  }

  .lsm-cta-panel{
    padding: 34px 22px;
  }
}