@charset "UTF-8";
.banner__wrapper {
  row-gap: 30px;
  position: relative;
  overflow: hidden;

  /* Same exact glow look & smoothness, locked to normal width */
  background:
    radial-gradient(1100px 820px at 22% 30%,
      rgba(47,60,191,0.96) 0%,
      rgba(47,60,191,0.75) 15%,
      rgba(47,60,191,0.42) 35%,
      rgba(47,60,191,0.22) 50%,
      rgba(47,60,191,0.10) 66%,
      rgba(47,60,191,0.00) 82%),
    radial-gradient(900px 700px at 72% 60%,
      rgba(80,110,255,0.10) 0%,
      rgba(80,110,255,0.00) 60%),
    linear-gradient(180deg, #1B236E 0%, #13152A 100%);
  
  /* Prevent any stretching — keeps glow natural */
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}

.banner__wrapper::after {
	display: none;
}

.improve__head::after {
	display: none !important;
}

.row-section__image {
	flex: 0 0 380px;
	position: relative;
}
@media (max-width: 479.98px) {
	.row-section__image {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 721.98px) {
	.banner__text {
		line-height: 1.4;
		max-width: 312px;
	}
}

@media (max-width: 991.98px) {
	.banner__button {
		font-size: 16px;
	}
}

@media (min-width: 479.98px) {
	.banner__title br {
		display: none;
	}
}

@media (max-width: 479.98px) {
	.row-section__button {
		font-size: 16px;
	}
}

@media (min-width: 479.98px) {
	.row-section__title br {
		display: none;
	}
}

.improve__content {
	margin-top: 40px;
}
@media (max-width: 479.98px) {
	.improve__content {
		margin-top: 20px;
	}
}

.banner__container {
	max-width: 1500px;
	-moz-column-gap: 20px;
	column-gap: 20px;
}

.banner__body {
	flex: 0 0 530px;
}

.banner__image {
	flex: 1 1 auto;
	margin-right: 0;
}
@media (max-width: 721.98px) {
	.banner__image {
		padding: 0px;
	}
}

@media (max-width: 721.98px) {
	.nav-header-lend__list {
		flex: 0 0 auto;
		padding: 0px;
		row-gap: 0px;
		margin: -20px -20px 0px;
	}
}

@media (max-width: 721.98px) {
	.header-lend__actions {
		display: none;
	}
}

@media (max-width: 991.98px) {
	.brands__slider {
		padding: 0px 20px;
	}
}

@media (max-width: 479.98px) {
	.brands__item {
		flex: 0 0 130px;
		padding: 15px;
		min-height: 65px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4px;
	}
}

@media (max-width: 721.98px) {
	.brands__content {
		margin-top: 15px;
	}
}

@media (max-width: 721.98px) {
	.nav-header-lend__item {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		-moz-column-gap: 5px;
		column-gap: 5px;
		padding: 20px 0px;
		font-size: 16px;
		font-weight: 400;
		border-bottom: 1px solid #e7e7e7;
	}
	.nav-header-lend__item img,
	.nav-header-lend__item svg {
		flex: 0 0 24px;
		width: 24px;
		height: 24px;
	}
}
@media (max-width: 721.98px) {
	.nav-header-lend__item .nav-header-lend__link {
		font-size: 16px;
		font-weight: 400;
	}
}
.nav-header-lend__item .nav-header-lend__link a {
	color: inherit;
	text-decoration: underline;
}

.nav-header-lend__action {
	align-self: center;
	padding-left: 30px;
	padding-right: 30px;
}
@media (min-width: 721.98px) {
	.nav-header-lend__action {
		display: none;
	}
}

@media (min-width: 721.98px) {
	.nav-header-lend__item._mb {
		display: none;
	}
}

.header-lend__login {
	display: inline-flex;
	align-items: center;
	-moz-column-gap: 5px;
	column-gap: 5px;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
}
@media (max-width: 721.98px) {
	.header-lend__login {
		display: none;
	}
}
.header-lend__login a {
	text-decoration: underline;
	color: inherit;
}
@media (any-hover: hover) {
	.header-lend__login a:hover {
		text-decoration: none;
	}
}
.header-lend__login img,
.header-lend__login svg {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

.banner__tabs {
	width: 100%;
}
.banner__nav {
	display: flex;
	justify-content: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.banner__list {
	display: flex;
	-moz-column-gap: 30px;
	column-gap: 30px;
}
.banner__item {
	color: #fff;
	font-size: 20px;
	font-weight: 400;
	text-align: center;
	padding: 10px 20px;
	position: relative;
	cursor: pointer;
}
@media (max-width: 479.98px) {
	.banner__item {
		font-size: 16px;
		padding: 10px;
	}
}
.banner__item._active {
	font-weight: 700;
}
.banner__item._active::after {
	opacity: 1;
}
.banner__item::after {
	content: '';
	width: 100%;
	height: 3px;
	background: #fff;
	opacity: 0;
	position: absolute;
	bottom: -1px;
	left: 0;
	display: inline-block;
}
.banner__blocks {
	margin-top: 30px;
}
@media (max-width: 991.98px) {
	.banner__blocks {
		margin-top: 20px;
	}
}
@media (max-width: 479.98px) {
	.banner__blocks {
		margin-top: 12px;
	}
}
.banner__block {
	position: relative;
}
.banner__img {
	width: 100%;
	max-width: 100%;
	box-shadow: 0px 117.45px 93.96px 0px rgba(0, 0, 0, 0.07),
		0px 49.068px 39.254px 0px rgba(0, 0, 0, 0.05),
		0px 26.234px 20.987px 0px rgba(0, 0, 0, 0.04),
		0px 14.707px 11.765px 0px rgba(0, 0, 0, 0.04),
		0px 7.811px 6.248px 0px rgba(0, 0, 0, 0.03),
		0px 3.25px 2.6px 0px rgba(0, 0, 0, 0.02);
}
.banner__img img {
	width: 100%;
	max-width: 100%;
}
.banner__tips {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
@media (max-width: 991.98px) {
	.banner__tips {
		display: none;
	}
}
.tip-banner {
	position: absolute;
	transform: translate(-50%, -50%);
}
.tip-banner:hover .tip-banner__body {
	opacity: 1;
	visibility: visible;
}
.tip-banner__circle-container {
	position: relative;
	width: 40px;
	height: 40px;
}
.tip-banner__circle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	border: 3px solid #9103b7; /* Цвет из JSON */
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
.tip-banner__circle.circle-2 {
	border: 1px solid #9103b7;
}
.tip-banner__body {
	padding: 5px 10px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	background: #9105b7;
	border-radius: 4px;
	width: max-content;
	max-width: 150px;
	display: block;
	line-height: 1.2;
	position: absolute;
	top: 8px;
	left: calc(100% + 5px);
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s 0s;
}
.tip-banner__body::before {
	content: '';
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-right: 6px solid #9103b7;
	border-bottom: 4px solid transparent;
	position: absolute;
	top: 8px;
	right: 100%;
}

.tip-banner__body._left {
	left: auto;
	right: calc(100% + 5px);
}
.tip-banner__body._left::before {
	border-left: 6px solid #9103b7;
	border-right: none;
	left: 100%;
	right: auto;
}

.circle-1 {
	animation: pulse1 linear 1.5s infinite;
}

.circle-2 {
	animation: pulse2 linear 1.5s infinite;
}

.row-section__tips {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

@keyframes pulse1 {
	0% {
		width: 20px;
		height: 20px;
	}
	66% {
		width: 30px;
		height: 30px;
	}
	100% {
		width: 20px;
		height: 20px;
	}
}
@keyframes pulse2 {
	0% {
		width: 20px;
		height: 20px;
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	66% {
		width: 38px;
		height: 38px;
		opacity: 0;
	}
	100% {
		width: 0;
		height: 0;
		opacity: 0;
		visibility: hidden;
	}
}
@media (max-width: 1272px) {
	.banner__body {
		flex: 1 1 auto;
	}
}
@media (max-width: 991.98px) {
	.banner__body {
		flex: 0 0 320px;
	}
}
@media (max-width: 721.98px) {
	.banner__body {
		flex: 0 0 auto;
		max-width: 100%;
	}
}

/* === HERO — MOBILE FINAL (≤1024px)
   Colors: #092AAB → #000315
   True centered glow, smooth falloff, round shape, dark edges
*/
@media (max-width: 1024px){
  .banner__wrapper {
    position: relative;
    overflow: hidden;
    background-color: transparent !important;

    background:
      /* 1️⃣ Core centered glow (more circular, not horizontal) */
      radial-gradient(460px 460px at 50% 46%,
        rgba(9,42,171,0.96) 0%,
        rgba(9,42,171,0.68) 20%,
        rgba(9,42,171,0.36) 40%,
        rgba(9,42,171,0.12) 62%,
        rgba(9,42,171,0.00) 78%),

      /* 2️⃣ Subtle soft halo below */
      radial-gradient(700px 600px at 50% 70%,
        rgba(80,110,255,0.12) 0%,
        rgba(80,110,255,0.00) 60%),

      /* 3️⃣ Gentle corner vignettes to frame it evenly */
      radial-gradient(130% 120% at 115% -10%,
        rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.00) 45%),
      radial-gradient(130% 120% at -15% -10%,
        rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.00) 45%),

      /* 4️⃣ Base blue-to-black gradient */
      linear-gradient(180deg,
        #000315 0%,
        #00081F 18%,
        #092AAB 44%,
        #03102D 70%,
        #000315 100%) !important;

    background-repeat: no-repeat !important;
    background-size: 100% auto !important;
    background-position: center top !important;
  }

  .banner__wrapper::before,
  .banner__wrapper::after {
    content: none !important;
    display: none !important;
  }
}

/* === PHONE HERO — FULL HEIGHT, CENTERED, TITLE 64 / TEXT 14, IMAGE EDGE-TO-EDGE (≤721.98px) === */
@media (max-width: 721.98px) {
  /* Full vertical hero */
  .banner__wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    padding-top: 60px;
    padding-bottom: 80px;
  }

  .banner__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 92vw;
    margin: 0 auto;
    text-align: center;
  }

  .banner__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    margin: 0 auto;
  }

  /* === TITLE === */
  .banner__title {
    font-size: 64px;
    line-height: 1.05;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    margin: 10px 0 14px;
    max-width: 16ch;
  }
  .banner__title br { display: inline; }

  /* === TEXT === */
  .banner__text {
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255,255,255,0.9);
    margin: 0 0 24px;
    max-width: 32ch;
  }

  /* === BUTTON === */
  .banner__button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 26px;
    border-radius: 8px;
    margin: 0 auto;
  }

  /* === IMAGE FIX: make DAT/Truckstop image truly edge-to-edge === */
  .banner__blocks,
  .banner__block {
    overflow: visible;
  }

  .banner__blocks .banner__block._active .banner__img {
    width: 100vw;              /* exactly the full viewport width */
    max-width: none;
    margin-left: calc(50% - 50vw); /* center it precisely */
  }

  .banner__blocks .banner__block._active .banner__img img {
    width: 100%;
    height: auto;
    display: block;
  }
}
