@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Orbitron:wght@600;800&display=swap');
:root {
	--iryx-primary: #40f090;
	--iryx-primary-600: #00d070;
	--iryx-primary-700: #00b060;
	--iryx-bg: #0a0f12;
	--iryx-ink: #eafbf2;
	--iryx-accent: #ff7a18;
}
* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	padding: 0;
	background: var(--iryx-bg);
	color: var(--iryx-ink);
	font-family: Inter, system-ui, Arial, sans-serif;
}
a {
	color: var(--iryx-primary);
	text-decoration: none;
}
.container {
	max-width: 1120px;
	margin: 0 auto;
	padding: 24px;
}
.nav {
	position: sticky;
	top: 0;
	background: rgba(10, 15, 18, 0.7);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(64, 240, 144, 0.15);
	z-index: 9;
}
.nav-inner {
	display: flex;
	align-items: center;
	gap: 16px;
}
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: Orbitron, sans-serif;
	letter-spacing: 1px;
}
.logo {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: radial-gradient(
			120px 60px at 30% 30%,
			rgba(64, 240, 144, 0.4),
			transparent 55%
		),
		#0f1815;
	border: 1px solid rgba(64, 240, 144, 0.25);
	box-shadow: 0 0 18px rgba(64, 240, 144, 0.25);
}

.logo img { 
  width: 100%;
}


.brand-title {
	font-weight: 800;
	font-size: 20px;
}
.nav-links {
	margin-left: auto;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 18px;
	border-radius: 12px;
	font-weight: 700;
}
.btn-primary {
	background: linear-gradient(
		135deg,
		var(--iryx-primary-600),
		var(--iryx-primary)
	);
	color: #06160e;
	box-shadow: 0 0 24px rgba(64, 240, 144, 0.35);
}
.btn-accent {
	background: var(--iryx-accent);
	color: #240f05;
	box-shadow: 0 0 24px rgba(255, 122, 24, 0.35);
}
.btn-outline {
	border: 1px solid rgba(64, 240, 144, 0.3);
}
.hero {
	position: relative;
	padding: 80px 0 40px;
}
.hero h1 {
	font-family: Orbitron, sans-serif;
	font-size: clamp(32px, 5vw, 56px);
	margin: 0 0 10px;
}
.hero p {
	max-width: 720px;
	opacity: 0.9;
}
.hero .cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 16px;
}
.glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(
			600px 240px at 20% 10%,
			rgba(64, 240, 144, 0.12),
			transparent 55%
		),
		radial-gradient(
			420px 200px at 80% 0%,
			rgba(255, 122, 24, 0.1),
			transparent 55%
		);
}
.grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(12, 1fr);
}
.card {
	grid-column: span 12;
	background: linear-gradient(
			0deg,
			rgba(255, 255, 255, 0.02),
			rgba(255, 255, 255, 0.02)
		),
		#0c1412;
	border: 1px solid rgba(64, 240, 144, 0.12);
	border-radius: 16px;
	padding: 18px;
}
.card h3 {
	margin: 0 0 6px;
	font-family: Orbitron, sans-serif;
	letter-spacing: 0.6px;
}
.card p {
	margin: 0;
	opacity: 0.9;
}
.features .card {
	grid-column: span 12;
}
@media (min-width: 720px) {
	.features .card {
		grid-column: span 4;
	}
}
.thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16/9;
	border-radius: 14px;
	margin-bottom: 12px;
	overflow: hidden;
	background: radial-gradient(
			600px 180px at 30% 20%,
			rgba(64, 240, 144, 0.12),
			transparent 55%
		),
		radial-gradient(
			400px 160px at 70% 0%,
			rgba(255, 122, 24, 0.1),
			transparent 55%
		);
	border: 1px solid rgba(64, 240, 144, 0.14);
}
.thumb img {
	width: 75%;
}

.footer {
	margin-top: 40px;
	padding: 20px 0;
	border-top: 1px solid rgba(64, 240, 144, 0.12);
	opacity: 0.8;
	font-size: 14px;
}
.badge {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: 0.3px;
	background: rgba(255, 122, 24, 0.18);
	color: #ffd1b0;
	border: 1px solid rgba(255, 122, 24, 0.35);
}
.section-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 24px 0 12px;
}
.section-title h2 {
	font-family: Orbitron, sans-serif;
	letter-spacing: 1px;
	font-size: clamp(22px, 2.6vw, 28px);
	margin: 0;
}
.links-list {
	display: grid;
	gap: 12px;
}
.links-list a {
	padding: 16px 18px;
	border: 1px solid rgba(64, 240, 144, 0.22);
	border-radius: 14px;
	font-weight: 700;
	text-align: center;
	background: #1a1f1d;
}
.links-list a.site {
	background: linear-gradient(135deg, var(--iryx-accent), #ffb14a);
	color: #2b1403;
}