
<!DOCTYPE html>


  
  
  ЭкспертПроКонсалт — Сопровождение государственных закупок 44-ФЗ и 223-ФЗ</title>
  

  <!-- Google Fonts -->
  
  
  

  
    /* ============================================================
       CSS CUSTOM PROPERTIES
    ============================================================ */
    :root {
      --bg-main:    #F7F5F0;
      --bg-white:   #FFFFFF;
      --bg-card:    #EEE9DF;
      --accent:     #1A2E5A;
      --accent-dark:#0F1E3D;
      --accent-light:#2E4A8A;
      --text-dark:  #0F1B35;
      --text-mid:   #3D4B65;
      --text-muted: #8492AA;
      --border:     #DDD8CE;
      --gold:       #B8902A;
      --gold-light: #E8C96A;
      --gold-pale:  #F5EDD6;
      --shadow-sm:  0 2px 12px rgba(15,30,61,.10);
      --shadow-md:  0 8px 32px rgba(15,30,61,.14);
      --shadow-lg:  0 20px 60px rgba(15,30,61,.18);
      --radius:     16px;
      --radius-sm:  10px;
      --transition: .3s cubic-bezier(.4,0,.2,1);
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      font-family: 'Manrope', sans-serif;
      background: var(--bg-main);
      color: var(--text-dark);
      line-height: 1.65;
      overflow-x: hidden;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
    button { cursor: pointer; font-family: inherit; border: none; outline: none; }

    /* ============================================================
       SCROLLBAR
    ============================================================ */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg-main); }
    ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

    /* ============================================================
       UTILITY
    ============================================================ */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .section { padding: 100px 0; }
    .section-white { background: var(--bg-white); }
    .section-main  { background: var(--bg-main); }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--gold);
      background: var(--gold-pale);
      border: 1px solid rgba(184,144,42,.25);
      padding: 6px 16px;
      border-radius: 100px;
      margin-bottom: 20px;
    }
    .tag::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--gold);
      animation: pulse 1.6s infinite;
    }
    @keyframes pulse {
      0%,100% { opacity:1; transform:scale(1); }
      50%      { opacity:.4; transform:scale(1.4); }
    }

    .section-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 700;
      color: var(--text-dark);
      line-height: 1.2;
    }
    .section-subtitle {
      font-size: 1.05rem;
      color: var(--text-mid);
      max-width: 640px;
      margin-top: 14px;
      line-height: 1.7;
    }
    .accent-word { color: var(--gold); }
    .gold-word   { color: var(--gold); }

    /* ============================================================
       BUTTONS
    ============================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 15px 32px;
      border-radius: 100px;
      font-weight: 700;
      font-size: .95rem;
      letter-spacing: .02em;
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }
    .btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0);
      transition: var(--transition);
    }
    .btn:hover::after { background: rgba(255,255,255,.08); }

    .btn-primary {
      background: linear-gradient(135deg, var(--gold) 0%, #9A7018 100%);
      color: #fff;
      box-shadow: 0 4px 24px rgba(184,144,42,.40);
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 36px rgba(184,144,42,.55);
    }
    .btn-primary:active { transform: translateY(0); }

    .btn-outline {
      background: transparent;
      color: #fff;
      border: 2px solid rgba(255,255,255,.45);
    }
    .btn-outline:hover {
      background: rgba(255,255,255,.1);
      border-color: rgba(255,255,255,.8);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: none;
    }

    .btn-white {
      background: #fff;
      color: var(--accent);
      box-shadow: var(--shadow-sm);
    }
    .btn-white:hover {
      background: var(--bg-card);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .btn-gold {
      background: linear-gradient(135deg, var(--gold) 0%, #9A7018 100%);
      color: #fff;
      box-shadow: 0 4px 24px rgba(184,144,42,.40);
    }
    .btn-gold:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 36px rgba(184,144,42,.50);
    }

    .btn-tab {
      padding: 12px 28px;
      border-radius: 100px;
      font-weight: 700;
      font-size: .9rem;
      transition: var(--transition);
      background: var(--bg-card);
      color: var(--text-mid);
      border: 2px solid transparent;
    }
    .btn-tab.active {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 4px 20px rgba(15,30,61,.25);
    }
    .btn-tab:hover:not(.active) {
      border-color: var(--accent);
      color: var(--accent);
    }

    .btn svg { width: 18px; height: 18px; flex-shrink: 0; }

    /* ============================================================
       HEADER / NAV
    ============================================================ */
    #header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      transition: var(--transition);
      padding: 18px 0;
      background: transparent;
    }
    #header.scrolled {
      background: rgba(247,245,240,.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      padding: 12px 0;
      box-shadow: var(--shadow-sm);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    /* Logo */
    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }
    .logo-icon {
      width: 44px; height: 44px;
      background: linear-gradient(135deg, var(--accent), var(--accent-dark));
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(42,91,215,.35);
      position: relative;
      overflow: hidden;
    }
    .logo-icon::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.25), transparent);
    }
    .logo-icon svg { width: 22px; height: 22px; fill: #fff; position: relative; z-index:1; }
    .logo-text { line-height: 1.1; }
    .logo-name {
      font-family: 'Playfair Display', serif;
      font-weight: 700;
      font-size: 1.1rem;
      color: var(--text-dark);
      letter-spacing: -.01em;
    }
    .logo-sub {
      font-size: .65rem;
      color: var(--text-muted);
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    /* Nav links */
    .nav-links {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .nav-links a {
      font-size: .9rem;
      font-weight: 600;
      color: rgba(255,255,255,.75);
      padding: 8px 16px;
      border-radius: 100px;
      transition: var(--transition);
      white-space: nowrap;
    }
    .nav-links a:hover {
      color: var(--gold-light);
      background: rgba(255,255,255,.08);
    }
    #header.scrolled .nav-links a {
      color: var(--text-mid);
    }
    #header.scrolled .nav-links a:hover {
      color: var(--accent);
      background: rgba(26,46,90,.07);
    }
    #header.scrolled .logo-name { color: var(--text-dark); }
    #header.scrolled .logo-sub  { color: var(--text-muted); }
    .logo-name { color: rgba(255,255,255,.9); transition: var(--transition); }
    .logo-sub  { color: rgba(255,255,255,.45); transition: var(--transition); }
    /* Hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      width: 36px; height: 36px;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,.12);
      border-radius: 10px;
      transition: var(--transition);
    }
    .hamburger:hover { background: rgba(255,255,255,.20); }
    .hamburger span {
      display: block;
      width: 20px; height: 2px;
      background: rgba(255,255,255,.8);
      border-radius: 2px;
      transition: var(--transition);
    }
    #header.scrolled .hamburger { background: rgba(26,46,90,.08); }
    #header.scrolled .hamburger span { background: var(--accent); }
    #header.scrolled .hamburger:hover { background: rgba(26,46,90,.14); }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    /* Mobile menu */
    .mobile-menu {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(247,245,240,.98);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      z-index: 999;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
    }
    .mobile-menu.open {
      display: flex;
      opacity: 1;
      pointer-events: all;
    }
    .mobile-menu a {
      font-family: 'Playfair Display', serif;
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--text-dark);
      transition: var(--transition);
    }
    .mobile-menu a:hover { color: var(--accent); }

    /* ============================================================
       HERO SECTION
    ============================================================ */
    #hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      background: linear-gradient(160deg, #0F1E3D 0%, #1A2E5A 55%, #1E3568 100%);
      padding-top: 100px;
    }

    /* Animated background blobs */
    .hero-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      pointer-events: none;
      z-index: 0;
    }
    .hero-blob-1 {
      width: 700px; height: 700px;
      background: radial-gradient(circle, rgba(46,74,138,.55) 0%, transparent 70%);
      top: -150px; right: -80px;
      animation: float1 8s ease-in-out infinite;
    }
    .hero-blob-2 {
      width: 450px; height: 450px;
      background: radial-gradient(circle, rgba(184,144,42,.18) 0%, transparent 70%);
      bottom: 40px; left: -60px;
      animation: float2 10s ease-in-out infinite;
    }
    .hero-blob-3 {
      width: 350px; height: 350px;
      background: radial-gradient(circle, rgba(184,144,42,.10) 0%, transparent 70%);
      top: 40%; left: 35%;
      animation: float3 7s ease-in-out infinite;
    }
    @keyframes float1 {
      0%,100% { transform: translate(0,0) scale(1); }
      50%      { transform: translate(-30px, 40px) scale(1.05); }
    }
    @keyframes float2 {
      0%,100% { transform: translate(0,0) scale(1); }
      50%      { transform: translate(40px,-30px) scale(1.08); }
    }
    @keyframes float3 {
      0%,100% { transform: translate(0,0) scale(1); }
      50%      { transform: translate(-20px, 20px) scale(.95); }
    }

    /* Grid background pattern */
    .hero-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 60px 60px;
      z-index: 0;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 780px;
    }
    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--gold-light);
      background: rgba(184,144,42,.15);
      border: 1px solid rgba(184,144,42,.35);
      padding: 7px 18px;
      border-radius: 100px;
      margin-bottom: 28px;
      opacity: 0;
      animation: fadeUp .7s .2s forwards;
    }
    .hero-eyebrow::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--gold-light);
    }
    .hero-headline {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.4rem, 5.5vw, 4.2rem);
      font-weight: 900;
      line-height: 1.12;
      color: #FFFFFF;
      margin-bottom: 10px;
      opacity: 0;
      animation: fadeUp .7s .35s forwards;
    }
    .hero-headline-accent {
      color: #FFFFFF;
      position: relative;
      display: inline-block;
    }
    .hero-headline-accent::after {
      display: none;
    }
    @keyframes lineGrow {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }
    .hero-subheadline {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.1rem, 2.2vw, 1.6rem);
      font-weight: 400;
      font-style: italic;
      color: rgba(255,255,255,.65);
      margin-bottom: 48px;
      opacity: 0;
      animation: fadeUp .7s .5s forwards;
    }

    /* Stats row */
    .hero-stats {
      display: flex;
      gap: 40px;
      flex-wrap: wrap;
      margin-bottom: 48px;
      opacity: 0;
      animation: fadeUp .7s .65s forwards;
    }
    .hero-stat {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .hero-stat-value {
      font-family: 'Playfair Display', serif;
      font-size: 2.4rem;
      font-weight: 900;
      color: var(--gold-light);
      line-height: 1;
    }
    .hero-stat-label {
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
    .hero-stat-divider {
      width: 1px;
      background: rgba(255,255,255,.15);
      align-self: stretch;
    }

    .hero-ctas {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeUp .7s .8s forwards;
    }

    /* Floating badge */
    .hero-badge {
      position: absolute;
      right: 0; top: 50%;
      transform: translateY(-50%);
      width: 260px;
      background: rgba(255,255,255,.07);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: var(--radius);
      padding: 28px;
      box-shadow: 0 8px 40px rgba(0,0,0,.25);
      border: 1px solid rgba(255,255,255,.14);
      z-index: 2;
      opacity: 0;
      animation: fadeLeft .8s .9s forwards;
    }
    @keyframes fadeLeft {
      from { opacity:0; transform: translateY(-50%) translateX(30px); }
      to   { opacity:1; transform: translateY(-50%) translateX(0); }
    }
    .hero-badge-icon {
      width: 48px; height: 48px;
      background: rgba(184,144,42,.25);
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 16px;
    }
    .hero-badge-icon svg { width: 24px; height: 24px; fill: var(--gold-light); }
    .hero-badge-title {
      font-family: 'Playfair Display', serif;
      font-size: 1rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 8px;
    }
    .hero-badge-items {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .hero-badge-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .82rem;
      color: rgba(255,255,255,.6);
      font-weight: 500;
    }
    .hero-badge-item::before {
      content: '';
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--gold-light);
      flex-shrink: 0;
    }

    @keyframes fadeUp {
      from { opacity:0; transform:translateY(28px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* Scroll indicator */
    .scroll-indicator {
      position: absolute;
      bottom: 40px; left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      opacity: 0;
      animation: fadeUp .6s 1.3s forwards;
    }
    .scroll-indicator-text {
      font-size: .7rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.35);
      font-weight: 600;
    }
    .scroll-mouse {
      width: 24px; height: 38px;
      border: 2px solid rgba(255,255,255,.25);
      border-radius: 12px;
      position: relative;
    }
    .scroll-mouse::after {
      content: '';
      width: 3px; height: 8px;
      background: var(--gold-light);
      border-radius: 2px;
      position: absolute;
      top: 6px; left: 50%; transform: translateX(-50%);
      animation: scrollDown 1.5s infinite;
    }
    @keyframes scrollDown {
      0%   { opacity:1; transform:translateX(-50%) translateY(0); }
      100% { opacity:0; transform:translateX(-50%) translateY(12px); }
    }

    /* ============================================================
       SERVICES SECTION
    ============================================================ */
    #services .section-header {
      text-align: center;
      margin-bottom: 48px;
    }
    .tabs-row {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-bottom: 56px;
      flex-wrap: wrap;
    }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    /* Service card */
    .service-card {
      background: var(--bg-white);
      border-radius: var(--radius);
      padding: 32px;
      border: 1px solid var(--border);
      transition: var(--transition);
      position: relative;
      overflow: hidden;
      cursor: default;
    }
    .service-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--gold), var(--gold-light));
      transform: scaleX(0);
      transform-origin: left;
      transition: var(--transition);
    }
    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(184,144,42,.30);
    }
    .service-card:hover::before { transform: scaleX(1); }

    .service-card-num {
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .12em;
      color: var(--accent-light);
      margin-bottom: 16px;
    }
    .service-card-icon {
      width: 52px; height: 52px;
      background: rgba(42,91,215,.08);
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 18px;
      transition: var(--transition);
    }
    .service-card:hover .service-card-icon {
      background: var(--accent);
    }
    .service-card-icon svg { width: 24px; height: 24px; fill: var(--accent); transition: var(--transition); }
    .service-card:hover .service-card-icon svg { fill: #fff; }

    .service-card-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 10px;
      line-height: 1.3;
    }
    .service-card-desc {
      font-size: .88rem;
      color: var(--text-mid);
      line-height: 1.65;
      margin-bottom: 20px;
    }
    .service-card-items {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .service-card-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: .82rem;
      color: var(--text-mid);
      font-weight: 500;
    }
    .service-card-item::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
      margin-top: 5px;
    }

    /* Special (premium) card */
    .service-card.premium {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
      border: 1px solid rgba(184,144,42,.25);
    }
    .service-card.premium .service-card-num,
    .service-card.premium .service-card-title,
    .service-card.premium .service-card-desc,
    .service-card.premium .service-card-item { color: rgba(255,255,255,.85); }
    .service-card.premium .service-card-title { color: #fff; }
    .service-card.premium .service-card-item::before { background: var(--gold-light); }
    .service-card.premium .service-card-icon {
      background: rgba(255,255,255,.15);
    }
    .service-card.premium .service-card-icon svg { fill: #fff; }
    .service-card.premium:hover .service-card-icon {
      background: rgba(255,255,255,.25);
    }
    .service-card.premium::before { display: none; }
    .service-card.premium:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(42,91,215,.4); }

    /* Hidden tab panels */
    .tab-panel { display: none; }
    .tab-panel.active { display: contents; }

    /* ============================================================
       ABOUT SECTION
    ============================================================ */
    #about {
      position: relative;
      overflow: hidden;
    }
    #about .section-white {
      background: var(--bg-white);
    }
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .about-visual {
      position: relative;
    }
    .about-card-main {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
      border-radius: var(--radius);
      padding: 48px;
      color: #fff;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(184,144,42,.20);
    }
    .about-card-main::after {
      content: '';
      position: absolute;
      right: -40px; bottom: -40px;
      width: 200px; height: 200px;
      border-radius: 50%;
      background: rgba(255,255,255,.06);
    }
    .about-card-main::before {
      content: '';
      position: absolute;
      right: 30px; top: -30px;
      width: 120px; height: 120px;
      border-radius: 50%;
      background: rgba(255,255,255,.06);
    }
    .about-main-stat {
      font-family: 'Playfair Display', serif;
      font-size: 5rem;
      font-weight: 900;
      line-height: 1;
      color: #fff;
      position: relative;
      z-index: 1;
    }
    .about-main-label {
      font-size: 1rem;
      font-weight: 600;
      color: rgba(255,255,255,.7);
      margin-top: 8px;
      position: relative;
      z-index: 1;
    }
    .about-mini-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 16px;
    }
    .about-mini-card {
      background: var(--bg-main);
      border-radius: var(--radius-sm);
      padding: 20px;
      border: 1px solid var(--border);
      transition: var(--transition);
    }
    .about-mini-card:hover {
      border-color: var(--accent);
      box-shadow: var(--shadow-sm);
      transform: translateY(-2px);
    }
    .about-mini-val {
      font-family: 'Playfair Display', serif;
      font-size: 2rem;
      font-weight: 900;
      color: var(--accent);
    }
    .about-mini-lbl {
      font-size: .78rem;
      color: var(--text-muted);
      font-weight: 600;
      margin-top: 2px;
    }

    .about-text-block { }
    .about-body {
      font-size: .97rem;
      color: var(--text-mid);
      line-height: 1.8;
      margin-bottom: 20px;
    }
    .about-theses {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 40px;
    }
    .about-thesis {
      background: var(--bg-main);
      border-radius: var(--radius-sm);
      padding: 24px;
      border: 1px solid var(--border);
      transition: var(--transition);
    }
    .about-thesis:hover {
      border-color: var(--accent);
      box-shadow: var(--shadow-sm);
      transform: translateY(-3px);
    }
    .about-thesis-icon {
      width: 42px; height: 42px;
      background: rgba(42,91,215,.1);
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 14px;
      transition: var(--transition);
    }
    .about-thesis:hover .about-thesis-icon {
      background: var(--accent);
    }
    .about-thesis-icon svg { width: 20px; height: 20px; fill: var(--accent); transition: var(--transition); }
    .about-thesis:hover .about-thesis-icon svg { fill: #fff; }
    .about-thesis-title {
      font-weight: 700;
      font-size: .95rem;
      color: var(--text-dark);
      margin-bottom: 6px;
    }
    .about-thesis-text {
      font-size: .82rem;
      color: var(--text-mid);
      line-height: 1.6;
    }

    /* ============================================================
       CONTACT SECTION
    ============================================================ */
    #contact {
      position: relative;
    }
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 60px;
      align-items: start;
    }
    .contact-left { }
    .contact-info-items {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-top: 36px;
    }
    .contact-info-item {
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }
    .contact-info-icon {
      width: 44px; height: 44px;
      background: rgba(42,91,215,.1);
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .contact-info-icon svg { width: 20px; height: 20px; fill: var(--accent); }
    .contact-info-label {
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 4px;
    }
    .contact-info-value {
      font-size: .95rem;
      font-weight: 600;
      color: var(--text-dark);
    }

    /* Form */
    .form-card {
      background: var(--bg-white);
      border-radius: var(--radius);
      padding: 48px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-md);
    }
    .form-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 6px;
    }
    .form-sub {
      font-size: .88rem;
      color: var(--text-mid);
      margin-bottom: 32px;
      line-height: 1.6;
    }
    .form-group {
      margin-bottom: 20px;
    }
    .form-label {
      display: block;
      font-size: .82rem;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 8px;
      letter-spacing: .02em;
    }
    .form-control {
      width: 100%;
      padding: 14px 18px;
      border-radius: var(--radius-sm);
      border: 1.5px solid var(--border);
      background: var(--bg-main);
      font-family: 'Manrope', sans-serif;
      font-size: .9rem;
      color: var(--text-dark);
      transition: var(--transition);
      outline: none;
      appearance: none;
      -webkit-appearance: none;
    }
    .form-control:focus {
      border-color: var(--accent);
      background: var(--bg-white);
      box-shadow: 0 0 0 3px rgba(42,91,215,.12);
    }
    .form-control::placeholder { color: var(--text-muted); }
    select.form-control {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%237A8BAD' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      padding-right: 44px;
      cursor: pointer;
    }
    textarea.form-control {
      resize: vertical;
      min-height: 110px;
    }
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    /* Form success */
    .form-success {
      display: none;
      text-align: center;
      padding: 40px 20px;
    }
    .form-success.show { display: block; }
    .form-success-icon {
      width: 72px; height: 72px;
      background: rgba(42,91,215,.1);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 20px;
    }
    .form-success-icon svg { width: 36px; height: 36px; fill: var(--accent); }
    .form-success-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 10px;
    }
    .form-success-text { font-size: .9rem; color: var(--text-mid); }

    /* ============================================================
       FOOTER
    ============================================================ */
    footer {
      background: var(--text-dark);
      color: rgba(255,255,255,.7);
      padding: 72px 0 40px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
      gap: 48px;
      padding-bottom: 56px;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .footer-logo { margin-bottom: 18px; }
    .footer-logo .logo-name { color: #fff; }
    .footer-logo .logo-sub  { color: rgba(255,255,255,.4); }
    .footer-desc {
      font-size: .85rem;
      line-height: 1.7;
      color: rgba(255,255,255,.5);
    }
    .footer-col-title {
      font-size: .8rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255,255,255,.4);
      margin-bottom: 20px;
    }
    .footer-links { display: flex; flex-direction: column; gap: 10px; }
    .footer-link {
      font-size: .85rem;
      color: rgba(255,255,255,.55);
      transition: var(--transition);
      cursor: pointer;
    }
    .footer-link:hover { color: var(--accent-light); }

    .footer-contacts { display: flex; flex-direction: column; gap: 14px; }
    .footer-contact-item { display: flex; gap: 10px; align-items: flex-start; }
    .footer-contact-item svg { width: 16px; height: 16px; fill: var(--accent-light); flex-shrink: 0; margin-top: 3px; }
    .footer-contact-text { font-size: .82rem; color: rgba(255,255,255,.55); line-height: 1.5; }
    .footer-contact-text a { color: rgba(255,255,255,.55); transition: var(--transition); }
    .footer-contact-text a:hover { color: var(--accent-light); }

    .footer-bottom {
      padding-top: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: gap;
      gap: 16px;
    }
    .footer-copy { font-size: .8rem; color: rgba(255,255,255,.3); }
    .footer-regs { font-size: .8rem; color: rgba(255,255,255,.3); text-align: right; }

    /* ============================================================
       SCROLL REVEAL
    ============================================================ */
    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: .1s; }
    .reveal-delay-2 { transition-delay: .2s; }
    .reveal-delay-3 { transition-delay: .3s; }
    .reveal-delay-4 { transition-delay: .4s; }
    .reveal-delay-5 { transition-delay: .5s; }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 1100px) {
      .hero-badge { display: none; }
      .services-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 900px) {
      .about-grid   { grid-template-columns: 1fr; gap: 48px; }
      .contact-grid { grid-template-columns: 1fr; }
      .footer-grid  { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .section { padding: 72px 0; }
      .services-grid { grid-template-columns: 1fr; }
      .about-theses  { grid-template-columns: 1fr; }
      .form-row      { grid-template-columns: 1fr; }
      .hero-stats    { gap: 24px; }
      .hero-stat-divider { display: none; }
      .nav-links, .nav-btn { display: none; }
      .hamburger { display: flex; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
      .footer-regs { text-align: left; }
      .form-card { padding: 28px 20px; }
      .about-theses { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 480px) {
      .hero-ctas { flex-direction: column; }
      .hero-ctas .btn { width: 100%; justify-content: center; }
      .about-mini-cards { grid-template-columns: 1fr 1fr; }
      .about-theses { grid-template-columns: 1fr; }
    }

    /* ============================================================
       COUNTER ANIMATION
    ============================================================ */
    .count-up { display: inline-block; }

    /* ============================================================
       SECTION DIVIDER
    ============================================================ */
    .divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--border), transparent);
    }

    /* ============================================================
       TOAST NOTIFICATION
    ============================================================ */
    .toast {
      position: fixed;
      bottom: 30px; right: 30px;
      background: var(--text-dark);
      color: #fff;
      padding: 16px 24px;
      border-radius: var(--radius-sm);
      font-size: .9rem;
      font-weight: 600;
      box-shadow: var(--shadow-lg);
      z-index: 9999;
      transform: translateY(80px);
      opacity: 0;
      transition: .4s cubic-bezier(.4,0,.2,1);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .toast.show {
      transform: translateY(0);
      opacity: 1;
    }
    .toast-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #4ade80;
      flex-shrink: 0;
    }

  </style>



