:root{
  --bg:#F3F6FF;
  --surface:#FFFFFF;
  --surface-alt:#EEF0FC;
  --ink:#0A0F24;
  --ink-soft:#5B6585;
  --ink-faint:#8B94B0;
  --text:#1B2340;
  --accent:#3347D6;
  --accent-dark:#2735B0;
  --accent-soft:#EEF0FC;
  --accent-2:#3347D6;
  --accent-warn:#D98A2B;
  --ok:#15803D;
  --line:#E4E7F0;
  --radius:12px;
  --shadow: 0 1px 2px rgba(11,18,32,0.05), 0 12px 32px rgba(11,18,32,0.08);
  --shadow-lg: 0 24px 50px rgba(51,71,214,0.15);
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* rg_references plugin: a plugin CSS-valtozoi a site tokenjeire mutatnak */
  --rg-accent: var(--accent);
  --rg-accent-dark: var(--accent-dark);
  --rg-accent-soft: var(--accent-soft);
  --rg-ink: var(--ink);
  --rg-text: var(--text);
  --rg-muted: var(--ink-soft);
  --rg-line: var(--line);
  --rg-tint: var(--bg);
  --rg-ok: var(--ok);
  --rg-radius: var(--radius);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-0.015em;
}
p{margin:0 0 1em;color:var(--ink-soft);}
.container{max-width:1160px; margin:0 auto; padding:0 28px;}
section{padding:104px 0; position:relative;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent-2);
  display:flex; align-items:center; gap:.6em;
  margin-bottom:1.1em;
}
.eyebrow::before{content:""; width:18px; height:1px; background:var(--accent-2); display:inline-block;}

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-body);
  font-weight:600; font-size:.95rem;
  padding:14px 26px;
  border-radius:8px;
  border:1px solid transparent;
  cursor:pointer; text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-dark));
  color:#fff;
  box-shadow:0 8px 20px rgba(33,72,199,0.28);
}
.btn-primary:hover{box-shadow:0 12px 28px rgba(33,72,199,0.4); transform:translateY(-1px);}
.btn-primary .arrow{transition:transform .2s ease;}
.btn-primary:hover .arrow{transform:translateX(3px);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.btn-block{width:100%; justify-content:center;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(245,247,250,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0;}
.logo{font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:-0.01em; display:flex; align-items:center; gap:2px; text-decoration:none; color:var(--ink);}
.logo span{color:var(--accent-2);}
.logo img{height:36px; width:auto; display:block;}
.nav-links{display:flex; gap:36px; list-style:none; margin:0; padding:0; font-size:.94rem; font-weight:500;}
.nav-links a{text-decoration:none; color:var(--ink-soft); position:relative; padding-bottom:4px; transition:color .15s ease;}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--accent-2); transition:right .2s ease;}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{right:0;}
.nav-links li.active a{color:var(--accent); font-weight:600;}
.nav-links li.active a::after{right:0; background:var(--accent);}
.nav-cta{display:flex; align-items:center; gap:18px;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0;}

/* ---------- Hero ---------- */
.hero{padding:92px 0 108px; overflow:hidden;}
.hero-ghost{
  position:absolute;
  top:-40px; left:50%; transform:translateX(-38%);
  font-family:var(--font-mono);
  font-size:min(38vw, 480px);
  font-weight:500;
  color:var(--ink);
  opacity:.035;
  line-height:1;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; position:relative; z-index:1;}
.hero-title{font-size:clamp(1.95rem, 3.6vw, 3.05rem); color:var(--ink);}
.accent-word{
  background:linear-gradient(100deg, var(--accent) 10%, var(--accent-2) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{font-size:1.08rem; max-width:46ch; margin-bottom:2em; color:var(--ink-soft);}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:2.6em;}
.hero-stats{display:flex; gap:40px; font-family:var(--font-mono); flex-wrap:wrap;}
.hero-stats div strong{display:block; font-size:1.4rem; color:var(--ink); font-weight:500;}
.hero-stats div span{font-size:.78rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em;}

.terminal-wrap{position:relative;}
.live-badge{
  position:absolute; top:-16px; right:20px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:7px 14px 7px 10px;
  font-family:var(--font-mono); font-size:.74rem; color:var(--ink-soft);
  box-shadow:var(--shadow);
}
.live-dot{width:7px; height:7px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 0 rgba(0,184,169,0.6); animation:pulse 1.8s infinite;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(0,184,169,0.5);}
  70%{box-shadow:0 0 0 8px rgba(0,184,169,0);}
  100%{box-shadow:0 0 0 0 rgba(0,184,169,0);}
}

