/* ================================================================
   SFH Landing Page – extra.css
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --sfh-blue-dark:   #0d2d5e;
  --sfh-blue:        #1565c0;
  --sfh-teal:        #0097a7;
  --sfh-teal-light:  #e0f7fa;
  --sfh-white:       #ffffff;
  --sfh-radius:      8px;
}

/* ── Hero ───────────────────────────────────────────────────────── */
.sfh-hero {
  padding: 5rem 0 5.5rem;
  background: linear-gradient(135deg, var(--sfh-blue-dark) 0%, var(--sfh-blue) 55%, var(--sfh-teal) 100%);
  position: relative;
  overflow: hidden;
}

/* subtle grid pattern overlay */
.sfh-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.sfh-hero .md-grid {
  position: relative;
}

.sfh-hero__inner {
  max-width: 52rem;
}

.sfh-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .85rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
}

.sfh-hero__headline {
  color: #fff !important;
  font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  margin: 0 0 1.2rem !important;
  padding: 0 !important;
  border: none !important;
}

.sfh-hero__subtitle {
  color: rgba(255,255,255,.87);
  font-size: 1.18rem;
  line-height: 1.65;
  margin: 0 0 2.2rem;
  max-width: 44rem;
}

/* ── Hero Buttons ───────────────────────────────────────────────── */
.sfh-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 3rem;
}

.sfh-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .75rem 1.75rem;
  border-radius: var(--sfh-radius);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform .15s, box-shadow .15s;
  cursor: pointer;
}

.sfh-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

.sfh-btn--primary {
  background: #fff;
  color: var(--sfh-blue-dark) !important;
}

.sfh-btn--outline {
  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.65);
}

.sfh-btn--outline:hover {
  border-color: #fff;
}

/* ── Landing Page Content ───────────────────────────────────────── */
.sfh-landing h1:first-of-type {
  display: none; /* title already shown in hero */
}

/* Section spacing */
.md-typeset .sfh-section {
  margin: 3.5rem 0;
}

/* ── Platform Two-Column Cards ──────────────────────────────────── */
.sfh-platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
}

@media (max-width: 768px) {
  .sfh-platform-grid {
    grid-template-columns: 1fr;
  }
}

.sfh-platform-card {
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: var(--sfh-radius);
  padding: 1.75rem 2rem;
}

.sfh-platform-card h3 {
  margin-top: 0 !important;
  font-size: 1.15rem !important;
}

.sfh-platform-card ul {
  margin-bottom: 0;
}

/* ── CTA Block ──────────────────────────────────────────────────── */
.sfh-cta-block {
  text-align: center;
  padding: 3.5rem 2rem;
  background: linear-gradient(135deg, var(--sfh-blue-dark) 0%, var(--sfh-blue) 55%, var(--sfh-teal) 100%);
  border-radius: 12px;
  margin: 3rem 0 2rem;
}

.sfh-cta-block h2 {
  color: #fff !important;
  margin-top: 0 !important;
  border: none !important;
}

.sfh-cta-block p {
  color: rgba(255,255,255,.87);
  font-size: 1.1rem;
  margin-bottom: 1.75rem;
}

.sfh-cta-block .sfh-hero__actions {
  justify-content: center;
  margin-bottom: 0;
}

/* ── Responsive Hero ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .sfh-hero {
    padding: 3rem 0 3.5rem;
  }

  .sfh-hero__headline {
    font-size: 2rem !important;
  }

  .sfh-stat__divider {
    display: none;
  }

  .sfh-stat {
    padding: 0 .75rem;
  }
}