/* Contact (Kérj egy gyors konzultációt!): option A (chosen 6 Oct 2026, DECISIONS.md): steps as a timeline, one form card
   with floating labels on a soft band. Made from the review CSS by docs/make_section_css.py. */
#main .cx{--ink:#0B0F17;--sub:#5B6478;--line:#E2E6EE;--blue:#1061FF;--blue-d:#0A4FE0;--blue-50:#F1F5FF;--field:#F6F7FA;
  display:flex;flex-direction:row;justify-content:center;padding:120px 24px;background:#fff;position:relative;overflow:hidden}
#main .cx *{box-sizing:border-box}
#main .cx p, #main .cx h2, #main .cx ol{margin:0;padding:0}
#main .cx ol{list-style:none}
#main .cx-in{position:relative;width:min(1140px,100%);display:grid;grid-template-columns:minmax(0,420px) minmax(0,600px);justify-content:space-between;gap:64px;align-items:start}
#main .cs-left{display:flex;flex-direction:column;gap:44px;padding-top:12px}
#main .cs-left h2{font:600 46px/1.05 "Clash Grotesk",sans-serif;letter-spacing:-.02em;color:var(--ink)}
#main .cs-next{display:flex;flex-direction:column;gap:22px}
#main .cs-eyebrow{font:600 12.5px/1 "Geist",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
#main .cs-steps{position:relative;display:flex;flex-direction:column;gap:22px}
#main .cs-steps::before{content:"";position:absolute;left:15px;top:16px;bottom:16px;width:1.5px;background:linear-gradient(var(--blue),rgba(16,97,255,.15))}
#main .cs-steps li{position:relative;display:flex;align-items:flex-start;gap:18px}
#main .cs-steps .n{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--blue);
  font:600 14px/1 "Geist",sans-serif;box-shadow:inset 0 0 0 1.5px var(--blue)}
#main .cs-steps li:first-child .n{background:var(--blue);color:#fff}
#main .cs-steps p{padding-top:5px;font:400 16px/1.5 "Geist",sans-serif;color:var(--sub)}
#main .cs-mail{display:flex;flex-direction:column;gap:12px;padding-top:28px;border-top:1px solid var(--line)}
#main .cs-mail p{font:400 15px/1.5 "Geist",sans-serif;color:var(--sub)}
#main .cs-mail a{display:inline-flex;align-items:center;gap:12px;width:max-content;color:var(--ink);text-decoration:none;font:600 22px/1.2 "Geist",sans-serif;
  transition:color .2s}
#main .cs-mail a svg{width:22px;height:22px;color:var(--blue);flex:0 0 auto}
#main .cs-mail a:hover{color:var(--blue)}
#main .cf-card{display:flex;flex-direction:column;gap:22px;padding:44px;border-radius:28px;background:#fff;
  box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(15,22,38,.25)}
#main .cf-lead{font:500 18px/1.45 "Geist",sans-serif;color:var(--ink);margin-bottom:6px}
#main .cx form.contact{width:100%;display:flex;flex-direction:column;gap:14px}
#main .cx form.contact label{display:block;gap:0}
#main .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#main .fl{position:relative}
#main .fl input, #main .fl textarea{width:100%;min-height:0;height:58px;line-height:1.3;white-space:normal;padding:24px 16px 8px;border:0;border-radius:14px;background:var(--field);color:var(--ink);
  font:500 16px/1.3 "Geist",sans-serif;outline:none;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none}
#main .fl.fl-ta label{white-space:normal;line-height:1.35}
#main .fl textarea{height:132px;min-height:132px;resize:vertical;padding-top:28px;display:block}
#main .fl label{position:absolute;left:16px;top:19px;right:12px;font:400 16px/1.3 "Geist",sans-serif;color:#6A7183;pointer-events:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:left top;transition:transform .18s ease,color .18s ease}
#main .fl input:focus, #main .fl textarea:focus{background:#fff;box-shadow:inset 0 0 0 1.5px var(--blue),0 0 0 4px rgba(16,97,255,.12)}
#main .fl input:focus+label, #main .fl input:not(:placeholder-shown)+label, #main .fl textarea:focus+label, #main .fl textarea:not(:placeholder-shown)+label{transform:translateY(-11px) scale(.78);color:var(--blue)}
#main .fl input:not(:placeholder-shown):not(:focus)+label, #main .fl textarea:not(:placeholder-shown):not(:focus)+label{color:#6A7183}
#main .cf-btn{margin-top:6px;height:56px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:14px;cursor:pointer;
  background:var(--blue);color:#fff;font:600 16px/1 "Geist",sans-serif;box-shadow:0 14px 30px -14px rgba(16,97,255,.8);transition:background .2s,transform .1s}
#main .cf-btn:hover{background:var(--blue-d)}
#main .cf-btn:active{transform:scale(.99)}
#main .cf-btn svg{width:19px;height:19px;transition:transform .25s}
#main .cf-btn:hover svg{transform:translateX(3px)}
#main .cf-btn:focus-visible, #main .cs-mail a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
#main .cf-trust{display:flex;flex-direction:column;gap:8px;margin-top:4px}
#main .cf-safe{display:flex;align-items:center;gap:8px;font:500 13.5px/1.3 "Geist",sans-serif;color:#2F7A3A}
#main .cf-safe svg{width:18px;height:18px;flex:0 0 auto}
#main .cf-consent{font:400 12.5px/1.5 "Geist",sans-serif;color:#6D7589}
#main .cf-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
#main .cf-consent a:hover{color:var(--blue)}
#main .cx-a{background:linear-gradient(180deg,#F5F7FB 0%,#EEF2F9 100%)}
@media (max-width:1199.98px){
  #main .cx{padding:90px 32px}
  #main .cx-in{grid-template-columns:1fr;gap:48px;max-width:640px}
  #main .cs-left{padding-top:0}
}
@media (max-width:809.98px){
  #main .cx{padding:64px 16px}
  #main .cs-left{gap:34px}
  #main .cs-left h2{font-size:34px}
  #main .cs-steps p{font-size:15px}
  #main .cs-mail a{font-size:19px}
  #main .cf-card{padding:26px 20px;border-radius:22px}
  #main .frow{grid-template-columns:1fr}
}