/* ==========================================================
   VESKOR website — shared behaviour styles
   (page layout lives in each page's own <style>; this file
   only styles what assets/site.js adds: the Log in popup and
   the form status messages)
   ========================================================== */
.atm-open{overflow:hidden}
.atm{position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:16px;
  background:rgba(10,26,44,.55); backdrop-filter:blur(2px)}
.atm.on{display:flex}
.atm-card{position:relative; width:100%; max-width:400px; background:#fff; border-radius:12px; padding:30px 28px 24px;
  box-shadow:0 24px 60px rgba(10,26,44,.35); font-family:var(--sans, Inter, system-ui, sans-serif); color:var(--ink,#0F2438)}
.atm-x{position:absolute; top:10px; right:12px; width:34px; height:34px; border:0; background:none; font-size:22px; line-height:1;
  color:var(--mut,#64778C); cursor:pointer; border-radius:6px}
.atm-x:hover{background:var(--canvas,#EEF2F6)}
.atm-logo{display:flex; align-items:center; gap:9px; font-weight:700; font-size:16px}
.atm-logo{letter-spacing:.06em}
.atm-logo i{display:grid; place-items:center; width:26px; height:26px; color:var(--navy,#14365A); font-style:normal}
.atm-logo i svg{width:24px; height:24px}
.atm h2{font-size:22px; letter-spacing:-.4px; margin:18px 0 4px}
.atm .atm-sub{font-size:14px; color:var(--mut,#64778C); margin:0 0 16px}
.atm label{display:block; font-size:13px; font-weight:600; margin:12px 0 5px; color:var(--ink-2,#33475D)}
.atm input[type=text], .atm input[type=password]{width:100%; box-sizing:border-box; font:inherit; font-size:15px; padding:10px 12px;
  border:1px solid var(--line-2,#CBD5E1); border-radius:7px; background:#fff; color:inherit}
.atm input:focus{outline:2px solid var(--s3,#4A90D9); outline-offset:1px; border-color:transparent}
.atm-btn{width:100%; margin-top:18px; font:inherit; font-weight:700; font-size:15px; padding:12px; border:0; border-radius:8px;
  background:var(--navy,#14365A); color:#fff; cursor:pointer}
.atm-btn:hover{filter:brightness(1.12)}
.atm-btn[disabled]{opacity:.65; cursor:wait}
.atm-links{display:flex; justify-content:space-between; gap:10px; margin-top:14px; font-size:13px}
.atm-links a, .atm-foot a{color:var(--link,#1E5FA8); font-weight:600; text-decoration:none}
.atm-links a:hover, .atm-foot a:hover{text-decoration:underline}
.atm-foot{margin-top:18px; padding-top:14px; border-top:1px solid var(--line,#E2E8F0); font-size:13.5px; color:var(--mut,#64778C); text-align:center}
.atm-msg{display:none; margin-top:12px; font-size:13.5px; border-radius:7px; padding:9px 11px}
.atm-msg.err{display:block; background:var(--r-bg,#FBEDEC); color:var(--r,#B23A31); border:1px solid var(--r-bd,#F0C9C5)}

/* form status (demo + contact) */
.fmsg{display:none; margin-top:14px; font-size:14px; border-radius:7px; padding:10px 12px; line-height:1.45}
.fmsg.ok{display:block; background:var(--g-bg,#E9F5EE); color:var(--g,#1B7F45); border:1px solid var(--g-bd,#BEE0CC)}
.fmsg.err{display:block; background:var(--r-bg,#FBEDEC); color:var(--r,#B23A31); border:1px solid var(--r-bd,#F0C9C5)}
.form .hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}
.form textarea{width:100%; box-sizing:border-box; font:inherit; font-size:15px; padding:10px 12px; min-height:120px; resize:vertical;
  border:1px solid var(--line-2,#CBD5E1); border-radius:7px; background:#fff; color:inherit}
.form .interest{font-size:13px; color:var(--ink-2,#33475D); background:var(--card-2,#F5F8FB); border:1px solid var(--line,#E2E8F0); border-radius:6px; padding:8px 10px; margin-top:12px}
.form .interest b{color:var(--ink,#0F2438)}
.form.sent .two, .form.sent label, .form.sent input, .form.sent select, .form.sent textarea, .form.sent button[type=submit], .form.sent .interest{display:none}