:root {
    --bg: #0b1220;
    --fg: #0e5fd8;
    --fg-2: #6aa7ff;
    --txt: #0f172a;
    --muted: #475569;
    --paper: #ffffff;
    --ring: rgba(14, 95, 216, .15);
    --shade: 0 10px 30px rgba(2, 8, 23, .08), 0 2px 6px rgba(2, 8, 23, .06);
    --radius: 18px;
  }

  * {
    box-sizing: border-box
  }

  html,
  body {
    margin: 0;
    padding: 0
  }

  body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: #0b1220;
    background: #f7fafc;
    line-height: 1.55;
  }

  /*.header-image-wrapper {
    display: none;
  }*/

  a {
    color: var(--fg);
    text-decoration: none
  }

  .container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px
  }

  header {
    position: static;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid #eef2f7
  }

  /*  .page-header{
    position: static !important;
  }*/

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0
  }

  .brand {
    display: flex;
    gap: 10px;
    align-items: center
  }

  .brand svg {
    width: 34px;
    height: 34px
  }

  .brand .word {
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: .2px
  }

  .nav a {
    margin: 0 10px;
    color: #0b1220;
    opacity: .9
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 999px;
    padding: 12px 18px;
    border: 1px solid #dbe6f3;
    background: #fff;
    box-shadow: var(--shade);
    text-align: center;
    transition: transform .06s ease, box-shadow .2s
  }

  .btn:hover {
    transform: translateY(-1px)
  }

  .btn.primary {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    border-color: #1d4ed8;
    color: #fff;
  }

  .hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1000px 600px at 10% -10%, #dbeafe 10%, transparent 60%), radial-gradient(800px 500px at 110% 10%, #bfdbfe 10%, transparent 60%)
  }

  .hero .wrap {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: center;
    /*padding: 0px 0;*/
  }

  .kicker {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    color: #1d4ed8;
    background: #e0ecff;
    border: 1px solid #cfe0ff;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 600
  }

  h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    margin: 14px 0 12px 0
  }

  .lead {
    font-size: 1.05rem;
    color: #334155
  }

  .hero-card {
    background: #fff;
    border: 1px solid #e7eef8;
    border-radius: var(--radius);
    box-shadow: var(--shade);
    padding: 24px
  }

  .hero-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-top: 10px
  }

  .cell {
    background: #f1f5f9;
    height: 56px;
    border-radius: 12px;
    border: 1px solid #e6edf7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #64748b
  }

  .cell.pay {
    background: #e0ecff;
    color: #1e3a8a;
    border-color: #bed5ff
  }

  /*section {
    padding: 64px 0
  }*/

  .section-title {
    font-size: 1.8rem;
    margin: 0 0 10px
  }

  .muted {
    color: #64748b
  }

  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
  }

  .card {
    background: #fff;
    border: 1px solid #e7eef8;
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shade)
  }

  .icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #e8f0ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px
  }

  .list {
    display: grid;
    gap: 8px;
    margin: 12px 0 0 0
  }

  .list li {
    display: flex;
    align-items: flex-start;
    gap: 10px
  }

  .pricing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
  }

  .price {
    border: 2px solid #e7eef8
  }

  .price.pop {
    border-color: #1d4ed8
  }

  .price .tag {
    display: inline-block;
    margin-bottom: 8px;
    font-size: .8rem;
    color: #1d4ed8;
    background: #e0ecff;
    border: 1px solid #cfe0ff;
    padding: 4px 10px;
    border-radius: 999px
  }

  .big {
    font-size: 2.2rem;
    font-weight: 800
  }

  .cta {
    background: linear-gradient(180deg, #f0f7ff, #e9f1ff);
    padding: 20px 0px 20px 0px;
  }

  footer {
    padding: 28px 0;
    border-top: 1px solid #e9eef7;
    color: #64748b
  }

  .formInput {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #d7e2f0;
    outline: none;
    box-shadow: 0 0 0 3px transparent;
    border-radius: 13px !important;
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }

  #contactForm .error {
    color: red;
    font-size: 12px;
    display: none;
  }

  .d-flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .d-flex2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  /* responsive */
  @media only screen and (max-width: 354px) {
    .container {
      padding: 0 10px !important;
    }
  }

  @media (max-width: 960px) {
    .hero .wrap {
      grid-template-columns: 1fr
    }

    .grid-3,
    .pricing {
      grid-template-columns: 1fr
    }

    .nav .links {
      display: none
    }

    .nav .menu-btn {
      display: inline-flex
    }

    a.btn {
      text-align: center;
      padding: 10px 22px !important;
      margin-bottom: 15px;
    }

    ol li strong {
      width: 160px;
    }

    .fb-post {
      max-width: 100% !important;
      overflow: hidden;
    }
  }

  .menu-btn {
    display: none
  }

  .mobile-menu {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid #eef2f7;
    padding: 12px
  }

  .mobile-menu a {
    display: block;
    padding: 10px 14px;
    color: #0b1220
  }

  .dark-mode p.lead,
  .dark-mode h6,
  .dark-mode h2,
  .dark-mode h3 {
    color: #bed5ff !important;
  }

  .dark-mode .card h3 {
    color: #000a1bff !important;
  }

  .dark-mode .cta {
    background: linear-gradient(180deg, #1c252c, #699aee) !important;
    color: #fff !important;
  }

  .dark-mode.static-header .main-navigation-container {
    background-color: #00498a !important;
  }

  .dark-mode .btn,
  body.dark-mode {
    color: #0b1220;
  }
  .dark-mode .main-navigation-container
{
background-color: #0b1220;
}