/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  font-family: "Inter", Arial, sans-serif;
  color: #000b24;
  background: #f7f9fc;
  line-height: 1.6;
}

/* ---------- Header / Brand ---------- */
header { text-align: center; padding: 1.2rem; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #000b24; }
.brand img { height: 40px; width: 40px; border-radius: 8px; }
.brand strong { font-size: 1.5rem; }

/* ---------- Layout ---------- */
.container { max-width: 850px; margin: 2rem auto; padding: 0 1rem; }

/* ---------- Headings ---------- */
h1 { color: #000b24; margin-bottom: 1rem; }
h2 { margin-top: 1.8rem; margin-bottom: 0.6rem; color: #004d9d; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid #97b6c9; margin-top: 3rem; font-size: 0.9rem; color: #555; text-align: center; padding: 1.2rem; }
footer nav a { color: #004d9d; text-decoration: none; margin: 0 0.4rem; }
footer nav a:hover { text-decoration: underline; }

/* ---------- Links ---------- */
a { color: #004d9d; }
a:hover { color: #0066cc; }

/* ---------- Lists / Text ---------- */
ul { margin-left: 1.2rem; }
p, li { margin-bottom: 0.6rem; }

/* ---------- Buttons ---------- */
button, .cta {
  display: inline-block;
  background: linear-gradient(90deg, #0073ff, #00c4ff);
  color: #fff;
  border: none;
  padding: 0.7rem 1.4rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
button:hover, .cta:hover { opacity: 0.85; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(180deg, #000b24 0%, #002b5e 100%);
  color: #fff; text-align: center; padding: 6rem 1rem;
}
.hero h1 { font-size: 2.4rem; margin-bottom: 1rem; }
.hero p { font-size: 1.1rem; margin-bottom: 2rem; color: #d8e3ef; }
.cta-group .cta, .cta-group button { margin: 0.4rem; background: linear-gradient(90deg, #0073ff, #00c4ff); }

/* ---------- Message Area ---------- */
.message-area { margin-top: 1.5rem; font-size: 1rem; color: #fff; opacity: 0; transition: opacity 0.3s ease; }
.message-area.visible { opacity: 1; }

/* ---------- Tool Pages ---------- */
.tool-box { text-align: center; margin-top: 2rem; }
.tool-box input[type="file"] { margin-bottom: 1rem; border: 1px solid #ccc; padding: 0.4rem; border-radius: 4px; background: #fff; }
.tool-box button { display: block; margin: 0 auto; }