/* ==========================================================================
   LANDING PAGE STYLESHEET
   Sections (in page-flow order):
     1. Base & Reset
     2. Header / Navigation
     3. Hero Section
     4. Section defaults
     5. Features Section
     6. Info Section (progress bars)
     7. Help / Symptoms Section
     8. Feedback / Testimonials Section
     9. Footer
    10. Your Own Activity Section
    11. Role Selection Modal
    12. Scroll Reveal Animations
    13. Responsive Breakpoints (980px, 768px, 760px)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');


/* ==========================================================================
   SECTION 1: Base & Reset
   Universal box-sizing reset, smooth scrolling, body font/background,
   link and form element base styling.
   ========================================================================== */

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
      background: #F2FAF4;
      color: #051F20;
      overflow-x: hidden;
    }

    a {
      text-decoration: none;
      color: inherit;
    }
    button, input, textarea { font-family: inherit; }


/* ==========================================================================
   SECTION 2: Header / Navigation
   Fixed cream surface header with logo, nav links, CTA buttons,
   and hamburger menu icon.
   Logo uses Plus Jakarta Sans font in primary green.
   ========================================================================== */

    .header {
      position: fixed; top: 12px; left: 12px; right: 12px;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      height: 64px;
      max-width: 1280px;
      margin: 0 auto;
      background: #DAF1DE;
      border: 1px solid #8EB69B;
      border-radius: 20px;
      box-shadow: 0 4px 24px rgba(5,31,32,0.06);
    }

    .logo {
      font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
      font-size: 22px;
      color: var(--color-primary-600, #1C453C);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nav { display: flex; align-items: center; gap: 28px; }

    .nav a {
      font-size: 14px;
      font-weight: 600;
      color: #35554B;
      transition: color 0.2s;
    }
    .nav a:hover { color: #051F20; }
    .nav a.active { color: var(--color-primary-600, #1C453C); }

    .header-actions { display: flex; align-items: center; gap: 10px; }

    .btn-outline {
      padding: 10px 20px;
      border-radius: 999px;
      border: 1.5px solid #8EB69B;
      background: transparent;
      color: #051F20;
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.2s;
    }
    .btn-outline:hover { border-color: #59846D; background: #E6F5EA; }

    .btn-primary-nav {
      padding: 10px 22px;
      border-radius: 999px;
      border: none;
      background: #0B2B26;
      color: #DAF1DE;
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 4px 12px rgba(5,31,32,0.25);
    }
    .btn-primary-nav:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(5,31,32,0.3); }


/* ==========================================================================
   SECTION 3: Hero Section
   Full-viewport hero with background image, dark gradient overlay,
   and left-aligned content. Includes:
     - .hero-bg / .hero-overlay / .hero-content
     - .badge (AI-powered tag with icon)
     - .text-primary-gradient (green gradient text)
     - .primary-btn / .secondary-btn (CTA buttons)
     - .scroll-down (floating scroll indicator with bounce animation)
   ========================================================================== */

    .hero {
      min-height: 100dvh;
      padding: 120px clamp(18px, 5vw, 72px) 70px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      overflow: hidden;
      background: #051F20;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .hero-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 70% 50%;
      display: block;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(90deg, rgba(5,31,32,0.82) 0%, rgba(5,31,32,0.82) 40%, rgba(5,31,32,0.45) 65%, rgba(5,31,32,0.15) 100%);
    }

    @media (max-width: 768px) {
      .hero-overlay {
        background: linear-gradient(0deg, rgba(5,31,32,0.85) 0%, rgba(5,31,32,0.7) 50%, rgba(5,31,32,0.5) 100%);
      }

      .hero-bg img {
        object-position: 50% 50%;
      }
    }

    .scroll-down {
      position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
      z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px;
      background: none; border: none; font-family: inherit;
      font-size: 0.75rem; font-weight: 600; color: #35554B;
      cursor: pointer; animation: scrollBounce 2.4s ease-in-out infinite;
      transition: color 0.2s;
    }
    .scroll-down:hover { color: var(--color-primary-300, #8EB69B); }
    .scroll-down svg { animation: scrollArrow 2.4s ease-in-out infinite; transition: transform 0.3s; }
    @keyframes scrollBounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(8px); }
    }
    @keyframes scrollArrow {
      0%, 100% { transform: translateY(0); opacity: 1; }
      50% { transform: translateY(4px); opacity: 0.5; }
    }
    @media (max-width: 767px) { .scroll-down { display: none; } }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 620px;
      text-align: left;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,.18);
      color: #E6F5EA;
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 22px;
    }

    .hero h1 {
      font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
      font-size: clamp(38px, 7vw, 74px);
      line-height: 1.02;
      letter-spacing: -3px;
      color: #FFFFFF;
      margin-bottom: 24px;
    }

    .hero h1 .text-primary-gradient {
      background: linear-gradient(135deg, #DAF1DE, #8EB69B);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero p {
      max-width: 560px;
      margin-bottom: 34px;
      font-size: clamp(15px, 2vw, 18px);
      line-height: 1.8;
      color: #A8D3B4;
    }

    .hero-actions {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .primary-btn,
    .secondary-btn {
      min-height: 54px;
      padding: 0 28px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      justify-content: center;
      font-weight: 800;
      transition: .25s ease;
      text-decoration: none;
    }

    .primary-btn {
      background: linear-gradient(135deg, #0B2B26, #163832);
      color: #DAF1DE;
      box-shadow: 0 20px 42px rgba(5,31,32,.35);
    }

    .secondary-btn {
      background: rgba(255,255,255,.08);
      backdrop-filter: blur(12px);
      color: #E6F5EA;
      border: 1px solid rgba(255,255,255,.15);
    }

    .primary-btn:hover,
    .secondary-btn:hover {
      transform: translateY(-3px);
    }


/* ==========================================================================
   SECTION 4: Section Defaults
   Shared padding and centered title styles used across multiple
   sections. .section-title provides an uppercase label above an h2.
   ========================================================================== */

    .section {
      padding: clamp(60px, 8vw, 100px) clamp(18px, 5vw, 72px);
    }

    .section-title {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 44px;
    }

    .section-title span {
      color: #235347;
      font-weight: 800;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .12em;
    }

    .section-title h2 {
      margin-top: 12px;
      font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
      font-size: clamp(28px, 5vw, 46px);
      line-height: 1.15;
      letter-spacing: -1.5px;
    }


/* ==========================================================================
   SECTION 5: Features Section
   Three-column grid of feature cards. Each card has an icon with
   green gradient background, title, and description. Cards lift
   on hover with enhanced shadow.
   ========================================================================== */

    .features {
      background: #fff;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .feature-card {
      padding: 30px;
      border-radius: 28px;
      background: #f7fbf8;
      border: 1px solid rgba(11,43,38,.08);
      box-shadow: 0 18px 50px rgba(11,43,38,.06);
      transition: .25s ease;
    }

    .feature-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 70px rgba(11,43,38,.12);
    }

    .icon {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, #E6F5EA, #B4D3BC);
      margin-bottom: 22px;
    }

    .feature-card h3 {
      font-size: 20px;
      margin-bottom: 12px;
      color: #0B2B26;
    }

    .feature-card p {
      color: #5C8A73;
      line-height: 1.7;
      font-size: 15px;
    }


/* ==========================================================================
   SECTION 6: Info Section (Progress Bars)
   Two-column layout: left has heading + description, right has a
   glass panel with mock progress bars (Energy, Sleep, Focus,
   Daily Flow). Bars use a dark-to-green gradient fill.
   ========================================================================== */

    .info {
      background: linear-gradient(135deg, #f4fbf5, #eef8f4);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }

    .info h2 {
      font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
      font-size: clamp(28px, 5vw, 48px);
      line-height: 1.15;
      letter-spacing: -1.5px;
      margin-bottom: 20px;
    }

    .info p {
      font-size: 16px;
      line-height: 1.8;
      color: #5C8A73;
      max-width: 560px;
    }

    .glass-panel {
      padding: 28px;
      border-radius: 32px;
      background: rgba(255,255,255,.7);
      border: 1px solid rgba(255,255,255,.8);
      box-shadow: 0 28px 80px rgba(11,43,38,.14);
    }

    .progress-item {
      margin-bottom: 22px;
    }

    .progress-item strong {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      color: #0B2B26;
    }

    .progress {
      height: 12px;
      border-radius: 999px;
      background: #e4eee7;
      overflow: hidden;
    }

    .progress span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #0B2B26, #8EB69B);
    }


/* ==========================================================================
   SECTION 7: Help / Symptoms Section
   Three-column layout with common wellness symptom lists on
   left and right, and a pulsing spa icon in the center on a
   green radial gradient background.
   ========================================================================== */

    .help {
      background: #fff;
    }

    .help-grid {
      display: grid;
      grid-template-columns: 1fr 320px 1fr;
      gap: 28px;
      align-items: center;
    }

    .symptoms {
      display: grid;
      gap: 14px;
    }

    .symptoms li {
      padding: 14px 16px;
      border-radius: 18px;
      background: #f7fbf8;
      border: 1px solid rgba(11,43,38,.08);
      color: #233F37;
      font-weight: 600;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .center-graphic {
      height: 320px;
      border-radius: 32px;
      background:
        radial-gradient(circle at center, rgba(188,232,174,.9), transparent 38%),
        linear-gradient(135deg, #e8f5e9, #d7f0ec);
      display: grid;
      place-items: center;
      box-shadow: inset 0 0 0 1px rgba(11,43,38,.08);
    }

    .center-graphic div {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: rgba(255,255,255,.7);
      display: grid;
      place-items: center;
      box-shadow: 0 24px 60px rgba(11,43,38,.15);
      animation: pulse 3s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.06); }
    }


/* ==========================================================================
   SECTION 8: Feedback / Testimonials Section
   Three-column grid of testimonial cards with verified badge,
   author name, quote, and 5-star rating. White cards with subtle
   border and shadow on a light background.
   ========================================================================== */

    .feedback {
      background: #f7fbf8;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .card {
      padding: 28px;
      border-radius: 28px;
      background: #fff;
      border: 1px solid rgba(11,43,38,.08);
      box-shadow: 0 18px 50px rgba(11,43,38,.08);
    }

    .card-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: #DAF1DE;
      margin-bottom: 16px;
    }

    .card p {
      color: #5C8A73;
      line-height: 1.7;
      margin: 16px 0;
      font-size: 15px;
    }

    .card strong {
      color: #0B2B26;
    }

    .stars {
      display: flex;
      gap: 2px;
    }


/* ==========================================================================
   SECTION 9: Footer
   Dark-themed footer with three columns: brand/logo with copyright,
   support links (Help Center, Terms, Privacy), and newsletter signup
   form with pill-shaped input and green submit button.
   ========================================================================== */

    .footer {
      background: #051F20;
      color: #fff;
      padding: 50px clamp(18px, 5vw, 72px);
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 42px;
    }

    .footer-logo {
      font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
      font-size: 28px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .footer p,
    .footer a {
      color: rgba(255,255,255,.68);
      font-size: 14px;
      line-height: 1.8;
    }

    .footer-links {
      display: grid;
      gap: 10px;
    }

    .newsletter-input-wrap {
      display: flex;
      gap: 0;
      margin-top: 12px;
    }

    .newsletter input {
      height: 44px;
      width: 220px;
      border-radius: 999px 0 0 999px;
      border: 1px solid rgba(255,255,255,.18);
      border-right: none;
      background: rgba(255,255,255,.08);
      color: #fff;
      padding: 0 16px;
      outline: none;
      font-size: 13px;
    }

    .newsletter input::placeholder {
      color: rgba(255,255,255,.35);
    }

    .newsletter-btn {
      width: 44px;
      height: 44px;
      border-radius: 0 999px 999px 0;
      border: 1px solid rgba(255,255,255,.18);
      background: var(--color-primary-800, #0B2B26);
      color: #fff;
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: background 0.2s;
    }

    .newsletter-btn:hover {
      background: var(--color-primary-700, #163832);
    }

    .hamburger {
      display: none;
      width: 36px;
      height: 36px;
      border: none;
      background: transparent;
      flex-direction: column;
      gap: 4px;
      justify-content: center;
      padding: 6px;
      border-radius: 8px;
    }
    .hamburger span { width: 22px; height: 2px; background: #051F20; border-radius: 2px; }


/* ==========================================================================
   SECTION 10: Responsive — Tablet (max-width: 980px)
   Stacks info, features, help grid, cards, footer into single
   column. Reduces hero top padding.
   ========================================================================== */

    @media (max-width: 980px) {
      .info {
        grid-template-columns: 1fr;
      }

      .hero {
        padding-top: 110px;
      }

      .feature-grid,
      .cards {
        grid-template-columns: 1fr;
      }

      .help-grid {
        grid-template-columns: 1fr;
      }

      .footer {
        grid-template-columns: 1fr;
      }
    }

    .nav-mobile-actions {
      display: none;
    }

    @media (max-width: 768px) {
      .header { top: max(8px, var(--safe-top, 8px)); left: 8px; right: 8px; padding: 0 16px; height: 56px; border-radius: 14px; }

      .nav {
        position: fixed; inset: 68px 8px auto 8px;
        background: #DAF1DE;
        border: 1px solid #8EB69B;
        border-radius: 18px;
        flex-direction: column; padding: 20px;
        transform: translateY(-130%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        gap: 14px;
        box-shadow: 0 16px 48px rgba(5,31,32,0.15);
        z-index: 999;
      }
      .nav.open { transform: translateY(0); }

      .nav a {
        font-size: 16px;
        padding: 8px 12px;
        width: 100%;
        text-align: center;
        border-radius: 8px;
      }
      .nav a:hover {
        background: rgba(35, 83, 71, 0.08);
      }

      .nav-mobile-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding-top: 14px;
        border-top: 1px solid rgba(142, 182, 155, 0.4);
        gap: 10px;
      }

      .header-actions { display: none; }
      .hamburger { display: flex; cursor: pointer; }

      .hero {
        min-height: auto;
        padding-top: 96px;
        padding-bottom: 60px;
      }

      .hero-content {
        text-align: center;
        max-width: 100%;
      }

      .hero-actions {
        justify-content: center;
      }

      .hero h1 {
        letter-spacing: -1.5px;
      }

      .primary-btn,
      .secondary-btn {
        width: 100%;
      }

      .footer {
        text-align: center;
      }

      .newsletter input {
        width: 100%;
      }
    }


/* ==========================================================================
   SECTION 12: Your Own Activity (Community Contributor)
   Two-column layout: left has heading, description, and category
   tag pills; right has a preview card with status badge, gradient
   body, icon, title, description, and 3-step indicator.
   ========================================================================== */

.own-activity {
  background:
    radial-gradient(circle at 15% 15%, rgba(188, 232, 174, 0.38), transparent 30%),
    linear-gradient(135deg, #f4fbf5, #eef8f4);
}

.own-activity-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.75fr);
  gap: 32px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}

.own-activity-content > span {
  color: #235347;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.own-activity-content h2 {
  margin-top: 12px;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.15;
  letter-spacing: -1.5px;
  color: #051F20;
}

.own-activity-content p {
  margin-top: 18px;
  max-width: 650px;
  color: #5C8A73;
  font-size: 16px;
  line-height: 1.8;
}

.own-activity-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 26px;
}

.own-activity-tags span {
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(11,43,38,.12);
  color: #235347;
  font-size: 13px;
  font-weight: 800;
}

.own-activity-btn {
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  background: linear-gradient(135deg, #0B2B26, #235347);
  color: #DAF1DE;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 20px 42px rgba(5,31,32,.22);
  transition: .25s ease;
}

.own-activity-btn:hover { transform: translateY(-3px); }

.own-activity-card {
  padding: 26px;
  border-radius: 32px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 28px 80px rgba(11,43,38,.14);
}

.activity-mini-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
}

.activity-mini-header strong { color: #051F20; }

.activity-mini-header span {
  padding: 6px 11px;
  border-radius: 999px;
  background: #E6F5EA;
  color: #235347;
  font-size: 12px;
  font-weight: 800;
}

.activity-mini-body {
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, #0B2B26, #235347);
  color: #DAF1DE;
}

.activity-mini-icon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.15);
  margin-bottom: 18px;
}

.activity-mini-body h3 { font-size: 22px; margin-bottom: 10px; }

.activity-mini-body p {
  color: rgba(255,255,255,.75);
  line-height: 1.7;
  font-size: 14px;
}

.activity-mini-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 16px;
}

.activity-mini-steps span {
  padding: 10px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(11,43,38,.08);
  color: #233F37;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}



/* ==========================================================================
   SECTION 13: Role Selection Modal
   Fullscreen backdrop with blurred background. Modal panel
   scales in with animation. Contains logo, title, subtitle,
   and two role options (User, Counselor) with icon, label,
   description, and hover arrow slide effect.
   ========================================================================== */

.modal-bg{position:fixed;inset:0;z-index:1000;background:rgba(5,31,32,0.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn 200ms ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-panel{
  background:#DAF1DE;border:1px solid #8EB69B;box-shadow:0 16px 64px rgba(5,31,32,0.12);
  border-radius:28px;padding:36px;max-width:440px;width:100%;position:relative;animation:scaleIn 300ms ease;
}
@keyframes scaleIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.modal-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:#35554B;transition:all 0.2s;cursor:pointer}
.modal-x:hover{background:rgba(5,31,32,0.04);color:#051F20}
.modal-icon{width:52px;height:52px;border-radius:14px;background:rgba(35,83,71,0.08);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.modal-panel h2{font-family:var(--font-heading, 'Plus Jakarta Sans', sans-serif);font-size:1.35rem;margin-bottom:4px;color:#051F20}
.modal-sub{font-size:0.85rem;color:#35554B;margin-bottom:20px}
.modal-options{display:flex;flex-direction:column;gap:10px}
.mopt{
  display:flex;align-items:center;gap:14px;
  padding:14px;border-radius:12px;
  border:1px solid #8EB69B;transition:all 0.2s;
}
.mopt:hover{border-color:var(--color-primary-500, #235347);background:rgba(35,83,71,0.03);box-shadow:0 2px 8px rgba(35,83,71,0.06)}
.moi{width:40px;height:40px;border-radius:10px;background:rgba(35,83,71,0.08);color:var(--color-primary-500, #235347);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mot{flex:1}
.mot strong{display:block;font-size:0.9rem;font-weight:700;color:#051F20}
.mot small{font-size:0.75rem;color:#35554B}
.moa{color:#7FA994;transition:all 0.2s;display:flex;align-items:center}
.mopt:hover .moa{color:var(--color-primary-500, #235347);transform:translateX(4px)}
@media(max-width:767px){.modal-panel{padding:24px 20px}}

/* ==========================================================================
   SECTION 14: Scroll Reveal Animations
   Elements with [data-reveal] start invisible and transition into
   view when .visible is added by IntersectionObserver JS.
   Supports directions: up, down, left, right, scale.
   prefers-reduced-motion disables all animations for accessibility.
   ========================================================================== */

[data-reveal]{opacity:0;transition:all 700ms cubic-bezier(0.4,0,0.2,1);will-change:transform,opacity}
[data-reveal=up]{transform:translateY(30px)}
[data-reveal=down]{transform:translateY(-30px)}
[data-reveal=left]{transform:translateX(-30px)}
[data-reveal=right]{transform:translateX(30px)}
[data-reveal=scale]{transform:scale(0.92)}
[data-reveal].visible{opacity:1;transform:translate(0) scale(1)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none!important}
}


/* ==========================================================================
   SECTION 15: Responsive — Own Activity (max-width: 980px)
   ========================================================================== */

@media (max-width: 980px) {
  .own-activity-wrap { grid-template-columns: 1fr; text-align: center; }
  .own-activity-content p { margin-inline: auto; }
  .own-activity-tags { justify-content: center; }
}


/* ==========================================================================
   SECTION 16: Responsive — Own Activity (max-width: 760px)
   ========================================================================== */

@media (max-width: 760px) {
  .own-activity-btn { width: 100%; }
  .activity-mini-steps { grid-template-columns: 1fr; }
}