/* ============================================
       CSS VARIABLES
       ============================================ */
    :root {
      --default-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      --heading-font: "Nunito", sans-serif;
      --nav-font: "Poppins", sans-serif;
      --background-color: #ffffe0;
      --default-color: #444444;
      --heading-color: #660000;
      --accent-color: #660000;
      --surface-color: #ffffe0;
      --contrast-color: #ffffe0;
      --nav-color: #238656;
      --nav-hover-color: #e1cd14;
      --nav-mobile-background-color: #ffffe0;
      --nav-dropdown-background-color: #ffffe0;
      --nav-dropdown-color: #212529;
      --nav-dropdown-hover-color: #4154f1;
    }

    /* ============================================
       RESET & BASE
       ============================================ */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: var(--default-font);
      color: var(--default-color);
      line-height: 1.6;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    ul {
      list-style: none;
    }

    /* ============================================
       TOP BAR
       ============================================ */
    .top-bar {
      background: linear-gradient(135deg, #23c778, #389f6d, #318c60 100%);
      color: #ffffe0;
      padding: 10px 0;
      font-size: 14px;
    }

    .top-bar-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }

    .top-bar .contact-info span {
      margin-right: 15px;
      opacity: 0.95;
      font-size: 13px;
    }

    .top-bar .social-links a {
      margin-left: 10px;
      color: #ffffe0;
      font-weight: 600;
      transition: 0.3s;
      opacity: 0.9;
      font-size: 14px;
    }

    .top-bar .social-links a:hover {
      opacity: 1;
      transform: scale(1.1);
    }

    /* ============================================
       HEADER - MOBILE FIRST
       ============================================ */
    .header {
      background-color: var(--background-color);
      padding: 15px 0;
      position: relative;
      z-index: 997;
      transition: all 0.3s ease;
    }

    .header .container-fluid {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }

    .header.scrolled {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding: 10px 0;
      background-color: rgba(255, 255, 255, 0.98);
      box-shadow: 0 2px 20px rgba(34, 191, 107, 0.1);
      backdrop-filter: blur(10px);
    }

    .header.scrolled .logo img {
      max-height: 32px;
      transition: max-height 0.3s ease;
    }
    .header.scrolled .logo .sitename  {
      font-size: 22px;
      transition: font-size 0.3s ease;
    }

    body.header-fixed {
      padding-top: 70px;
    }

    /* ============================================
       CONTAINER
       ============================================ */
    .container-fluid,
    .container-xxl {
      --bs-gutter-x: 1.5rem;
      width: 100%;
      padding-right: calc(var(--bs-gutter-x) * 0.5);
      padding-left: calc(var(--bs-gutter-x) * 0.5);
      margin-right: auto;
      margin-left: auto;
    }

    /* ============================================
       LOGO - MOBILE
       ============================================ */
    .header .logo {
      display: flex;
      align-items: center;
      line-height: 1;
      transition: all 0.3s ease;
      order: 1;
    }

    .header .logo img {
      max-height: 32px;
      margin-right: 8px;
      transition: max-height 0.3s ease;
    }

    .header .logo .sitename {
      font-size: 24px;
      margin: 0;
      font-weight: 700;
      color: var(--heading-color);
      transition: font-size 0.3s ease;
    }

    /* ============================================
       GET STARTED BUTTON - MOBILE
       ============================================ */
    .header .btn-getstarted {
      color: var(--contrast-color);
      background: var(--accent-color);
      font-size: 14px;
      padding: 8px 16px;
      margin: 0 10px 0 0;
      border-radius: 50px;
      transition: 0.3s;
      font-weight: 500;
      border: 2px solid var(--accent-color);
      white-space: nowrap;
      order: 2;
    }

    .header .btn-getstarted:hover {
      background: transparent;
      color: var(--accent-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(65, 84, 241, 0.3);
    }

    /* ============================================
       MOBILE NAV TOGGLE
       ============================================ */
    .mobile-nav-toggle {
      color: var(--nav-color);
      font-size: 28px;
      line-height: 0;
      cursor: pointer;
      transition: 0.3s;
      display: inline-block;
      width: 1.5em;
      height: 1.5em;
      vertical-align: middle;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
      order: 3;
    }

    .mobile-nav-toggle.x-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3e%3cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
    }

    /* ============================================
       NAVIGATION MENU - MOBILE FIRST
       ============================================ */

    .navmenu {
      padding: 0;
      z-index: 9997;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
    }

    /* Main menu ul - MOBILE */
    .navmenu ul {
      display: none;
      list-style: none;
      position: absolute;
      inset: 60px 20px 20px 20px;
      padding: 10px 0;
      margin: 0;
      border-radius: 10px;
      background-color: var(--nav-mobile-background-color);
      overflow-y: auto;
      transition: 0.3s;
      z-index: 9998;
      box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.15);
    }

    /* Menu items - MOBILE */
    .navmenu li {
      display: block;
      width: 100%;
    }

    .navmenu a {
      color: var(--nav-dropdown-color);
      padding: 12px 20px;
      font-family: var(--nav-font);
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: 0.3s;
      border-radius: 6px;
      margin: 2px 10px;
      width: calc(100% - 20px);
    }

    /* Mobile dropdown chevron */
    .navmenu .dropdown > a::after,
    .navmenu .listing-dropdown > a::after {
      content: '▾';
      font-size: 18px;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: 0.3s;
      background-color: rgba(65, 84, 241, 0.1);
      color: var(--accent-color);
      flex-shrink: 0;
    }

    .navmenu a:hover,
    .navmenu .active {
      color: var(--nav-dropdown-hover-color);
      background: rgba(65, 84, 241, 0.05);
    }

    .navmenu .dropdown.active > a::after,
    .navmenu .listing-dropdown.active > a::after {
      background-color: var(--accent-color);
      color: white;
      transform: rotate(180deg);
    }

    /* Dropdown submenu - MOBILE */
    .navmenu .dropdown ul,
    .navmenu .listing-dropdown ul {
      position: static;
      display: none;
      padding: 5px 0;
      margin: 5px 20px;
      background-color: rgba(65, 84, 241, 0.03);
      border-left: 3px solid var(--accent-color);
      border-radius: 6px;
      box-shadow: none;
      inset: auto;
    }

    .navmenu .dropdown ul a::after,
    .navmenu .listing-dropdown ul a::after {
      display: none;
    }

    .navmenu .dropdown > .dropdown-active,
    .navmenu .listing-dropdown > .dropdown-active {
      display: block;
    }

    /* Mobile nav active state */
    .mobile-nav-active {
      overflow: hidden;
    }

    .mobile-nav-active .mobile-nav-toggle {
      position: fixed;
      top: 15px;
      right: 15px;
      z-index: 9999;
    }

    .mobile-nav-active .navmenu {
      position: fixed;
      overflow: hidden;
      inset: 0;
      background: rgba(33, 37, 41, 0.9);
      transition: 0.3s;
      backdrop-filter: blur(5px);
    }

    .mobile-nav-active .navmenu > ul {
      display: block;
    }

    /* ============================================
       DEMO CONTENT
       ============================================ */
    .hero {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 80px 20px 60px;
      text-align: center;
    }

    .hero h1 {
      font-size: 32px;
      margin-bottom: 15px;
      font-weight: 800;
      line-height: 1.2;
    }

    .hero p {
      font-size: 16px;
      opacity: 0.9;
      line-height: 1.6;
    }

    .section {
      padding: 50px 20px;
    }

    .section:nth-child(even) {
      background: #f8f9fa;
    }

    .section h2 {
      font-size: 28px;
      color: var(--heading-color);
      margin-bottom: 15px;
      text-align: center;
    }

    .section p {
      margin: 0 auto 20px;
      text-align: center;
      font-size: 16px;
      line-height: 1.7;
    }

    .card-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      margin-top: 30px;
    }

    .card {
      background: white;
      padding: 25px;
      border-radius: 10px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
      transition: 0.3s;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    }

    .card h3 {
      color: var(--accent-color);
      margin-bottom: 12px;
      font-size: 20px;
    }

    .card p {
      text-align: left;
      font-size: 15px;
    }

    footer {
      background: #1a1a2e;
      color: white;
      padding: 30px 20px;
      text-align: center;
    }

    footer p {
      opacity: 0.8;
      font-size: 14px;
    }

    /* ============================================
       MEDIA QUERIES - TABLET (min-width: 768px)
       ============================================ */
    @media (min-width: 768px) {
      .top-bar-content {
        font-size: 14px;
      }

      .hero {
        padding: 120px 40px 80px;
      }

      .hero h1 {
        font-size: 42px;
      }

      .hero p {
        font-size: 18px;
        max-width: 600px;
        margin: 0 auto;
      }

      .section {
        padding: 60px 40px;
      }

      .section h2 {
        font-size: 32px;
      }

      .section p {
        font-size: 17px;
        max-width: 700px;
      }

      .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
      }
    }

    /* ============================================
       MEDIA QUERIES - DESKTOP (min-width: 1200px)
       ============================================ */
    @media (min-width: 1200px) {
      /* Container */
      .container-xxl {
        max-width: 1320px;
      }

      /* Hide mobile toggle */
      .mobile-nav-toggle {
        display: none !important;
      }

      /* Header */
      .header {
        padding: 20px 0;
      }

      .header.scrolled {
        padding: 12px 0;
      }

      .header .logo img {
        max-height: 36px;
      }

      .header .logo .sitename {
        font-size: 30px;
      }

      .header.scrolled .logo img {
        max-height: 28px;
      }

      .header.scrolled .logo .sitename {
        font-size: 24px;
      }

      body.header-fixed {
        padding-top: 80px;
      }

      /* ============================================
         FLEXBOX ORDER - DESKTOP
         ============================================ */
      .header .logo {
        order: 1;
        margin-right: auto;
      }

      .header .navmenu {
        order: 2;
        margin-right: 30px;
      }

      .header .btn-getstarted {
        order: 3;
        font-size: 15px;
        padding: 8px 25px;
        margin: 0;
      }

      /* ============================================
         NAVMENU - DESKTOP STYLES
         ============================================ */
      .navmenu {
        padding: 0;
        position: static;
      }

      /* Main menu ul - DESKTOP */
      .navmenu > ul {
        display: flex !important;
        position: static;
        inset: auto;
        padding: 0;
        margin: 0;
        border-radius: 0;
        background: transparent;
        overflow-y: visible;
        box-shadow: none;
        align-items: center;
        flex-direction: row;
      }

      /* Menu items - DESKTOP */
      .navmenu > ul > li {
        position: relative;
        display: block;
        width: auto;
      }

      .navmenu > ul > li > a {
        color: var(--nav-color);
        padding: 18px 15px;
        font-size: 15px;
        font-weight: 500;
        white-space: nowrap;
        margin: 0;
        border-radius: 0;
        background: transparent;
        width: auto;
      }

      .navmenu > ul > li:last-child > a {
        padding-right: 15px;
      }

      .navmenu > ul > li:hover > a,
      .navmenu > ul > li > a.active {
        color: var(--nav-hover-color);
        background: transparent;
      }

      /* Desktop dropdown chevron */
      .navmenu .dropdown > a::after,
      .navmenu .listing-dropdown > a::after {
        content: '▾';
        margin-left: 5px;
        font-size: 14px;
        width: auto;
        height: auto;
        background: transparent;
        color: inherit;
        transform: none;
        display: inline-block;
      }

      /* Deep dropdown right chevron */
      .navmenu .dropdown .dropdown > a::after {
        content: '›';
        font-size: 18px;
      }

      /* ============================================
         DROPDOWN MENUS - DESKTOP
         ============================================ */

      .navmenu .dropdown ul {
        margin: 0;
        padding: 10px 0;
        background: var(--nav-dropdown-background-color);

        display: block;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        left: 14px;
        top: 130%;

        overflow: visible !important;
        overflow-y: visible !important;
        max-height: none !important;

        min-width: 220px;
        width: auto;
        height: auto;

        border-radius: 8px;
        border-left: none;
        box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.12);

        transition: 0.3s;
        z-index: 99;

        inset: auto;
      }

      .navmenu .dropdown ul li {
        display: block;
        width: 100%;
        min-width: 200px;
        position: relative;
      }

      .navmenu .dropdown ul li a {
        padding: 12px 20px;
        font-size: 14px;
        color: var(--nav-dropdown-color);
        display: block;
        width: 100%;
        margin: 0;
        border-radius: 0;
        background: transparent;
      }

      .navmenu .dropdown ul li a::after {
        display: none;
      }

      .navmenu .dropdown ul li a:hover,
      .navmenu .dropdown ul li:hover > a {
        color: var(--nav-dropdown-hover-color);
        background: rgba(65, 84, 241, 0.05);
      }

      .navmenu .dropdown:hover > ul {
        opacity: 1;
        top: 100%;
        visibility: visible;
      }

      /* ============================================
         DEEP DROPDOWN (3-Й УРОВЕНЬ) - DESKTOP
         ============================================ */

      .navmenu .dropdown .dropdown > a::after {
        display: inline-block;
      }

      .navmenu .dropdown .dropdown ul {
        top: 0;
        left: -90%;
        visibility: hidden;
        z-index: 100;
      }

      .navmenu .dropdown .dropdown:hover > ul {
        opacity: 1;
        top: 0;
        left: -100%;
        visibility: visible;
      }

      /* ============================================
         LISTING DROPDOWN (MEGA MENU) - DESKTOP
         ПРАВИЛЬНОЕ РЕШЕНИЕ: относительно .container-fluid
         ============================================ */

      .navmenu .listing-dropdown {
        position: static;
      }

      .navmenu .listing-dropdown ul {
        /* Позиционирование относительно .container-fluid (у него position: relative) */
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;

        /* Отступы и визуал */
        margin: 0;
        padding: 20px;
        background: var(--nav-dropdown-background-color);

        /* Скрыто по умолчанию */
        visibility: hidden;
        opacity: 0;

        /* Без overflow */
        overflow: visible !important;
        overflow-y: visible !important;
        max-height: none !important;

        /* Layout */
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: space-between;

        /* Визуал */
        border-radius: 8px;
        border-left: none;
        box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.12);

        /* Анимация */
        transition: 0.3s;
        z-index: 99;

        /* Убираем мобильные стили */
       
        width: auto;
      }

      .navmenu .listing-dropdown ul li {
        flex: 1;
        display: block;
        width: auto;
        min-width: 0;
      }

      .navmenu .listing-dropdown ul li a {
        padding: 10px;
        font-size: 14px;
        color: var(--nav-dropdown-color);
        display: block;
        border-radius: 4px;
        margin: 0;
        width: 100%;
        background: transparent;
      }

      .navmenu .listing-dropdown ul li a:hover {
        color: var(--nav-dropdown-hover-color);
        background: rgba(65, 84, 241, 0.05);
      }

      .navmenu .listing-dropdown:hover > ul {
        opacity: 1;
        visibility: visible;
      }

      /* ============================================
         CONTENT - DESKTOP
         ============================================ */


      .section {
        padding: 80px 0;
      }

      .section h2 {
        font-size: 36px;
      }

      .section p {
        font-size: 18px;
        max-width: 800px;
      }

      .card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-top: 50px;
      }

      .card {
        padding: 30px;
      }

      .card h3 {
        font-size: 24px;
      }

      .card p {
        font-size: 16px;
      }

      footer {
        padding: 40px 0;
      }
    }

    /* ============================================
       MEDIA QUERY - EXTRA LARGE (min-width: 1400px)
       ============================================ */
    @media (min-width: 1400px) {
      .container-xxl {
        max-width: 1320px;
      }
    }