<!-- ============================================================
     TOAST
============================================================ -->
<div class="toast" id="toast">
  <span class="toast-dot"></span>
  <span id="toast-msg">Заявка отправлена!</span>
</div>

<!-- ============================================================
     HEADER
============================================================ -->
<header id="header">
  <div class="container">
    <nav class="nav-inner">
      <!-- Logo -->
      <a href="#hero" class="logo" aria-label="ЭкспертПроКонсалт — главная">
        <div class="logo-text">
          <div class="logo-name">ЭкспертПроКонсалт</div>
          <div class="logo-sub">Закупки 44-ФЗ · 223-ФЗ</div>
        </div>
      </a>

      <!-- Links -->
      <ul class="nav-links">
        <a href="#services">Услуги</a></li>
        <a href="#about">О компании</a></li>
        <a href="#contact">Контакты</a></li>
      </ul>

      <!-- CTA -->
      <a href="#contact" class="btn btn-primary nav-btn">
        <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
        Бесплатная консультация
      </a>

      <!-- Hamburger -->
      <button class="hamburger" id="hamburger" aria-label="Меню">
        </span></span></span>
      </button>
    </nav>
  </div>
</header>

<!-- Mobile menu -->
<nav class="mobile-menu" id="mobileMenu">
  <a href="#services" class="mobile-nav-link">Услуги</a>
  <a href="#about" class="mobile-nav-link">О компании</a>
  <a href="#contact" class="mobile-nav-link">Контакты</a>
  <a href="#contact" class="btn btn-primary" style="margin-top:16px">Бесплатная консультация</a>