.terminal{
  background:linear-gradient(165deg, var(--accent-dark), #0B1830 65%);
  border-radius:14px;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  font-family:var(--font-mono);
  font-size:.86rem;
  color:#D7E2F0;
  position:relative;
}
.terminal::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
}
.terminal-bar{display:flex; align-items:center; gap:8px; padding:13px 16px; background:rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.08);}
.terminal-bar .dot{width:10px; height:10px; border-radius:50%;}
.terminal-bar .dot:nth-child(1){background:#E5675E;}
.terminal-bar .dot:nth-child(2){background:#E5B75E;}
.terminal-bar .dot:nth-child(3){background:#5EC290;}
.terminal-bar .title{margin-left:8px; color:#9FB0C6; font-size:.78rem;}
.content-area-terminal-title{margin-left:8px; color:#9FB0C6; font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.content-area-terminal-title .frame{margin:0 !important; padding:0 !important;}
.content-area-terminal-title .frame-header{margin:0 !important;}
.content-area-terminal-title .element-header{
  font-family:var(--font-mono) !important; font-weight:400 !important; letter-spacing:normal !important;
  color:#9FB0C6 !important; font-size:.78rem !important; margin:0 !important;
}
.terminal-body{padding:22px 20px 26px; min-height:230px;}
.terminal-line{
  display:flex; justify-content:space-between; gap:12px; padding:6px 0;
  border-bottom:1px dashed rgba(255,255,255,0.08);
  opacity:0; transform:translateY(4px);
  animation:tline .4s ease forwards;
}
.terminal-line:last-of-type{border-bottom:none;}
.terminal-line .label{color:#B9C8DC;}
.terminal-line .val{display:flex; align-items:center; gap:8px; color:#DCE6F2;}
.status-dot{width:7px; height:7px; border-radius:50%; background:var(--accent-2); flex-shrink:0;}
.status-dot.warn{background:var(--accent-warn);}
.terminal-prompt{margin-top:14px; color:#7EE0C7;}
.caret{display:inline-block; width:7px; height:14px; background:#7EE0C7; margin-left:3px; animation:blink 1s step-end infinite; vertical-align:-2px;}
@keyframes tline{to{opacity:1; transform:translateY(0);}}
@keyframes blink{50%{opacity:0;}}

/* ---------- Section headers ---------- */
.section-head{max-width:640px; margin-bottom:56px; position:relative; z-index:1;}
.section-head h2{font-size:clamp(1.36rem,2.2vw,1.87rem);}

/* ---------- Services ---------- */
.services-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; position:relative; z-index:1;}
.service-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 28px;
  position:relative;
  overflow:hidden;
  transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.service-card::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%), rgba(33,72,199,0.08), transparent 60%);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.service-card:hover{box-shadow:var(--shadow); border-color:transparent; transform:translateY(-3px);}
.service-card:hover::before{opacity:1;}
.service-icon{width:44px; height:44px; border-radius:8px; background:var(--surface-alt); display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--accent); position:relative; z-index:1;}
.service-card h3{font-size:1.15rem; margin-bottom:.5em; position:relative; z-index:1;}
.service-card p{font-size:.94rem; margin-bottom:1.3em; position:relative; z-index:1;}
.service-list{list-style:none; margin:0; padding:0; font-size:.88rem; position:relative; z-index:1;}
.service-list li{display:flex; gap:10px; align-items:flex-start; padding:6px 0; color:var(--ink-soft);}
.service-list li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent-2); margin-top:8px; flex-shrink:0;}

/* ---------- Process ---------- */
.process{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
.process-step{padding:0 24px 0 0; border-right:1px solid var(--line); margin-right:24px;}
.process-step:last-child{border-right:none; margin-right:0; padding-right:0;}
.process-num{font-family:var(--font-mono); font-size:.82rem; color:var(--accent-2); margin-bottom:14px;}
.process-step h3{font-size:1.02rem; margin-bottom:.4em;}
.process-step p{font-size:.9rem; margin-bottom:0;}

/* ---------- Why ---------- */
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.why-heading{max-width:14ch; font-size:clamp(1.36rem,2.2vw,1.79rem);}
.why-list{list-style:none; margin:0; padding:0;}
.why-list li{display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line);}
.why-list li:first-child{padding-top:0;}
.why-icon{width:34px; height:34px; flex-shrink:0; border-radius:7px; background:var(--surface-alt); display:flex; align-items:center; justify-content:center; color:var(--accent-2);}
.why-list h3{font-size:1rem; margin-bottom:.25em;}
.why-list p{font-size:.92rem; margin-bottom:0;}

.why-panel{background:var(--accent-dark); color:#fff; border-radius:var(--radius); padding:38px; box-shadow:var(--shadow-lg);}
.why-panel .eyebrow{color:#9FD9CE;}
.why-panel .eyebrow::before{background:#9FD9CE;}
.why-panel h3{color:#fff; font-size:1.1rem;}
.why-panel-quote{font-family:var(--font-display); font-size:1.15rem; line-height:1.4; margin:1.2em 0; color:#fff;}
.why-panel-text{font-size:.9rem; color:#DCE6F2;}
.why-panel-foot{display:flex; align-items:center; gap:12px; font-size:.85rem; color:#BFD3EA; padding-top:18px; margin-top:6px; border-top:1px solid rgba(255,255,255,0.18);}

/* Munkamódszer panel - tartalmi elemből (colPos 36) jövő cím + idézet + szöveg */
.content-area-method .frame-header{margin-bottom:0 !important;}
.content-area-method .element-header{color:#fff; font-size:1.1rem; font-family:var(--font-display); margin-top:1em; margin-bottom:.6em;}
.content-area-method p{margin:0 0 1em; color:#DCE6F2; font-size:.9rem;}

/* *** FIGYELEM - VÉGLEGESÍTETT ÉRTÉKEK, a felhasználó saját maga
   hangolta be és hagyta jóvá élesben. NE ÍRD FELÜL egy jövőbeli
   frissítésnél/újragenerálásnál, csak kifejezett új kérésre. *** */
.content-area-method p:first-of-type {
  font-family: var(--font-display);
  font-size: 0.95rem !important;
  line-height: 1.4;
  color: #DCE6F2;
  font-weight: 500;
}
#c10 .frame-inner p:last-child {
    color: #DCE6F2 !important;
}

/* ---------- Contact ---------- */
.contact{background:var(--surface); border-top:1px solid var(--line);}
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px;}
.contact-list{list-style:none; margin:28px 0 0; padding:0;}
.contact-list li{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--line);}
.contact-list li:first-child{border-top:none;}
.contact-list .ci-icon{width:36px; height:36px; flex-shrink:0; border-radius:8px; background:var(--surface-alt); display:flex; align-items:center; justify-content:center; color:var(--accent);}
.contact-list strong{display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); font-family:var(--font-mono); font-weight:500;}
.contact-list span{font-size:.98rem; color:var(--ink);}

.form-card{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:36px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{margin-bottom:18px;}
.field label{display:block; font-size:.82rem; font-weight:600; margin-bottom:7px; color:var(--ink);}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--font-body); font-size:.95rem;
  padding:11px 13px; border:1px solid var(--line); border-radius:7px;
  background:#fff; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(33,72,199,0.14);
}
.field textarea{resize:vertical; min-height:110px;}

/* Kapcsolati űrlap - valódi TYPO3 Form Framework (EXT:form) kimenete.
   Elemtípus alapján célzunk (input/select/textarea/button), nem
   feltételezett Bootstrap-osztálynéven, hogy biztosan illeszkedjen,
   akármilyen belső wrapper-osztályt is használ az EXT:form sablonja. */
.content-area-form label{display:block; font-size:.82rem; font-weight:600; margin-bottom:7px; color:var(--ink);}
.content-area-form input[type="text"], .content-area-form input[type="email"],
.content-area-form input[type="tel"], .content-area-form select, .content-area-form textarea{
  width:100%; font-family:var(--font-body); font-size:.95rem;
  padding:11px 13px; border:1px solid var(--line); border-radius:7px;
  background:#fff; color:var(--ink); margin-bottom:18px; display:block;
}
.content-area-form input:focus, .content-area-form select:focus, .content-area-form textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(33,72,199,0.14);
}
.content-area-form textarea{resize:vertical; min-height:110px;}
.content-area-form, .content-area-form .form-container,
.content-area-form .frame-container, .content-area-form .frame-inner,
.content-area-form .frame-group-container, .content-area-form .frame-group-inner{
  background:var(--bg) !important;
}
.content-area-form .form-group{margin:0 !important; padding:0 !important;}
.content-area-form .row{margin-left:-10px !important; margin-right:-10px !important;}
.content-area-form .row [class*="col-"]{padding-left:10px !important; padding-right:10px !important;}
.content-area-form .form-navigation,
.content-area-form .btn-toolbar,
.content-area-form .btn-group{
  display:block !important; width:100% !important; margin:0 !important; padding:0 !important;
}
.content-area-form button,
.content-area-form input[type="submit"]{
  width:100% !important; justify-content:center; display:flex !important; align-items:center; gap:.5em;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:14px 26px; border-radius:8px; border:none; cursor:pointer; text-decoration:none;
  background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:#fff;
  box-shadow:0 8px 20px rgba(33,72,199,0.28); margin-top:8px;
}
.content-area-form button:hover, .content-area-form input[type="submit"]:hover{box-shadow:0 12px 28px rgba(33,72,199,0.4);}
.content-area-form .form-actions{margin-top:8px; display:block !important; width:100%;}
.content-area-form .required, .content-area-form .required-indicator, .content-area-form abbr.required-indicator{display:none;}
.form-note{font-size:.8rem; color:var(--ink-faint); margin-top:14px; margin-bottom:0;}
.form-success{
  display:none; align-items:center; gap:10px;
  background:rgba(0,184,169,0.1); border:1px solid rgba(0,184,169,0.3); color:#0A7C71;
  padding:14px 16px; border-radius:8px; font-size:.92rem; margin-bottom:18px;
}
.form-success.show{display:flex;}

/* ---------- Footer ---------- */
.site-footer{padding:44px 0; border-top:1px solid var(--line);}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.footer-row p{margin:0; font-size:.85rem; color:var(--ink-faint);}
.footer-links{display:flex; gap:24px; list-style:none; margin:0; padding:0; font-size:.85rem;}
.footer-links a{text-decoration:none; color:var(--ink-faint); transition:color .15s ease;}
.footer-links a:hover{color:var(--accent);}

/* ==========================================================
   BACKEND TARTALMI ELEMEK MÁRKA-STÍLUSA
   Ezek a szabályok a Bootstrap Package saját, Backend-ből
   szerkesztett tartalmi elemeinek (Text, Card Group, Timeline,
   Icon Group, Bullets) valódi CSS-osztályait célozzák meg, hogy
   bármit ad hozzá a szerkesztő, automatikusan a mi arculatunkban
   jelenjen meg - nem kell kézzel osztályt írni hozzá.
   ========================================================== */

/* Általános tipográfia minden tartalmi területen belül */
.content-area h1, .content-area h2, .content-area h3,
.content-area h4, .content-area h5, .content-area h6{
  font-family:var(--font-display); color:var(--ink); letter-spacing:-0.015em;
}
.content-area h1{font-size:1.8rem;}
.content-area h2{font-size:1.5rem;}
.content-area h3{font-size:1.25rem;}
.content-area h4{font-size:1.1rem;}
.content-area h5{font-size:1rem;}
.content-area h6{font-size:.9rem;}
.content-area p{color:var(--ink-soft);}
.content-area ul, .content-area .list{list-style:none; margin:0; padding:0;}
.content-area ul li, .content-area .list li{
  display:flex; gap:10px; align-items:flex-start; padding:6px 0; color:var(--ink-soft); font-size:.95rem;
}
.content-area ul li::before, .content-area .list li::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--accent-2); margin-top:8px; flex-shrink:0;
}

/* Hero tartalmi terület - a tartalmi elem SAJÁT címe (frame-header) kapja a H1-stílust */
.content-area-hero .element-header{font-size:clamp(1.95rem, 3.6vw, 3.05rem); max-width:14ch; margin-bottom:.5em; font-family:var(--font-display); color:var(--ink); font-weight:600; line-height:1.12; letter-spacing:-0.015em;}
.content-area-hero p{font-size:1.08rem; max-width:46ch; margin-bottom:1.3em;}
.content-area-hero .btn{margin-top:.4em; margin-right:12px;}

/* Kapcsolat bevezető szöveg - kisebb cím */
.content-area-contact h1, .content-area-contact h2{font-size:clamp(1.36rem,2.2vw,1.79rem); margin-bottom:.4em;}
.content-area-contact p{margin-bottom:1.5em;}

/* Szolgáltatások - Bootstrap Package "Card Group" elemtípus */
.content-area-services .card-group-element,
.content-area-services .card-group-element.card-group-element-columns-3{
  display:grid !important; grid-template-columns:repeat(3, 1fr) !important; gap:24px !important; margin-top:16px;
}
.content-area-services .card-group-element-item{
  width:auto !important; max-width:none !important; min-width:0 !important; flex:none !important; padding:0 !important; margin:0 !important;
}
.content-area-services .card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px; transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
  display:flex; flex-direction:column; height:100%; width:100% !important; max-width:none !important;
}
.content-area-services .card:hover{box-shadow:var(--shadow); border-color:transparent; transform:translateY(-3px);}
.content-area-services .card-img-top{width:44px; height:44px; margin-bottom:20px; border-radius:8px; background:var(--surface-alt); overflow:hidden; display:flex; align-items:center; justify-content:center;}
.content-area-services .card-img-top picture{display:flex !important; align-items:center; justify-content:center; width:24px !important; height:24px !important;}
.content-area-services .card-img-top img{
  width:24px !important; height:24px !important; max-width:24px !important; max-height:24px !important;
  object-fit:contain !important; border-radius:0 !important; margin-bottom:0 !important; display:block !important;
}
.content-area-services .card-title{font-family:var(--font-display); font-size:.98rem; color:var(--ink); margin-bottom:.4em;}
.content-area-services .card-subtitle{font-size:.85rem; color:var(--accent-2); margin-bottom:.6em;}
.content-area-services .card-body p{font-size:.94rem; margin-bottom:0;}
.content-area-services .card-footer{background:none; border:none; padding:16px 0 0; margin-top:auto;}

/* Folyamat - Bootstrap Package "Timeline" elemtípus */
.content-area-process .timeline{
  display:grid !important; grid-template-columns:repeat(4, 1fr) !important; gap:24px !important; margin-top:16px;
  padding-left:0 !important; position:static !important;
  counter-reset:rg-step;
}
.content-area-process .timeline::before, .content-area-process .timeline::after{display:none !important; content:none !important;}
.content-area-process .timeline-item{
  width:auto !important; max-width:none !important; min-width:0 !important; flex:none !important; padding:0 !important; margin:0 !important;
  border:none !important; background:none !important; box-shadow:none !important; position:static !important;
}
.content-area-process .timeline-item::before, .content-area-process .timeline-item::after{display:none !important; content:none !important;}
.content-area-process .timeline-item-marker{display:none !important;}
.content-area-process .timeline-item-inner{
  padding-right:24px; padding-left:0 !important; border:none !important; border-right:1px solid var(--line) !important;
  width:100% !important; max-width:none !important; min-width:0 !important; background:none !important; box-shadow:none !important;
  margin:0 !important; overflow:visible !important;
  counter-increment:rg-step;
}
.content-area-process .timeline-item-inner::after{display:none !important; content:none !important;}
.content-area-process .timeline-item-inner::before{
  display:block !important; content:counter(rg-step, decimal-leading-zero) !important;
  font-family:var(--font-mono); font-size:.82rem; color:var(--accent-2); margin-bottom:14px;
  position:static !important; width:auto !important; height:auto !important; background:none !important; border:none !important;
}
.content-area-process .timeline-item:last-child .timeline-item-inner{border-right:none !important;}
.content-area-process .timeline-item-date{display:none !important;}
.content-area-process .timeline-item-header-headline{font-size:.87rem; margin-bottom:.4em;}
.content-area-process .timeline-item-text{font-size:.9rem; color:var(--ink-soft);}

/* Miért érdemes ÉS Kapcsolat - Bootstrap Package "Icon Group" / "Bullets" elemtípus */
.content-area-why .icongroup, .content-area-contact .icongroup{display:flex !important; flex-direction:column !important; margin:0 !important; margin-top:16px !important;}
.content-area-why .icongroup-item, .content-area-contact .icongroup-item{display:flex !important; width:auto !important; max-width:none !important; margin:0 !important; gap:16px; padding:20px 0; border-bottom:1px solid var(--line);}
.content-area-contact .icongroup-item{gap:14px !important; padding:14px 0 !important;}
.content-area-why .icongroup-item-icon, .content-area-contact .icongroup-item-icon{margin:0 !important;}
.content-area-contact .icongroup-item-text-header,
.content-area-contact .icongroup-item-text-subheader{margin:0 !important;}
.content-area-contact .icongroup-item-text-header{margin-bottom:.2em !important;}
.content-area-why .icongroup-item:first-child, .content-area-contact .icongroup-item:first-child{padding-top:0;}
.content-area-why .icongroup-item-icon, .content-area-contact .icongroup-item-icon{
  width:34px; height:34px; flex-shrink:0; border-radius:7px; background:var(--surface-alt);
  display:flex; align-items:center; justify-content:center; color:var(--accent-2);
}
.content-area-why .icongroup-item-icon img, .content-area-contact .icongroup-item-icon img{width:18px; height:18px; object-fit:contain;}
.content-area-contact .icongroup-item-icon{width:26px !important; height:26px !important;}
.content-area-contact .icongroup-item-icon img{width:14px !important; height:14px !important;}
.content-area-why .icongroup-item-text-header, .content-area-contact .icongroup-item-text-header{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint);
  font-family:var(--font-mono); font-weight:500; margin-bottom:.25em;
}
.content-area-contact .icongroup-item-text-header{font-size:.78rem;}
.content-area-why .icongroup-item-text-header{font-size:.85rem; text-transform:none; letter-spacing:normal; font-family:var(--font-display); color:var(--ink); font-weight:600;}
.content-area-why .icongroup-item-text-subheader, .content-area-contact .icongroup-item-text-subheader{font-size:.92rem; color:var(--ink-soft); margin-bottom:0;}
.content-area-contact .icongroup-item-text-subheader{font-size:.98rem; color:var(--ink); font-weight:400;}

/* ---------- Reveal on scroll ---------- */
.js-reveal .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.js-reveal .reveal.in{opacity:1; transform:translateY(0);}

/* ---------- Responsive ---------- */
html, body{overflow-x:hidden; max-width:100%;}
img{max-width:100%; height:auto;}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr !important; gap:40px;}
  .hero-ghost{font-size:60vw;}
  .services-grid{grid-template-columns:1fr !important;}
  .content-area-services .card-group-element{grid-template-columns:1fr !important;}
  .content-area-process .timeline{grid-template-columns:1fr 1fr !important; row-gap:32px;}
  .content-area-process .timeline-item-inner{border-right:none !important; padding-right:0 !important;}
  .content-area-process .timeline-item-inner::before{margin-bottom:8px;}
  .process-grid{grid-template-columns:1fr 1fr !important; row-gap:32px;}
  .process-step{border-right:none !important; margin-right:0 !important; padding-right:0 !important;}
  .why-grid{grid-template-columns:1fr !important;}
  .contact-grid{grid-template-columns:1fr !important;}
  .form-row{grid-template-columns:1fr !important;}
  .nav-links, .nav-cta .btn-ghost{display:none;}
  .nav-toggle{display:block;}
}
@media (max-width:600px){
  section{padding:56px 0;}
  .hero{padding:48px 0 56px;}
  .container{padding:0 20px;}
  .content-area-services .card-group-element{gap:16px !important;}
  .content-area-process .timeline{grid-template-columns:1fr !important; gap:24px;}
  .btn{padding:12px 20px; font-size:.9rem;}
  .contact-list li{padding:12px 0;}
  .hero-stats{gap:20px 24px;}
  .hero-stats > div{flex:1 1 auto; min-width:120px;}
  .services-grid, .process-grid{grid-template-columns:1fr !important;}
}
@media (max-width:400px){
  .hero-cta{flex-direction:column; align-items:stretch;}
  .hero-cta .btn{justify-content:center;}
  .hero-stats{flex-direction:column; gap:16px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  html{scroll-behavior:auto;}
}

/* ==========================================================
   FRAME-SPACE TÉRKÖZ-SKÁLA (Bootstrap Package "Space before/after")

   *** FIGYELEM - VÉGLEGESÍTETT ÉRTÉKEK ***
   Ezeket az értékeket a felhasználó saját maga hangolta be és
   hagyta jóvá élesben. NE ÍRD FELÜL ezt a blokkot egy jövőbeli
   csomag-frissítésnél / újragenerálásnál automatikusan az
   "arányos" vagy "alapértelmezett" számokra - ha módosítás
   kell, csak a felhasználó kifejezett, új kérésére nyúlj hozzá.
   ========================================================== */
:root{
  --frame-outer-spacing-before: 1.5rem;
  --frame-outer-spacing-after: 1.5rem;
  --frame-outer-spacing-variant-none: 0rem;
  --frame-outer-spacing-variant-extra-small: 0.24rem;
  --frame-outer-spacing-variant-small: 1.12rem;
  --frame-outer-spacing-variant-medium: 2rem;
  --frame-outer-spacing-variant-large: 2.88rem;
  --frame-outer-spacing-variant-extra-large: 3.76rem;

  --frame-spacing: 1rem;
  --frame-spacing-small: 0.16rem;
  --frame-spacing-xs: 0.32rem;
  --frame-spacing-sm: 0.48rem;
  --frame-spacing-md: 0.64rem;
  --frame-spacing-lg: 0.80rem;
  --frame-spacing-xl: 1.0rem;
  --frame-spacing-small-xs: 0.5rem;
  --frame-spacing-small-sm: 0.6rem;
  --frame-spacing-small-md: 0.65rem;
  --frame-spacing-small-lg: 0.7rem;
  --frame-spacing-small-xl: 0.75rem;
}

/* ==========================================================
   BELSŐ OLDAL SABLON (RG Solutions — Belső oldal Backend Layout)
   ========================================================== */
.inner-page-header{padding:56px 0 40px; border-bottom:1px solid var(--line);}
.inner-back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:.82rem; color:var(--accent-2);
  text-decoration:none; margin-bottom:20px;
}
.inner-back-link:hover{text-decoration:underline;}
.inner-title{font-family:var(--font-display); font-size:clamp(1.9rem,3.2vw,2.6rem); color:var(--ink); margin:0; letter-spacing:-0.015em;}
.inner-page-body{padding:56px 0 96px;}
.inner-page-content p{color:var(--ink-soft); line-height:1.7; margin-bottom:1.2em;}
.inner-page-content img{max-width:100%; height:auto; border-radius:8px; margin:1.2em 0;}
.inner-page-content a{color:var(--accent); text-decoration:underline;}
.inner-page-content ul, .inner-page-content ol{margin:0 0 1.2em; padding-left:1.4em; color:var(--ink-soft); line-height:1.7;}

