:root{
  --bronze:#80552B;
  --bronze-soft:rgba(128,85,43,0.22);
  --bg-start:#020804;
  --bg-end:#0B2E19;

  --surface-0:#0B0F0C;
  --surface-1:#111714;
  --surface-2:#141D19;

  --text:rgba(255,255,255,0.92);
  --text-2:rgba(255,255,255,0.70);
  --text-3:rgba(255,255,255,0.56);

  --border:rgba(255,255,255,0.10);
  --border-2:rgba(255,255,255,0.16);

  --shadow:0 18px 50px rgba(0,0,0,0.55);
  --radius:20px;
  --radius-2:16px;

  --max:1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background: linear-gradient(
    to bottom,
    #0a4f33 0%,
    #073a26 35%,
    #05271a 65%,
    #020e09 100%
  ) !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a{color:inherit}
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 20px;
}

.section{
  padding:72px 0;
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(5,10,7,0.75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

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

.brand{
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.brand-mark{
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:13px;
}

.brand-tagline{
  font-size:12px;
  color:var(--text-3);
}

.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav a{
  text-decoration:none;
  color:var(--text-2);
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.nav a:hover{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  transform: translateY(-1px);
}

.hero{
  padding-top:88px;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:26px;
  align-items:center;
}

.eyebrow{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:12px;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background: var(--bronze);
  box-shadow: 0 0 18px rgba(128,85,43,0.35);
}

.hero-title{
  margin:0 0 12px;
  font-size:48px;
  line-height:1.1;
  letter-spacing:-0.02em;
}

.hero-lead{
  margin:0;
  color:var(--text-2);
  font-size:16px;
  line-height:1.65;
  max-width: 580px;
}

.hero-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.trust-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.trust-pill{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color:var(--text-2);
  font-size:13px;
}

.hero-panel{
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.hero-cover{
  display:block;
  width:100%;
  height:auto;
}

.section-head{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
}

.section-title{
  margin:0;
  font-size:22px;
  letter-spacing:0.02em;
}

.section-sub{
  margin:0;
  color:var(--text-3);
  line-height:1.6;
  max-width:820px;
}

.packages-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
  margin-top:18px;
}

.card{
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  box-shadow: var(--shadow);
  padding:20px;
  display:flex;
  flex-direction:column;
  min-height: 380px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.16);
}

.card-featured{
  border-color: rgba(128,85,43,0.45);
  box-shadow: var(--shadow);
  position:relative;
}

.card-featured::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent);
  opacity:0.9;
}

.card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.card-title{
  margin:0;
  font-size:16px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.badge{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  font-size:12px;
  color:var(--text-2);
  white-space:nowrap;
}

.badge-featured{
  border-color: rgba(128,85,43,0.55);
  background: rgba(128,85,43,0.18);
  color: rgba(255,255,255,0.90);
}

.card-kicker{
  margin:10px 0 14px;
  color:var(--text-2);
  font-weight:600;
  line-height:1.4;
}

.list{
  margin:0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--text-2);
  line-height:1.4;
}

.card-bottom{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.06);
}

.price{
  font-weight:800;
  font-size:22px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.92);
  text-decoration:none;
  font-weight:800;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  cursor:pointer;
}

.btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.20);
}

.btn-primary{
  border-color: rgba(128,85,43,0.70);
  background: rgba(128,85,43,0.22);
}

.btn-primary:hover{
  background: rgba(128,85,43,0.30);
  border-color: rgba(128,85,43,0.85);
}

.btn-ghost{
  background: rgba(255,255,255,0.03);
}

.btn-full{
  width:100%;
}

.table-block{
  margin-top:26px;
}

.table-title{
  margin:0 0 12px;
  font-size:16px;
  color:var(--text-2);
  letter-spacing:0.02em;
}

.table-wrap{
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: rgba(255,255,255,0.02);
  overflow:auto;
  box-shadow: var(--shadow);
}

.compare{
  width:100%;
  border-collapse: collapse;
  min-width: 860px;
}

.compare th,
.compare td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  text-align:center;
  color:var(--text-2);
}

.compare th:first-child,
.compare td:first-child{
  text-align:left;
  color:var(--text);
}

.compare thead th{
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.80);
  background: rgba(0,0,0,0.20);
}

.col-featured{
  background: rgba(128,85,43,0.08);
}

.compare tfoot td{
  font-weight:800;
  color: var(--text);
  background: rgba(0,0,0,0.18);
}

.refs-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top:18px;
}

.ref-tile{
  height:180px;
  border-radius: var(--radius);
  border:1px dashed rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.02);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-3);
  text-align:center;
  padding:16px;
}

.form-card{
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  box-shadow: var(--shadow);
  padding:20px;
  max-width: 820px;
}

.form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  color:var(--text-2);
  font-size:14px;
}

.field input,
.field select,
.field textarea{
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  color: var(--text);
  outline:none;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: rgba(128,85,43,0.65);
  box-shadow: 0 0 0 3px rgba(128,85,43,0.15);
}

.form-note{
  margin:0;
  font-size:13px;
  color:var(--text-3);
  line-height:1.6;
}

.footer{
  border-top:1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.15);
  padding:18px 0;
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.footer-brand{
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:12px;
}

.footer-muted{
  font-size:12px;
  color:var(--text-3);
}

.footer-right a{
  text-decoration:none;
  color:var(--text-2);
}

@media (max-width: 1020px){
  .hero-grid{
    grid-template-columns: 1fr;
  }
  .packages-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .refs-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px){
  .section{
    padding:56px 0;
  }
  .hero-title{
    font-size:36px;
  }
  .packages-grid{
    grid-template-columns: 1fr;
  }
  .refs-grid{
    grid-template-columns: 1fr;
  }
  .form-row{
    grid-template-columns: 1fr;
  }
}
.hero-subline{
  margin-top:12px;
  max-width:580px;
  font-size:15px;
  line-height:1.6;
  color:var(--text-3);
}
.refs-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top:18px;
}

.refs-grid img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: rgba(255,255,255,0.02);
}

@media (max-width: 900px){
  .refs-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px){
  .refs-grid{
    grid-template-columns: 1fr;
  }
}

.brand{
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  flex-direction:row; /* biztosan egy sor */
}

.brand-logo{
  width:48px;
  height:48px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  padding:6px;
  object-fit:contain;
  flex-shrink:0;
}

.brand-text{
  display:flex;
  align-items:baseline;
  gap:10px;
  white-space:nowrap;
}

.brand-mark{
  font-size:16px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  line-height:1;
}

.brand-tagline{
  font-size:12px;
  color:var(--text-3);
  line-height:1;
}

@media (max-width: 640px){
  .brand-logo{
    width:40px;
    height:40px;
  }
  .brand-tagline{
    display:none;
  }
}

.hero-cover-section{
  padding-top: 36px;
  padding-bottom: 12px;
}