</nav>

<!-- ============================================================
     HERO
============================================================ -->
<section id="hero">
  <div class="hero-grid"></div>
  <div class="hero-blob hero-blob-1"></div>
  <div class="hero-blob hero-blob-2"></div>
  <div class="hero-blob hero-blob-3"></div>

  <div class="container" style="position:relative;z-index:1;width:100%">
    <div class="hero-content">

      <div class="hero-eyebrow">ООО «ЭкспертПроКонсалт»</div>

      <h1 class="hero-headline">
        Комплексное сопровождение<br/>
        государственных закупок<br/>
        под ключ
      </h1>

      <p class="hero-subheadline">
        Любые споры — решаем, тендеры — выигрываем
      </p>

      <div class="hero-stats">
        <div class="hero-stat">
          <span class="hero-stat-value count-up" data-target="100">0</span><span class="hero-stat-value">+</span>
          <span class="hero-stat-label">Успешных кейсов</span>
        </div>
        <div class="hero-stat-divider"></div>
        <div class="hero-stat">
          <span class="hero-stat-value count-up" data-target="10">0</span><span class="hero-stat-value">+</span>
          <span class="hero-stat-label">Лет экспертизы</span>
        </div>
      </div>

      <div class="hero-ctas">
        <a href="#contact" class="btn btn-primary">
          <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>
          Получить бесплатную консультацию
        </a>
        <a href="#services" class="btn btn-outline">
          Наши услуги
          <svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/></svg>
        </a>
      </div>
    </div>

    <!-- Floating badge (desktop) -->
    <div class="hero-badge">
      <div class="hero-badge-icon">
        <svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/></svg>
      </div>
      <div class="hero-badge-title">Работаем по всем направлениям</div>
      <div class="hero-badge-items">
        <div class="hero-badge-item">44-ФЗ — Государственные закупки</div>
        <div class="hero-badge-item">223-ФЗ — Коммерческие закупки</div>
        <div class="hero-badge-item">Для заказчиков и поставщиков</div>
        <div class="hero-badge-item">Ответ на запрос — 1 час</div>
      </div>
    </div>
  </div>

  <div class="scroll-indicator">
    <span class="scroll-indicator-text">Прокрутить</span>
    <div class="scroll-mouse"></div>
  </div>
