:root {
  --landing-primary: #2563eb;
  --landing-primary-dark: #1d4ed8;
  --landing-primary-darker: #1e40af;
  --landing-secondary: #64748b;
  --landing-success: #059669;
  --landing-warning: #d97706;
  --landing-danger: #dc2626;
  --landing-info: #0369a1;
  --landing-light: #f8fafc;
  --landing-white: #ffffff;
  --landing-gray-50: #f9fafb;
  --landing-gray-100: #f3f4f6;
  --landing-gray-200: #e5e7eb;
  --landing-text-primary: #1f2937;
  --landing-text-secondary: #6b7280;
  --landing-text-muted: #9ca3af
}
.public-layout {
  min-height: 100vh!important;
  background-color: var(--landing-gray-50)!important
}
.public-layout main {
  background-color: var(--landing-gray-50)!important
}
.public-layout body,
body.public-layout,
html body {
  background-color: var(--landing-gray-50)!important;
  color: var(--landing-text-primary)!important
}
.public-layout .cta-section,
.public-layout .features-section,
.public-layout .hero-section,
.public-layout .how-it-works-section,
.public-layout .testimonials-section {
  background: inherit!important
}
.public-layout .top-login-bar,
.top-login-bar {
  background: var(--landing-white)!important;
  border-bottom: 1px solid var(--landing-gray-200)!important;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1)!important;
  position: sticky;
  top: 0;
  z-index: 1020
}
.public-layout .top-login-bar .btn-outline-primary,
.top-login-bar .btn-outline-primary {
  border-color: var(--landing-primary)!important;
  color: var(--landing-primary)!important;
  background: 0 0!important
}
.public-layout .top-login-bar .btn-outline-primary:hover,
.top-login-bar .btn-outline-primary:hover {
  background: var(--landing-primary)!important;
  color: var(--landing-white)!important;
  transform: translateY(-1px)
}
.public-layout .top-login-bar .btn-primary,
.top-login-bar .btn-primary {
  background: var(--landing-primary)!important;
  border-color: var(--landing-primary)!important;
  color: var(--landing-white)!important
}
.public-layout .top-login-bar .btn-primary:hover,
.top-login-bar .btn-primary:hover {
  background: var(--landing-primary-dark)!important;
  border-color: var(--landing-primary-dark)!important;
  transform: translateY(-1px)
}
.hero-section,
.public-layout .hero-section,
section.hero-section {
  background: linear-gradient(135deg,var(--landing-primary) 0,var(--landing-primary-dark) 100%)!important;
  color: var(--landing-white)!important;
  position: relative;
  overflow: hidden;
  min-height: 500px;
  display: flex;
  align-items: center
}
.hero-section::before,
.public-layout .hero-section::before,
section.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" patternUnits="userSpaceOnUse" width="100" height="100"><path d="M0 0h100v100H0z" fill="none"/><path d="M0 0l100 100M100 0L0 100" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
  opacity: .3
}
.hero-section .container,
.public-layout .hero-section .container,
section.hero-section .container {
  position: relative;
  z-index: 2
}
.hero-section h1,
.public-layout .hero-section h1,
section.hero-section h1 {
  color: var(--landing-white)!important;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.hero-section .lead,
.public-layout .hero-section .lead,
section.hero-section .lead {
  color: rgba(255,255,255,.9)!important;
  font-size: 1.125rem;
  line-height: 1.7
}
.hero-section .btn-light {
  background: var(--landing-white)!important;
  color: var(--landing-primary)!important;
  border: none!important;
  font-weight: 600;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1)
}
.hero-section .btn-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
  background: var(--landing-gray-50)!important;
  color: var(--landing-primary)!important
}
.hero-section .btn-outline-light {
  border-color: rgba(255,255,255,.7)!important;
  color: var(--landing-white)!important;
  background: rgba(255,255,255,.1)!important;
  backdrop-filter: blur(10px)
}
.hero-section .btn-outline-light:hover {
  background: rgba(255,255,255,.2)!important;
  border-color: var(--landing-white)!important;
  transform: translateY(-1px);
  color: var(--landing-white)!important
}
.hero-section .opacity-75 {
  color: rgba(255,255,255,.8)!important
}
.hero-image {
  background: var(--landing-white)!important;
  border-radius: 1rem!important;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25)!important;
  border: 1px solid var(--landing-gray-200)!important;
  position: relative;
  overflow: hidden
}
.hero-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,var(--landing-primary),var(--landing-primary-dark))
}
.hero-image .bg-light {
  background: var(--landing-gray-50)!important;
  border: 1px solid var(--landing-gray-200)!important
}
.hero-image .text-primary {
  color: var(--landing-primary)!important
}
.hero-image .text-muted {
  color: var(--landing-text-secondary)!important
}
.hero-image strong {
  color: var(--landing-text-primary)!important
}
.hero-image .btn-primary {
  background: var(--landing-primary)!important;
  border: none!important;
  color: var(--landing-white)!important;
  font-weight: 600
}
.features-section {
  background: var(--landing-white)!important;
  color: var(--landing-text-primary)!important
}
.features-section h2 {
  color: var(--landing-text-primary)!important;
  font-weight: 800
}
.features-section .lead {
  color: var(--landing-text-secondary)!important
}
.feature-card {
  background: var(--landing-white)!important;
  border: 1px solid var(--landing-gray-200)!important;
  border-radius: .75rem!important;
  color: var(--landing-text-primary)!important;
  transition: all .2s ease;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1)
}
.feature-card:hover {
  transform: translateY(-4px)!important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1)!important;
  border-color: var(--landing-primary)!important
}
.feature-card h4 {
  color: var(--landing-text-primary)!important;
  font-weight: 700
}
.feature-card .text-muted {
  color: var(--landing-text-secondary)!important
}
.feature-icon {
  background: var(--landing-primary)!important;
  color: var(--landing-white)!important;
  box-shadow: 0 4px 6px -1px rgba(37,99,235,.2)
}
.how-it-works-section {
  background: var(--landing-gray-50)!important;
  color: var(--landing-text-primary)!important
}
.how-it-works-section h2 {
  color: var(--landing-text-primary)!important
}
.how-it-works-section .lead {
  color: var(--landing-text-secondary)!important
}
.step-card h4 {
  color: var(--landing-text-primary)!important
}
.step-card .text-muted {
  color: var(--landing-text-secondary)!important
}
.step-number {
  background: var(--landing-primary)!important;
  color: var(--landing-white)!important;
  box-shadow: 0 4px 6px -1px rgba(37,99,235,.2)
}
.testimonials-section {
  background: var(--landing-white)!important;
  color: var(--landing-text-primary)!important
}
.testimonials-section h2 {
  color: var(--landing-text-primary)!important
}
.testimonials-section .lead {
  color: var(--landing-text-secondary)!important
}
.testimonial-card {
  background: var(--landing-white)!important;
  border: 1px solid var(--landing-gray-200)!important;
  border-radius: .75rem!important;
  color: var(--landing-text-primary)!important;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);
  transition: all .2s ease
}
.testimonial-card:hover {
  transform: translateY(-4px)!important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1)!important
}
.testimonial-card blockquote {
  color: var(--landing-text-secondary)!important;
  font-style: italic
}
.testimonial-card .fw-bold {
  color: var(--landing-text-primary)!important
}
.testimonial-card .text-muted {
  color: var(--landing-text-secondary)!important
}
.testimonial-card .stars {
  color: #fbbf24!important
}
.cta-section {
  background: linear-gradient(135deg,var(--landing-primary) 0,var(--landing-primary-dark) 100%)!important;
  position: relative;
  overflow: hidden
}
.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center,rgba(255,255,255,.1) 0,transparent 70%)
}
.cta-section .container {
  position: relative;
  z-index: 2
}
.cta-section h2 {
  color: var(--landing-white)!important;
  text-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.cta-section .lead {
  color: rgba(255,255,255,.9)!important
}
.cta-section .text-white-50 {
  color: rgba(255,255,255,.7)!important
}
.cta-section .text-white-50 a {
  color: var(--landing-white)!important;
  text-decoration: none;
  font-weight: 600
}
.cta-section .text-white-50 a:hover {
  text-decoration: underline
}
.btn {
  font-weight: 600;
  border-radius: .5rem;
  transition: all .2s ease;
  letter-spacing: .025em
}
.bg-primary {
  background-color: var(--landing-primary)!important
}
.text-primary {
  color: var(--landing-primary)!important
}
.text-white {
  color: var(--landing-white)!important
}
.bg-light {
  background-color: var(--landing-gray-50)!important
}
.bg-white {
  background-color: var(--landing-white)!important
}
@media (max-width:768px) {
  .hero-section .display-4 {
    font-size: 2.5rem
  }
  .hero-section .display-5 {
    font-size: 2rem
  }
  .d-flex.gap-3 {
    flex-direction: column;
    gap: 1rem!important
  }
  .btn-lg {
    width: 100%
  }
  .top-login-bar .d-flex {
    flex-direction: column;
    gap: .5rem;
    text-align: center
  }
}
.btn:focus,
a:focus {
  outline: 2px solid var(--landing-primary);
  outline-offset: 2px
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -.75rem
}
.col-lg-4 {
  flex: 0 0 33.333%;
  padding: 0 .75rem
}
.col-lg-6 {
  flex: 0 0 50%;
  padding: 0 .75rem
}
.col-lg-8 {
  flex: 0 0 66.667%;
  padding: 0 .75rem
}
.col-md-6 {
  flex: 0 0 50%;
  padding: 0 .75rem
}
.d-flex {
  display: flex
}
.justify-content-between {
  justify-content: space-between
}
.justify-content-center {
  justify-content: center
}
.align-items-center {
  align-items: center
}
.align-items-baseline {
  align-items: baseline
}
.flex-wrap {
  flex-wrap: wrap
}
.text-center {
  text-align: center
}
.py-2 {
  padding-top: .5rem;
  padding-bottom: .5rem
}
.py-5 {
  padding-top: 3rem;
  padding-bottom: 3rem
}
.p-4 {
  padding: 1.5rem
}
.px-4 {
  padding-left: 1.5rem;
  padding-right: 1.5rem
}
.mb-2 {
  margin-bottom: .5rem
}
.mb-3 {
  margin-bottom: 1rem
}
.mb-4 {
  margin-bottom: 1.5rem
}
.mb-5 {
  margin-bottom: 3rem
}
.me-1 {
  margin-right: .25rem
}
.me-2 {
  margin-right: .5rem
}
.me-3 {
  margin-right: 1rem
}
.mt-4 {
  margin-top: 1.5rem
}
.mx-3 {
  margin-left: 1rem;
  margin-right: 1rem
}
.mx-auto {
  margin-left: auto;
  margin-right: auto
}
.gap-3 {
  gap: 1rem
}
.g-4 > * {
  margin-bottom: 1.5rem
}
.display-4 {
  font-size: 2.5rem;
  font-weight: 800
}
.display-5 {
  font-size: 2rem;
  font-weight: 700
}
.lead {
  font-size: 1.25rem;
  font-weight: 300
}
.fw-bold {
  font-weight: 700
}
.border-bottom {
  border-bottom: 1px solid #dee2e6
}
.rounded {
  border-radius: .375rem
}
.rounded-circle {
  border-radius: 50%
}
.shadow {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)
}
.shadow-sm {
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)
}
.h-100 {
  height: 100%
}
.opacity-75 {
  opacity: .75
}
.btn-sm {
  padding: .375rem .75rem;
  font-size: .75rem
}
.btn-lg {
  padding: .75rem 1.5rem;
  font-size: 1.125rem
}
@media (max-width:768px) {
  .col-lg-4,
  .col-lg-6,
  .col-lg-8,
  .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1rem
  }
  .container {
    padding: 0 1rem
  }
}
.home-nav {
  position: fixed!important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(26,26,46,.95)!important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 1rem 0
}
.home-nav-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.home-nav-logo img {
  height: 45px;
  width: auto
}
.home-nav-signin {
  padding: .625rem 1.5rem;
  font-family: Montserrat,sans-serif;
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  background: 0 0;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 4px;
  text-decoration: none;
  transition: all .3s ease
}
.home-nav-signin:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.8);
  color: #fff
}
.home-hero,
.public-layout .home-hero {
  min-height: 100vh!important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 60% 50% at 50% 50%,#2d5a8f 0,transparent 70%),linear-gradient(135deg,#1a1a2e 0,#16213e 100%)!important;
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem 2rem;
  -webkit-font-smoothing: antialiased
}
.home-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%,rgba(255,255,255,.03) 0,transparent 50%);
  opacity: 1
}
.home-hero-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden
}
.home-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%,-50%);
  object-fit: cover;
  opacity: .6
}
.home-hero-content {
  max-width: 700px;
  text-align: left;
  position: absolute;
  bottom: calc(10% - 60px);
  left: 5%;
  z-index: 2;
  opacity: 0;
  transform: translate3d(0,30px,0);
  animation: heroFadeIn .8s ease-out .2s forwards
}
@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translate3d(0,0,0)
  }
}
.home-hero-title {
  font-family: Montserrat,sans-serif!important;
  font-size: 4.5rem!important;
  font-weight: 700!important;
  color: #fff!important;
  line-height: 1.15!important;
  margin-bottom: 2rem!important;
  letter-spacing: -.03em!important
}
.home-hero-subtitle {
  font-family: 'Varela Round',sans-serif!important;
  font-size: 1.5rem!important;
  color: rgba(255,255,255,.9)!important;
  line-height: 1.6!important;
  margin-bottom: 3rem!important;
  font-weight: 400!important;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto
}
.home-hero-actions {
  display: flex;
  gap: 2rem;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center
}
.home-hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1.125rem 2.5rem;
  font-family: Montserrat,sans-serif!important;
  font-size: 1rem!important;
  font-weight: 600!important;
  letter-spacing: .5px;
  border-radius: 4px;
  text-decoration: none!important;
  transition: all .4s ease;
  position: relative;
  overflow: visible
}
.home-hero-button-primary {
  background: 0 0!important;
  color: #fff!important;
  border: 2px solid #fff!important;
  box-shadow: 0 0 20px rgba(255,255,255,.2);
  animation: borderGlow 3s ease-in-out infinite alternate
}
@keyframes borderGlow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(255,255,255,.2)
  }
  50% {
    box-shadow: 0 0 30px rgba(255,255,255,.4),0 0 40px rgba(255,255,255,.2)
  }
}
.home-hero-button-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  animation: shine 2.5s ease-in-out infinite
}
@keyframes shine {
  0% {
    left: -100%
  }
  100%,
  20% {
    left: 100%
  }
}
.home-hero-button-primary:hover {
  background: #fff!important;
  color: #1a1a2e!important;
  transform: translateY(-3px)!important;
  box-shadow: 0 8px 20px rgba(255,255,255,.3)!important
}
.home-hero-button-primary:active {
  transform: scale(.98)!important
}
.home-hero-button-phone {
  background: 0 0!important;
  color: rgba(255,255,255,.9)!important;
  border: none!important;
  padding: 1rem 0!important;
  font-size: .95rem!important;
  font-weight: 500!important
}
.home-hero-button-phone:hover {
  color: #fff!important
}
.home-hero-button-phone i {
  font-size: .9rem
}
@media (max-width:992px) {
  .home-hero {
    padding: 7rem 1.5rem 3rem 1.5rem!important
  }
  .home-hero-title {
    font-size: 3.5rem!important
  }
  .home-hero-subtitle {
    font-size: 1.25rem!important
  }
}
@media (max-width:768px) {
  .home-nav-logo img {
    height: 35px
  }
  .home-nav-signin {
    padding: .5rem 1rem;
    font-size: .875rem
  }
  .home-hero {
    padding: 6rem 1rem 2rem 1rem!important
  }
  .home-hero-content {
    left: 1rem;
    right: 1rem;
    bottom: 5%
  }
  .home-hero-video {
    opacity: .4
  }
  .home-hero-title {
    font-size: 2.5rem!important
  }
  .home-hero-subtitle {
    font-size: 1.125rem!important;
    margin-bottom: 2rem!important
  }
  .home-hero-actions {
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start
  }
  .home-hero-button-primary {
    width: 100%;
    max-width: 300px
  }
}