:root{
	--bg:#0b1220; --bg-2:#0f1a30; --blue:#3b82f6; --purple:#8b5cf6; --pink:#ec4899;
	--text:#e7ecff; --muted:#9fb0d7; --card:#141c31; --card-2:#0f172a; --accent:#6d28d9;
	--success:#22c55e; --danger:#ef4444; --warning:#ffc107; --success-2: #67ea97;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0; font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
	color:var(--text); background:var(--bg); overflow-x:hidden;
}
.gradient-overlay{
	position:fixed; inset:-30vmax; pointer-events:none; z-index:0;
	background:
		radial-gradient(45vmax 35vmax at 15% 15%, rgba(59,130,246,.16), transparent 60%),
		radial-gradient(55vmax 45vmax at 80% 25%, rgba(139,92,246,.18), transparent 60%),
		radial-gradient(60vmax 55vmax at 55% 95%, rgba(236,72,153,.10), transparent 65%);
	filter:saturate(1.1) blur(44px);
	animation: drift 28s ease-in-out infinite alternate;
}
@keyframes drift{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(-3%,3%,0) scale(1.06)} }
.noise{
	position:fixed; inset:0; z-index:1; pointer-events:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' opacity='0.05' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode:overlay;
}
#bg{
	position:fixed; inset:0; z-index:-1;
	background: radial-gradient(1200px 600px at 50% -200px, #111a2f, transparent 60%),
	            linear-gradient(180deg, var(--bg), var(--bg-2));
}
.container{width:min(1100px, 92%); margin:0 auto}
.site-header{
	position:sticky; top:0; z-index:5;
	background:linear-gradient(180deg, rgba(10,15,28,.85), rgba(10,15,28,.35) 40%, transparent);
	backdrop-filter:saturate(140%) blur(8px);
	border-bottom:1px solid rgba(139,92,246,.14);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{
	display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.3px
}
#logo-img{height:28px; width:auto; display:block; filter: drop-shadow(0 0 10px rgba(139,92,246,.35))}
.logo-text{display:inline-block}
nav{display:flex; gap:18px; align-items:center}
nav a{color:var(--muted); text-decoration:none; font-weight:600}
nav a:hover{color:var(--text)}
.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle span{display:block; width:24px; height:2px; background:#9fb0d7; margin:5px 0}
.hero{position:relative; padding:30px 0 80px}
.title{
	font-size: clamp(32px, 6vw, 64px); font-weight:800; line-height:1.05; margin:0 0 12px 0; letter-spacing:.3px;
}
.glow{
	background:linear-gradient(90deg, #a8c3ff 0%, #cbb9ff 50%, #f7a7d7 100%);
	-webkit-background-clip:text; background-clip:text; color:transparent;
	filter: drop-shadow(0 8px 28px rgba(139,92,246,.30));
	animation: hue 16s linear infinite;
}
main a, main a:visited {color:var(--success)}
main a:hover {color:var(--success-2)}
main .danger {color:var(--danger)}
@keyframes hue{ to{ filter:hue-rotate(360deg) drop-shadow(0 8px 28px rgba(139,92,246,.30)); } }
.subtitle{color:var(--muted); font-size:clamp(16px, 2vw, 18px); max-width:820px}
.hero-inner{display:flex; flex-direction:column; align-items:flex-start; gap:5px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{
	--ring: rgba(59,130,246,.45);
	display:inline-flex; align-items:center; justify-content:center;
	gap:8px; padding:12px 18px; border-radius:14px; text-decoration:none; cursor:pointer;
	font-weight:700; letter-spacing:.2px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	color:var(--text); border:1px solid rgba(139,92,246,.25); background:rgba(20,28,49,.55);
	box-shadow: 0 0 0 0 var(--ring);
}
.btn:hover{transform:translateY(-1px); border-color:rgba(139,92,246,.45); box-shadow: 0 8px 26px rgba(0,0,0,.35)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(90deg, var(--purple), var(--blue)); border-color:transparent}
.btn.ghost{background:transparent}
.btn.small{padding:9px 14px; font-size:14px; line-height: 14px; margin-left: 4px;}
.btn svg path { fill: var(--muted) }
a.btn, a.btn:hover {color:var(--text); text-decoration:none; }
.ip-inline{display:flex; align-items:center; gap:10px; margin-top:6px; color:var(--muted)}
.ip-label{opacity:.9; letter-spacing:.02em}
code{
	overflow-wrap: anywhere;
	white-space: break-spaces;
	background:#0c1324; border:1px solid rgba(139,92,246,.25);
	padding:8px 10px; border-radius:10px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#server-fingerprint {line-height: 22px; display: flow;}
.code-row {display: flex; align-items: normal; gap:6px; vertical-align: top; padding: 6px 0;}
.status-dot{
	margin-left:4px;
	width:10px; height:10px; border-radius:50%;
	background: #7f8aa7; box-shadow: 0 0 0 0 rgba(34,197,94,0);
	transition: background .3s ease, box-shadow .3s ease;
}
.status-dot.online{ background: var(--success); box-shadow: 0 0 0 6px rgba(34,197,94,.12) }
.status-dot.offline{ background: var(--danger); box-shadow: 0 0 0 6px rgba(239,68,68,.12) }
.status-text{ font-size:14px }
.stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:7px}
.stats .num{display:block; font-weight:800; font-size:28px}
.stats .label{display:block; color:var(--muted); font-size:13px}
.howto{padding:60px 0}
.howto p,ol{color:var(--muted);}
.video-container{display: flex; justify-content: center;}
.video-container iframe {aspect-ratio: 16 / 9; width: 100% !important; }
h2{font-size: clamp(24px, 4vw, 36px); margin:0 0 8px 0}
.howto-description{color:var(--muted); max-width:800px}
.grid{
	margin-top:26px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px;
}
.card{
	background:linear-gradient(180deg, var(--card), var(--card-2));
	border:1px solid rgba(139,92,246,.22);
	border-radius:16px; padding:18px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 8px 24px rgba(0,0,0,.25);
	will-change: transform;
}
.card:hover{transform: translateY(-6px) rotateX(1deg) rotateY(-1.2deg); border-color:rgba(139,92,246,.42); box-shadow: 0 16px 40px rgba(0,0,0,.35)}
.card h3{margin:0 0 6px 0}
.card p{margin:0 0 12px 0; color:var(--muted)}
.tag{
	display:inline-block; font-size:12px; padding:6px 10px; border-radius:999px;
	background:rgba(59,130,246,.15); color:#bcd3ff; border:1px solid rgba(59,130,246,.3)
}
.tag.danger{background:rgba(239,68,68,.15); color:#ffcdd2; border-color:rgba(239,68,68,.3)}
.about{padding:80px 0; background:linear-gradient(180deg, rgba(17,26,47,.56), rgba(17,26,47,.24))}
.about .container{ display:grid; gap:22px; grid-template-columns: 1.4fr .8fr; }
.about-content ul{margin:12px 0 0 0; padding-left:18px}
.about-card{ background:linear-gradient(180deg, var(--card), var(--card-2)); border:1px solid rgba(139,92,246,.25); border-radius:16px; padding:18px }
.about-card h3{margin: 10px 0px;}
.ip-row {line-height: 42px;}
.site-footer{padding:40px 0; border-top:1px solid rgba(139,92,246,.2); color:var(--muted)}
.small{font-size:12px}
@media (max-width: 960px){
	.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.about .container{grid-template-columns:1fr}
}
@media (max-width: 600px){
	.stats{grid-template-columns:1fr 1fr}
	nav{display:none}
	.nav-toggle{display:block}
}