@media (max-width:600px){
  .inner-page-header{padding:40px 0 28px;}
  .inner-page-body{padding:40px 0 64px;}
}

/* ==========================================================
   SF_REGISTER (regisztrációs form) - illesztés a site designhoz
   ========================================================== */
.tx_evoweb_sfregister{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:36px;
}
.tx_evoweb_sfregister .form-row{display:flex; flex-wrap:wrap; gap:18px; margin:0 0 4px;}
.tx_evoweb_sfregister .form-row > div{flex:1 1 280px; padding:0 !important; margin:0 !important;}
.tx_evoweb_sfregister label{
  display:block; font-size:.82rem; font-weight:600; margin-bottom:7px; color:var(--ink);
  font-family:var(--font-body);
}
.tx_evoweb_sfregister label .required{color:var(--accent-2); margin-left:2px;}
.tx_evoweb_sfregister .form-control{
  width:100%; font-family:var(--font-body); font-size:.95rem;
  padding:11px 13px; border:1px solid var(--line); border-radius:7px;
  background:#fff; color:var(--ink); box-sizing:border-box;
}
.tx_evoweb_sfregister .form-control:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(33,72,199,0.14);
}
.tx_evoweb_sfregister .mb-3{margin-bottom:22px !important;}
.tx_evoweb_sfregister input[type="checkbox"]{width:18px; height:18px; accent-color:var(--accent); margin:0;}

