:root {
 --primary-color: 229, 46, 211;
 --secondary-color: 0, 0, 0;
 --muted-color: 55, 55, 55;
 --top-title-color: 71, 71, 71;
 --background-color: linear-gradient(180deg, #FFFFFF 0%, #ECF0F9 100%);
 --background-image-display: block;
 --navigation-logo-height: 40px;
 --navigation-header-border: 1px solid transparent;
 --navigation-header-background: #f9fbff;
 --block-background: #FFFFFF;
 --block-box-shadow: 0 1px 100px #00000003;
 --transactions-background: #ffffff;
 --transactions-row: rgba(var(--primary-color), .03);
 --participate-button-box-shadow: none;

}




@font-face {
	font-family: Mulish;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("Mulish-Regular.woff2") format("woff2");
}

@font-face {
	font-family:Mulish;font-style:normal;font-weight:500;font-display:swap;src:url("font/Mulish-Medium.woff2") format("woff2");
}

@font-face {
	font-family:Mulish;font-style:normal;font-weight:600;font-display:swap;src:url("font/Mulish-SemiBold.woff2") format("woff2");
}

@font-face {
	font-family:Mulish;font-style:normal;font-weight:700;font-display:swap;src:url("font/Mulish-Bold.woff2") format("woff2");
}

@font-face {
	font-family:Mulish;font-style:normal;font-weight:800;font-display:swap;src:url("font/Mulish-ExtraBold.woff2") format("woff2");
}

* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	outline: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
}

html {
	min-height: 100%;
	min-width: 100%;
}

body {
	background: var(--background-color);
	color: rgb(var(--secondary-color));
	line-height: 1.5;
	font-family: Mulish,Arial,sans-serif;
	position: relative;
}

button,input,a {
	font-family: Mulish,Arial,sans-serif;
}

a {
	text-decoration: unset;
	color: unset;
}

span {
	white-space: nowrap;
}

button,.navigation-button,.top-button {
	transition: opacity .2s;
}

button:hover,.navigation-button:hover,.top-button:hover {
	opacity: .75;
}

button:active,.navigation-button:active,.top-button:active {
	opacity: .6;
}

#app {
	max-width: 1240px;
	width: 100%;
	padding: 20px 20px 30px;
	margin: 0 auto;
}

.background,.background2 {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	height: 960px;
	z-index: -1;
	pointer-events: none;
	display: var(--background-image-display);
}

.background {
	top: 0;
	background: url("img/bg.png") no-repeat top;
	background-size: cover;
}

.background2 {
	bottom: 0;
	background: url("img/bg2.png") no-repeat bottom;
	background-size: cover;
}

.section-title {
	font-weight: 800;
	font-size: 28px;
	line-height: 120%;
	text-align: center;
}

.section-title span {
	color: rgb(var(--primary-color));
}

.navigation {
	border-radius: 15px;
	height: 60px;
}

.navigation-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 0 10px;
}

.navigation-button {
	background: rgb(var(--primary-color));
	border-radius: 12px;
	height: 40px;
	padding: 0 22px;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	line-height: 120%;
	display: flex;
	align-items: center;
	transition: opacity .2s;
}

.navigation-logo {
	height: var(--navigation-logo-height);
}

.navigation-nav {
	display: flex;
	align-items: center;
}

.navigation-nav a {
	color: rgb(var(--muted-color));
	font-weight: 700;
	font-size: 15px;
	line-height: 120%;
	transition: color .2s;
}

.navigation-nav a:not(:last-child) {
	margin-right: 35px;
}

.navigation-nav a:hover,.navigation-nav a:first-child {
	color: rgb(var(--primary-color));
}

header.navigation {
	background: var(--navigation-header-background);
	border: var(--navigation-header-border);
}

footer.navigation {
	background: rgb(var(--primary-color));
	margin-top: 40px;
}

footer.navigation .navigation-button {
	background: #fff;
	color: rgb(var(--primary-color));
}

.top {
	padding-top: 30px;
}

.top-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.top-badge {
	background: rgba(var(--primary-color),.1);
	border-radius: 15px;
	display: inline-flex;
	align-items: center;
	padding: 3px 14px 3px 3px;
	margin-bottom: 22px;
}

