:root {
  --bg: #f4f7f5;
  --surface: #ffffff;
  --surface-2: #f8faf9;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e2e8e5;

  --accent: #35c96f;
  --accent-dark: #16894a;

  --shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
  --radius: 22px;
  --maxw: 920px;
}

/* ===== Global styles ===== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  color: var(--text);

  background:
    radial-gradient(
      circle at top left,
      rgba(53, 201, 111, 0.12),
      transparent 28%
    ),
    radial-gradient(
      circle at top right,
      rgba(163, 230, 53, 0.12),
      transparent 24%
    ),
    linear-gradient(
      180deg,
      #f8fbf9 0%,
      #eef5f1 100%
    );

  line-height: 1.65;
}

a {
  color: var(--accent-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible {
  outline: 3px solid rgba(53, 201, 111, 0.35);
  outline-offset: 3px;
  border-radius: 5px;
}

/* ===== Legal page layout ===== */

.page {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 16px 48px;
}

/* ===== Legal page hero ===== */

.hero {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f1fff6 100%
    );

  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow);
  border-radius: 28px;

  padding: 22px 20px 18px;
  text-align: center;
  margin-top: 14px;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.hero::before {
  width: 220px;
  height: 220px;
  right: -70px;
  top: -70px;

  background:
    radial-gradient(
      circle,
      rgba(53, 201, 111, 0.19),
      transparent 65%
    );
}

.hero::after {
  width: 180px;
  height: 180px;
  left: -60px;
  bottom: -60px;

  background:
    radial-gradient(
      circle,
      rgba(163, 230, 53, 0.16),
      transparent 65%
    );
}

/* ===== Legal page logo ===== */

.logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  background: transparent;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  overflow: hidden;
  animation: floaty 5s ease-in-out infinite;
  padding: 0;
}

.logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* ===== Legal page headings ===== */

.eyebrow {
  display: inline-block;
  margin-top: 16px;
  padding: 7px 12px;

  border-radius: 999px;
  background: rgba(53, 201, 111, 0.13);
  color: var(--accent-dark);

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

h1 {
  margin: 12px 0 10px;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.08;
}

.lead {
  max-width: 700px;
  margin: 0 auto;

  color: var(--muted);
  font-size: 1.03rem;
}

/* ===== Legal page metadata ===== */

.meta {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;

  margin-top: 16px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 9px 12px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);

  color: #374151;
  font-size: 0.95rem;
}

/* ===== Cards ===== */

.nav-card,
.content-card,
.footer-card {
  margin-top: 18px;

  background: var(--surface);
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: var(--radius);

  box-shadow: var(--shadow);
}

/* ===== Navigation ===== */

.nav-card {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;

  padding: 12px;
}

.nav-link {
  padding: 10px 14px;
  border-radius: 12px;

  color: #374151;
  font-weight: 700;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.nav-link.active,
.nav-link:hover {
  background: rgba(53, 201, 111, 0.13);
  color: var(--accent-dark);
  text-decoration: none;
}

/* ===== Legal content ===== */

.content-card {
  padding: 26px 18px;
}

.section {
  padding: 6px 0 18px;
  border-bottom: 1px solid var(--border);
}

.section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.section h2 {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
}

.section p,
.section li {
  color: #374151;
}

.section ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

/* ===== Highlight boxes ===== */

.highlight {
  margin-top: 14px;
  padding: 14px 15px;

  border-radius: 16px;
  border: 1px solid rgba(53, 201, 111, 0.24);

  background:
    linear-gradient(
      180deg,
      #effff5 0%,
      #ffffff 100%
    );
}

.contact-box {
  margin-top: 12px;
  padding: 14px 15px;

  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
}

/* ===== Legal footer ===== */

.footer-card {
  padding: 18px;
  text-align: center;
}

.small {
  color: var(--muted);
  font-size: 0.95rem;
}

/* ===== Shared logo animation ===== */

@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

/* ===== Desktop legal page adjustments ===== */

@media (min-width: 768px) {
  .page {
    padding: 28px 24px 60px;
  }

  .hero {
    padding: 30px 34px 24px;
  }

  .content-card {
    padding: 34px;
  }
}

/* ==================================================
   Landing page
   ================================================== */

body.landing-page {
  min-height: 100vh;

  background:
    linear-gradient(
      rgba(16, 24, 40, 0.30),
      rgba(16, 24, 40, 0.40)
    ),
    url("zoo-background.jpg") center / cover no-repeat;
}

.landing {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 100vh;
  padding: 24px;
}

.landing-overlay {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.05),
      transparent 40%
    );

  pointer-events: none;
}

.landing-content {
  position: relative;
  z-index: 1;

  text-align: center;
}

/* ===== Landing app icon ===== */

.landing-logo {
  display: block;

  width: min(56vw, 300px);
  aspect-ratio: 1;
  margin: 0 auto;

  object-fit: cover;

  border: 5px solid rgba(255, 255, 255, 0.92);
  border-radius: 24%;

  box-shadow:
    0 0 0 2px rgba(18, 24, 38, 0.24),
    0 22px 50px rgba(0, 0, 0, 0.42),
    0 8px 18px rgba(0, 0, 0, 0.30);

  animation: logoIdle 6s ease-in-out infinite;
}

/* ===== Landing app name ===== */

.landing-app-name {
  margin: 22px 0 8px;

  color: #ffffff;

  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.035em;

  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.28),
    0 7px 18px rgba(0, 0, 0, 0.42);
}

.landing-app-name .trademark {
  display: inline-block;

  margin-left: 0.08em;

  font-size: 0.42em;
  vertical-align: top;

  transform: translateY(-0.02em);
}

/* ===== Landing slogan ===== */

.landing-slogan {
  margin: 0 0 26px;

  color: rgba(255, 255, 255, 0.92);

  font-size: clamp(1rem, 2.8vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.04em;

  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.45),
    0 6px 16px rgba(0, 0, 0, 0.30);
}

/* ===== Landing icon animation ===== */

@keyframes logoIdle {
  0% {
    transform: translateY(0) scale(1);
  }

  25% {
    transform: translateY(-6px) scale(1.01);
  }

  50% {
    transform: translateY(0) scale(1);
  }

  75% {
    transform: translateY(5px) scale(0.995);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

/* ===== Store badges ===== */

.store-badges {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.store-badge {
  display: block;

  width: auto;
  height: 60px;

  filter:
    drop-shadow(
      0 8px 18px rgba(0, 0, 0, 0.25)
    );

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.store-badges a:hover .store-badge {
  transform: translateY(-2px);
  opacity: 0.95;
}

.google-play-badge {
  height: 60px;
}

/* ===== Landing footer links ===== */

.landing-footer {
  position: absolute;
  bottom: 16px;
  left: 0;

  width: 100%;

  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  text-align: center;
}

.landing-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.landing-footer a:hover {
  text-decoration: underline;
}

.footer-divider {
  margin: 0 8px;
  opacity: 0.7;
}

/* ===== Mobile landing page adjustments ===== */

@media (max-width: 600px) {
  .landing {
    padding: 20px 18px 70px;
  }

  .landing-logo {
    width: min(64vw, 230px);
    border-width: 4px;
  }

  .landing-app-name {
    margin: 18px 0 8px;
  }

  .landing-slogan {
    margin-bottom: 22px;
  }

  .store-badge,
  .google-play-badge {
    height: 50px;
  }
}

/* ===== Reduced motion accessibility ===== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .logo-wrap,
  .landing-logo {
    animation: none;
  }

  .store-badge {
    transition: none;
  }
}