/* Összegző hibalista a tetején - csak akkor látszik, ha tényleg van hiba */
.tx_evoweb_sfregister .formerrors{display:none;}
.tx_evoweb_sfregister .formerrors:has(.error){
  display:block; background:#FDECEC; border:1px solid #F3B7B7; border-radius:8px;
  padding:14px 18px; margin-bottom:24px;
}
.tx_evoweb_sfregister .formerrors .error{
  color:#B3261E; font-size:.9rem; font-weight:600; padding:4px 0;
  display:flex; align-items:center; gap:8px;
}
.tx_evoweb_sfregister .formerrors .error::before{content:"⚠"; flex-shrink:0;}

/* Mezőnkénti hibaüzenet-szöveg ELREJTVE, hogy ne tolja lejjebb a mezőt és
   ne csússzanak el egymáshoz képest a sorban lévő mezők - a piros keret/
   háttér önmagában jelzi a hibát, a pontos szöveg a fenti összegzésben van. */
.tx_evoweb_sfregister .form-row div.error.errorMessage.errorField{
  display:none;
}
.tx_evoweb_sfregister .form-control.f3-form-error{
  border-color:#E8817C !important; background:#FFF8F8;
}

/* Jelszó-erősség mérő */
.tx_evoweb_sfregister meter{width:100%; margin-top:10px; height:6px; border-radius:3px;}