.top-badge .icon {
	width: 24px;
	height: 24px;
	background: rgb(var(--primary-color));
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.top-badge p {
	font-weight: 700;
	font-size: 13px;
	line-height: 120%;
	color: rgb(var(--primary-color));
	margin-left: 9px;
}

.top-title {
	font-weight: 800;
	font-size: 46px;
	line-height: 120%;
	text-transform: uppercase;
	color: rgb(var(--top-title-color));
	max-width: 650px;
}

.top-title span {
	color: rgb(var(--primary-color));
}

.top-subtitle {
	font-size: 18px;
	line-height: 150%;
	margin: 15px 0 30px;
	max-width: 500px;
}

.top-subtitle span {
	color: rgb(var(--primary-color));
	font-weight: 500;
}

.top-buttons {
	display: flex;
}

.top-button {
	display: flex;
	align-items: center;
	text-align: center;
}

.top-button:not(:last-child) {
	margin-right: 12px;
}

.top-button.button-participate {
	background: rgb(var(--primary-color));
	border-radius: 15px;
	font-weight: 700;
	font-size: 18px;
	color: #ffffff;
	line-height: 1.2;
	padding: 0 25px;
	height: 60px;
}

.top-button.button-participate svg {
	margin-left: 5px;
}

.top-button.button-qr {
	background: rgba(var(--primary-color),.15);
	color: rgb(var(--primary-color));
	border-radius: 15px;
	padding: 12px;
	height: 60px;
	width: 60px;
}

.instruction {
	padding-top: 50px;
	margin-top: 50px;
}

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

.instruction-item {
	border-radius: 15px;
	text-align: center;
	padding: 35px 35px 38px;
	width: 100%;
	box-shadow: var(--block-box-shadow);
	background: var(--block-background);
}

.instruction-item svg {
	color: rgb(var(--primary-color));
}

.instruction-item p {
	font-weight: 600;
	font-size: 15px;
	margin-top: 25px;
}

.participate {
	padding-top: 50px;
	margin: 50px 0 0;
}

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

.participate-qr {
	width: 120px;
	height: 120px;
	min-height: 120px;
	min-width: 120px;
	max-height: 120px;
	max-width: 120px;
	border-radius: 10px;
}

.participate-item {
	box-shadow: var(--block-box-shadow);
	background: var(--block-background);
	border-radius: 15px;
	padding: 20px;
	width: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.participate-item.check-visible .address-done {
	width: 14px;
	height: 11px;
	min-width: 14px;
	min-height: 11px;
	max-width: 14px;
	max-height: 11px;
	margin-left: 10px;
	opacity: 1;
}

.participate .address-done {
	width: 0;
	height: 0;
	min-width: 0;
	min-height: 0;
	max-width: 0;
	max-height: 0;
	opacity: 0;
	transition: opacity .2s;
	color: rgb(var(--primary-color));
}

.participate-footer {
	display: flex;
	align-items: center;
	gap: 10px 16px;
}

.participate-button {
	background: rgb(var(--primary-color));
	border-radius: 9px;
	padding: 11px 15px;
	cursor: pointer;
	font-weight: 800;
	font-size: 12px;
	line-height: 120%;
	color: #0f0f0f;
	border: none;
	transition: opacity .2s;
	box-shadow: var(--participate-button-box-shadow);
}

.participate-data {
	margin-left: 15px;
	overflow: hidden;
}

.participate-title {
	font-weight: 700;
	font-size: 19px;
	line-height: 170%;
}

.participate-title span {
	color: rgb(var(--primary-color));
}

.participate-address {
	display: flex;
	align-items: center;
	margin: 5px 0 13px;
}

.participate-address p {
	font-weight: 600;
	font-size: 14px;
	line-height: 170%;
	max-width: 400px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.participate-status {
	display: flex;
	align-items: center;
	gap: 7px;
}

.participate-status p {
	font-weight: 600;
	font-size: 14px;
	line-height: 170%;
}

.participate-status svg {
	color: rgb(var(--primary-color));
}

.rules {
	padding-top: 50px;
	margin-top: 50px;
}

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

.rules-item {
	border-radius: 15px;
	padding: 30px 35px;
	width: 100%;
	box-shadow: var(--block-box-shadow);
	background: var(--block-background);
}

.rules-title {
	font-weight: 700;
	font-size: 26px;
	line-height: 170%;
}

.rules-title img {
	width: 35px;
	height: 35px;
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;
}

.rules-title span {
	color: rgb(var(--primary-color));
}

.rules-subtitle {
	margin-top: 15px;
	font-weight: 500;
	font-size: 16px;
}

.rules-subtitle span {
	color: rgb(var(--primary-color));
	font-weight: 600;
}

.calculator {
	padding-top: 50px;
	margin-top: 30px;
}

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

.calculator-block {
	border-radius: 15px;
	display: flex;
	align-items: flex-end;
	padding: 30px 35px;
	box-shadow: var(--block-box-shadow);
	background: var(--block-background);
}

.calculator-label {
	font-weight: 500;
	font-size: 18px;
	line-height: 160%;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
}

.calculator-label span {
	color: rgb(var(--primary-color));
	margin-left: 4px;
}

.calculator-label svg {
	margin-left: 4px;
}

.calculator-delimiter {
	margin: 0 20px;
	height: 55px;
	line-height: 55px;
}

.calculator-counter {
	height: 55px;
	display: flex;
	align-items: center;
}

.calculator-counter img {
	margin-left: 5px;
	height: 30px;
	width: 30px;
}

.calculator-counter span {
	font-weight: 600;
	font-size: 32px;
	line-height: 100%;
	max-width: 120px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.calculator-input {
	height: 60px;
	position: relative;
}

.calculator-input input {
	border: 1px solid rgb(var(--primary-color));
	border-radius: 6px;
	background: transparent;
	width: 170px;
	height: 55px;
	color: rgb(var(--secondary-color));
	padding-left: 15px;
	padding-right: 45px;
	font-size: 20px;
	font-weight: 500;
}

.calculator-input img {
	position: absolute;
	width: 22px;
	height: 22px;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
}

.transactions {
	width: 100%;
	padding-top: 50px;
	margin: 20px 0 0;
}

.transactions-container {
	overflow-x: auto;
	box-shadow: var(--block-box-shadow);
	border-radius: 15px;
}

.transactions table {
	border-spacing: 0;
	border-collapse: separate;
	width: 100%;
	max-width: 100%;
	text-align: left;
	border-radius: 15px;
	overflow: hidden;
	font-size: 16px;
	background: var(--transactions-background);
	color: rgb(var(--muted-color));
}

.transactions table thead {
	border-radius: 15px 15px 0 0;
}

.transactions table thead th {
	font-weight: 600;
	color: var(--primary-color);
}

.transactions table th,.transactions table td {
	padding: 20px;
	white-space: nowrap;
}

.transactions table th:first-child,.transactions table td:first-child {
	padding-left: 36px!important;
}

.transactions table th:last-child,.transactions table td:last-child {
	padding-right: 36px!important;
}

.transactions table tbody tr:nth-child(odd) {
	background: var(--transactions-row);
}

.transactions table tr.contentLoading td>div {
	background: linear-gradient(to right,rgb(var(--primary-color),.03) 20%,rgb(var(--primary-color),.1),rgb(var(--primary-color),.03) 80%);
	background-size: 500px 100px;
	animation: moving-gradient 1s linear infinite;
}

@-webkit-keyframes moving-gradient {
	0% {
		background-position: -250px 0;
	}

	to {
		background-position: 250px 0;
	}
}

.transactions table td {
	font-weight: 500;
}

.transactions table td:last-child {
	width: 1%;
}

.transactions table td>div {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.transactions table td>div>* {
	display: inline-block;
	vertical-align: middle;
}

.transactions table .coin {
	height: 30px;
	min-width: 150px;
	max-width: 150px;
}

.transactions table .coin>* {
	display: inline-block;
	vertical-align: middle;
}

.transactions table .coin img {
	width: 30px;
	height: 30px;
}

.transactions table .coin p {
	margin-left: 7px;
	font-weight: 600;
}

.transactions table .address {
	min-width: 185px;
	max-width: 185px;
	height: 24px;
}

.transactions table .value,.transactions table .date {
	min-width: 150px;
	max-width: 150px;
	height: 24px;
}

.transactions table .status {
	min-width: 100px;
	max-width: 100px;
	height: 31px;
}

.transactions table .status span {
	color: #19b000;
	background: #19b00026;
	padding: 5px 15px;
	height: 100%;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 600;
}
/* Телефон слева, калькуляторы справа */
.calc-phone-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
}

.phone-block img {
  max-width: 400px; /* увеличили телефон */
  height: auto;
  display: block;
  border-radius: 16px;
}

.calculator-column {
  display: flex;
  flex-direction: column;
  gap: 25px;
  max-width: 650px; /* ограничили ширину калькуляторов */
  flex: 1 1 auto;
}

/* На мобильных — телефон сверху */
@media (max-width: 900px) {
  .calc-phone-wrapper {
    flex-direction: column;
    align-items: center;
  }
  .phone-block img {
    max-width: 100%;
  }
  .calculator-column {
    max-width: 100%;
  }
}

@media (max-width: 1250px) {
	.participate-title {
		font-size: 18px;
	}
}

@media (max-width: 1200px) {
	.top {
		height: 500px;
	}

	.top-ceo {
		position: absolute;
		z-index: -1;
		right: 0;
	}

	.participate-container,.calculator-container,.instruction-container,.rules-container {
		max-width: 600px;
		margin: 40px auto 0;
	}

	.participate-container,.rules-container,.calculator-container {
		grid-template-columns: repeat(1,1fr);
		gap: 20px;
	}

	.instruction-container {
		grid-template-columns: repeat(2,1fr);
		gap: 20px;
	}
}

@media (max-width: 1100px) {
	.top-ceo {
		display: none;
	}

	.top-container {
		justify-content: center;
	}

	.top-text {
		text-align: center;
	}

	.top-subtitle {
		margin: 15px auto 30px;
	}

	.top-buttons {
		justify-content: center;
	}
}

@media (max-width: 900px) {
	.navigation-nav {
		display: none;
	}
}

@media (max-width: 800px) {
	.top {
		height: auto;
		margin: 50px 0 100px;
	}

	.top-container {
		max-width: 100%;
	}
}

@media (max-width: 650px) {
	.top-title {
		font-size: 38px;
	}

	.top-subtitle {
		font-size: 16px;
	}

	.participate-item {
		display: block;
		text-align: center;
	}

	.participate-address,.participate-footer {
		justify-content: center;
	}

	.participate-qr {
		margin: 0 auto;
	}

	.participate-data {
		margin: 10px 0 0;
	}

	.calculator-label {
		font-size: 16px;
	}

	.calculator-counter span {
		font-size: 24px;
	}

	.calculator-delimiter {
		margin: 0 15px 15px;
	}
}

@media (max-width: 600px) {
	.calculator-block {
		flex-direction: column;
		align-items: flex-start;
		overflow: hidden;
	}

	.calculator-item {
		width: 100%;
	}

	.calculator-item:not(:last-child) {
		margin-bottom: 20px;
	}

	.calculator-label {
		margin-bottom: 10px;
		font-size: 18px;
	}

	.calculator-input input {
		width: 100%;
		height: 50px;
	}

	.calculator-delimiter {
		display: none;
	}

	.calculator-counter {
		height: auto;
	}

	.calculator-counter svg {
		min-width: 30px;
		max-width: 30px;
	}

	.calculator-counter span {
		font-size: 28px;
		max-width: none;
	}
}

@media (max-width: 550px) {
	.top-title {
		font-size: 32px;
	}

	.top-subtitle {
		max-width: 90%;
	}

	.section-title {
		font-size: 24px;
	}

	.instruction-container {
		grid-template-columns: repeat(1,1fr);
	}

	.instruction-item p {
		max-width: 300px;
		margin: 25px auto 0;
	}

	.rules-title {
		font-size: 22px;
	}
}

@media (max-width: 500px) {
	.participate-title {
		font-size: 18px;
		max-width: 250px;
		margin: 0 auto;
	}
}

@media (max-width: 450px) {
	.participate-footer {
		flex-direction: column;
	}

	.participate-footer.__memo {
		flex-direction: column-reverse;
	}

	.participate-button {
		width: 100%;
	}

	.transactions table p {
		max-width: 150px;
		min-width: 150px;
	}
}

@media (max-width: 400px) {
	.navigation-button,.top-button.button-qr,.rules-title img {
		display: none;
	}

	.top-button.button-participate {
		font-size: 16px;
		width: 100%;
		text-align: center;
		justify-content: center;
		height: 50px;
		max-width: 300px;
	}

	.top-button.button-participate svg {
		display: none;
	}
}