/* ===== HERO ===== */

    /* =========================================
       ГЛАВНЫЙ ПЕРВЫЙ ЭКРАН (HERO)
       Верхний промо-блок сайта с видеофоном,
       заголовком, тегами и кнопками.
       ========================================= */
    .hero {
      position: relative;
      min-height: calc(100svh - 78px);
      display: grid;
      align-items: start;
      overflow: hidden;
      isolation: isolate;
      margin: 0;
      padding: 0;
    }

    /* Видео на фоне первого экрана.
       Здесь регулируются прозрачность, насыщенность
       и общее визуальное присутствие ролика. */
    .hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .18;
      filter: saturate(1.02) contrast(1.02) brightness(1.08);
      z-index: -3;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(248,252,255,0.42), rgba(248,252,255,0.82)),
        radial-gradient(circle at 20% 10%, rgba(15,167,223,0.12), transparent 24%),
        radial-gradient(circle at 100% 0%, rgba(40,201,193,0.10), transparent 26%);
      z-index: -2;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 120px;
      background: linear-gradient(180deg, transparent, #f3f9fd);
      z-index: -1;
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(16px);
      opacity: .22;
      pointer-events: none;
      animation: float 10s ease-in-out infinite;
    }

    .orb-1 { width: 240px; height: 240px; background: rgba(15,167,223,0.22); top: 12%; left: -4%; }
    .orb-2 { width: 320px; height: 320px; background: rgba(40,201,193,0.16); right: -6%; bottom: 12%; animation-duration: 13s; }
    .orb-3 { width: 180px; height: 180px; background: rgba(111,140,255,0.16); top: 18%; right: 18%; animation-duration: 11s; }

    @keyframes float {
      0%,100% { transform: translateY(0px) translateX(0px); }
      50% { transform: translateY(-18px) translateX(8px); }
    }

    .hero-inner {
      width: min(1240px, calc(100% - 32px));
      margin: 0 auto;
      padding: 56px 0 88px;
      position: relative;
      z-index: 2;
    }

    .hero-copy {
      max-width: 920px;
      position: relative;
      z-index: 2;
      margin: 0 auto;
      text-align: center;
    }

    /* Основной заголовок первого экрана.
       Здесь настраиваются размер, жирность,
       межбуквенное расстояние и цвет главного текста. */
    .hero-copy h1{
      font-size: clamp(42px, 6.2vw, 72px);
      line-height: 0.98;
      letter-spacing: -0.045em;
      max-width: 930px;
      margin: 0 auto;
      font-weight: 700;
      color: var(--text);
      font-family: "Segoe UI", Arial, sans-serif;
      text-rendering: optimizeLegibility;
    }

    .hero-sub {
      max-width: 820px;
      margin: 24px auto 0;
      font-size: 18px;
      line-height: 1.75;
      color: #46647c;
    }

    /* Теги под заголовком первого экрана:
       «Биотехнологии», «ПЦР и секвенирование» и т.д. */
    .hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
      justify-content: center;
    }

    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,0.78);
      border: 1px solid rgba(15,39,64,0.10);
      color: #234057;
      font-size: 14px;
      white-space: nowrap;
      backdrop-filter: blur(10px);
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .hero-tag::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #1b84c6;
      box-shadow: 0 0 0 3px rgba(27,132,198,0.10);
      flex: 0 0 8px;
    }

    .hero-tag:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(16,32,51,0.08);
    }


    .hero-spotlight,
    .spotlight-stage,
    .spotlight-item {
      display: none !important;
    }

    .btn-row {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 30px;
      justify-content: center;
    }

    /* Базовый стиль кнопок.
       Используется и для прозрачных, и для акцентных кнопок. */
    .btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 54px;
      padding: 0 24px;
      border-radius: 999px;
      border: 1px solid rgba(15,39,64,0.12);
      background: rgba(255,255,255,0.82);
      color: var(--text);
      font-weight: 700;
      letter-spacing: .01em;
      overflow: hidden;
      transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
      box-shadow: 0 12px 30px rgba(15,39,64,0.08);
      backdrop-filter: blur(10px);
      cursor: pointer;
    }

    .btn::after {
      content: "";
      position: absolute;
      top: 0;
      left: -130%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
      transform: skewX(-28deg);
      transition: left 650ms ease;
    }

    .btn:hover {
      transform: translateY(-3px);
      border-color: rgba(15,167,223,0.36);
      box-shadow: 0 16px 40px rgba(15,167,223,0.12);
    }

    .btn:hover::after { left: 130%; }

    .btn-primary {
      color: #ffffff;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      border-color: rgba(15,167,223,0.30);
    }

    .hero-stage {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 34px;
      align-items: center;
      justify-items: center;
      min-height: calc(100svh - 78px - 144px);
    }

    .hero-spotlight {
      position: relative;
      min-height: 360px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      overflow: hidden;
      padding-left: 12px;
    }

    .spotlight-stage {
      position: relative;
      width: min(100%, 360px);
      height: 320px;
      overflow: hidden;
    }

    .spotlight-item {
      position: absolute;
      inset: 0 0 auto auto;
      width: min(100%, 336px);
      padding: 22px 24px 20px;
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(255,255,255,0.60), rgba(255,255,255,0.40));
      border: 1px solid rgba(255,255,255,0.46);
      box-shadow: 0 18px 46px rgba(15,39,64,0.08);
      backdrop-filter: blur(16px);
      opacity: 0;
      transform: translateX(74px) translateY(10px);
      pointer-events: none;
      will-change: transform, opacity;
    }

    .spotlight-item.play {
      animation: spotlightFly 6.8s cubic-bezier(.2,.65,.22,1) forwards;
    }

    @keyframes spotlightFly {
      0% {
        opacity: 0;
        transform: translateX(86px) translateY(14px);
      }
      14% {
        opacity: 1;
        transform: translateX(10px) translateY(0);
      }
      64% {
        opacity: 1;
        transform: translateX(-10px) translateY(0);
      }
      84% {
        opacity: 0.45;
        transform: translateX(-32px) translateY(-2px);
      }
      100% {
        opacity: 0;
        transform: translateX(-52px) translateY(-4px);
      }
    }

    .spotlight-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #176db4;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .spotlight-kicker::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      box-shadow: 0 0 0 5px rgba(15,167,223,0.10);
      flex: 0 0 auto;
    }

    .spotlight-item h3 {
      margin: 0;
      font-size: 22px;
      line-height: 1.14;
      letter-spacing: -0.03em;
      font-weight: 700;
      color: #152842;
      max-width: 272px;
      text-wrap: balance;
    }

    .spotlight-item p {
      margin: 12px 0 0;
      font-size: 14px;
      line-height: 1.64;
      color: #5c7690;
      max-width: 278px;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .spotlight-item::after {
      content: "";
      display: block;
      width: 92px;
      height: 2px;
      margin-top: 16px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(20,110,184,0.95), rgba(20,110,184,0.18));
    }