:root{
--bg:#0b1220;
--card:#0f1a2e;
--text:#e9f1ff;
--muted:#b7c6e6;
--accent:#ffd56b;
--accent2:#49d7ff;
--shadow: 0 12px 40px rgba(0,0,0,.35);
}


*{box-sizing:border-box;}
body{
margin:0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: radial-gradient(1200px 600px at 20% 0%, rgba(73,215,255,.25), transparent 60%),
radial-gradient(900px 600px at 80% 10%, rgba(255,213,107,.18), transparent 60%),
var(--bg);
color:var(--text);
}


.wrap{max-width:1100px;margin:0 auto;padding:0 16px;}


.topbar{
position:sticky;top:0;z-index:50;
background: rgba(11,18,32,.75);
backdrop-filter: blur(10px);
border-bottom:1px solid rgba(255,255,255,.08);
}


.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;}


.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:700;}
.brand img{width:34px;height:34px;border-radius:10px;box-shadow: var(--shadow);}


.nav{display:flex;align-items:center;gap:14px;}
.nav a{color:var(--muted);text-decoration:none;font-weight:600;}
.nav a:hover{color:var(--text);}


.btn{
display:inline-block;
padding:10px 14px;
border-radius:14px;
background: linear-gradient(135deg, var(--accent), var(--accent2));
color:#08111f !important;
box-shadow: var(--shadow);
}


.burger{display:none;background:transparent;border:0;cursor:pointer;}
.burger span{display:block;width:26px;height:2px;background:var(--text);margin:6px 0;opacity:.9;}


.hero{padding:54px 0 28px;}
.hero-grid{display:grid;grid-template-columns: 1.2fr .8fr;gap:22px;align-items:center;}


.hero h1{font-size:42px;line-height:1.05;margin:0 0 12px;}
.hero p{color:var(--muted);font-size:16px;line-height:1.5;margin:0 0 18px;}


.hero-card{
background: rgba(15,26,46,.85);
border:1px solid rgba(255,255,255,.10);
border-radius:22px;
overflow:hidden;
box-shadow: var(--shadow);
}
.hero-card img{width:100%;height:260px;object-fit:cover;display:block;}
.hero-card .pad{padding:16px;}


.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.card{
background: rgba(15,26,46,.85);
border:1px solid rgba(255,255,255,.10);
border-radius:20px;
padding:16px;
box-shadow: var(--shadow);
}
.card h3{margin:0 0 6px;font-size:16px;}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.45;}


.section{padding:26px 0;}
.section h2{margin:0 0 14px;font-size:26px;}


.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.gallery img{width:100%;height:160px;object-fit:cover;border-radius:18px;border:1px solid rgba(255,255,255,.08);}


.footer{padding:34px 0;border-top:1px solid rgba(255,255,255,.10);margin-top:26px;}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:18px;}
.footer a{color:var(--muted);text-decoration:none;}
.footer a:hover{color:var(--text);}
.footer ul{padding-left:18px;margin:0;}
.footer-bottom{padding-top:12px;opacity:.8;}


.form{
display:grid;gap:10px;
}
.input{
width:100%;
padding:12px 14px;
border-radius:16px;
border:1px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.18);
color:var(--text);
}


@media (max-width: 860px){
.hero-grid{grid-template-columns:1fr;}
.grid3{grid-template-columns:1fr;}
.gallery{grid-template-columns:1fr;}
.footer-grid{grid-template-columns:1fr;}


.burger{display:block;}
.nav{display:none;position:absolute;right:16px;top:62px;flex-direction:column;background:rgba(11,18,32,.95);border:1px solid rgba(255,255,255,.10);padding:12px;border-radius:18px;min-width:220px;}
.nav.open{display:flex;}
}