/* styles.css */
:root {
  --brand: #5c6898;
  --text: #333;
  --light: #fff;
  --bg-image: url('https://coverleads.blob.core.windows.net/other/bgimg-cloud.jpg?auto=format&fit=crop&w=1500&q=80');
  --overlay-light: rgba(255,255,255,0.6);
  --transition: 0.6s ease;
}
* {
  box-sizing: border-box; margin: 0; padding: 0;
}
body {
  font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
  background:
    linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.5)),
    var(--bg-image) no-repeat center center fixed;
  background-size: cover;
  color: var(--text);
  line-height: 1.6;
}

.container {
  width: 90%; max-width: 1200px; margin: 0 auto;
}
.site-header {
  position: fixed; top: 0; width: 100%; background: var(--light);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 200;
  padding: 1rem 0;
}
.site-header-inner {
  display: flex; align-items: center; justify-content: flex-start;
}
.brand img {
  max-width: 200px; height: auto;
}
h1.h1 {
  font-size: 2.5rem; margin-bottom: 0.5rem; color: var(--brand);
}
p.h5 {
  font-size: 1.125rem; margin-bottom: 1.5rem; color: var(--brand);
}

/* Hero */
.hero {
  padding-top: 6rem; /* header height offset */
  padding-bottom: 4rem;
}
#hero-content {
  background: var(--overlay-light);
  padding: 3rem 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: center;
  transform: scale(0.95);
  opacity: 0;
  transition: transform var(--transition), opacity var(--transition);
}
#hero-content.is-visible {
  transform: scale(1);
  opacity: 1;
}
.button-group {
  display: flex; justify-content: center; gap: 1rem;
}
.button-primary {
  background: var(--brand); color: var(--light);
  padding: 0.75rem 2rem; border-radius: 4px; text-decoration: none;
  transition: transform var(--transition), background var(--transition);
}
.button-primary:hover {
  transform: translateY(-2px);
}

/* Features */
.features { padding: 1rem 0; }
.h2 {
  text-align: center; font-size: 2rem; margin-bottom: 2rem; color: var(--text);
}
.tiles-wrap {
  display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center;
}
.tiles-item {
  background: var(--overlay-light);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  width: 260px;
  text-align: center;
  transform: scale(0.95);
  opacity: 0;
  transition: transform var(--transition), opacity var(--transition);
}
.tiles-item.is-visible {
  transform: scale(1);
  opacity: 1;
}
.tiles-item svg {
  margin-bottom: 1rem;
  stroke: var(--brand);
}
.h4 {
  font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--brand);
}
/* Site Content Spacing */
.site-content {
  margin-top: 2rem;  /* space below header */
  margin-bottom: 2rem; /* space above footer */
}

/* Footer */
.site-footer {
  padding: 2rem 0;
  text-align: center;
  background: rgba(255,255,255,0.7);
}
.site-footer p {
  color: var(--text);
  font-size: 0.875rem;
}