:root {
      --blue: #2275dc;
      --blue-hover: #1a5fc0;
      --dark: #353535;
      --gray-bg: #f5f5f5;
      --white: #ffffff;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: "Montserrat", Arial, sans-serif;
      color: var(--dark);
      background: var(--white);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }

    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; height: auto; display: block; }
    ul, ol { list-style: none; }

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

    /* ===== HEADER ===== */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: #fff;
      border-bottom: 1px solid #e5e5e5;
      height: 70px;
      display: flex;
      align-items: center;
    }

    .header .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .header-logo img {
      height: 44px;
      width: auto;
    }

    .header-nav {
      display: flex;
      align-items: center;
      gap: 32px;
    }

    .header-nav a {
      font-size: 14px;
      font-weight: 500;
      color: var(--dark);
      transition: color 0.2s;
    }

    .header-nav a:hover,
    .header-nav a.active {
      color: var(--blue);
    }

    .header-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 44px;
      padding: 0 24px;
      background: var(--blue);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: background 0.2s;
    }

    .header-cta:hover {
      background: var(--blue-hover);
    }

    /* ===== BUTTONS ===== */
    .btn-blue {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #2275dc, #1a7af2);
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      font-family: inherit;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      padding: 0 40px;
      height: 60px;
      box-shadow: 2px 2px 20px 0 rgba(34,117,220,0.35);
      transition: opacity 0.2s;
      text-align: center;
    }

    .btn-blue:hover { opacity: 0.9; }

    .btn-outline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      color: var(--blue);
      font-size: 16px;
      font-weight: 600;
      font-family: inherit;
      border: 2px solid var(--blue);
      cursor: pointer;
      padding: 0 40px;
      height: 70px;
      transition: all 0.2s;
      text-align: center;
    }

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

    /* ===== HERO ===== */
    .hero {
      padding-top: 70px;
      background-color: #ede8e0;
      background-image: url('images/tild3063-3439-4836-b939-343632303034__17580.jpg');
      background-size: cover;
      background-position: center;
      min-height: 75vh;
      display: flex;
      align-items: center;
      position: relative;
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0.5);
    }

    .hero .container {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
      padding-top: 80px;
      padding-bottom: 80px;
    }

    .hero-badge {
      display: inline-block;
      padding: 8px 20px;
      background: #eef4ff;
      border: 1px solid #d0e0ff;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 600;
      color: var(--blue);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 20px;
    }

    .hero-title {
      font-size: 48px;
      font-weight: 800;
      text-transform: uppercase;
      line-height: 1.15;
      color: #0f172a;
    }

    .hero-title span {
      color: var(--blue);
    }

    .hero-subtitle {
      margin-top: 16px;
      font-size: 19px;
      font-weight: 500;
      line-height: 1.55;
      color: var(--dark);
    }

    .hero-subtitle b {
      color: var(--blue);
      font-weight: 700;
    }

    .hero-features {
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .badge-live {
      display: inline-block;
      padding: 2px 8px;
      background: #fef2f2;
      color: #ef4444;
      font-size: 11px;
      font-weight: 700;
      border-radius: 4px;
      letter-spacing: 0.5px;
      margin-left: 4px;
    }

    .badge-ai {
      display: inline-block;
      padding: 2px 8px;
      background: #eff6ff;
      color: var(--blue);
      font-size: 11px;
      font-weight: 700;
      border-radius: 4px;
      letter-spacing: 0.5px;
      margin-left: 4px;
    }

    .hero-social-proof {
      margin-top: 20px;
      font-size: 15px;
      color: #666;
      font-weight: 500;
    }

    .hero-right {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .hero-stats-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .stat-card {
      text-align: center;
      padding: 20px 12px;
      background: #f5f5f5;
      border-radius: 14px;
    }

    .stat-number {
      font-size: 28px;
      font-weight: 800;
      color: var(--blue);
    }

    .stat-label {
      margin-top: 4px;
      font-size: 12px;
      font-weight: 600;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .hero-features li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 17px;
      color: #000;
      line-height: 1.55;
    }

    .hero-features li .check-icon {
      flex-shrink: 0;
      width: 19px;
      height: 19px;
      margin-top: 4px;
    }

    .hero-btn {
      margin-top: 32px;
    }

    .hero-video {
      width: 100%;
    }

    .hero-video iframe {
      width: 100%;
      height: 300px;
      border: none;
      border-radius: 12px;
    }

    .hero-watermark {
      position: absolute;
      right: 10%;
      bottom: 30px;
      width: 480px;
      opacity: 0.15;
      z-index: 0;
    }

    /* ===== PROBLEMS ===== */
    .problems {
      padding: 100px 0;
      background: #fff;
      min-height: 75vh;
    }

    .problems .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
    }

    .problems-title {
      font-size: 27px;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1.55;
      color: var(--dark);
    }

    .problems-title span {
      color: var(--blue);
    }

    .problems-text {
      margin-top: 20px;
      font-size: 17px;
      line-height: 1.55;
      color: #000;
    }

    .problems-list {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .problems-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 17px;
      line-height: 1.55;
      color: #000;
    }

    .problems-list li .dot {
      flex-shrink: 0;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: var(--blue);
      margin-top: 6px;
    }

    .problems-closing {
      margin-top: 24px;
      font-size: 17px;
      line-height: 1.55;
      color: #000;
    }

    .problems-image {
      position: relative;
    }

    .budget-card {
      background: #fff;
      border-radius: 20px;
      padding: 32px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.08);
      border: 1px solid #eee;
    }

    .budget-card-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--dark);
      text-transform: uppercase;
      margin-bottom: 24px;
    }

    .budget-item {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }

    .budget-label {
      font-size: 14px;
      font-weight: 500;
      color: #555;
      width: 110px;
      flex-shrink: 0;
    }

    .budget-bar {
      flex: 1;
      height: 8px;
      background: #e8edf4;
      border-radius: 4px;
      overflow: hidden;
    }

    .budget-fill {
      height: 100%;
      background: var(--blue);
      border-radius: 4px;
    }

    .budget-trend {
      font-size: 13px;
      font-weight: 600;
      color: #ef4444;
      white-space: nowrap;
    }

    .budget-result {
      margin-top: 20px;
      padding: 16px;
      background: #fef9f0;
      border-radius: 12px;
      border: 1px solid #fde68a;
    }

    .budget-result p {
      font-size: 14px;
      color: #555;
      line-height: 1.5;
    }

    .budget-result b {
      color: var(--dark);
    }

    /* ===== STEPS ===== */
    .steps {
      padding: 105px 0 100px;
      background: var(--gray-bg);
    }

    .steps-header {
      text-align: center;
      max-width: 900px;
      margin: 0 auto;
    }

    .steps-title {
      font-size: 28px;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1.55;
      color: var(--dark);
    }

    .steps-title span {
      color: var(--blue);
    }

    .steps-subtitle {
      margin-top: 20px;
      font-size: 18px;
      line-height: 1.55;
      color: #000;
    }

    .steps-subtitle b {
      color: var(--blue);
    }

    .steps-badge {
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: var(--blue);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: 60px;
      margin-bottom: 8px;
    }

    .steps-cta-text {
      margin-top: 60px;
      font-size: 22px;
      font-weight: 700;
      text-align: center;
      color: var(--dark);
    }

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

    .step-card {
      background: #fff;
      border-radius: 16px;
      padding: 32px;
      border: 2px solid #e8edf4;
      min-height: 220px;
      transition: border-color 0.2s;
    }

    .step-card:first-child {
      border-color: var(--blue);
    }

    .step-card-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--blue);
    }

    .step-card-title::before {
      display: block;
      font-size: 42px;
      font-weight: 800;
      color: #e0e7f0;
      margin-bottom: 12px;
    }

    .step-card:nth-child(1) .step-card-title::before { content: '01'; }
    .step-card:nth-child(2) .step-card-title::before { content: '02'; }
    .step-card:nth-child(3) .step-card-title::before { content: '03'; }
    .step-card:nth-child(4) .step-card-title::before { content: '04'; }
    .step-card:nth-child(5) .step-card-title::before { content: '05'; }

    .step-card-text {
      margin-top: 12px;
      font-size: 15px;
      line-height: 1.55;
      color: #555;
    }

    .step-card-cta {
      background: #eef4ff;
      border-color: var(--blue);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .step-card-cta .step-card-title::before {
      display: none;
    }

    .step-card-cta-title {
      font-size: 20px;
      font-weight: 800;
      color: var(--blue);
      text-transform: uppercase;
    }

    .step-card-cta .btn-blue {
      margin-top: 16px;
      height: 48px;
      font-size: 14px;
      padding: 0 28px;
      align-self: flex-start;
    }

    /* ===== CTA BAND ===== */
    .cta-band {
      padding: 80px 0;
      background: var(--gray-bg);
      text-align: center;
    }

    .cta-band-text {
      font-size: 18px;
      line-height: 1.55;
      color: #000;
      max-width: 900px;
      margin: 0 auto;
    }

    .cta-band-text b {
      color: var(--blue);
    }

    .cta-band .btn-blue {
      margin-top: 30px;
    }

    /* ===== BITRIX SECTION ===== */
    .bitrix-hero {
      background: linear-gradient(90deg, #0ea5e9 0%, #1e40af 100%);
      padding: 120px 0;
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    .bitrix-hero .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
    }

    .bitrix-hero-label {
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: rgba(255,255,255,0.7);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .bitrix-hero-title {
      margin-top: 16px;
      font-size: 38px;
      font-weight: 800;
      line-height: 1.2;
    }

    .bitrix-hero-text {
      margin-top: 20px;
      font-size: 17px;
      line-height: 1.55;
      color: rgba(255,255,255,0.85);
    }

    .bitrix-hero-buttons {
      margin-top: 32px;
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .bitrix-hero-buttons .btn-outline {
      border-color: #fff;
      color: #fff;
      height: 56px;
    }

    .bitrix-hero-buttons .btn-outline:hover {
      background: #fff;
      color: var(--blue);
    }

    .bitrix-stat {
      margin-top: 24px;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: rgba(255,255,255,0.15);
      padding: 16px 24px;
      border-radius: 8px;
    }

    .bitrix-stat-number {
      font-size: 32px;
      font-weight: 800;
    }

    .bitrix-stat-label {
      font-size: 14px;
      color: rgba(255,255,255,0.8);
    }

    .bitrix-hero-image img {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    }

    /* ===== SERVICES ===== */
    .services {
      padding: 120px 0;
      background: #fff;
    }

    .services-title {
      font-size: 32px;
      font-weight: 700;
      text-align: center;
      color: var(--dark);
    }

    .services-subtitle {
      margin-top: 12px;
      font-size: 17px;
      text-align: center;
      color: #666;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }

    .services-grid {
      margin-top: 40px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .service-card {
      background: #fafafa;
      border-radius: 12px;
      padding: 32px;
      min-height: 380px;
      transition: box-shadow 0.2s;
    }

    .service-card:hover {
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }

    .service-card-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--dark);
      margin-top: 16px;
    }

    .service-card-text {
      margin-top: 12px;
      font-size: 15px;
      line-height: 1.6;
      color: #555;
    }

    .service-card-link {
      margin-top: 16px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 15px;
      font-weight: 600;
      color: var(--blue);
    }

    .service-card-tags {
      margin-top: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .service-tag {
      padding: 6px 16px;
      border: 1px solid #ddd;
      border-radius: 20px;
      font-size: 14px;
      color: #666;
    }

    /* ===== RESULTS BITRIX ===== */
    .results-bitrix {
      padding: 100px 0 120px;
      background: #fff;
    }

    .results-bitrix-title {
      font-size: 28px;
      font-weight: 700;
      text-align: center;
      color: var(--dark);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .results-grid {
      margin-top: 30px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .result-card {
      background: #fafafa;
      border-radius: 12px;
      padding: 36px 20px;
      text-align: center;
      min-height: 180px;
    }

    .result-card .check {
      color: #22c55e;
      font-size: 28px;
    }

    .result-card h4 {
      margin-top: 8px;
      font-size: 17px;
      font-weight: 700;
    }

    .result-card p {
      margin-top: 6px;
      font-size: 14px;
      color: #666;
      line-height: 1.5;
    }

    /* ===== CASE STUDIES ===== */
    .case-studies {
      padding: 80px 0 120px;
      background: #fff;
    }

    .case-studies-title {
      font-size: 28px;
      font-weight: 700;
      text-align: center;
      color: var(--dark);
    }

    .case-studies-grid {
      margin-top: 30px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .case-card {
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    }

    .case-card-header {
      height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .case-card-header.blue { background: linear-gradient(135deg, #2da6ea, #2c63d8); }
    .case-card-header.purple { background: linear-gradient(135deg, #5452df, #8338da); }
    .case-card-header.pink { background: linear-gradient(135deg, #9548de, #cb2f98); }

    .case-card-header svg {
      width: 60px;
      height: 60px;
      fill: #fff;
    }

    .case-card-body {
      padding: 24px;
    }

    .case-card-body h4 {
      font-size: 20px;
      font-weight: 700;
    }

    .case-card-body p {
      margin-top: 8px;
      font-size: 15px;
      color: #666;
      line-height: 1.5;
    }

    .case-card-result {
      margin-top: 12px;
      font-size: 15px;
      font-weight: 700;
    }

    /* ===== BLUE CTA ===== */
    .blue-cta {
      background: linear-gradient(135deg, #25a4f8, #2d62d8);
      padding: 100px 0;
      text-align: center;
      color: #fff;
    }

    .blue-cta h3 {
      font-size: 28px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .blue-cta p {
      margin-top: 12px;
      font-size: 17px;
      color: rgba(255,255,255,0.85);
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .blue-cta .btn-blue {
      margin-top: 24px;
      background: #fff;
      color: var(--blue);
      box-shadow: none;
    }

    /* ===== ETHIC SECTION ===== */
    .ethic {
      padding: 100px 0;
      background: #fff;
      min-height: 75vh;
    }

    .ethic .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: start;
    }

    .ethic-title {
      font-size: 27px;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1.55;
      color: var(--dark);
    }

    .ethic-title span {
      color: var(--blue);
    }

    .ethic-subtitle {
      margin-top: 16px;
      font-size: 17px;
      line-height: 1.55;
      color: #000;
    }

    .ethic-image img {
      width: 100%;
      max-width: 500px;
    }

    .ethic-benefits {
      margin-top: 0;
    }

    .ethic-benefit {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      padding: 24px 0;
    }

    .ethic-benefit-icon {
      flex-shrink: 0;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--blue);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 2px 2px 20px rgba(0,0,0,0.1);
    }

    .ethic-benefit-icon svg {
      width: 28px;
      height: 28px;
      fill: #fff;
    }

    .ethic-benefit h4 {
      font-size: 18px;
      font-weight: 600;
      color: var(--blue);
    }

    .ethic-benefit p {
      margin-top: 6px;
      font-size: 16px;
      line-height: 1.55;
      color: #000;
    }

    /* ===== DARK CTA ===== */
    .dark-cta {
      background: linear-gradient(180deg, rgba(6,20,42,0.85), rgba(6,20,42,0.9)),
        url('images/tild3636-3535-4932-a135-326233316238__3d-abstract-polygona.jpg') center/cover no-repeat;
      padding: 120px 0;
      text-align: center;
      color: #fff;
    }

    .dark-cta h3 {
      font-size: 28px;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1.4;
    }

    .dark-cta h3 span {
      color: #79bcff;
    }

    .dark-cta p {
      margin-top: 12px;
      font-size: 17px;
      color: rgba(255,255,255,0.8);
    }

    .dark-cta .btn-blue {
      margin-top: 24px;
    }

    /* ===== TRAFFIC SOURCES ===== */
    .traffic {
      padding: 100px 0;
      background: #fff;
      min-height: 75vh;
    }

    .traffic-title {
      font-size: 27px;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1.55;
      color: var(--dark);
    }

    .traffic-title span {
      color: var(--blue);
    }

    .traffic-subtitle {
      margin-top: 16px;
      font-size: 17px;
      line-height: 1.55;
      color: #000;
      max-width: 900px;
    }

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

    .traffic-card {
      text-align: center;
    }

    .traffic-card img {
      width: 240px;
      height: 240px;
      object-fit: contain;
      margin: 0 auto;
    }

    .traffic-card h4 {
      margin-top: 16px;
      font-size: 18px;
      font-weight: 500;
      color: #000;
    }

    .traffic-card h4 span {
      color: var(--blue);
      font-weight: 700;
    }

    .traffic-card p {
      margin-top: 8px;
      font-size: 15px;
      line-height: 1.6;
      color: #000;
      max-width: 280px;
      margin-left: auto;
      margin-right: auto;
    }

    .traffic-card p span {
      color: var(--blue);
      font-weight: 700;
    }

    .traffic-closing {
      margin-top: 40px;
      text-align: center;
      font-size: 17px;
      line-height: 1.55;
      color: #000;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }

    /* ===== WARM LEADS ===== */
    .warm-leads {
      padding: 80px 0 100px;
      background: #fff;
    }

    .warm-leads-title {
      text-align: center;
      font-size: 27px;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--dark);
      line-height: 1.55;
    }

    .warm-leads-text {
      margin-top: 16px;
      text-align: center;
      font-size: 17px;
      line-height: 1.55;
      color: #000;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }

    .warm-steps {
      margin-top: 40px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .warm-step {
      background: var(--gray-bg);
      border-radius: 12px;
      padding: 28px;
      text-align: center;
    }

    .warm-step-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      font-size: 18px;
      font-weight: 700;
    }

    .warm-step p {
      margin-top: 12px;
      font-size: 15px;
      line-height: 1.55;
      color: #333;
    }

    /* ===== GUARANTEE ===== */
    .guarantee {
      padding: 100px 0;
      background: #fff;
    }

    .guarantee .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: center;
    }

    .guarantee-title {
      font-size: 27px;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1.55;
      color: var(--dark);
    }

    .guarantee-title span {
      color: var(--blue);
    }

    .guarantee-text {
      margin-top: 20px;
      font-size: 17px;
      line-height: 1.55;
      color: #000;
    }

    .guarantee-text b {
      color: var(--blue);
      text-decoration: underline;
    }

    .guarantee .btn-blue {
      margin-top: 24px;
    }

    .guarantee-image img {
      width: 100%;
      max-width: 550px;
    }

    /* ===== NICHES ===== */
    .niches {
      padding: 80px 0 100px;
      background: #fff;
    }

    .niches .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: start;
    }

    .niches-title {
      font-size: 27px;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1.55;
      color: var(--dark);
    }

    .niches-title span {
      color: var(--blue);
    }

    .niches-subtitle {
      margin-top: 16px;
      font-size: 17px;
      line-height: 1.55;
      color: #000;
    }

    .niches-list {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .niches-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 17px;
      line-height: 1.55;
      color: #000;
    }

    .niches-list li .dot {
      flex-shrink: 0;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: var(--blue);
      margin-top: 6px;
    }

    .niches-list li b {
      font-weight: 700;
    }

    .niches-link {
      margin-top: 24px;
    }

    .niches-image img {
      width: 100%;
      max-width: 500px;
    }

    /* ===== WHY US ===== */
    .why-us {
      padding: 100px 0;
      background: #fff;
    }

    .why-us-title {
      font-size: 27px;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1.55;
      color: var(--dark);
    }

    .why-us-title span {
      color: var(--blue);
    }

    .why-us-grid {
      margin-top: 50px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px 60px;
    }

    .why-us-item {
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }

    .why-us-icon {
      flex-shrink: 0;
      width: 77px;
      height: 77px;
      border-radius: 50%;
      background: var(--blue);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 2px 2px 20px rgba(0,0,0,0.1);
    }

    .why-us-icon img {
      width: 36px;
      height: 36px;
      filter: brightness(0) invert(1);
    }

    .why-us-item h4 {
      font-size: 18px;
      font-weight: 600;
      color: var(--blue);
    }

    .why-us-item p {
      margin-top: 8px;
      font-size: 16px;
      line-height: 1.55;
      color: #000;
    }

    /* ===== COMPANY STATS ===== */
    .company {
      padding: 100px 0;
      background: #fff;
      min-height: 75vh;
    }

    .company .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: center;
    }

    .company-title {
      font-size: 27px;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1.55;
      color: var(--dark);
    }

    .company-title span {
      color: var(--blue);
    }

    .company-text {
      margin-top: 20px;
      font-size: 17px;
      line-height: 1.55;
      color: #000;
    }

    .company-text b {
      color: var(--blue);
      font-weight: 700;
    }

    .company-stats {
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .company-stats li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 17px;
      line-height: 1.55;
      color: #000;
    }

    .company-stats li .dot {
      flex-shrink: 0;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: var(--blue);
      margin-top: 6px;
    }

    .company-stats li b {
      color: var(--blue);
      font-weight: 700;
      text-decoration: underline;
    }

    .company-closing {
      margin-top: 24px;
      font-size: 17px;
      line-height: 1.55;
      color: #000;
    }

    .company-image img {
      width: 100%;
    }

    /* ===== TEAM ===== */
    .team {
      padding: 80px 0;
      background: var(--gray-bg);
    }

    .team-title {
      font-size: 28px;
      font-weight: 700;
      text-align: center;
      color: var(--dark);
    }

    .team-grid {
      margin-top: 40px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    .team-card {
      background: #fff;
      border-radius: 16px;
      padding: 36px 20px 32px;
      text-align: center;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
      border: 1px solid #f0f0f0;
    }

    .team-card img {
      width: 180px;
      height: 180px;
      border-radius: 16px;
      object-fit: cover;
      margin: 0 auto;
    }

    .team-card-role {
      margin-top: 20px;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #999;
      line-height: 1.4;
    }

    .team-card-name {
      margin-top: 8px;
      font-size: 20px;
      font-weight: 700;
      color: var(--dark);
    }

    /* ===== USE CASES ===== */
    .use-cases {
      padding: 120px 0;
      background: var(--gray-bg);
    }

    .use-cases-title {
      font-size: 27px;
      font-weight: 700;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.55;
      color: var(--dark);
    }

    .use-cases-title span {
      color: var(--blue);
    }

    .use-cases-subtitle {
      margin-top: 16px;
      font-size: 17px;
      text-align: center;
      line-height: 1.55;
      color: #000;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .use-cases-grid {
      margin-top: 40px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .use-case-card {
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    }

    .use-case-card img {
      width: 100%;
      height: 300px;
      object-fit: cover;
    }

    .use-case-card-body {
      padding: 24px;
    }

    .use-case-card-body h4 {
      font-size: 20px;
      font-weight: 700;
    }

    .use-case-card-body p {
      margin-top: 10px;
      font-size: 15px;
      line-height: 1.55;
      color: #555;
    }

    .use-case-card-body .btn-blue {
      margin-top: 16px;
      height: 48px;
      font-size: 14px;
      padding: 0 28px;
    }

    /* ===== FAQ ===== */
    .faq {
      padding: 100px 0;
      background: #fff;
    }

    .faq-title {
      font-size: 27px;
      font-weight: 700;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.55;
      color: var(--dark);
    }

    .faq-title span {
      color: var(--blue);
    }

    .faq-list {
      margin-top: 40px;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }

    .faq-item {
      border-bottom: 1px solid #e5e5e5;
    }

    .faq-item summary {
      padding: 24px 0;
      font-size: 18px;
      font-weight: 700;

      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .faq-item summary::-webkit-details-marker { display: none; }

    .faq-item summary::after {
      content: '+';
      font-size: 20px;
      font-weight: 400;
      color: #fff;
      flex-shrink: 0;
      margin-left: 16px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--blue);
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .faq-item[open] summary::after {
      content: '×';
      font-size: 22px;
    }

    .faq-item-answer {
      padding-bottom: 20px;
      font-size: 16px;
      line-height: 1.6;
      color: #555;
    }

    .faq-btn {
      margin-top: 30px;
      text-align: center;
    }

    /* ===== TESTIMONIALS ===== */
    .testimonials {
      padding: 120px 0 100px;
      background: var(--gray-bg);
    }

    .testimonials-title {
      font-size: 27px;
      font-weight: 700;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.55;
      color: var(--dark);
    }

    .testimonials-title span {
      color: var(--blue);
    }

    .testimonials-grid {
      margin-top: 40px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .testimonial-card {
      background: #fff;
      border-radius: 12px;
      padding: 32px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    }

    .testimonial-header {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .testimonial-header img {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      object-fit: cover;
    }

    .testimonial-header h4 {
      font-size: 18px;
      font-weight: 700;
      color: var(--blue);
    }

    .testimonial-header p {
      font-size: 14px;
      color: #888;
      margin-top: 2px;
    }

    .testimonial-text {
      margin-top: 16px;
      font-size: 16px;
      line-height: 1.6;
      color: #333;
    }

    .testimonials-btn {
      margin-top: 30px;
      text-align: center;
    }

    /* ===== CONTACT FORM ===== */
    .contact {
      background: linear-gradient(180deg, rgba(6,20,42,0.88), rgba(6,20,42,0.92)),
        url('images/tild3636-3535-4932-a135-326233316238__3d-abstract-polygona.jpg') center/cover no-repeat;
      padding: 130px 0;
      text-align: center;
      color: #fff;
    }

    .contact h2 {
      font-size: 28px;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1.4;
    }

    .contact h2 span {
      color: #79bcff;
    }

    .contact p {
      margin-top: 16px;
      font-size: 17px;
      color: rgba(255,255,255,0.8);
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.55;
    }

    .contact-form {
      margin-top: 32px;
      display: flex;
      gap: 12px;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }

    .contact-form input {
      flex: 1;
      height: 56px;
      padding: 0 16px;
      border: 1px solid rgba(255,255,255,0.3);
      background: #fff;
      font-size: 16px;
      font-family: inherit;
      color: var(--dark);
    }

    .contact-form input::placeholder {
      color: #999;
    }

    .contact-form .btn-blue {
      height: 56px;
      white-space: nowrap;
      box-shadow: none;
    }

    /* ===== FOOTER ===== */
    .footer {
      background: #000;
      padding: 50px 0 80px;
      color: rgba(255,255,255,0.7);
    }

    .footer .container {
      text-align: center;
    }

    .footer p {
      font-size: 14px;
      line-height: 1.8;
    }

    .footer a {
      color: rgba(255,255,255,0.7);
      text-decoration: underline;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1024px) {
      .header-nav { display: none; }
      .hero .container { grid-template-columns: 1fr; }
      .hero-title { font-size: 32px; }
      .hero-video iframe { height: 280px; }
      .hero-stats-row { grid-template-columns: repeat(3, 1fr); }
      .problems .container { grid-template-columns: 1fr; }
      .steps-grid { grid-template-columns: 1fr; }
      .bitrix-hero .container { grid-template-columns: 1fr; }
      .services-grid { grid-template-columns: 1fr 1fr; }
      .results-grid { grid-template-columns: 1fr 1fr; }
      .ethic .container { grid-template-columns: 1fr; }
      .traffic-grid { grid-template-columns: 1fr 1fr; }
      .guarantee .container { grid-template-columns: 1fr; }
      .niches .container { grid-template-columns: 1fr; }
      .why-us-grid { grid-template-columns: 1fr; }
      .company .container { grid-template-columns: 1fr; }
      .team-grid { grid-template-columns: repeat(2, 1fr); }
      .use-cases-grid { grid-template-columns: 1fr; }
      .testimonials-grid { grid-template-columns: 1fr; }
      .warm-steps { grid-template-columns: 1fr 1fr; }
      .stats-grid { grid-template-columns: repeat(3, 1fr); }
      .footer .container { text-align: center; }
    }

    @media (max-width: 640px) {
      .hero-title { font-size: 26px; }
      .hero-subtitle { font-size: 16px; }
      .hero-video iframe { height: 200px; }
      .problems-title,
      .steps-title,
      .traffic-title,
      .guarantee-title,
      .niches-title,
      .why-us-title,
      .company-title,
      .use-cases-title,
      .faq-title,
      .testimonials-title,
      .ethic-title,
      .warm-leads-title { font-size: 22px; }
      .services-grid { grid-template-columns: 1fr; }
      .results-grid { grid-template-columns: 1fr; }
      .case-studies-grid { grid-template-columns: 1fr; }
      .traffic-grid { grid-template-columns: 1fr; }
      .team-grid { grid-template-columns: 1fr; }
      .warm-steps { grid-template-columns: 1fr; }
      .stats-grid { grid-template-columns: 1fr; }

      .btn-blue, .btn-outline { width: 100%; }
      .bitrix-hero-buttons { flex-direction: column; }
      .hero-stats-row { grid-template-columns: 1fr; }
    }

    /* ===== POPUP FORM ===== */
    .popup-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
    }

    .popup-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .popup-form {
      background: #fff;
      border-radius: 24px;
      padding: 48px 40px;
      max-width: 460px;
      width: calc(100% - 32px);
      position: relative;
      box-shadow: 0 24px 60px rgba(0,0,0,0.2);
      transform: translateY(20px);
      transition: transform 0.3s;
    }

    .popup-overlay.active .popup-form {
      transform: translateY(0);
    }

    .popup-close {
      position: absolute;
      top: 16px;
      right: 20px;
      background: none;
      border: none;
      font-size: 28px;
      color: #999;
      cursor: pointer;
      line-height: 1;
    }

    .popup-close:hover { color: #333; }

    .popup-title {
      font-size: 26px;
      font-weight: 800;
      color: #0f172a;
      text-align: center;
    }

    .popup-subtitle {
      margin-top: 8px;
      font-size: 15px;
      color: #666;
      text-align: center;
    }

    .popup-input {
      display: block;
      width: 100%;
      height: 52px;
      margin-top: 16px;
      padding: 0 20px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      font-size: 16px;
      font-family: inherit;
      color: #333;
      transition: border-color 0.2s;
    }

    .popup-input:focus {
      outline: none;
      border-color: var(--blue);
    }

    .popup-input::placeholder { color: #aaa; }

    .popup-submit {
      width: 100%;
      margin-top: 20px;
      height: 52px;
      font-size: 16px;
      border-radius: 12px;
    }

    .popup-privacy {
      margin-top: 12px;
      font-size: 12px;
      color: #999;
      text-align: center;
    }

    .popup-result {
      margin-top: 16px;
      padding: 12px;
      border-radius: 8px;
      text-align: center;
      font-size: 14px;
    }

    .popup-result.success {
      background: #ecfdf5;
      color: #065f46;
    }

    .popup-result.error {
      background: #fef2f2;
      color: #991b1b;
    }