/* palette from logo: #0082A7 #006583 #074F76 */
:root{
	--c1:#0082A7;
	--c2:#006583;
	--c3:#074F76;
	--bg:#06202e;
	--panel:#0a2c3f;
	--txt:#e8f4f8;
	--dim:#9fc3d2;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Tahoma,Arial,sans-serif;background:var(--bg);color:var(--txt);line-height:1.7}
a{color:inherit;text-decoration:none}
img{max-width:100%}

.top{display:flex;align-items:center;justify-content:space-between;padding:12px 5%;background:rgba(6,32,46,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--c3)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.1rem}
.brand img{height:44px}
nav{display:flex;gap:22px;align-items:center}
nav a{color:var(--dim);transition:.2s}
nav a:hover{color:var(--c1)}
nav .lang{border:1px solid var(--c1);border-radius:20px;padding:2px 12px;color:var(--c1)}
#burger{display:none;background:none;border:none;color:var(--txt);font-size:1.6rem;cursor:pointer}

.hero{text-align:center;padding:90px 5% 70px;background:radial-gradient(ellipse at 50% -20%,var(--c3) 0%,var(--bg) 65%)}
.hero-logo{height:160px;margin-bottom:24px;filter:drop-shadow(0 0 30px rgba(0,130,167,.45))}
.hero h1{font-size:2.4rem;margin-bottom:14px;background:linear-gradient(90deg,var(--c1),#4fc3e0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--dim);max-width:600px;margin:0 auto 30px;font-size:1.1rem}

.btn{display:inline-block;background:linear-gradient(135deg,var(--c1),var(--c3));padding:12px 34px;border-radius:30px;font-weight:600;transition:.2s;box-shadow:0 4px 18px rgba(0,130,167,.35)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,130,167,.55)}

.wrap{max-width:1100px;margin:0 auto;padding:60px 5%}
.wrap h2{text-align:center;font-size:1.8rem;margin-bottom:40px}
.page h1{font-size:2rem;margin-bottom:12px}
.page p{color:var(--dim);margin-bottom:14px}
.sub{font-size:1.05rem}
.center{text-align:center}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:30px}
.card{background:var(--panel);border:1px solid var(--c3);border-radius:14px;padding:28px;transition:.2s}
.card:hover{transform:translateY(-4px);border-color:var(--c1)}
.card h3{margin-bottom:10px;color:var(--c1)}
.card p{color:var(--dim)}
.ico{font-size:2rem;margin-bottom:14px}

.game{position:relative;text-align:center}
.shot{background:radial-gradient(circle,var(--c3),var(--bg));border-radius:10px;padding:30px;margin-bottom:16px}
.shot img{height:110px;opacity:.85}
.badge{position:absolute;top:14px;inset-inline-end:14px;background:var(--c1);border-radius:20px;padding:2px 12px;font-size:.8rem}

.contact-card{max-width:420px;margin:30px auto 0}
.contact-card .btn{margin-top:10px}

.foot{text-align:center;padding:40px 5%;border-top:1px solid var(--c3);color:var(--dim)}
.foot img{height:56px;margin-bottom:12px;opacity:.8}
.foot a{color:var(--c1)}

@media(max-width:760px){
	#burger{display:block}
	nav{display:none;position:absolute;top:100%;inset-inline:0;background:var(--panel);flex-direction:column;padding:20px;border-bottom:1px solid var(--c3)}
	nav.open{display:flex}
	.hero h1{font-size:1.7rem}
	.hero-logo{height:120px}
}