/* =====================================================
   LIFE ON LAND - COMPLETE CSS
===================================================== */


/* =====================================================
   GENERAL
===================================================== */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  min-height: 100vh;

  background: #ded0b5;

  color: #2e2a25;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  line-height: 1.6;

}


/* =====================================================
   PAGE HEADER
===================================================== */

.page-header {

  background: #315f3c;

  color: #ffffff;

  text-align: center;

  padding: 30px 20px;

  border-bottom:
    5px solid #8fa57c;

}


.page-header h1 {

  margin: 0;

  font-size: 34px;

}


.page-header p {

  margin: 5px 0 0;

  font-size: 18px;

}


/* =====================================================
   MAIN CONTAINER
===================================================== */

.prototype-container {

  max-width: 1200px;

  margin: 30px auto;

  padding: 0 20px;

}


.prototype-card {

  background: #ffffff;

  border-radius: 14px;

  padding: 30px;

  margin-bottom: 30px;

  box-shadow:
    0 4px 15px
    rgba(0, 0, 0, 0.08);

}


.prototype-card h2 {

  color: #315f3c;

  font-size: 28px;

  margin-top: 0;

}


.prototype-card h3 {

  color: #315f3c;

}


.section-intro {

  font-size: 17px;

  color: #6f665b;

}


/* =====================================================
   APP FLOW
===================================================== */

.app-flow {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: 10px;

  margin-top: 30px;

}


.flow-step {

  width: 175px;

  min-height: 170px;

  padding: 20px;

  border:
    2px solid #3d3d3d;

  border-radius: 12px;

  background: #fafafa;

  text-align: center;

}


.flow-step span {

  color: #777777;

  font-weight: bold;

  font-size: 14px;

}


.flow-step h3 {

  color: #315f3c;

  font-size: 19px;

  margin: 12px 0;

}


.flow-step p {

  color: #6f665b;

  font-size: 14px;

}


.flow-arrow {

  font-size: 28px;

  color: #315f3c;

  font-weight: bold;

}


.flow-summary {

  background: #eeeeee;

  border-left:
    5px solid #315f3c;

  text-align: center;

  padding: 20px;

  margin-top: 35px;

  font-weight: bold;

  font-size: 18px;

}


/* =====================================================
   PHONE
===================================================== */

.phone-preview {

  display: flex;

  justify-content: center;

  margin-top: 25px;

}


.phone-app {

  width: 390px;

  max-width: 100%;

  min-height: 800px;

  background: #f4ead7;

  border:
    9px solid #292722;

  border-radius: 38px;

  overflow: hidden;

  position: relative;

  box-shadow:
    0 18px 45px
    rgba(53, 44, 34, 0.20);

}


/* =====================================================
   STATUS BAR
===================================================== */

.status-bar {

  height: 34px;

  display: flex;

  justify-content:
    space-between;

  align-items: center;

  padding:
    0 12px;

  font-size: 12px;

  font-weight: bold;

  background: #f4ead7;

}


.status-right {

  display: flex;

  align-items: center;

  gap: 7px;

}


.signal {

  display: flex;

  align-items: flex-end;

  gap: 2px;

  height: 12px;

}


.signal span {

  display: block;

  width: 3px;

  background: #2e2a25;

  border-radius: 1px;

}


.signal span:nth-child(1) {
  height: 4px;
}


.signal span:nth-child(2) {
  height: 7px;
}


.signal span:nth-child(3) {
  height: 10px;
}


.wifi {

  font-size: 14px;

  line-height: 1;

}


.battery {

  width: 25px;

  height: 12px;

  border:
    1.5px solid #2e2a25;

  border-radius: 3px;

  position: relative;

  display: flex;

  align-items: center;

  padding: 1px;

}


.battery::after {

  content: "";

  position: absolute;

  right: -4px;

  top: 3px;

  width: 2px;

  height: 5px;

  background: #2e2a25;

}


.battery-level {

  width: 78%;

  height: 100%;

  background: #315f3c;

  border-radius: 1px;

}


/* =====================================================
   HEADER
===================================================== */

.top-header {

  background: #315f3c;

  padding:
    14px 18px 26px;

  text-align: center;

  position: relative;

  border-bottom:
    3px solid #8fa57c;

}


.small-brand {

  color: #ffffff;

  font-size: 17px;

  font-weight: 900;

  letter-spacing: 2px;

  margin-bottom: 7px;

}