/* Checkbox sor */
.tx_evoweb_sfregister .custom-control{display:flex; align-items:center; gap:10px;}
.tx_evoweb_sfregister .custom-control-label{margin:0; font-size:.9rem; color:var(--ink); font-weight:400;}

/* Beküldés gomb */
.tx_evoweb_sfregister .submit{display:flex; justify-content:flex-end; margin-top:4px;}
.tx_evoweb_sfregister .submit .btn.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:14px 30px; border-radius:8px; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:#fff;
  box-shadow:0 8px 20px rgba(33,72,199,0.28);
}
.tx_evoweb_sfregister .submit .btn.btn-primary:hover{box-shadow:0 12px 28px rgba(33,72,199,0.4);}

.tx_evoweb_sfregister .mandatory{font-size:.8rem; color:var(--ink-faint); margin-top:20px;}

@media (max-width:600px){
  .tx_evoweb_sfregister{padding:24px;}
  .tx_evoweb_sfregister .submit{justify-content:stretch;}
  .tx_evoweb_sfregister .submit .btn.btn-primary{width:100%;}
}

/* ==========================================================
   FELOGIN (bejelentkezés) - illesztés a site designhoz
   ========================================================== */
.frame-type-felogin_login{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:36px; max-width:420px;
}
.frame-type-felogin_login h3{
  font-family:var(--font-display); font-size:1.3rem; color:var(--ink); margin:0 0 .4em; font-weight:600;
}
.frame-type-felogin_login > p{color:var(--ink-soft); font-size:.92rem; margin-bottom:24px;}
.frame-type-felogin_login fieldset{border:none; padding:0; margin:0;}
.frame-type-felogin_login legend{
  font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--accent-2); padding:0; margin-bottom:18px; width:auto; border:none;
}
.frame-type-felogin_login fieldset > div{margin-bottom:18px;}
.frame-type-felogin_login label{
  display:block; font-size:.82rem; font-weight:600; color:var(--ink);
}
.frame-type-felogin_login input[type="text"],
.frame-type-felogin_login input[type="password"]{
  display:block; width:100%; margin-top:7px; box-sizing:border-box;
  font-family:var(--font-body); font-size:.95rem; padding:11px 13px;
  border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink);
}
.frame-type-felogin_login input[type="text"]:focus,
.frame-type-felogin_login input[type="password"]:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(33,72,199,0.14);
}
.frame-type-felogin_login input[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:13px 26px; border-radius:8px; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:#fff;
  box-shadow:0 8px 20px rgba(33,72,199,0.28); margin-top:4px;
}
.frame-type-felogin_login input[type="submit"]:hover{box-shadow:0 12px 28px rgba(33,72,199,0.4);}
.frame-type-felogin_login .felogin-hidden{display:none;}

