/* SCIENCE GOTHIC */
@import url('https://fonts.googleapis.com/css2?family=Science+Gothic:wght@400;700&display=swap');

html,
body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	font-family: 'Science Gothic', sans-serif;
	background: #000;
	/* на всякий случай */
}

/* ===============================
   HERO — фон bg.jpg
=============================== */

.hero {
	min-height: 100vh;
	background: url("../img/bg.webp") center center / cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	text-align: center;
	padding: 40px 120px;
}

.hero-inner {
	max-width: 700px;
	width: 100%;
	margin-top: -320px;
}

/* ТЕКСТЫ */

.hero-title {
	font-family: 'Science Gothic', sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 64px;
	line-height: 1;
	/* 100% */
	text-align: center;

	max-width: 680px;
	width: 100%;
	background: linear-gradient(91.88deg, #253394 0%, rgba(192, 5, 255, 0.3) 25%, #C005FF 60%, rgba(192, 5, 255, 0.3) 75%, #C005FF 100%), #FFFFFF;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	-webkit-text-stroke: 1.5px #FFFFFF;
	margin-bottom: 20px;
}


.hero-subtitle {
	margin: 0 0 32px;
	font-weight: 400;
	font-size: 21px;
	line-height: 24px;
	color: #fff;
}

/* КНОПКА */

.hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 200px;
	height: 60px;

	background: linear-gradient(96.09deg, #F85A00 0%, #D53200 100%);
	border-bottom: 4px solid #C73800;

	box-shadow:
		0px 88px 25px rgba(244, 86, 0, 0.01),
		0px 56px 23px rgba(244, 86, 0, 0.05),
		0px 32px 19px rgba(244, 86, 0, 0.18),
		0px 14px 14px rgba(244, 86, 0, 0.3),
		0px 4px 8px rgba(244, 86, 0, 0.34),
		inset 0px 2px 4px rgba(255, 255, 255, 0.25);

	border-radius: 40px;

	font-family: "Science Gothic", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 34px;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	cursor: pointer;

	transition: all 0.2s ease;
}

/* ---- HOVER ---- */
.hero-btn:hover {
	background:
		linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)),
		linear-gradient(96.09deg, #F85A00 0%, #D53200 100%);
}