</section>

<div class="divider"></div>

<!-- ============================================================
     SERVICES SECTION
============================================================ -->
<section id="services" class="section section-white">
  <div class="container">
    <div class="section-header">
      <div class="tag reveal">Наши услуги</div>
      <h2 class="section-title reveal reveal-delay-1">
        Решения для каждого<br/>
        <span class="accent-word">участника закупок</span>
      </h2>
      <p class="section-subtitle reveal reveal-delay-2" style="margin:14px auto 0">
        Предоставляем полный спектр услуг в сфере государственных, муниципальных и коммерческих закупок по 44-ФЗ и 223-ФЗ
      </p>
    </div>

    <!-- Tabs -->
    <div class="tabs-row reveal reveal-delay-3">
      <button class="btn-tab active" id="tab-customers" onclick="switchTab('customers')">
        🏛 Для Заказчиков
      </button>
      <button class="btn-tab" id="tab-suppliers" onclick="switchTab('suppliers')">
        🤝 Для Поставщиков
      </button>
    </div>

    <!-- Grid -->
    <div class="services-grid">

      <!-- ===== CUSTOMERS PANEL ===== -->
      <div class="tab-panel active" id="panel-customers">

        <!-- 1 -->
        <div class="service-card reveal reveal-delay-1" id="svc-local-acts">
          <div class="service-card-num">01 / Заказчикам</div>
          <div class="service-card-icon">
            <svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zm-2 8H7v-2h4v2zm4-4H7v-2h8v2z"/></svg>
          </div>
          <div class="service-card-title">Локальные акты и положения</div>
          <div class="service-card-desc">Разработка и актуализация локальных нормативных актов в сфере закупок.</div>
          <div class="service-card-items">
            <div class="service-card-item">Положение о закупках</div>
            <div class="service-card-item">Регламенты процедур</div>
            <div class="service-card-item">Приказы и распоряжения</div>
            <div class="service-card-item">Адаптация под изменения закона</div>
          </div>
        </div>

        <!-- 2 -->
        <div class="service-card reveal reveal-delay-2" id="svc-tz">
          <div class="service-card-num">02 / Заказчикам</div>
          <div class="service-card-icon">
            <svg viewBox="0 0 24 24"><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>
          </div>
          <div class="service-card-title">Технические задания и закупочная документация</div>
          <div class="service-card-desc">Подготовка ТЗ и закупочной документации, соответствующих закону и защищающих интересы заказчика.</div>
          <div class="service-card-items">
            <div class="service-card-item">Разработка ТЗ с нуля</div>
            <div class="service-card-item">Разработка закупочной документации</div>
            <div class="service-card-item">Консультация по КТРУ и НМЦК</div>
            <div class="service-card-item">Консультация ПП РФ № 1875</div>
          </div>
        </div>

        <!-- 3 -->
        <div class="service-card reveal reveal-delay-3" id="svc-claim">
          <div class="service-card-num">03 / Заказчикам</div>
          <div class="service-card-icon">
            <svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/></svg>
          </div>
          <div class="service-card-title">Претензионная работа</div>
          <div class="service-card-desc">Полное ведение претензионной работы и защита в контролирующих органах.</div>
          <div class="service-card-items">
            <div class="service-card-item">Подготовка возражений на жалобы поставщиков</div>
            <div class="service-card-item">Претензионная работа по заключённому контракту</div>
            <div class="service-card-item">Одностороннее расторжение и включение в РНП</div>
            <div class="service-card-item">Представительство в ФАС</div>
          </div>
        </div>

        <!-- 4 -->
        <div class="service-card reveal reveal-delay-1" id="svc-audit">
          <div class="service-card-num">04 / Заказчикам</div>
          <div class="service-card-icon">
            <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z"/></svg>
          </div>
          <div class="service-card-title">Аудит закупочной деятельности</div>
          <div class="service-card-desc">Независимая проверка соответствия закупок требованиям законодательства.</div>
          <div class="service-card-items">
            <div class="service-card-item">Проверка документации</div>
            <div class="service-card-item">Выявление нарушений</div>
            <div class="service-card-item">Оценка рисков штрафов</div>
            <div class="service-card-item">Рекомендации по устранению</div>
          </div>
        </div>

        <!-- 5 -->
        <div class="service-card reveal reveal-delay-2" id="svc-contract-service">
          <div class="service-card-num">05 / Заказчикам</div>
          <div class="service-card-icon">
            <svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
          </div>
          <div class="service-card-title">Контрактная служба под ключ</div>
          <div class="service-card-desc">Создание и организация работы контрактной службы с нуля.</div>
          <div class="service-card-items">
            <div class="service-card-item">Обучение персонала</div>
            <div class="service-card-item">Подбор специалистов</div>
            <div class="service-card-item">Настройка процессов</div>
            <div class="service-card-item">Постановка учёта и отчётности</div>
          </div>
        </div>

        <!-- 6 -->
        <div class="service-card reveal reveal-delay-3" id="svc-risk-min">
          <div class="service-card-num">06 / Заказчикам</div>
          <div class="service-card-icon">
            <svg viewBox="0 0 24 24"><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18L20 8v8.18L12 20 4 16.18V8l8-3.82zM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/></svg>
          </div>
          <div class="service-card-title">Минимизация рисков</div>
          <div class="service-card-desc">Комплексные меры по снижению рисков нарушений при закупках.</div>
          <div class="service-card-items">
            <div class="service-card-item">Предварительная проверка</div>
            <div class="service-card-item">Контроль на всех этапах</div>
            <div class="service-card-item">Подготовка к проверкам</div>
            <div class="service-card-item">Сопровождение при инспекциях</div>
          </div>
        </div>

      </div><!-- /panel-customers -->

      <!-- ===== SUPPLIERS PANEL ===== -->
      <div class="tab-panel" id="panel-suppliers">

        <!-- 1 -->
        <div class="service-card reveal reveal-delay-1" id="svc-niche">
          <div class="service-card-num">01 / Поставщикам</div>
          <div class="service-card-icon">
            <svg viewBox="0 0 24 24"><path d="M9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4zm2 2H5V5h14v14zm0-16H5C3.9 3 3 3.9 3 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>
          </div>
          <div class="service-card-title">Выбор ниши и анализ рынка</div>
          <div class="service-card-desc">Помощь в определении перспективных направлений для участия в торгах.</div>
          <div class="service-card-items">
            <div class="service-card-item">Анализ конкурентной среды</div>
            <div class="service-card-item">Оценка маржинальности</div>
            <div class="service-card-item">Подбор целевых закупок</div>
            <div class="service-card-item">Прогнозирование спроса</div>
          </div>
        </div>

        <!-- 2 -->
        <div class="service-card reveal reveal-delay-2" id="svc-search">
          <div class="service-card-num">02 / Поставщикам</div>
          <div class="service-card-icon">
            <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
          </div>
          <div class="service-card-title">Поиск и просчёт торгов</div>
          <div class="service-card-desc">Мониторинг закупок и предварительный расчёт экономической целесообразности.</div>
          <div class="service-card-items">
            <div class="service-card-item">Мониторинг закупок</div>
            <div class="service-card-item">Фильтрация по критериям</div>
            <div class="service-card-item">Расчёт себестоимости</div>
            <div class="service-card-item">Оценка вероятности победы</div>
          </div>
        </div>

        <!-- 3 -->
        <div class="service-card reveal reveal-delay-3" id="svc-bid">
          <div class="service-card-num">03 / Поставщикам</div>
          <div class="service-card-icon">
            <svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11zM8 15.01l1.41 1.41L11 14.84V19h2v-4.16l1.59 1.59L16 15.01 12.01 11 8 15.01z"/></svg>
          </div>
          <div class="service-card-title">Подготовка и подача заявки</div>
          <div class="service-card-desc">Полное сопровождение подготовки документов для участия в закупке.</div>
          <div class="service-card-items">
            <div class="service-card-item">Проверка соответствия требованиям</div>
            <div class="service-card-item">Сбор документов</div>
            <div class="service-card-item">Подготовка ценового предложения</div>
            <div class="service-card-item">Подача на всех ЭТП</div>
          </div>
        </div>

        <!-- 4 -->
        <div class="service-card reveal reveal-delay-1" id="svc-risk-eval">
          <div class="service-card-num">04 / Поставщикам</div>
          <div class="service-card-icon">
            <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
          </div>
          <div class="service-card-title">Оценка рисков закупки</div>
          <div class="service-card-desc">Анализ рисков перед участием в конкретной процедуре.</div>
          <div class="service-card-items">
            <div class="service-card-item">Проверка заказчика</div>
            <div class="service-card-item">Анализ документации</div>
            <div class="service-card-item">Выявление «подводных камней»</div>
            <div class="service-card-item">Рекомендации по стратегии</div>
          </div>
        </div>

        <!-- 5 -->
        <div class="service-card reveal reveal-delay-2" id="svc-contract-sup">
          <div class="service-card-num">05 / Поставщикам</div>
          <div class="service-card-icon">
            <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96C5 16.1 6.9 18 9 18h12v-2H9.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63H19c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 23.46 5H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
          </div>
          <div class="service-card-title">Сопровождение контракта</div>
          <div class="service-card-desc">Поддержка на этапе исполнения контракта и разрешение споров.</div>
          <div class="service-card-items">
            <div class="service-card-item">Контроль сроков исполнения</div>
            <div class="service-card-item">Претензионная работа</div>
            <div class="service-card-item">Изменение условий</div>
            <div class="service-card-item">Расторжение при необходимости</div>
          </div>
        </div>

        <!-- 6 — Premium -->
        <div class="service-card premium reveal reveal-delay-3" id="svc-full">
          <div class="service-card-num" style="color:rgba(255,255,255,.5)">06 / Поставщикам</div>
          <div class="service-card-icon">
            <svg viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"/></svg>
          </div>
          <div class="service-card-title" style="color:#fff">Полное тендерное сопровождение</div>
          <div class="service-card-desc">Комплексная услуга «всё включено» для активного участника торгов.</div>
          <div class="service-card-items">
            <div class="service-card-item">Персональный менеджер</div>
            <div class="service-card-item">Подача 30 заявок / месяц</div>
            <div class="service-card-item">Неограниченное количество консультаций</div>
            <div class="service-card-item">Приоритетная поддержка 24/7</div>
          </div>
        </div>

      </div><!-- /panel-suppliers -->

    </div><!-- /services-grid -->
  </div>
