/* Alyn Pilates Club - Landing Page Styles */
:root {
  --primary: #7AB8B6; /* soft teal */
  --secondary: #F3C9C9; /* blush */
  --accent: #C8E6E0; /* pale mint */
  --ink: #2F3A3A; /* deep gray-green */
  --muted: #6A7A7A;
  --bg: #FAFCFB; /* off-white */
}

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

.navbar-brand span {
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Brand logo */
.brand-logo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid rgba(47,58,58,0.12);
}
.brand-text { font-weight: 800; }

.btn-brand {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-brand:hover { background: #68a7a5; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(122,184,182,0.3); }
.btn-outline-brand { border-color: var(--primary); color: var(--primary); border-radius: 999px; }
.btn-outline-brand:hover { background: var(--primary); color: #fff; }

.badge-soft { background: var(--accent); color: var(--ink); }

/* Hero */
.hero {
  position: relative;
  padding: 6rem 0 4rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%);
  overflow: hidden;
}
.hero .bg-pill {
  position: absolute;
  inset: -20% -10% auto auto;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(ellipse at top right, rgba(200,230,224,0.8), rgba(200,230,224,0) 60%),
              radial-gradient(ellipse at 30% 80%, rgba(243,201,201,0.5), rgba(243,201,201,0) 55%);
  filter: blur(20px);
  pointer-events: none;
}
.hero h1 { font-weight: 800; letter-spacing: -0.5px; }
.hero p.lead { color: var(--muted); font-size: 1.125rem; }
.hero .hero-img {
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.08);
  object-fit: cover;
}

/* Sections */
.section {
  padding: 4rem 0;
}
.section h2 { font-weight: 700; letter-spacing: -0.3px; }
.section-sub { color: var(--muted); }

.icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.card-soft {
  border: 1px solid rgba(47,58,58,0.08);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}
.card-soft .card-header { background: #fff; border-bottom: 0; }

.price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink);
}

.ribbon {
  position: absolute; top: 12px; right: 12px; background: var(--secondary); color: #5c3c3c; font-weight: 700; padding: 4px 10px; border-radius: 999px; font-size: .75rem;
}

/* Footer CTA */
.footer-cta {
  background: linear-gradient(180deg, #e9f5f3 0%, #ffffff 100%);
  border-top: 1px solid rgba(47,58,58,0.08);
}

/* A11y helpers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,1px,1px); border: 0; }

/* Animations */
.fade-up { opacity: 0; transform: translateY(16px); animation: fadeUp .7s ease forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .hero { padding-top: 4rem; }
}