/* ---- ACTIVE / PRESSED ---- */
.hero-btn:active {
	background: linear-gradient(96.09deg, #F85A00 0%, #D53200 100%);
}



.section {
	padding: 120px 20px;
	color: #fff;
	margin-top: -320px;
}


/* ===============================
   HOW CRASH GAMES WORK
=============================== */

.how-crash {
	padding-top: 80px;
	padding-bottom: 100px;
}

.how-crash-inner {
	max-width: 1120px;
	margin: 0 auto;
	text-align: center;
}

/* Заголовок */

.how-crash-title {
	margin: 0 0 12px;
	font-family: 'Science Gothic', sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 32px;
	line-height: 27px;
	/* по ТЗ */
	text-transform: uppercase;
}

/* Подзаголовок */

.how-crash-subtitle {
	margin: 0 0 40px;
	font-family: 'Science Gothic', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	line-height: 16px;
	/* по ТЗ */
}

/* Сетка карточек */

.how-crash-grid {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Карточка */

.how-card {
	position: relative;
	width: 336px;
	height: 160px;
	border-radius: 8px;
	overflow: visible;
	display: flex;
	align-items: flex-end;
	padding: 16px;
	/* уменьшили паддинг */
	box-shadow: 0px 18px 40px rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
	/* важно! размер остаётся ровно 336×160 */
}


/* Фоны карточек */

.how-card--pink {
	background: linear-gradient(249.47deg, #F578F5 0%, #F614FF 100%);
}

.how-card--green {
	background: linear-gradient(249.47deg, #76F5E6 0%, #30BEA0 100%);
}

.how-card--orange {
	background: linear-gradient(249.47deg, #FFAF75 0%, #FF7C1E 100%);
}

/* Текст внутри карточек */

.how-card-text {
	font-family: 'Science Gothic', sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 24px;
	line-height: 24px;
	text-transform: uppercase;
	text-align: left;
	color: #000;
	/* как в макете тёмный текст */
	max-width: 180px;
}

/* Иконки справа, слегка выходят за блок */

/* Базовое — чтобы не повторять */
.how-card-icon {
	position: absolute;
	pointer-events: none;
}

/* 1 — PLACE YOUR BET (ico1) */
.how-card--pink .how-card-icon {
	width: 244px;
	top: -28px;
	right: -20px;
}

/* 2 — WATCH THE MULTIPLIER RISE (ico2) */
.how-card--green .how-card-icon {
	width: 402px;
	top: -48px;
	right: -53px;
}

/* 3 — CASH OUT BEFORE CRASH (ico3) */
.how-card--orange .how-card-icon {
	width: 327px;
	top: -40px;
	right: -105px;
}


/* ===============================
   IT'S YOUR TURN TO FLY
=============================== */

.turn-fly {
	padding-top: 80px;
	padding-bottom: 95px;
	margin-top: -100px;
}

.turn-fly-inner {
	max-width: 1120px;
	margin: 0 auto;
	text-align: center;
}

/* Заголовок и подзаголовок как в прошлой секции */

.turn-fly-title {
	margin: 0 0 12px;
	font-family: 'Science Gothic', sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 32px;
	line-height: 27px;
	text-transform: uppercase;
}

.turn-fly-subtitle {
	margin: 0 0 40px;
	font-family: 'Science Gothic', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	line-height: 16px;
}

/* Сетка игр */

.games-grid {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 48px;
}

.game-item {
	width: 248px;
	text-align: left;
}

/* Карточка игры */

.game-card {
	position: relative;
	width: 248px;
	height: 138px;
	border-radius: 16px;
	overflow: hidden;
	border: 2px solid transparent;
	box-sizing: border-box;
	cursor: pointer;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.game-card-img {
	width: 100%;
	height: 100%;
	display: block;
}

/* Кнопка play по центру */

.game-card-play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60px;
	height: 60px;
	transform: translate(-50%, -50%) scale(0.85);
	border-radius: 50%;
	border: none;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FF7C1E;
	/* базовый цвет */
	box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.5);
	opacity: 0;
	pointer-events: none;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.2s ease, opacity 0.2s ease;
}

.game-card-play-arrow {
	width: 15px;
	height: 19px;
	display: block;
	margin-left: 4px;
}

/* Hover/active эффекты */

.game-card:hover {
	border-color: #FF7C1E;
}

.game-card:hover .game-card-play {
	opacity: 1;
	pointer-events: auto;
	background: #FF9050;
	/* hover цвет */
}

.game-card:active .game-card-play {
	background: #F85A00;
	/* active цвет */
}

/* Текст под карточками */

.game-title {
	margin-top: 14px;
	margin-bottom: 4px;
	font-family: 'Science Gothic', sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 24px;
	line-height: 24px;
	text-transform: uppercase;
}

.game-desc {
	font-family: 'Science Gothic', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	line-height: 20px;
	color: #ffffff;
	opacity: 0.5;
}

/* Широкая кнопка под блоком */

.games-btn {
	width: 250px;
}

/* Адаптив */

@media (max-width: 1320px) {
	.hero {
		background: url("../img/bg2.webp") center center / cover no-repeat;
		justify-content: center;
	}

	.hero-title {
		font-family: 'Science Gothic', sans-serif;
		font-style: normal;
		font-weight: 700;
		font-size: 48px;
	}

	.hero-inner {
		margin-top: 100px;
	}

	.how-crash {
		padding-top: 140px;
		padding-bottom: 100px;
	}

	.how-card {
		position: relative;
		width: 304px;
		height: 160px;
	}

	.game-item {
		width: 224px;
	}

	.game-card {
		position: relative;
		width: 224px;
		height: 125px;
	}
}

@media (max-width: 1024px) {

	.hero {
		padding: 40px 20px;
		min-height: 800px;
	}

	.how-crash {
		padding-top: 120px;
	}

	.turn-fly {
		margin-top: -120px;
	}

	.how-crash-grid {
		gap: 12px;
	}

	.how-card {
		position: relative;
		width: 226px;
		height: 116px;
	}

	.how-card-text {
		font-size: 16px;
		line-height: 18px;
	}

	.how-card--pink .how-card-icon {
		width: 177px;
	}

	.how-card--green .how-card-icon {
		width: 275px;
		top: -35px;
		right: -43px;
	}

	.how-card--orange .how-card-icon {
		width: 227px;
		top: -28px;
		right: -68px;
	}

	.game-item {
		width: 164px;
	}

	.game-card {
		position: relative;
		width: 164px;
		height: 92px;
		border-radius: 8px;
	}

	.game-title {
		margin-top: 8px;
		font-size: 16px;
		line-height: 16px;
	}

	.game-desc {
		font-size: 12px;
	}

	.game-card-play {
		width: 48px;
		height: 48px;
	}

	.game-card-play-arrow {
		width: 10px;
		height: 13px;
		display: block;
		margin-left: 0px;
	}
}

@media (max-width: 768px) {
	.hero {
		min-height: 600px;
        height: 700px;
		background: url("../img/mobbg.webp") top center / cover no-repeat;
		justify-content: center;
    align-items: flex-start;
	}
  .hero-inner {
   max-width: 350px;
   margin-top: 0px;
  }
      .hero-title {
        font-family: 'Science Gothic', sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 32px;
        margin-top: 0px;
        margin-bottom: 10px;
        -webkit-text-stroke: 0.9px #FFFFFF;
    }

    .hero-subtitle {
    margin: 0 0 340px;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #fff;
}

.how-crash-grid {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

    .how-card {
        position: relative;
        width: 342px;
        height: 60px;
        align-items: center;
    }

        .how-card--pink .how-card-icon {
        width: 110px;
        top: -23px;
        right: -9px;
    }
        .how-card--green .how-card-icon {
        width: 179px;
        top: -20px;
        right: -12px;
    }
        .how-card--orange .how-card-icon {
        width: 174px;
        top: -18px;
        right: -23px;
    }

        .how-crash {
        padding-top: 0px;
		margin-top: -160px;
    }

    .how-crash-title {
    margin: 0 0 5px;
    font-size: 20px;
    line-height: 27px;
    text-transform: uppercase;
}
.how-crash-subtitle {
  margin: 0 0 20px;
    font-size: 14px;
    line-height: 16px;
}

    .turn-fly {
        margin-top: -140px;
    }
.turn-fly-title {
  margin: 0 0 5px;
    font-size: 20px;
    line-height: 27px;
    text-transform: uppercase;
}

.turn-fly-subtitle {
      margin: 0 auto 40px;
      width: 350px;
    font-size: 14px;
    line-height: 16px;
}
.games-grid {
    display: flex;
    margin: 0 auto;
    width: 350px;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}
}