</section>

<div class="divider"></div>

<!-- ============================================================
     ABOUT SECTION
============================================================ -->
<section id="about" class="section section-main">
  <div class="container">
    <div class="about-grid">

      <!-- Visual side -->
      <div class="about-visual reveal">
        <div class="about-card-main">
          <div class="about-main-stat">10+</div>
          <div class="about-main-label">лет практической экспертизы в сфере государственных закупок</div>
        </div>
        <div class="about-mini-cards">
          <div class="about-mini-card">
            <div class="about-mini-val">100+</div>
            <div class="about-mini-lbl">Успешных кейсов</div>
          </div>
          <div class="about-mini-card">
            <div class="about-mini-val">98%</div>
            <div class="about-mini-lbl">Результативность</div>
          </div>
          <div class="about-mini-card">
            <div class="about-mini-val">1 ч</div>
            <div class="about-mini-lbl">Ответ на запрос</div>
          </div>
          <div class="about-mini-card">
            <div class="about-mini-val">44/223</div>
            <div class="about-mini-lbl">Федеральные законы</div>
          </div>
        </div>
      </div>

      <!-- Text side -->
      <div class="about-text-block">
        <div class="tag reveal">О компании</div>
        <h2 class="section-title reveal reveal-delay-1">
          ООО «ЭкспертПроКонсалт» —<br/>
          <span class="accent-word">эксперты в сфере закупок</span>
        </h2>
        <p class="about-body reveal reveal-delay-2">
          Компания «ЭкспертПроКонсалт» создана практиками контрактной системы — специалистами, которые сами прошли через сложные закупки, жалобы в ФАС и претензионную работу. Мы увидели, что и заказчики, и поставщики теряют время, деньги и нервы из-за формальных ошибок, неполных ТЗ и неграмотного сопровождения. Наша команда имеет глубокую экспертизу в применении Федерального закона № 44-ФЗ и Федерального закона № 223-ФЗ.
        </p>
        <p class="about-body reveal reveal-delay-2">
          С первого дня мы строим бизнес не на количестве клиентов, а на решении их реальных проблем: помогли госучреждениям провести аудит закупок и избежать штрафов, разработали локальные акты и сформировали эффективные контрактные службы, а коммерческим компаниям — выиграть первые тендеры без «подводных камней». Сегодня «ЭкспертПроКонсалт» — это команда экспертов, которая перевела сложный язык 44-ФЗ и 223-ФЗ в понятные алгоритмы действий.
        </p>

        <div class="about-theses">
          <div class="about-thesis reveal reveal-delay-1">
            <div class="about-thesis-icon">
              <svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/></svg>
            </div>
            <div class="about-thesis-title">Проверенный опыт</div>
            <div class="about-thesis-text">Практический опыт экспертов более 10 лет в сфере государственных закупок</div>
          </div>
          <div class="about-thesis reveal reveal-delay-2">
            <div class="about-thesis-icon">
              <svg viewBox="0 0 24 24"><path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/></svg>
            </div>
            <div class="about-thesis-title">Гарантия результата</div>
            <div class="about-thesis-text">Финансовая ответственность по договору — мы отвечаем за результат</div>
          </div>
          <div class="about-thesis reveal reveal-delay-3">
            <div class="about-thesis-icon">
              <svg viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg>
            </div>
            <div class="about-thesis-title">Оперативность</div>
            <div class="about-thesis-text">Ответ на запрос в течение одного часа. Работаем без бюрократии</div>
          </div>
          <div class="about-thesis reveal reveal-delay-4">
            <div class="about-thesis-icon">
              <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z"/></svg>
            </div>
            <div class="about-thesis-title">Результативность</div>
            <div class="about-thesis-text">98% успешных кейсов — подтверждённый результат работы</div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<div class="divider"></div>