.tagline {

  color: #f3e5cb;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 14px;

  font-style: italic;

  margin: 0;

}


.menu-button,
.back-button {

  position: absolute;

  border: none;

  background: transparent;

  cursor: pointer;

  color: #ffffff;

  z-index: 10;

}


.menu-button {

  left: 15px;

  top: 20px;

  font-size: 27px;

}


.back-button {

  right: 15px;

  top: 17px;

  font-size: 23px;

}


/* =====================================================
   MENU
===================================================== */

.menu-overlay {

  position: fixed;

  inset: 0;

  background:
    rgba(0, 0, 0, 0.45);

  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;

  z-index: 1000;

}


.menu-overlay.open {

  opacity: 1;

  visibility: visible;

}


.side-menu {

  position: absolute;

  top: 0;

  left: 0;

  width: 285px;

  max-width: 82vw;

  height: 100%;

  background: #f8f2e7;

  padding: 22px 14px;

  transform:
    translateX(-100%);

  transition:
    transform 0.3s ease;

  box-shadow:
    8px 0 20px
    rgba(0, 0, 0, 0.18);

  overflow-y: auto;

}


.menu-overlay.open
.side-menu {

  transform:
    translateX(0);

}


.menu-top {

  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  padding:
    2px 5px 18px;

}


.menu-brand {

  color: #315f3c;

  font-family:
    Georgia,
    serif;

  font-size: 20px;

  font-weight: bold;

}


.menu-tagline {

  color: #3d392f;

  font-family:
    Georgia,
    serif;

  font-style: italic;

  font-size: 14px;

  margin-top: 8px;

}


.close-menu {

  border: none;

  background: transparent;

  font-size: 25px;

  cursor: pointer;

}


.menu-link {

  width: 100%;

  display: flex;

  align-items: center;

  gap: 12px;

  border: none;

  background: transparent;

  padding: 14px 10px;

  margin-bottom: 5px;

  border-bottom:
    1px solid #e5dccd;

  text-align: left;

  color: #403b34;

  font-size: 15px;

  cursor: pointer;

  border-radius: 8px;

}


.menu-link:hover {

  background: #eee5d6;

}


.menu-icon {

  width: 13px;

  height: 13px;

  border-radius: 50%;

  display: inline-block;

  flex-shrink: 0;

}


.home-icon {
  background: #d99d45;
}


.forest-icon {
  background: #687c4f;
}


.wildlife-icon {
  background: #5d8492;
}


.habitat-icon {
  background: #9a5966;
}


.activity-icon {
  background: #bd6a39;
}


/* =====================================================
   PHONE PAGES
===================================================== */

.phone-page {

  display: none;

  padding:
    0 15px 92px;

}


.phone-page.active {

  display: block;

}


/* =====================================================
   PAGE HEADING
===================================================== */

.page-heading {

  text-align: center;

  margin:
    10px 0 18px;

  padding:
    0 10px;

}


.page-heading h1 {

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 31px;

  line-height: 1.2;

  margin:
    0 0 8px;

  color: #2e2a25;

}


.page-heading p {

  margin: 0;

  color: #c76d35;

  font-family:
    Georgia,
    serif;

  font-style: italic;

  font-size: 14px;

}


/* =====================================================
   HERO
===================================================== */

.hero-card {

  position: relative;

  margin:
    15px 8px;

  border:
    2px solid #24221d;

  border-radius: 17px;

  overflow: hidden;

  height: 190px;

  box-shadow:
    0 5px 10px
    rgba(0, 0, 0, 0.15);

}


.hero-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}


.hero-overlay {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(26, 38, 25, 0.78),
      rgba(26, 38, 25, 0.02)
    );

  display: flex;

  align-items: flex-end;

  padding: 18px;

}


.hero-overlay h2 {

  color: #ffffff;

  margin: 0;

  font-size: 21px;

}


/* =====================================================
   INFO CARD
===================================================== */

.info-card {

  background: #f8f2e7;

  border-radius: 14px;

  margin:
    14px 8px;

  padding: 16px;

  border:
    1px solid #d4c3a8;

  box-shadow:
    0 4px 9px
    rgba(0, 0, 0, 0.06);

}


.info-card h3 {

  margin:
    0 0 5px;

  color: #24482e;

}


.info-card p {

  margin: 0;

  color: #6f665b;

  font-size: 14px;

}


/* =====================================================
   TOPICS
===================================================== */

