/* Landing page. Reset, navbar, wordmark, buttons and forms come from
   public.css; brand.css supplies every colour. This sheet is the hero, the
   sections and the footer. */

.hero {
  /* The dashboard's ink, deepening into the brand indigo: dark and calm,
     and the buttons on it are the same indigo a customer clicks inside. */
  background: linear-gradient(160deg, var(--ink) 0%, #23285a 100%);
  color: white;
  padding: 5rem 2rem 4.5rem;
  text-align: center;
}

.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand-ring);
  margin-bottom: 1rem;
}

.hero h1 {
  /* Scales with the viewport instead of overflowing small screens at 3rem */
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  margin-bottom: 1.25rem;
  max-width: 22ch;
  letter-spacing: -0.015em;
  margin-left: auto;
  margin-right: auto;
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  margin: 0 auto 2rem;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.82);
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-note {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
}

.hero-note i {
  color: #5fd3bd;
  margin-right: 0.4rem;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
  color: var(--ink);
}

.section-header h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

/* A short rule in the mark's orange under each section heading: the brand
   colour on the page without touching a single control. */
.section-header h2::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--mark);
  margin: 0.85rem auto 0;
}

.section-header p {
  color: var(--ink-3);
  max-width: 600px;
  margin: 0 auto;
}

.features {
  padding: 4rem 2rem;
  background: var(--surface);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  text-align: center;
  padding: 2rem;
  background: var(--surface-2);
  border-radius: var(--radius);
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card i {
  font-size: 2.5rem;
  color: var(--brand);
  margin-bottom: 1rem;
}

.pricing {
  padding: 4rem 2rem;
  background: var(--surface-2);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* The fallback before a rate card is published: one card in the middle */
.pricing-grid--single {
  grid-template-columns: minmax(0, 380px);
  justify-content: center;
}

.pricing-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-1);
  transition: transform 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-5px);
}

.pricing-card.popular {
  border: 2px solid var(--brand);
  position: relative;
}

.popular-tag {
  /* Sits on the card's top edge, centred, so it never lands on the title */
  position: absolute;
  top: -0.9rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--brand-fill);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
}

.price {
  font-size: 2.5rem;
  color: var(--brand);
  margin: 0.75rem 0 0.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.price-unit {
  font-size: 1rem;
  color: var(--ink-3);
  font-weight: 600;
  margin-left: 0.15rem;
}

.price-band {
  color: var(--ink-2);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.pricing-note {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--ink-3);
}

.contact {
  padding: 4rem 2rem;
  background: var(--surface);
}

.contact-container {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.contact-info {
  padding: 2rem;
}

.contact-info-item {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.contact-info-item i {
  font-size: 1.5rem;
  color: var(--brand);
  margin-right: 1rem;
}

.contact-form {
  padding: 2rem;
  background: var(--surface-2);
  border-radius: var(--radius);
}

.form-group {
  margin-bottom: 1rem;
}

.form-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 0.5rem;
}

textarea.form-input {
  min-height: 120px;
  resize: vertical;
}

.footer {
  background: var(--ink);
  color: #fff;
  padding: 4rem 2rem 2rem;
}

/* Flex, not a fixed four-column grid: the grid was declared for four
   columns and given two, so everything sat in the left half with two empty
   tracks beside it. This centres whatever columns exist and wraps them on
   narrow screens. */
.footer-grid {
  max-width: 1200px;
  margin: 0 auto 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  text-align: center;
}

.footer-column {
  min-width: 220px;
  max-width: 32ch;
}

.footer-column h3 {
  margin-bottom: 1rem;
  color: var(--brand-ring);
}

.footer-column p {
  color: rgba(255, 255, 255, 0.75);
}

.footer-column ul {
  list-style: none;
}

.footer-column ul li {
  margin-bottom: 0.75rem;
}

.footer-column ul li a:hover {
  color: white;
  text-decoration: underline;
}

.footer-column ul li a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: center;
}

.social-links a {
  color: #fff;
  font-size: 1.5rem;
}


/* Secondary action on the dark hero: readable without competing with the
   primary call to action. */
.hero .action-button-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.hero .action-button-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

.contact-notice {
  background: var(--brand-soft);
  border-left: 3px solid var(--brand);
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
  color: var(--ink-2);
}

.contact-notice i {
  color: var(--brand);
  margin-right: 0.4rem;
}

.contact-info-item a {
  color: var(--brand-strong);
}

.feature-card code {
  background: var(--surface-3);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.9em;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; transform: none !important; }
}


.features-list {
  list-style: none;
  margin: 1.5rem 0;
  text-align: left;
}

.features-list li {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
  position: relative;
}

.features-list li::before {
  content: "✓";
  color: var(--brand);
  position: absolute;
  left: 0;
}

@media (max-width: 1024px) {

  .features-grid,
  .pricing-grid,
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {

  .features-grid,
  .pricing-grid,
  .footer-grid,
  .contact-container {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 2rem;
  }

}