/* ==========================================================================
   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=Inter:wght@400;500;600;700;800&family=Varela+Round&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, 'Inter', sans-serif);
      background: #f7fbf8;
      color: #10231f;
      overflow-x: hidden;
    }

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


/* ==========================================================================
   SECTION 2: Header / Navigation
   Fixed glass-effect header with logo, nav links, CTA buttons,
   and hamburger menu icon. Uses backdrop-filter for frosted glass.
   Logo uses Varela Round 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: rgba(255,255,255,0.75);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.5);
      border-radius: 20px;
      box-shadow: 0 4px 24px rgba(15,23,42,0.06);
    }

    .logo {
      font-family: var(--font-heading, 'Varela Round', sans-serif);
      font-size: 22px;
      color: var(--color-primary-600, #059669);
      display: flex;
      align-items: center;
      gap: 8px;
    }

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

    .nav a {
      font-size: 14px;
      font-weight: 600;
      color: #64748B;
      transition: color 0.2s;
    }
    .nav a:hover { color: #0F172A; }
    .nav a.active { color: var(--color-primary-600, #059669); }

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

    .btn-outline {
      padding: 10px 20px;
      border-radius: 999px;
      border: 1.5px solid #E2E8F0;
      background: transparent;
      color: #1E293B;
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.2s;
    }
    .btn-outline:hover { border-color: #94A3B8; background: #F8FAFC; }

    .btn-primary-nav {
      padding: 10px 22px;
      border-radius: 999px;
      border: none;
      background: linear-gradient(135deg, var(--color-primary-600, #059669), var(--color-primary-500, #10B981));
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 4px 12px rgba(5,150,105,0.25);
    }
    .btn-primary-nav:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(5,150,105,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: #0F172A;
    }

    .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(15,23,42,0.82) 0%, rgba(15,23,42,0.82) 40%, rgba(15,23,42,0.35) 65%, rgba(15,23,42,0.1) 100%);
    }

    @media (max-width: 768px) {
      .hero-overlay {
        background: linear-gradient(0deg, rgba(15,23,42,0.85) 0%, rgba(15,23,42,0.7) 50%, rgba(15,23,42,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: #64748B;
      cursor: pointer; animation: scrollBounce 2.4s ease-in-out infinite;
      transition: color 0.2s;
    }
    .scroll-down:hover { color: var(--color-primary-600, #059669); }
    .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: #F1F5F9;
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 22px;
    }

    .hero h1 {
      font-family: var(--font-heading, 'Varela Round', 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, #6EE7B7, #34D399);
      -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: #CBD5E1;
    }

    .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, #6EE7B7, #34D399);
      color: #0F172A;
      box-shadow: 0 20px 42px rgba(52,211,153,.25);
    }

    .secondary-btn {
      background: rgba(255,255,255,.08);
      backdrop-filter: blur(12px);
      color: #F1F5F9;
      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: #2d5a45;
      font-weight: 800;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .12em;
    }

    .section-title h2 {
      margin-top: 12px;
      font-family: var(--font-heading, 'Varela Round', 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(17,58,54,.08);
      box-shadow: 0 18px 50px rgba(17,58,54,.06);
      transition: .25s ease;
    }

    .feature-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 70px rgba(17,58,54,.12);
    }

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

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

    .feature-card p {
      color: #526660;
      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, 'Varela Round', 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: #526660;
      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(17,58,54,.14);
    }

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

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

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

    .progress span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #113a36, #7bbd79);
    }


/* ==========================================================================
   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(17,58,54,.08);
      color: #40544f;
      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(17,58,54,.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(17,58,54,.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(17,58,54,.08);
      box-shadow: 0 18px 50px rgba(17,58,54,.08);
    }

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

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

    .card strong {
      color: #113a36;
    }

    .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: #071b18;
      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, 'Varela Round', 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-600, #059669);
      color: #fff;
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: background 0.2s;
    }

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

    .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: #1E293B; 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;
      }
    }

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

      .nav {
        position: fixed; inset: 64px 8px auto 8px;
        background: rgba(255,255,255,0.96);
        backdrop-filter: blur(16px);
        border: 1px solid #F1F5F9;
        border-radius: 16px;
        flex-direction: column; padding: 24px;
        transform: translateY(-120%);
        transition: 0.3s ease;
        gap: 16px;
        box-shadow: 0 16px 48px rgba(15,23,42,0.1);
      }
      .nav.open { transform: translateY(0); }

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

      .hero {
        min-height: auto;
        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: #2d5a45;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

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

.own-activity-content p {
  margin-top: 18px;
  max-width: 650px;
  color: #526660;
  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(17,58,54,.12);
  color: #2d5a45;
  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, #113a36, #2d5a45);
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 20px 42px rgba(17,58,54,.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(17,58,54,.14);
}

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

.activity-mini-header strong { color: #113a36; }

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

.activity-mini-body {
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, #113a36, #2d5a45);
  color: #ffffff;
}

.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(17,58,54,.08);
  color: #40544f;
  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(30,41,59,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:rgba(255,255,255,0.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.5);box-shadow:0 16px 64px rgba(15,23,42,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:#64748B;transition:all 0.2s;cursor:pointer}
.modal-x:hover{background:rgba(30,41,59,0.04);color:#0F172A}
.modal-icon{width:52px;height:52px;border-radius:14px;background:rgba(5,150,105,0.08);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.modal-panel h2{font-family:var(--font-heading, 'Varela Round', sans-serif);font-size:1.35rem;margin-bottom:4px;color:#0F172A}
.modal-sub{font-size:0.85rem;color:#64748B;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 #E2E8F0;transition:all 0.2s;
}
.mopt:hover{border-color:var(--color-primary-600, #059669);background:rgba(5,150,105,0.03);box-shadow:0 2px 8px rgba(5,150,105,0.06)}
.moi{width:40px;height:40px;border-radius:10px;background:rgba(5,150,105,0.08);color:var(--color-primary-600, #059669);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:#0F172A}
.mot small{font-size:0.75rem;color:#64748B}
.moa{color:#94A3B8;transition:all 0.2s;display:flex;align-items:center}
.mopt:hover .moa{color:var(--color-primary-600, #059669);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; }
}