.topics-title {

  text-align: center;

  margin:
    30px 0 18px;

  font-family:
    Georgia,
    serif;

  font-size: 20px;

}


.topic-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 12px;

  padding:
    0 8px;

}


.topic-card {

  border: none;

  background: transparent;

  cursor: pointer;

  text-align: center;

  color: #2e2a25;

}


.topic-card:hover {

  transform:
    translateY(-2px);

}


.topic-circle {

  width: 74px;

  height: 74px;

  margin: auto;

  border-radius: 50%;

  overflow: hidden;

  border:
    2px solid #292722;

  box-shadow:
    0 4px 8px
    rgba(0, 0, 0, 0.15);

}


.topic-circle img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}


.topic-card span {

  display: block;

  margin-top: 7px;

  font-size: 12px;

  font-weight: bold;

}


/* =====================================================
   LARGE TOPICS
===================================================== */

.large-topic-grid {

  display: grid;

  gap: 16px;

  padding:
    0 8px;

}


.large-topic-card {

  position: relative;

  width: 100%;

  height: 155px;

  padding: 0;

  border:
    2px solid #292722;

  border-radius: 16px;

  overflow: hidden;

  cursor: pointer;

  background: #222222;

}


.large-topic-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}


.large-topic-overlay {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 16px;

  color: #ffffff;

  text-align: left;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.75),
      rgba(0, 0, 0, 0.05)
    );

}


.large-topic-overlay h2 {

  margin:
    0 0 5px;

  font-size: 23px;

}


.large-topic-overlay p {

  margin: 0;

  font-size: 13px;

}


/* =====================================================
   LOCAL NATURE CARD
===================================================== */

.local-nature-card {

  display: flex;

  align-items: center;

  gap: 12px;

  margin:
    18px 8px;

  padding: 15px;

  background: #f8f2e7;

  border:
    1px solid #d4c3a8;

  border-radius: 14px;

}


.local-nature-icon {

  width: 45px;

  height: 45px;

  border-radius: 50%;

  background: #315f3c;

  color: #ffffff;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 21px;

  flex-shrink: 0;

}


.local-nature-card h3 {

  margin:
    0 0 5px;

  color: #24482e;

}


.local-nature-card p {

  margin: 0;

  color: #6f665b;

  font-size: 13px;

}


/* =====================================================
   TOPIC DETAIL
===================================================== */

.topic-hero {

  height: 175px;

  margin:
    10px 8px 16px;

  border-radius: 16px;

  overflow: hidden;

  border:
    2px solid #292722;

}


.topic-hero img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}


.topic-description {

  background: #f8f2e7;

  border-radius: 14px;

  padding: 18px;

  margin:
    0 8px 15px;

  border:
    1px solid #d3c0a2;

}


.topic-description h2 {

  color: #24482e;

  margin-top: 0;

}


.topic-description p {

  color: #6f665b;

  line-height: 1.6;

}


/* =====================================================
   BUTTONS
===================================================== */

button {

  font-family: inherit;

}


.main-action {

  width:
    calc(100% - 16px);

  margin:
    18px 8px;

  padding: 16px;

  background: #687c4f;

  color: #ffffff;

  border:
    2px solid #3e4e30;

  border-radius: 13px;

  font-size: 16px;

  font-weight: bold;

  cursor: pointer;

}


.main-action:hover {

  background: #576b40;

}


.join-button {

  width:
    calc(100% - 16px);

  margin:
    10px 8px;

  padding: 15px;

  background: #c76d35;

  border:
    2px solid #a95728;

  color: #ffffff;

  border-radius: 12px;

  font-weight: bold;

  font-size: 16px;

  cursor: pointer;

}


.join-button:hover {

  background: #a95728;

}


/* =====================================================
   ACTIVITY FILTERS
===================================================== */

.activity-filters {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 6px;

  margin:
    15px 8px;

}


.filter-button {

  border:
    1px solid #bdaa8d;

  background: #f8f2e7;

  color: #2e2a25;

  padding:
    9px 4px;

  border-radius: 9px;

  font-size: 11px;

  cursor: pointer;

}


.filter-button:hover {

  background: #ece2d1;

}


.filter-button.active {

  background: #315f3c;

  color: #ffffff;

  border-color: #315f3c;

}


/* =====================================================
   ACTIVITY CARDS
===================================================== */

.local-activity-list {

  display: grid;

  gap: 14px;

  margin:
    0 8px;

}