<!-- ============================================================
     CONTACT SECTION
============================================================ -->
<section id="contact" class="section section-white">
  <div class="container">
    <div class="contact-grid">

      <!-- Left info -->
      <div class="contact-left">
        <div class="tag reveal">Контакты</div>
        <h2 class="section-title reveal reveal-delay-1">
          Получите<br/>
          <span class="accent-word">бесплатную консультацию</span>
        </h2>
        <p class="section-subtitle reveal reveal-delay-2">
          Оставьте заявку, и наш эксперт свяжется с вами в течение 30 минут для обсуждения вашей задачи и подготовки персонального предложения.
        </p>
        <div class="contact-info-items reveal reveal-delay-3">
          <div class="contact-info-item">
            <div class="contact-info-icon">
              <svg viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
            </div>
            
              <div class="contact-info-label">Телефон</div>
              <div class="contact-info-value"><a href="tel:+79850227209">+7 (985) 022-72-09</a></div>
            </div>
          </div>
          <div class="contact-info-item">
            <div class="contact-info-icon">
              <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
            </div>
            
              <div class="contact-info-label">Email</div>
              <div class="contact-info-value"><a href="mailto:expertproconsult@yandex.ru">expertproconsult@yandex.ru</a></div>
            </div>
          </div>
          <div class="contact-info-item">
            <div class="contact-info-icon">
              <svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
            </div>
            
              <div class="contact-info-label">Адрес</div>
              <div class="contact-info-value">115516, г. Москва,<br/>ул. Промышленная, д. 11, стр. 3, пом. 2/1/4</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Form -->
      <div class="form-card reveal reveal-delay-2">
        <div id="formWrapper">
          <div class="form-title">Оставить заявку</div>
          <div class="form-sub">Заполните форму, и мы свяжемся с вами в течение 30 минут.</div>

          <div class="form-row">
            <div class="form-group">
              <label class="form-label" for="f-name">Ваше имя <span style="color:var(--accent)">*</span></label>
              <input class="form-control" id="f-name" type="text" placeholder="Иван Иванов" required />
            </div>
            <div class="form-group">
              <label class="form-label" for="f-phone">Телефон <span style="color:var(--accent)">*</span></label>
              <input class="form-control" id="f-phone" type="tel" placeholder="+7 (___) ___-__-__" required />
            </div>
          </div>

          <div class="form-group">
            <label class="form-label" for="f-email">Email</label>
            <input class="form-control" id="f-email" type="email" placeholder="example@mail.ru" />
          </div>

          <div class="form-group">
            <label class="form-label" for="f-role">Кем вы являетесь? <span style="color:var(--accent)">*</span></label>
            <select class="form-control" id="f-role" required>
              <option value="" disabled selected>Выберите вариант</option>
              Заказчик (государственное/муниципальное учреждение)</option>
              Поставщик/подрядчик/исполнитель (участник торгов)</option>
            </select>
          </div>

          <div class="form-group">
            <label class="form-label" for="f-service">Интересующая услуга</label>
            <select class="form-control" id="f-service">
              <option value="" disabled selected>Выберите услугу</option>
              <optgroup label="Для заказчиков">
                Локальные акты и положения</option>
                Технические задания и закупочная документация</option>
                Претензионная работа</option>
                Аудит закупочной деятельности</option>
                Контрактная служба под ключ</option>
                Минимизация рисков</option>
              </optgroup>
              <optgroup label="Для поставщиков">
                Выбор ниши и анализ рынка</option>
                Поиск и просчёт торгов</option>
                Подготовка и подача заявки</option>
                Оценка рисков закупки</option>
                Сопровождение контракта</option>
                Полное тендерное сопровождение</option>
              </optgroup>
              Другое</option>
            </select>
          </div>

          <div class="form-group">
            <label class="form-label" for="f-desc">Описание задачи</label>
            <textarea class="form-control" id="f-desc" placeholder="Кратко опишите вашу задачу или вопрос..."></textarea>
          </div>

          <button class="btn btn-primary" style="width:100%;justify-content:center" onclick="submitForm()">
            <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
            Отправить заявку
          </button>
        </div>

        <!-- Success -->
        <div class="form-success" id="formSuccess">
          <div class="form-success-icon">
            <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
          </div>
          <div class="form-success-title">Заявка отправлена!</div>
          <div class="form-success-text">Наш эксперт свяжется с вами в течение 30 минут.</div>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- ============================================================
     FOOTER
