:root{
  --bg:      #111111;   /* tech grey */
  --primary: #0057b8;   /* navy blue */
  --accent:  #ffe600;   /* SzpontPC yellow */
  --text:    #ffffff;
  --font:    'Segoe UI', sans-serif;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
.container{
  width:90%;
  max-width:1000px;
  margin:auto;
}
.hero{
  text-align:center;
  padding:80px 20px;
  background: linear-gradient(135deg, var(--primary) 0%, #003366 100%);
}
.hero .logo{
  width:120px;
  margin-bottom:20px;
}
.hero h1{
  font-size:2.8em;
  color:var(--accent);
}
.hero p{
  font-size:1.3em;
  margin:10px 0 30px;
}
.cta{
  display:inline-block;
  background:var(--accent);
  color:var(--bg);
  padding:14px 28px;
  border-radius:4px;
  text-decoration:none;
  font-weight:bold;
  transition:.3s;
}
.cta:hover{
  background:#ffcc00;
}
section{
  padding:60px 0;
}
h2{
  font-size:2em;
  margin-bottom:20px;
  color:var(--accent);
}
ol,ul{
  margin-left:20px;
}
.form-section{
  background:#1a1a1a;
}
.features{
  background:#0d0d0d;
}
footer{
  background:#000;
  text-align:center;
  padding:30px 10px;
  font-size:0.9em;
}
.footer-flex{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
}
.footer-logo{
  width:40px;
}
a{
  color:var(--accent);
  text-decoration:none;
}
@media(max-width:600px){
  .hero h1{font-size:2.2em;}
  .cta{font-size:1em;}
}
/* ===== TOP BAR – SOCIAL ===== */
.top-bar{
  background:#000;
  text-align:right;
  padding:8px 20px;
  font-size:14px;
}
.top-text{
  margin-right:10px;
  color:#aaa;
}
.top-link{
  color:#ffe600;
  margin:0 6px;
  font-size:16px;
  transition:.3s;
}
.top-link:hover{
  color:#fff;
}

/* ===== FOOTER SOCIAL ===== */
.footer-flex{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.social-links{
  display:flex;
  gap:12px;
}
.social{
  color:var(--accent);
  font-size:20px;
  transition:.3s;
}
.social:hover{
  color:#fff;
}