:root {
  --light-yellow: #eae7d8;
  --gray-cyan: #316563;
  --gray-turquoise: #75908c;
  --pastel-gray-green: #b5bfb5;
  --gray-green: #9dbb9f;
  --deep-teal: #448d8a;
}

body {
  background-color: var(--light-yellow);
  color: var(--gray-cyan);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

nav {
  background-color: var(--gray-cyan);
  padding: 1rem;
}

nav ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  color: var(--light-yellow);
}

footer {
  background-color: var(--gray-green);
  color: white;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}

h1, h2, h3 {
  color: var(--gray-cyan);
}

/* Home page helpers */
.collapse-panel { overflow: hidden; max-height: 0; transition: max-height .35s ease, padding .2s ease; padding: 0 .5rem; }
.collapse-panel.show { max-height: 600px; padding: 1rem .5rem; }
.pricing-list { text-align: left; margin: .25rem auto 0; max-width: 520px; }
.pricing-list li { display: flex; justify-content: space-between; padding: .35rem 0; border-bottom: 1px dashed var(--pastel-gray-green); }
.pricing-note { font-size: .9rem; opacity: .85; margin-top: .5rem; }
.btn-ghost { background: transparent; color: var(--deep-teal); border: 1px solid var(--deep-teal); }
.btn-ghost:hover { background: var(--deep-teal); color: #fff; }

/* Hero */
.hero { height: 100vh; display:flex; align-items:center; color:#fff; text-align:center; background-position:center; background-size:cover; }
.hero-content { max-width: 800px; margin: 0 auto; padding: 0 2rem; }
.hero h1 { color:#fff; font-size: 4rem; margin-bottom: 1.5rem; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.hero p { font-size: 1.5rem; margin-bottom: 2rem; text-shadow: 0 2px 5px rgba(0,0,0,0.3); }

/* Service area & FAQ */
.feature-list { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.feature-list li::before { content:'\2713'; color: var(--deep-teal); margin-right:.5rem; }
.faq-item { margin-bottom: 1rem; }
.faq-item h3 { margin-bottom:.25rem; font-size:1.1rem; }

/* Services grid and cards */
.services-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }
.service-card { background:#fff; border-radius:10px; overflow:hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.08); transition: var(--transition); text-align:center; padding:2.5rem 1.5rem; border-bottom:4px solid var(--gray-green); position:relative; }
.service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.15); border-bottom-color: var(--deep-teal); }
.service-icon { font-size:3.5rem; color: var(--deep-teal); margin-bottom:1.5rem; }
.service-card h3 { font-size:1.5rem; margin-bottom:1rem; color: var(--gray-cyan); }
.card-paused { filter: grayscale(0.3); opacity: 0.85; }
.card-paused .btn { pointer-events: none; opacity: 0.6; }
.status-pill { position:absolute; top:12px; right:12px; background: var(--pastel-gray-green); color: var(--gray-cyan); padding:6px 10px; border-radius:20px; font-weight:600; font-size:.82rem; display:inline-flex; align-items:center; gap:.4rem; box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.status-pill i { color: var(--gray-green); }