:root {
      --green-dark: #123f2b;
      --green: #1f6b52;
      --green-soft: #2f8a67;
      --gold: #f2c94c;
      --cream: #fffaf0;
      --text: #173b30;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--text);
      background: var(--cream);
    }

    .page {
      min-height: 100vh;
      background:
        linear-gradient(90deg, rgba(255, 250, 240, 0.94) 0%, rgba(255, 250, 240, 0.88) 43%, rgba(255, 250, 240, 0.35) 100%),
        radial-gradient(circle at 85% 20%, rgba(242, 201, 76, 0.28), transparent 28%),
        linear-gradient(135deg, #f6fff7 0%, #fff7df 50%, #e8fff4 100%);
      overflow: hidden;
      position: relative;
    }

    .page::before {
      content: "";
      position: absolute;
      right: -120px;
      top: 120px;
      width: 650px;
      height: 650px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(31, 107, 82, 0.20), transparent 68%);
      z-index: 0;
    }

    header {
      position: relative;
      z-index: 2;

      display: flex;
      flex-direction: column;

      padding: 24px 5vw 18px;

      background: rgba(255, 255, 255, 0.86);
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
    }

    .header-top {
      display: grid;
      grid-template-columns: minmax(270px, auto) 1fr minmax(170px, auto);
      align-items: center;
      gap: 32px;

      width: 100%;
    }

    .header-navigation {
      display: flex;
      justify-content: center;

      width: 100%;
      margin-top: 20px;
    }

    @media (max-width: 900px) {
      .header-top {
        grid-template-columns: 1fr auto;
      }

      .daily-quote {
        grid-column: 1 / -1;
        grid-row: 2;
      }

      .header-navigation {
        margin-top: 14px;
      }
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 16px;
      text-decoration: none;
      color: var(--green-dark);
    }

    .brand img {
      width: 86px;
      height: 86px;
      object-fit: contain;
      filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.16));
      transform: perspective(700px) rotateY(-8deg) rotateX(5deg);
    }

    .brand-title {
      font-family: Georgia, serif;
      font-weight: 800;
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      line-height: 0.95;
    }

    nav {
      display: flex;
      align-items: center;
      gap: 28px;
      font-weight: 800;
    }

    nav a {
      text-decoration: none;
      color: var(--green-dark);
      padding-bottom: 6px;
      border-bottom: 2px solid transparent;
    }

    nav a:hover,
    nav a.active {
      border-bottom-color: var(--green);
    }

    .don-top {
      background: var(--green);
      color: white;
      padding: 13px 20px;
      border-radius: 10px;
      text-decoration: none;
      font-weight: 900;
      box-shadow: 0 10px 22px rgba(31, 107, 82, 0.25);
    }

    main {
      position: relative;
      z-index: 1;
    }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 390px;
      gap: 42px;
      align-items: center;
      padding: 56px 5vw 0;
      min-height: 590px;
    }

    .hero-text {
      max-width: 760px;
    }

    .hero h1 {
      margin: 0 0 22px;
      color: var(--green-dark);
      font-size: clamp(2.5rem, 5vw, 4.7rem);
      line-height: 1.14;
      letter-spacing: -1px;
      text-shadow:
        1px 1px 0 rgba(242, 201, 76, 0.75),
        2px 2px 0 rgba(242, 201, 76, 0.45),
        6px 10px 25px rgba(0, 0, 0, 0.10);
    }

    .hero-text p {
      font-size: clamp(1.1rem, 2vw, 1.45rem);
      line-height: 1.65;
      margin: 0 0 26px;
      max-width: 660px;
    }

    .buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 28px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 56px;
      padding: 0 26px;
      border-radius: 10px;
      font-weight: 900;
      text-decoration: none;
      font-size: 1.05rem;
    }

    .btn-primary {
      background: var(--green);
      color: white;
      box-shadow: 0 12px 24px rgba(31, 107, 82, 0.28);
    }

    .btn-secondary {
      background: rgba(255, 255, 255, 0.65);
      color: var(--green-dark);
      border: 2px solid rgba(31, 107, 82, 0.45);
    }

    .support-card {
      background: rgba(255, 255, 255, 0.92);
      border-radius: 28px;
      padding: 30px 26px;
      box-shadow: 0 24px 55px rgba(0, 0, 0, 0.16);
      text-align: center;
      border: 1px solid rgba(31, 107, 82, 0.12);
      transform: perspective(1000px) rotateY(-3deg);
    }

    .support-title {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 14px;
      color: var(--green-dark);
      font-weight: 900;
      text-transform: uppercase;
      font-size: 1.45rem;
      margin-bottom: 12px;
    }

    .support-title img {
      width: 64px;
      height: 64px;
      object-fit: contain;
    }

    .support-card .quote {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 1.35rem;
      line-height: 1.35;
      margin: 10px 0 18px;
    }

    .qr-box {
      background: white;
      border-radius: 16px;
      padding: 12px;
      display: inline-block;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
    }

    .qr-box img {
      width: min(100%, 270px);
      display: block;
      border-radius: 8px;
    }

    .scan-text {
      font-size: 1.1rem;
      line-height: 1.4;
      margin: 16px 0 22px;
    }

    .scan-text strong {
      display: block;
      color: var(--green);
      font-size: 1.35rem;
      margin-bottom: 4px;
    }

    .mission {
      margin-top: 46px;
      background:
        radial-gradient(circle at 20% 0%, rgba(242, 201, 76, 0.18), transparent 25%),
        linear-gradient(135deg, var(--green-dark), var(--green));
      color: white;
      padding: 42px 5vw 58px;
      text-align: center;
    }

    .mission h2 {
      margin: 0 0 10px;
      color: var(--cream);
      font-size: clamp(1.8rem, 3.5vw, 2.6rem);
      text-transform: uppercase;
      letter-spacing: 2px;
    }

    .mission-intro {
      max-width: 820px;
      margin: 0 auto 34px;
      line-height: 1.65;
      font-size: 1.1rem;
    }

    .values {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 22px;
      max-width: 1080px;
      margin: 0 auto;
    }

    .value {
      padding: 22px 18px;
    }

    .value-icon {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      margin: 0 auto 14px;
      background: rgba(255, 250, 240, 0.86);
      color: var(--green);
      display: grid;
      place-items: center;
      font-size: 2rem;
      font-weight: 900;
    }

    .value h3 {
      margin: 0 0 8px;
      text-transform: uppercase;
      font-size: 1.1rem;
    }

    .value p {
      margin: 0;
      line-height: 1.45;
      color: rgba(255, 255, 255, 0.9);
    }

    .side-activity-button {
      position: fixed;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 999;
      width: 92px;
      min-height: 118px;
      padding: 10px 8px;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.94);
      color: var(--green);
      text-decoration: none;
      text-align: center;
      font-weight: 900;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
      border: 2px solid var(--gold);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .side-activity-button:hover {
      transform: translateY(-50%) scale(1.05);
      box-shadow: 0 16px 38px rgba(0, 0, 0, 0.30);
    }

    .side-activity-button img {
      width: 66px;
      height: 66px;
      border-radius: 50%;
      object-fit: cover;
      display: block;
      margin: 0 auto 8px;
      border: 3px solid var(--green);
    }

    .side-activity-button span {
      display: block;
      font-size: 0.82rem;
      line-height: 1.1;
    }


    .side-calendar-button {
      position: fixed;
      right: 18px;
      top: calc(50% + 145px);
      transform: translateY(-50%);
      z-index: 999;
      width: 92px;
      min-height: 118px;
      padding: 10px 8px;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.94);
      color: var(--green);
      text-decoration: none;
      text-align: center;
      font-weight: 900;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
      border: 2px solid var(--gold);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .side-calendar-button:hover {
      transform: translateY(-50%) scale(1.05);
      box-shadow: 0 16px 38px rgba(0, 0, 0, 0.30);
    }

    .side-calendar-button .calendar-icon {
      width: 66px;
      height: 66px;
      border-radius: 50%;
      background: var(--green);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 8px;
      border: 3px solid var(--gold);
      font-size: 2rem;
      line-height: 1;
    }

    .side-calendar-button span {
      display: block;
      font-size: 0.82rem;
      line-height: 1.1;
    }

    .side-resources-button {
      position: fixed;
      right: 18px;
      top: calc(50% + 290px);
      transform: translateY(-50%);
      z-index: 999;
      width: 92px;
      min-height: 118px;
      padding: 10px 8px;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.94);
      color: var(--green);
      text-decoration: none;
      text-align: center;
      font-weight: 900;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
      border: 2px solid var(--gold);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .side-resources-button:hover {
      transform: translateY(-50%) scale(1.05);
      box-shadow: 0 16px 38px rgba(0, 0, 0, 0.30);
    }

    .side-resources-button .resources-icon {
      width: 66px;
      height: 66px;
      border-radius: 50%;
      background: var(--green);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 8px;
      border: 3px solid var(--gold);
      font-size: 2rem;
      line-height: 1;
    }

    .side-resources-button span {
      display: block;
      font-size: 0.82rem;
      line-height: 1.1;
    }


    footer {
      background: #0d2c1f;
      color: white;
      text-align: center;
      padding: 22px;
      font-size: 0.95rem;
    }

    @media (max-width: 980px) {
      nav {
        order: 3;
        width: 100%;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
      }

      .hero {
        grid-template-columns: 1fr;
        padding-top: 38px;
      }

      .support-card {
        max-width: 420px;
        margin: 0 auto;
        transform: none;
      }

      .values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 620px) {
      .brand img {
        width: 68px;
        height: 68px;
      }

      .brand-title {
        font-size: 1.55rem;
      }

      .don-top {
        width: 100%;
        text-align: center;
      }

      .hero {
        padding-left: 22px;
        padding-right: 22px;
      }

      .support-card {
        padding: 22px 16px;
      }

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

      .side-activity-button {
        right: 10px;
        width: 76px;
        min-height: 98px;
        border-radius: 18px;
      }

      .side-activity-button img {
        width: 52px;
        height: 52px;
      }

      .side-activity-button span {
        font-size: 0.72rem;
      }

      .side-calendar-button {
        right: 10px;
        top: calc(50% + 125px);
        width: 76px;
        min-height: 98px;
        border-radius: 18px;
      }

      .side-calendar-button .calendar-icon {
        width: 52px;
        height: 52px;
        font-size: 1.55rem;
      }

      .side-calendar-button span {
        font-size: 0.72rem;
      }

      .side-resources-button {
        right: 10px;
        top: calc(50% + 235px);
        width: 76px;
        min-height: 98px;
        border-radius: 18px;
      }

      .side-resources-button .resources-icon {
        width: 52px;
        height: 52px;
        font-size: 1.55rem;
      }

      .side-resources-button span {
        font-size: 0.72rem;
      }

    }