/* IMMA Payroll — public site. Brand: indigo #2B3A8F, mint #2ED3A6. No trackers, no third-party assets. */
:root{
  --indigo:#2B3A8F; --indigo-dark:#22306f; --mint:#2ED3A6; --ink:#1c2333;
  --muted:#5a6376; --bg:#ffffff; --bg-soft:#f4f6fc; --line:#e2e7f3;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--indigo); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1060px; margin:0 auto; padding:0 20px}

/* Header */
header.site{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.header-in{display:flex; align-items:center; gap:18px; height:64px}
.logo{display:flex; align-items:center; flex:0 0 auto}
.logo svg{height:34px; width:auto; display:block}
nav.main{margin-left:auto; display:flex; align-items:center; gap:20px; font-size:15px}
nav.main a{color:var(--ink); font-weight:600}
.lang-btn{
  border:2px solid var(--indigo); color:var(--indigo); background:#fff;
  font-weight:800; border-radius:999px; padding:5px 14px; cursor:pointer; font-size:14px;
}
.lang-btn:hover{background:var(--indigo); color:#fff}
@media (max-width:640px){ nav.main a.opt{display:none} .header-in{gap:10px} }

/* Hero */
.hero{background:linear-gradient(180deg,var(--bg-soft),#fff); padding:64px 0 48px; text-align:center}
.hero h1{font-size:clamp(30px,5.4vw,50px); line-height:1.12; margin:0 0 16px; color:var(--indigo-dark); letter-spacing:-.5px}
.hero p.sub{font-size:clamp(16px,2.4vw,20px); color:var(--muted); max-width:760px; margin:0 auto 28px}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{
  display:inline-block; padding:13px 26px; border-radius:999px; font-weight:700; font-size:16px;
  border:2px solid var(--indigo);
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--indigo); color:#fff}
.btn-primary:hover{background:var(--indigo-dark)}
.btn-ghost{background:#fff; color:var(--indigo)}
.hero .note{margin-top:16px; color:var(--muted); font-size:14.5px}
.hero .note strong{color:var(--indigo)}

/* Sections */
section{padding:52px 0}
section.alt{background:var(--bg-soft)}
h2{font-size:clamp(24px,3.6vw,34px); color:var(--indigo-dark); margin:0 0 10px; letter-spacing:-.3px}
.lead{color:var(--muted); max-width:720px; margin:0 0 28px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.card h3{margin:0 0 8px; font-size:17.5px; color:var(--indigo)}
.card p{margin:0; color:var(--muted); font-size:15.5px}
.steps{counter-reset:step; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.step .n{
  display:inline-flex; width:30px; height:30px; border-radius:50%; background:var(--mint);
  color:#07342a; font-weight:800; align-items:center; justify-content:center; margin-bottom:10px;
}
.step h3{margin:0 0 6px; font-size:16px; color:var(--indigo)}
.step p{margin:0; color:var(--muted); font-size:14.5px}

/* Pricing */
.price-box{
  background:#fff; border:2px solid var(--indigo); border-radius:18px; padding:30px;
  max-width:640px; margin:0 auto; text-align:center;
}
.price-big{font-size:clamp(30px,5vw,42px); font-weight:800; color:var(--indigo-dark); margin:4px 0}
.price-example{color:var(--muted); margin:6px 0 4px}
.price-trial{display:inline-block; background:#e5faf3; color:#0a5c44; font-weight:700; border-radius:999px; padding:5px 14px; margin:10px 0 4px; font-size:14.5px}
.trial-form{max-width:520px; margin:22px auto 0; display:grid; gap:10px; text-align:left}
.trial-form label{font-weight:600; font-size:14.5px}
.trial-form input{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px; font-size:16px;
}
.trial-form input:focus{outline:2px solid var(--mint); border-color:transparent}
.trial-form .btn{justify-self:center; cursor:pointer}
.fineprint{color:var(--muted); font-size:13.5px; text-align:center; margin-top:10px}

/* FAQ */
.faq{max-width:820px}
.faq h3{color:var(--indigo); margin:26px 0 6px; font-size:17.5px}
.faq p{margin:0; color:#333c52}

/* Long-form pages */
.doc{max-width:820px; padding:40px 0 56px}
.doc h1{color:var(--indigo-dark); font-size:clamp(26px,4vw,36px); margin:0 0 8px}
.doc h2{font-size:21px; margin:28px 0 8px}
.doc p, .doc li{color:#333c52}
.doc ul{padding-left:20px}
.draft-banner{
  background:#fff7e0; border:1.5px solid #e6b800; border-radius:12px; padding:14px 18px;
  font-weight:600; margin:18px 0;
}
.mail{font-weight:700}

/* Footer */
footer.site{
  border-top:1px solid var(--line); background:var(--bg-soft);
  padding:26px 0 calc(26px + env(safe-area-inset-bottom)); color:var(--muted); font-size:14.5px;
}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center}
footer.site nav{display:flex; gap:16px; margin-left:auto}
footer.site a{color:var(--indigo); font-weight:600}