* {margin:0; padding:0; box-sizing:border-box; font-family:'Roboto', sans-serif; scroll-behavior:smooth;}
html {scrollbar-width:none;}
body {background:#0d0d0d; color:#f1f1f1; line-height:1.8; overflow-x:hidden;}
body::-webkit-scrollbar {width:0; height:0;}
header {display:flex; justify-content:space-between; align-items:center; padding:20px 10%; background:rgba(0, 0, 0, 0.8); backdrop-filter:blur(5px); border-bottom:1px solid rgba(255, 255, 255, 0.1); position:sticky; top:0; z-index:1000;}
.logo {font-size:2rem; font-weight:bold; color:#0acf97; text-transform:uppercase; letter-spacing:3px;}
nav {display:flex; margin-left:auto}
nav a {text-decoration:none; margin:0 15px; color:#f1f1f1; font-size:1.2rem; font-weight:500; transition:color 0.3s ease;}
nav a:hover {color:#0acf97;}
.hero {position:relative; text-align:center; padding:150px 20px; background:#1a1a1a; clip-path:polygon(0 0, 100% 0, 100% 85%, 0 100%); color:#f1f1f1;}
h1 {font-size:48px; font-weight:700; line-height:1.2;}
.hero p {font-size:20px; margin-bottom:40px; color:#b3b3b3;}
.btn {display:inline-block; padding:12px 25px; font-size:1.1rem; font-weight:bold; color:#ffffff; text-shadow:0 1px 3px rgba(0, 0, 0, 0.5); background:linear-gradient(90deg, #0acf97, #06b384); border:2px solid #06b384; border-radius:8px; text-decoration:none; cursor:pointer; transition:all 0.3s ease; box-shadow:0 4px 12px rgba(6, 179, 132, 0.5);}
.btn:hover {background:linear-gradient(90deg, #06b384, #0acf97); transform:translateY(-3px); box-shadow:0 6px 20px rgba(6, 179, 132, 0.7); color:#f1f1f1;}
.btn:active {transform:translateY(0); box-shadow:0 3px 10px rgba(6, 179, 132, 0.5);}
.sms-price {text-shadow:0 0 5px #0acf97, 0 0 10px transparent; position:absolute; top:30px; left:50%; display:flex; align-items:center; gap:10px; transform:translateX(-50%); z-index:10; font-size:60px; font-weight:bold; color:#0acf97; letter-spacing:1px;}
.sms-price span { display:inline-block; animation:glow 1.5s infinite alternate; }
@keyframes glow {	0% {text-shadow:0 0 5px #0acf97, 0 0 10px transparent}
	100% {text-shadow:0 0 15px #0acf97, 0 0 30px #0acf97}
}
@keyframes fadeIn {
	from {opacity:0}
	to {opacity:1}
}
.sms-price span:nth-child(1) {animation-delay:0s}
.sms-price span:nth-child(2) {animation-delay:0.2s}
.sms-price span:nth-child(3) {animation-delay:0.4s}
.sms-price span:nth-child(4) {animation-delay:0.6s}
.sms-price span:nth-child(5) {animation-delay:0.8s}
.sms-price span:nth-child(6) {animation-delay:1s}
.tariff-table {display:flex; flex-direction:column; border-radius:12px; overflow:hidden; box-shadow:0 4px 10px rgba(0, 0, 0, 0.3); background:#1a1a1a}
.noif {font-size:18px; color:#b0b0b0; margin-bottom:0}
.tariff-cards {display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:20px; margin-top:40px; justify-items:center}
.tariff-card {background:#1a1a1a; padding:30px 20px; border-radius:16px; box-shadow:0 4px 12px rgba(0, 0, 0, 0.4); text-align:center; transition:all 0.3s ease; width:100%; max-width:240px; border:1px solid #2a2a2a}
.tariff-card h3 {display:block; font-size:1.2rem; color:#fff; margin-bottom:10px; letter-spacing:1px}
.tariff-card strong {font-size:2rem; color:#0acf97; font-weight:bold}
.header {font-weight:bold; font-size:1.4rem; color:#0acf97; background:none; padding:20px 20px}
.section {padding:80px 10%; text-align:center; position:relative;}
.section.ft {padding-top:40px; padding-bottom:0}
.section h2 {font-size:32px; font-weight:bold; margin-bottom:40px; color:#f1f1f1;}
.advantage-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); gap:30px;}
.advantage-item {background:#1a1a1a; padding:50px; border-radius:20px; box-shadow:0 10px 25px rgba(0, 0, 0, 0.5); transition:transform 0.3s ease, box-shadow 0.3s ease; text-align:center; color:#f1f1f1;}
.advantage-item .icon {margin-bottom:20px;}
.advantage-item h3 {font-size:22px; margin-bottom:15px; color:#fff;}
.advantage-item p {font-size:1.2rem; color:#b0b0b0; line-height:1.6;}
.extra-cards {display:flex; text-align:left; flex-direction:column; gap:28px;}
.extra-card {background:#1a1a1a; border-radius:12px; padding:30px; box-shadow:0 4px 15px rgba(0, 0, 0, 0.5); transition:all 0.3s ease; position:relative; overflow:hidden;}
.extra-card h3 {font-size:22px; margin-bottom:10px; color:#f1f1f1; font-weight:bold;}
.extra-card h3 span {color:#0acf97; font-weight:bold;}
.extra-card p {font-size:1.1rem; line-height:1.6; color:#cccccc;}
.validation-info {padding:20px 10%; text-align:center; position:relative; overflow:hidden;}
.validation-info h2 {font-size:3.5rem; font-weight:700; color:#0acf97; margin-bottom:20px; text-transform:uppercase; letter-spacing:2px;}
.validation-info p {font-size:1.3rem; color:#b3b3b3; line-height:1.8; max-width:900px; margin:0 auto; text-align:center; padding:0 20px; letter-spacing:1px}
.validation-info h2, .validation-info p {z-index:1;}
.target-use-section {clip-path:polygon(0 15%, 100% 0, 100% 100%, 0 100%); background:#1a1a1a; margin-top:40px; padding:100px 10%; text-align:center; color:#f1f1f1;}
.target-use-section h2 {font-size:3rem; font-weight:bold; margin:40px 0; color:#f1f1f1;}
.target-use-section p {font-size:1.3rem; line-height:1.8; color:#b0b0b0; margin-top:30px;}
#modal {position:fixed; font-family:'Roboto', sans-serif; top:0; left:0; height:100%; width:100%; z-index:999999; display:none; align-items:center; background: #000000ba; justify-content:center; animation: fadeIn 0.3s ease}
	#modal>div {height:100%; padding:0 20px; background:#0d0d0d; box-shadow: 0 10px 30px rgba(0,0,0,0.7);}
		#modal>div>div {display:flex; align-items:center; margin-top:20px;}
			#modal>div>div>span {font-size:24px; font-weight:900}
			#modal>div>div>svg {margin-left:auto; cursor:pointer}
		#modal>div>iframe {margin-top:12px; height:calc(100% - 75px); width:800px; border:0;}
footer {padding:30px; background:#121212; color:#b0b0b0; text-align:center; border-top:2px solid #333;}

@media (min-width:160px) and (max-width:820px) {
	header {padding:20px 0 20px 16px}
	.logo {display:none}
	nav a {font-size:16px; margin:0 22px 0 0;}
	.sms-price {font-size:28px}
	.hero {position:relative; text-align:center; padding:100px 20px 120px 20px; background:#1a1a1a; clip-path:polygon(0 0, 100% 0, 100% 85%, 0 100%); color:#f1f1f1;}
	h1 {margin-bottom:18px; font-size:32px}
	.hero p {font-size:16px}
	.noif {font-size:16px; color:#b0b0b0; margin-bottom:0}
	.tariff-card {padding:20px 20px; max-width:100%;}
	.tariff-card span {display:block; font-size:16px; color:#fff; margin-bottom:0}
	.tariff-card strong {font-size:18px; color:#0acf97; font-weight:bold}
	.section {padding:40px 18px; text-align:center; position:relative;}
	.advantage-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:30px;}
	.section h2 {font-size:30px}
	.advantage-item h3 {font-size:22px}
	.advantage-item p {font-size:16px}
	.advantage-item .icon {margin-bottom:12px;}
	.extra-card p {font-size:16px; padding:0;}
	.extra-card h3 {font-size:18px;}
	.validation-info p {font-size:16px; padding:0;}
	.validation-info {padding:20px 16px;}
	.validation-info::before {top:0; left:0; width:100%; height:100%; transform:none}
	.target-use-section {padding:60px 10%;}
	.target-use-section h2 {font-size:20px; margin:80px 0 40px 0;}
	.target-use-section p {font-size:16px;}
	footer {font-size:14px; color:#fff}
	#modal>div>iframe {margin-top:12px; height:calc(100% - 100px); width:320px;}
}