/* MailSoftGuard – Light Corporate Theme (drop-in replacement) */

/* --- Color system --- */
:root{
  --bg:#ffffff;                 /* page background */
  --bg-alt:#f7fbff;             /* soft blue-tint for alternating sections */
  --card:#ffffff;               /* cards */
  --border:#e6e9ef;             /* light border */
  --text:#0b1220;               /* primary text */
  --muted:#5b6b80;              /* secondary text */
  --brand:#2563eb;              /* primary brand blue */
  --brand-2:#22c3ee;            /* accent blue/cyan */
  --ok:#16a34a;
  --warn:#d97706;
  --bad:#dc2626;
  --maxw:1200px;
  --radius:18px;
  --shadow:0 6px 22px rgba(2, 6, 23, .08);
}

/* --- Reset/basics --- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* --- Header / Nav --- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;color:var(--text)}
.logo .mark{width:28px;height:28px;border-radius:8px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow:var(--shadow)}
.menu{display:flex;gap:18px;align-items:center}
.menu a{color:var(--text);opacity:.8}
.menu a:hover{opacity:1}
.menu a.btn{opacity:1}

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--brand);color:#fff;
  font-weight:700;padding:12px 16px;border-radius:12px;border:1px solid rgba(2,6,23,.06);
  box-shadow:0 6px 14px rgba(37,99,235,.18); transition:transform .06s ease, box-shadow .2s ease, filter .2s ease}
.btn:hover{filter:brightness(1.05); box-shadow:0 8px 18px rgba(37,99,235,.24)}
.btn:active{transform:translateY(1px)}
.btn.alt{background:#fff; color:var(--text); border:1px solid var(--border); box-shadow:none}
.btn.alt:hover{background:#f6f8fb}

/* --- Hero --- */
.hero{padding:84px 0 48px}
.eyebrow{color:var(--brand-2);text-transform:uppercase;font-size:12px;letter-spacing:.18em;font-weight:800}
h1{font-size:48px;line-height:1.12;margin:10px 0 16px}
.lead{color:var(--muted);font-size:18px;max-width:920px}
.badges{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.badge{font-size:12px;color:#0b1220; background:#eaf4ff; border:1px solid #d8e7ff; padding:6px 10px; border-radius:999px}

/* --- Cards & sections --- */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
section{padding:72px 0}
section:nth-of-type(even){background:var(--bg-alt)} /* alternate background for visual rhythm */
h2{font-size:34px;margin:0 0 16px}
.sub{color:var(--muted);margin-bottom:26px}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}

/* --- Pricing tweaks --- */
.price .num{font-size:40px;font-weight:800;color:var(--text)}
.price ul{padding-left:18px;line-height:1.8}

/* --- Alerts (contact page) --- */
.alert{padding:12px 14px;border-radius:12px;margin-bottom:12px;border:1px solid var(--border)}
.alert.ok{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}
.alert.fail{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}
.alert.invalid{background:#fffbeb;border-color:#fde68a;color:#78350f}

/* --- Footer --- */
.footer{background:#0f172a;color:#e5e7eb;border-top:1px solid rgba(255,255,255,.06);padding:40px 0}
.footer a{color:#c7d2fe}
.footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px}
.newsletter input, .form input, .form textarea{
  width:100%; background:#fff; color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:12px 12px; box-shadow: inset 0 1px 2px rgba(2,6,23,.04);
}
.form textarea{min-height:120px;resize:vertical}

/* --- Responsive --- */
@media (max-width: 980px){
  .cols-3{grid-template-columns:1fr}
  .cols-2{grid-template-columns:1fr}
  .footer .grid{grid-template-columns:1fr 1fr}
  h1{font-size:40px}
}