============================================================ -->

  <div class="container">
    <div class="footer-grid">

      <!-- Company info -->
      
        <div class="footer-logo">
          <a href="#hero" class="logo" style="margin-bottom:0">
            <div class="logo-text">
              <div class="logo-name">ЭкспертПроКонсалт</div>
              <div class="logo-sub">Закупки 44-ФЗ · 223-ФЗ</div>
            </div>
          </a>
        </div>
        <p class="footer-desc">
          Комплексное сопровождение бюджетных и коммерческих организаций в сфере государственных закупок по 44-ФЗ и 223-ФЗ.
        </p>
      </div>

      <!-- Services for customers -->
      
        <div class="footer-col-title">Услуги для заказчиков</div>
        <div class="footer-links">
          <span class="footer-link" onclick="goToService('customers','svc-local-acts')">Локальные акты и положения</span>
          <span class="footer-link" onclick="goToService('customers','svc-tz')">Технические задания</span>
          <span class="footer-link" onclick="goToService('customers','svc-claim')">Претензионная работа</span>
          <span class="footer-link" onclick="goToService('customers','svc-audit')">Аудит закупочной деятельности</span>
          <span class="footer-link" onclick="goToService('customers','svc-contract-service')">Контрактная служба под ключ</span>
          <span class="footer-link" onclick="goToService('customers','svc-risk-min')">Минимизация рисков</span>
        </div>
      </div>

      <!-- Services for suppliers -->
      
        <div class="footer-col-title">Услуги для поставщиков</div>
        <div class="footer-links">
          <span class="footer-link" onclick="goToService('suppliers','svc-niche')">Выбор ниши и анализ рынка</span>
          <span class="footer-link" onclick="goToService('suppliers','svc-search')">Поиск и просчёт торгов</span>
          <span class="footer-link" onclick="goToService('suppliers','svc-bid')">Подготовка заявок</span>
          <span class="footer-link" onclick="goToService('suppliers','svc-risk-eval')">Оценка рисков</span>
          <span class="footer-link" onclick="goToService('suppliers','svc-contract-sup')">Сопровождение контракта</span>
          <span class="footer-link" onclick="goToService('suppliers','svc-full')">Полное сопровождение</span>
        </div>
      </div>

      <!-- Contacts -->
      
        <div class="footer-col-title">Контакты</div>
        <div class="footer-contacts">
          <div class="footer-contact-item">
            <svg viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
            <div class="footer-contact-text"><a href="tel:+79850227209">+7 (985) 022-72-09</a></div>
          </div>
          <div class="footer-contact-item">
            <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
            <div class="footer-contact-text"><a href="mailto:expertproconsult@yandex.ru">expertproconsult@yandex.ru</a></div>
          </div>
          <div class="footer-contact-item">
            <svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
            <div class="footer-contact-text">115516, г. Москва,<br/>ул. Промышленная, д. 11 стр. 3,<br/>пом. 2/1/4</div>
          </div>
        </div>
      </div>

    </div><!-- /footer-grid -->

    <div class="footer-bottom">
      <div class="footer-copy">© 2026 ООО «ЭкспертПроКонсалт». Все права защищены.</div>
      <div class="footer-regs">ИНН: 9724217413 &nbsp;·&nbsp; ОГРН: 1257700143843</div>
    </div>
  </div>
</footer>


<!-- ============================================================
     JAVASCRIPT
============================================================ -->




