:root{
  --bg:#07111e;
  --bg2:#0c2038;
  --panel:#0d1b2f;
  --panel2:#0f2846;
  --text:#f5f7fb;
  --muted:#b8c4d6;
  --line:rgba(122,180,255,.22);
  --blue:#23a7ff;
  --gold:#ffbf24;
  --gold2:#f59e0b;
  --danger:#ff6b6b;
  --ok:#22c55e;
  --shadow:0 18px 60px rgba(0,0,0,.35);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 80% 15%, rgba(35,167,255,.18), transparent 36%),
    radial-gradient(circle at 10% 0%, rgba(255,191,36,.12), transparent 30%),
    linear-gradient(145deg, #020711 0%, var(--bg) 40%, #05101d 100%);
  min-height:100vh;
}
a{color:var(--gold)}
.container{width:min(1120px, calc(100% - 32px)); margin:0 auto;}
.hero{
  padding:34px 0 26px;
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(7,17,30,.94), rgba(7,17,30,.58)),
             url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="900" height="420" viewBox="0 0 900 420"><g fill="none" stroke="%2323a7ff" stroke-opacity="0.16"><path d="M30 360h160l60-70h120l44-50h190"/><path d="M170 120h140l42 40h90l60 70h300"/><path d="M620 50v310M690 20v350M760 60v280"/></g><g fill="%23ffbf24" fill-opacity="0.12"><circle cx="780" cy="80" r="54"/><circle cx="620" cy="310" r="34"/></g></svg>') right center/auto 100% no-repeat;
  z-index:-1;
}
.brand{display:flex; align-items:center; gap:18px; margin-bottom:32px;}
.brand-symbol{
  width:76px;
  height:76px;
  flex:0 0 76px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:
    radial-gradient(circle at 25% 25%, rgba(35,167,255,.22), transparent 40%),
    linear-gradient(145deg, rgba(13,27,47,.82), rgba(6,15,27,.52));
  border:1px solid rgba(122,180,255,.18);
  box-shadow:0 0 34px rgba(35,167,255,.16), inset 0 1px 0 rgba(255,255,255,.06);
}
.brand-symbol svg{
  width:60px;
  height:60px;
  overflow:visible;
  display:block;
  filter:drop-shadow(0 0 14px rgba(35,167,255,.38));
}
.brand-copy{display:flex; flex-direction:column; gap:3px; min-width:0;}
.brand-title{
  font-size:36px;
  letter-spacing:4px;
  font-weight:950;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
}
.brand-title span{color:var(--gold)}
.brand-sub{
  font-size:15px;
  color:#d8e8ff;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center;}
h1{font-size:clamp(42px,7vw,82px); line-height:.92; margin:0 0 18px; letter-spacing:-2px; font-weight:950; text-transform:uppercase;}
h1 .gold{display:block; color:var(--gold);}
.lead{font-size:clamp(18px,2.3vw,25px); line-height:1.35; color:#fff; margin:0 0 24px; max-width:720px; font-weight:650;}
.hero-card{
  border:1px solid rgba(35,167,255,.32);
  background:linear-gradient(145deg, rgba(13,34,58,.86), rgba(7,17,30,.80));
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-card h2{margin:0 0 12px; font-size:25px; color:var(--gold); text-transform:uppercase; letter-spacing:.4px;}
.hero-card p{margin:0; color:var(--muted); line-height:1.55; font-size:16px;}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;}
.badge{padding:9px 12px; border:1px solid rgba(255,191,36,.35); border-radius:999px; background:rgba(255,191,36,.08); color:#fff; font-weight:800; font-size:13px;}
.main{padding:34px 0 70px;}
.notice{
  border:1px solid rgba(255,191,36,.42);
  background:linear-gradient(145deg, rgba(255,191,36,.11), rgba(35,167,255,.07));
  border-radius:var(--radius);
  padding:18px 20px;
  margin-bottom:22px;
  box-shadow:0 0 36px rgba(255,191,36,.08);
}
.notice strong{color:var(--gold)}
.form-shell{display:grid; grid-template-columns: 285px 1fr; gap:24px; align-items:start;}
.sidebar{position:sticky; top:18px; border:1px solid var(--line); border-radius:var(--radius); padding:18px; background:rgba(13,27,47,.76); box-shadow:var(--shadow);}
.sidebar h3{margin:0 0 12px; font-size:18px; color:var(--gold)}
.nav{display:grid; gap:8px;}
.nav a{display:block; text-decoration:none; color:var(--text); padding:9px 10px; border-radius:12px; border:1px solid transparent; font-weight:700; font-size:14px;}
.nav a:hover{background:rgba(35,167,255,.10); border-color:rgba(35,167,255,.28)}
.progress-hint{margin-top:16px; color:var(--muted); line-height:1.45; font-size:13px;}
form{display:grid; gap:18px;}
.section{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(145deg, rgba(13,27,47,.88), rgba(6,15,27,.92));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.section-header{padding:20px 22px; border-bottom:1px solid var(--line); background:rgba(35,167,255,.06);}
.section-kicker{color:var(--gold); font-size:13px; letter-spacing:1.2px; text-transform:uppercase; font-weight:950;}
.section h2{margin:4px 0 0; font-size:26px;}
.section-body{padding:22px; display:grid; gap:22px;}
.field{display:grid; gap:9px;}
label, .question{font-weight:800; font-size:16px; line-height:1.35;}
.help{font-size:13px; color:var(--muted); line-height:1.45;}
input[type="text"], input[type="email"], input[type="tel"], textarea, select{
  width:100%; border:1px solid rgba(184,196,214,.28); border-radius:14px; padding:12px 13px;
  background:rgba(2,7,17,.72); color:var(--text); font-size:16px; outline:none;
}
textarea{min-height:96px; resize:vertical;}
input:focus, textarea:focus, select:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(35,167,255,.18)}
.option-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
.option{display:flex; gap:10px; align-items:flex-start; padding:11px 12px; border:1px solid rgba(184,196,214,.20); border-radius:14px; background:rgba(255,255,255,.035); cursor:pointer;}
.option:hover{border-color:rgba(255,191,36,.45); background:rgba(255,191,36,.06)}
.option input{margin-top:3px; accent-color:var(--gold)}
.option span{line-height:1.35; color:#eef4ff}
.score{display:flex; flex-wrap:wrap; gap:9px;}
.score .option{min-width:74px; justify-content:center; align-items:center; font-weight:900;}
.matrix{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; font-size:14px;}
.matrix th,.matrix td{padding:12px; border-bottom:1px solid var(--line); text-align:center; vertical-align:middle;}
.matrix th:first-child,.matrix td:first-child{text-align:left; font-weight:800;}
.matrix tr:last-child td{border-bottom:none}
.matrix thead th{background:rgba(35,167,255,.08); color:#fff; font-size:13px;}
.matrix input{accent-color:var(--gold)}
.row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
.cta-panel{padding:24px; border:1px solid rgba(255,191,36,.45); border-radius:var(--radius); background:linear-gradient(145deg, rgba(255,191,36,.12), rgba(13,27,47,.88));}
.cta-panel h2{margin:0 0 10px; color:var(--gold); text-transform:uppercase;}
.consent{display:grid; gap:10px;}
.required{color:var(--gold);}
.honeypot{position:absolute; left:-10000px; opacity:0; width:1px; height:1px; overflow:hidden;}
.actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
button,.button{
  border:0; cursor:pointer; border-radius:16px; padding:14px 22px; font-weight:950; font-size:16px;
  color:#07111e; background:linear-gradient(135deg, var(--gold), var(--gold2));
  box-shadow:0 10px 30px rgba(255,191,36,.24);
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
}
button:hover,.button:hover{filter:brightness(1.06)}
.secondary{background:rgba(255,255,255,.08); color:var(--text); border:1px solid var(--line); box-shadow:none;}
.footer{padding:24px 0 38px; color:var(--muted); border-top:1px solid var(--line); font-size:13px;}
.success-card,.error-card{margin:60px auto; max-width:760px; border-radius:var(--radius); padding:34px; background:linear-gradient(145deg, rgba(13,27,47,.92), rgba(6,15,27,.96)); border:1px solid var(--line); box-shadow:var(--shadow)}
.success-card h1,.error-card h1{font-size:42px; line-height:1.05; margin-bottom:14px;}
.success-card h1{color:var(--gold)}
.error-card h1{color:var(--danger)}
.admin-table-wrap{overflow:auto; border:1px solid var(--line); border-radius:16px;}
.admin-table{width:100%; border-collapse:collapse; font-size:13px; min-width:980px;}
.admin-table th,.admin-table td{padding:10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;}
.admin-table th{background:rgba(35,167,255,.08); color:#fff; position:sticky; top:0;}
.admin-login{max-width:460px; margin:60px auto;}
.pill{display:inline-block; padding:5px 9px; border:1px solid var(--line); border-radius:999px; background:rgba(35,167,255,.07); color:#dbeafe; font-size:12px; font-weight:800;}
@media (max-width: 880px){
  .hero-grid,.form-shell,.row2{grid-template-columns:1fr}
  .sidebar{position:relative; top:0}
  .option-grid{grid-template-columns:1fr}
  .matrix{font-size:12px}
  .matrix th,.matrix td{padding:8px 6px}
}
@media (max-width: 560px){
  .container{width:min(100% - 20px,1120px)}
  .hero{padding-top:22px}
  .brand{gap:12px}
  .brand-symbol{width:62px; height:62px; flex-basis:62px; border-radius:16px;}
  .brand-symbol svg{width:50px; height:50px;}
  .brand-title{font-size:23px; letter-spacing:1.5px;}
  .brand-sub{font-size:11px; white-space:normal;}
  h1{font-size:42px; letter-spacing:-1px}
  .section-body,.section-header{padding:16px}
  .matrix{display:block; overflow:auto; white-space:nowrap;}
}



/* v7 UX javítás: a mátrix rádiópontok helyett nagy, teljes felületű választógombok látszanak */
.matrix.matrix-v7{
  border-collapse:separate;
  border-spacing:0;
}
.matrix.matrix-v7 th,
.matrix.matrix-v7 td{
  vertical-align:middle;
}
.matrix.matrix-v7 tbody tr{
  transition:background .16s ease;
}
.matrix.matrix-v7 tbody tr:hover{
  background:rgba(35,167,255,.045);
}
.matrix.matrix-v7 tbody tr.has-selection td:first-child{
  color:var(--gold);
}
.matrix.matrix-v7 td.matrix-choice-cell{
  padding:7px 8px;
  min-width:132px;
  cursor:pointer;
}
.matrix-choice{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:50px;
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(184,196,214,.22);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  color:#eef4ff;
  font-weight:900;
  line-height:1.15;
  cursor:pointer;
  user-select:none;
  transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .10s ease;
}
.matrix-choice:hover{
  border-color:rgba(255,191,36,.65);
  background:rgba(255,191,36,.12);
  box-shadow:0 0 0 3px rgba(255,191,36,.08);
}
.matrix-choice:focus{
  outline:none;
  border-color:rgba(35,167,255,.85);
  box-shadow:0 0 0 4px rgba(35,167,255,.18);
}
.matrix-choice:active{
  transform:scale(.985);
}
.matrix-choice.is-selected{
  color:#07111e;
  border-color:rgba(255,191,36,.95);
  background:linear-gradient(135deg, var(--gold), var(--gold2));
  box-shadow:0 0 0 3px rgba(255,191,36,.18), 0 12px 28px rgba(255,191,36,.18);
}
.matrix-choice input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}
.choice-dot{
  width:20px;
  height:20px;
  border-radius:999px;
  border:2px solid rgba(238,244,255,.88);
  background:rgba(2,7,17,.55);
  box-shadow:inset 0 0 0 4px rgba(2,7,17,.85);
  flex:0 0 auto;
}
.matrix-choice.is-selected .choice-dot{
  border-color:#07111e;
  background:#07111e;
  box-shadow:inset 0 0 0 5px var(--gold), 0 0 0 1px rgba(7,17,30,.35);
}
.choice-text{
  display:inline-block;
  white-space:normal;
}
@media (max-width: 880px){
  .matrix.matrix-v7 td.matrix-choice-cell{min-width:118px; padding:6px;}
  .matrix-choice{min-height:46px; padding:9px 10px; font-size:12px;}
  .choice-dot{width:18px;height:18px;}
}