.local-activity-card {

  background: #f8f2e7;

  border:
    1px solid #d4c3a8;

  border-radius: 14px;

  overflow: hidden;

  box-shadow:
    0 4px 9px
    rgba(0, 0, 0, 0.06);

}


.local-activity-image {

  width: 100%;

  height: 150px;

  object-fit: cover;

  display: block;

}


.local-activity-content {

  padding: 15px;

}


.local-activity-content h3 {

  margin:
    0 0 8px;

  color: #24482e;

}


.local-activity-content p {

  margin: 6px 0;

  color: #6f665b;

  font-size: 13px;

}


.activity-meta {

  display: flex;

  gap: 6px;

  flex-wrap: wrap;

  margin:
    10px 0;

}


.activity-tag {

  background: #eadbc0;

  color: #315f3c;

  padding:
    5px 8px;

  border-radius: 10px;

  font-size: 11px;

  font-weight: bold;

}


.activity-view-button {

  width: 100%;

  margin-top: 10px;

  padding: 12px;

  background: #315f3c;

  border:
    2px solid #24482e;

  border-radius: 10px;

  color: #ffffff;

  font-weight: bold;

  cursor: pointer;

}


.activity-view-button:hover {

  background: #24482e;

}


/* =====================================================
   ACTIVITY DETAILS
===================================================== */

.detail-card {

  background: #f8f2e7;

  border:
    1px solid #d3c0a2;

  border-radius: 14px;

  padding: 18px;

  margin:
    0 8px 15px;

}


.detail-row {

  display: flex;

  flex-direction: column;

  gap: 4px;

  margin-bottom: 14px;

}


.detail-row strong {

  color: #315f3c;

}


/* =====================================================
   CONFIRMATION
===================================================== */

.confirmation {

  text-align: center;

  padding:
    45px 20px;

}


.check-circle {

  width: 75px;

  height: 75px;

  margin:
    10px auto 20px;

  border-radius: 50%;

  background: #4e8a55;

  color: #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 42px;

  font-weight: bold;

}


.confirmation h1 {

  color: #315f3c;

}


/* =====================================================
   BOTTOM NAVIGATION
===================================================== */

.bottom-nav {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 72px;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  align-items: stretch;

  background: #315f3c;

  border-top:
    2px solid #3e6848;

  z-index: 20;

}


.bottom-nav button {

  border: none;

  background: transparent;

  color: #ffffff;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 2px;

  font-size: 13px;

  font-weight: bold;

  cursor: pointer;

  margin:
    8px 5px;

  border-radius: 12px;

  transition:
    background 0.2s ease;

}


.bottom-nav .nav-icon {

  font-size: 16px;

  line-height: 1;

}


.bottom-nav button:hover {

  background:
    rgba(255, 255, 255, 0.10);

}


.bottom-nav button.active {

  background: #628467;

}


.bottom-nav button.active:hover {

  background: #6d8e72;

}


/* =====================================================
   LOW-FI BOTTOM NAV
===================================================== */

.low-fi-app {

  position: relative;

}


.low-fi-app .bottom-nav {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

}


/* =====================================================
   FUNCTION MAPPING
===================================================== */

.function-item {

  background: #f0f6ed;

  border:
    1px solid #a4bd99;

  border-radius: 7px;

  padding: 15px;

  margin-bottom: 12px;

}


.function-item code {

  color: #245c3a;

  font-weight: bold;

}


/* =====================================================
   PROMPT
===================================================== */

.prompt-box {

  background: #f4f4f4;

  border-left:
    5px solid #c76d35;

  border-radius: 6px;

  padding: 18px;

  font-style: italic;

}


/* =====================================================
   LINKS
===================================================== */

a {

  color: #2b7dbb;

  font-weight: bold;

}


a:hover {

  color: #245c3a;

}


/* =====================================================
   FOOTER
===================================================== */

footer {

  background: #315f3c;

  color: #ffffff;

  text-align: center;

  padding: 20px;

  margin-top: 30px;

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {


  .prototype-container {

    padding:
      0 12px;

  }


  .prototype-card {

    padding: 20px;

  }


  .app-flow {

    flex-direction: column;

  }


  .flow-arrow {

    transform:
      rotate(90deg);

  }


  .flow-step {

    width: 100%;

    max-width: 300px;

  }


  .phone-app {

    width: 100%;

    max-width: 390px;

  }


  .activity-filters {

    gap: 4px;

  }


  .filter-button {

    font-size: 10px;

  }


}