@media (max-width:600px){
  .frame-type-felogin_login{padding:24px; max-width:100%;}
}


/* ==========================================================
   ARCULAT-FRISSÍTÉS v0.2.0 — világos, kék téma, rendszerbetű

   A fenti, VÉGLEGESÍTETT blokkokat (frame-space skála,
   .content-area-method p:first-of-type, #c10 .frame-inner p:last-child)
   ez a rész NEM módosítja. A színek, betűk és sugarak a :root
   tokenekből jönnek; itt csak a szerkezeti/megjelenési eltérések vannak.

   SP-09: ahol a fenti desktop szabály !important-ot használ, az
   alábbi felülírás és a hozzá tartozó mobil fallback is !important.
   ========================================================== */

body{background:#fff; color:var(--ink);}
h1,h2,h3{font-weight:700; letter-spacing:-0.025em;}
.content-area-hero .element-header{font-weight:740;}

/* ---------- Fejléc ---------- */
.site-header{background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid var(--line);}
.logo span{color:var(--accent);}
.nav-links a::after{background:var(--accent);}

/* ---------- Gombok: lapos, egy akcentszín ---------- */
.btn{border-radius:10px; padding:13px 24px; font-weight:620;}
.btn-primary{background:var(--accent); box-shadow:none;}
.btn-primary:hover{background:var(--accent-dark); box-shadow:none; transform:none;}
.btn-ghost{background:#fff; border-color:#D5D9E8; color:var(--ink);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}

.content-area-form button,
.content-area-form input[type="submit"]{background:var(--accent); box-shadow:none; border-radius:10px;}
.content-area-form button:hover,
.content-area-form input[type="submit"]:hover{background:var(--accent-dark); box-shadow:none;}
.tx_evoweb_sfregister .submit .btn.btn-primary,
.frame-type-felogin_login input[type="submit"]{background:var(--accent); box-shadow:none; border-radius:10px;}
.tx_evoweb_sfregister .submit .btn.btn-primary:hover,
.frame-type-felogin_login input[type="submit"]:hover{background:var(--accent-dark); box-shadow:none;}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(760px 400px at 92% -10%, rgba(51,71,214,0.13), transparent 60%),
    radial-gradient(520px 320px at -5% 105%, rgba(34,150,230,0.10), transparent 60%),
    linear-gradient(180deg, #F1F5FF, #FFFFFF);
}
.accent-word{
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  -webkit-text-fill-color:currentColor; color:var(--accent);
}
.hero-stats div strong{font-weight:600;}

/* Élő "terminál" kártya: világos változat */
.terminal{background:#fff; border:1px solid #DBE1F3; box-shadow:var(--shadow-lg); color:var(--text);}
.terminal::before{display:none;}
.terminal-bar{background:#F4F6FD; border-bottom:1px solid var(--line);}
.terminal-bar .title,
.content-area-terminal-title{color:#7A84A3;}
.content-area-terminal-title .element-header{color:#7A84A3 !important;}
.terminal-line{border-bottom:1px dashed var(--line);}
.terminal-line .label{color:var(--ink-soft);}
.terminal-line .val{color:var(--ink);}
.status-dot{background:var(--ok);}
.status-dot.warn{background:var(--accent-warn);}
.terminal-prompt{color:var(--accent);}
.caret{background:var(--accent);}
.live-dot{background:var(--ok); animation:rg-pulse 1.8s infinite;}
@keyframes rg-pulse{
  0%{box-shadow:0 0 0 0 rgba(21,128,61,0.45);}
  70%{box-shadow:0 0 0 8px rgba(21,128,61,0);}
  100%{box-shadow:0 0 0 0 rgba(21,128,61,0);}
}

/* ---------- Információs sáv (Hero alatt) ---------- */
.info-strip{background:#fff; border-bottom:1px solid var(--line);}
.info-strip ul{
  list-style:none; margin:0; padding:20px 0;
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  font-size:.92rem; color:var(--ink-soft);
}
.info-strip li{display:flex; align-items:center; gap:10px; margin:0;}
.info-strip svg{
  width:20px; height:20px; flex:none; color:var(--accent);
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- Szekció-ritmus ---------- */
.section-tint{background:var(--bg);}

/* ---------- Szolgáltatások: 4 kártya, 2x2-es rács ---------- */
.content-area-services .card-group-element,
.content-area-services .card-group-element.card-group-element-columns-3{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
.content-area-services .card{box-shadow:none;}
.content-area-services .card:hover{box-shadow:var(--shadow);}

/* ---------- Folyamat: világoskék sáv, fehér lépés-kártyákkal ---------- */
.process{background:#E9EFFF; border-top:1px solid #D5DDF4; border-bottom:1px solid #D5DDF4;}
.content-area-process .timeline .timeline-item .timeline-item-inner,
.content-area-process .timeline .timeline-item:last-child .timeline-item-inner{
  background:#fff !important;
  border:1px solid #D5DDF4 !important;
  border-radius:var(--radius) !important;
  padding:26px !important;
}

/* ---------- Miért érdemes: a Munkamódszer panel sötét marad ----------
   (a véglegesített #DCE6F2 szövegszínek sötét háttérre vannak hangolva) */
.why-panel{background:#18246B; box-shadow:none;}
.why-panel .eyebrow{color:#AEBCFF;}
.why-panel .eyebrow::before{background:#AEBCFF;}

/* ---------- Kapcsolat ---------- */
.contact{background:var(--bg);}
.form-card{background:#fff;}
.content-area-form,
.content-area-form .form-container,
.content-area-form .frame-container,
.content-area-form .frame-inner,
.content-area-form .frame-group-container,
.content-area-form .frame-group-inner{
  background:#fff !important;
}
.form-success{background:rgba(21,128,61,0.10); border-color:rgba(21,128,61,0.30); color:var(--ok);}

/* ---------- Lábléc ---------- */
.site-footer{background:#EEF2FB;}

/* ---------- Mobil "Hívj" gomb ---------- */
.fab-call{display:none;}

/* ---------- Plugin-illesztés (rg_references) ----------
   A .content-area globális lista- és címstílusai (pöttyös lista, flex li)
   nem érvényesek a plugin saját listáira. */
.content-area .rg-chips li,
.content-area .rg-meta li{display:block; gap:0; padding:0.28em 0.75em; font-size:.78rem;}
.content-area .rg-meta li{padding:0.22em 0.65em; font-size:.72rem;}
.content-area .rg-chips li::before,
.content-area .rg-meta li::before{content:none; display:none;}
.content-area .rg-facts dd{font-size:1rem;}
.content-area .rg-ref-card__title{font-size:1.15rem;}
.content-area .rg-prod-card__title{font-size:1.1rem;}
.content-area .rg-ref-card__teaser,
.content-area .rg-prod-card__teaser{color:var(--ink-soft);}
.content-area-work .rg-ref,
.content-area-software .rg-prod{margin-top:8px;}

/* ---------- Reszponzív (SP-09) ---------- */
@media (max-width:900px){
  .info-strip ul{flex-direction:column; gap:12px;}
}
@media (max-width:600px){
  .content-area-services .card-group-element,
  .content-area-services .card-group-element.card-group-element-columns-3{
    grid-template-columns:minmax(0, 1fr) !important;
  }
  .content-area-process .timeline .timeline-item .timeline-item-inner,
  .content-area-process .timeline .timeline-item:last-child .timeline-item-inner{
    padding:22px 20px !important;
  }
  .fab-call{
    display:inline-flex; align-items:center; gap:8px;
    position:fixed; right:16px; bottom:16px; z-index:60;
    padding:13px 18px; border-radius:12px;
    background:var(--accent); color:#fff;
    font-weight:700; text-decoration:none;
    box-shadow:0 8px 20px rgba(11,18,38,0.3);
  }
  .fab-call:hover{background:var(--accent-dark); color:#fff;}
  .fab-call svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .site-footer{padding-bottom:84px;}
}


/* ==========================================================
   v0.2.1 — IGAZÍTÁS A DESIGN-TERVHEZ

   Eltérések javítása az élő oldal és a design-terv összevetése
   után: sans eyebrow, ghost-felirat nélküli hero, 3 oszlopos
   statisztika-sor, középre igazított szekciófejek, nagyobb
   címsorok, szűkebb kártya-belső. A véglegesített (SP-08)
   blokkokat ez a rész nem érinti.
   ========================================================== */

/* ---------- Eyebrow: félkövér rendszerbetű, nagybetű nélkül ---------- */
.eyebrow{
  font-family:var(--font);
  font-size:.92rem; font-weight:650;
  letter-spacing:0; text-transform:none;
  color:var(--accent);
}
.eyebrow::before{display:none;}
.hero .eyebrow::before{
  display:inline-block; content:"";
  width:9px; height:9px; border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 4px rgba(21,128,61,0.16);
}
.why-panel .eyebrow{color:#AEBCFF;}

/* ---------- Hero ---------- */
.hero{padding:88px 0 96px;}
.hero-ghost{display:none;}
.hero-grid{grid-template-columns:1.1fr .9fr; gap:56px;}
.hero-title,
.content-area-hero .element-header{
  font-size:clamp(2.2rem, 1.4rem + 3.4vw, 3.9rem);
  line-height:1.08; font-weight:780; letter-spacing:-0.03em;
}
.content-area-hero p,
.hero-sub{font-size:1.15rem; line-height:1.65; color:var(--ink-soft);}
.hero-cta{margin-bottom:2.2em;}
.hero-cta .btn{min-height:52px;}

.hero-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:20px 28px;
  font-family:var(--font);
  padding-top:24px; border-top:1px solid var(--line);
}
.hero-stats div strong{font-size:1.2rem; font-weight:700; letter-spacing:-0.01em;}
.hero-stats div span{
  font-size:.88rem; color:var(--ink-soft);
  text-transform:none; letter-spacing:0;
}

/* ---------- Fejléc ---------- */
.nav-links{font-size:.96rem; font-weight:600;}
.nav-links a{color:var(--text);}
.nav-links a:hover,
.nav-links li.active a{color:var(--accent);}

/* ---------- Szekciófejek: középre igazítva, nagyobb címsor ---------- */
#szolgaltatasok .eyebrow,
#munkaim .eyebrow,
#szoftverek .eyebrow,
#folyamat .eyebrow{justify-content:center;}

.content-area-services .frame-header,
.content-area-work .frame-header,
.content-area-software .frame-header,
.content-area-process .frame-header{
  text-align:center !important;
  max-width:720px; margin-left:auto; margin-right:auto;
}
.content-area-services .frame-header .element-header,
.content-area-work .frame-header .element-header,
.content-area-software .frame-header .element-header,
.content-area-process .frame-header .element-header{
  font-size:clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight:780; line-height:1.15;
}
.content-area-services .frame-header .element-subheader,
.content-area-work .frame-header .element-subheader,
.content-area-software .frame-header .element-subheader,
.content-area-process .frame-header .element-subheader{
  font-size:1.05rem; color:var(--ink-soft); font-weight:400;
}
.content-area-services .frame-header,
.content-area-work .frame-header,
.content-area-software .frame-header,
.content-area-process .frame-header{margin-bottom:40px;}

/* ---------- Szolgáltatás-kártyák: kisebb belső tér ---------- */
.content-area-services .card{padding:28px;}
.content-area-services .card .card-body{padding:16px 0 0;}
.content-area-services .card .card-header,
.content-area-services .card .card-footer{padding-left:0; padding-right:0;}
.content-area-services .card h3,
.content-area-services .card .card-title{font-size:1.15rem; font-weight:700;}
.content-area-services .card .card-text,
.content-area-services .card p{font-size:.96rem; color:var(--ink-soft);}

/* ---------- Gombok ---------- */
.btn{font-weight:650;}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:40px;}
}
@media (max-width:600px){
  .hero{padding:48px 0 56px;}
  .hero-stats{grid-template-columns:1fr; gap:14px;}
  .content-area-services .frame-header,
  .content-area-work .frame-header,
  .content-area-software .frame-header,
  .content-area-process .frame-header{margin-bottom:28px;}
}

/* ---------- v0.2.2: hero adatsor egy sorban széles képernyőn ---------- */
@media (min-width:1200px){
  .hero-stats{grid-template-columns:repeat(3, auto); justify-content:space-between;}
  .hero-stats div strong{white-space:nowrap;}
}

/* ==========================================================
   v0.3.0 — KAPCSOLAT SZEKCIÓ A DESIGN-TERV SZERINT
   Középre igazított cím, bal oldalt az űrlap (választógomb-
   "pirulákkal"), jobb oldalt az Elérhetőségek kártya.
   A pirulák :has()-szal készülnek: az input az oldalról elrejtett,
   a kijelölt állapot a .form-check burkolón látszik.
   ========================================================== */
.contact-head{text-align:center; margin-bottom:40px;}
.contact-head .eyebrow{justify-content:center;}
.contact-head h2{font-size:clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); font-weight:780; margin:0;}

.contact-grid{grid-template-columns:1.25fr .75fr; gap:28px; align-items:start;}
.form-card{padding:32px; box-shadow:none;}

.contact-info{
  background:#EAEFFF; border:1px solid #D5DDF4; border-radius:var(--radius);
  padding:32px;
}
.contact-badge{
  display:flex; align-items:center; gap:10px;
  background:rgba(21,128,61,0.10); border:1px solid rgba(21,128,61,0.28);
  color:var(--ok); border-radius:10px; padding:10px 14px;
  font-size:.92rem; margin-bottom:22px;
}
.contact-badge .live-dot{width:9px; height:9px; border-radius:50%; flex:none;}
.content-area-contact h1,
.content-area-contact h2{font-size:1.15rem; font-weight:700; margin-bottom:.8em;}

/* Választógomb-pirulák — a burkoló HTML-szerkezettől független szabályok:
   A) <input> + <label> testvérek, B) <label> tartalmazza az <input>-ot. */
.content-area-form div:has(> input[type="radio"]),
.content-area-form div:has(> label > input[type="radio"]){
  display:inline-block; position:relative; vertical-align:top;
  margin:0 8px 10px 0 !important; padding:0 !important;
}
.content-area-form input[type="radio"]{
  position:absolute; opacity:0; width:1px; height:1px;
  margin:0; padding:0; pointer-events:none;
}
.content-area-form input[type="radio"] + label,
.content-area-form label:has(> input[type="radio"]){
  display:inline-block; margin:0; padding:.55em 1.1em;
  background:#fff; border:1px solid #D5D9E8; border-radius:999px;
  font-size:.92rem; font-weight:600; color:var(--ink); cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.content-area-form input[type="radio"] + label:hover,
.content-area-form label:has(> input[type="radio"]):hover{border-color:var(--accent);}
.content-area-form input[type="radio"]:checked + label,
.content-area-form label:has(> input[type="radio"]:checked){
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent-dark);
}
.content-area-form input[type="radio"]:focus-visible + label,
.content-area-form label:has(> input[type="radio"]:focus-visible){
  box-shadow:0 0 0 3px rgba(51,71,214,0.25);
}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr !important;}
}
@media (max-width:600px){
  .form-card{padding:22px;}
  .contact-info{padding:24px;}
}

/* ---------- v0.3.3: fejléc — a menü és a gombok ne törjenek új sorba ---------- */
.nav{flex-wrap:nowrap; gap:20px;}
.logo{flex:none;}
.nav-links{gap:22px; font-size:.92rem; white-space:nowrap;}
.nav-cta{flex:none; gap:10px;}
.nav-cta .btn{padding:10px 16px; white-space:nowrap;}
@media (max-width:1199px){
  .nav-cta .btn-ghost{display:none;}
}
@media (max-width:1100px){
  .nav-links{gap:16px; font-size:.88rem;}
}

/* ---------- v0.4.0: kétszintű menü (legördülő almenü) ---------- */
.nav-links li{position:relative;}
.nav-links li.has-sub > a::before{content:"";}
.nav-links .nav-sub{
  display:none; position:absolute; top:100%; left:-16px; z-index:50;
  min-width:200px; margin:0; padding:8px; list-style:none;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 12px 32px rgba(11,18,32,.12);
  flex-direction:column; gap:2px; white-space:nowrap;
}
.nav-links li.has-sub:hover > .nav-sub,
.nav-links li.has-sub:focus-within > .nav-sub{display:flex;}
.nav-links .nav-sub a{display:block; padding:9px 12px; border-radius:6px; font-weight:500;}
.nav-links .nav-sub a::after{display:none;}
.nav-links .nav-sub a:hover{background:var(--surface-alt); color:var(--accent);}
.nav-links .nav-sub li.active a{color:var(--accent); font-weight:600;}
@media (max-width:900px){
  /* Mobilon az almenü mindig kinyitva, behúzva jelenik meg */
  .nav-links .nav-sub{
    display:flex !important; position:static !important; min-width:0 !important;
    border:none !important; box-shadow:none !important; background:transparent !important;
    padding:4px 0 0 16px !important;
  }
  .nav-links .nav-sub a{padding:6px 0 !important;}
}

/* ---------- Hero főcím: 2 sor, 2 szín (v1.1.5) ----------
   A H1 szövegét a TypoScript (setup.typoscript, lib.dynamicContent replacement)
   bontja két span-ra: utolsó szó = 2. sor, kiemelő színnel. */
.content-area-hero .element-header{max-width:none;}
.content-area-hero .element-header .hero-line{display:block;}
.content-area-hero .element-header .hero-line--a{color:var(--ink);}
.content-area-hero .element-header .hero-line--b{
  background:linear-gradient(100deg, var(--accent) 10%, var(--accent-2) 90%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding-bottom:.1em;
}

/* ---------- Hero márkanév az eyebrow felett (v1.1.9) ---------- */
.hero-brand{font-family:var(--font-display, inherit); font-size:1.7rem; font-weight:800; letter-spacing:-0.02em; color:var(--ink); margin-bottom:1.1rem; line-height:1;}
.hero-brand span{color:var(--accent);}
@media (max-width:640px){.hero-brand{font-size:1.4rem; margin-bottom:.9rem;}}

/* ---------- Hero márkanév a felirat felett (v1.1.9) ---------- */
.hero-brand{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem);
  letter-spacing:-0.02em; color:var(--ink); margin-bottom:14px; line-height:1.1;
}

/* ---------- Nyelvválasztó (v1.2.0) ---------- */
.lang-switch{list-style:none; margin:0 4px 0 0; padding:0; display:flex; align-items:center; gap:2px; font-size:.82rem; font-weight:700; letter-spacing:.04em;}
.lang-switch li{margin:0;}
.lang-switch a{display:block; padding:6px 9px; border-radius:8px; color:var(--ink-soft); text-decoration:none;}
.lang-switch a:hover{color:var(--accent); background:var(--accent-soft);}
.lang-switch li.active a{color:var(--accent); background:var(--accent-soft);}
@media (max-width:640px){ .lang-switch{margin-right:0;} .lang-switch a{padding:5px 7px;} }