:root {
      --turtle-green: #198754;
      --turtle-dark: #12372A;
      --turtle-light: #f1f8f4;
    }

    body {
      min-height: 100vh;
      /*background: linear-gradient(135deg, #eaf7ef, #f8fbf9);*/
      background: linear-gradient(135deg, #12372a, #1a4d3a);
      color: #212529;
    }



    .card-body {
      background: #181a1b;
    }


.section-card {
  border: 1px solid #e4ebe7;
  border-radius: 1rem;
  background-color: #181a1b;
  color: #f8fbf9;
}

/* OLD
    .section-card {
      border: 1px solid #e4ebe7;
      border-radius: 1rem;
      background: #fff;
    }
 */

    .brand {
      color: var(--turtle-green);
      letter-spacing: 0.04em;
    }

    .hero-card {
      border: 0;
      border-radius: 1.25rem;
      overflow: hidden;
    }

    .hero-header {
      background: linear-gradient(
        135deg,
        var(--turtle-dark),
        var(--turtle-green)
      );
      color: white;
      padding: 2.5rem 2rem;
    }



    .code-block {
      display: block;
      padding: 0.85rem 1rem;
      margin-bottom: 0.75rem;
      border-radius: 0.5rem;
      background: #212529;
      color: #d1f7df;
      overflow-x: auto;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .download-code {
      display: inline-block;
      padding: 0.35rem 0.65rem;
      border-radius: 0.4rem;
      background: var(--turtle-light);
      color: var(--turtle-dark);
      font-size: 1.05rem;
      letter-spacing: 0.08em;
    }

    .file-list li {
      margin-bottom: 0.5rem;
    }

    .step-number {
      width: 2rem;
      height: 2rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border-radius: 50%;
      background: var(--turtle-green);
      color: white;
      font-weight: 700;
    }




    .hero-content {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  gap: 1.5rem;
	}

	.hero-turtle {
	  width: 130px;
	  height: 190px;
	  object-fit: contain;
	}

	/* Stack the image above the text on narrow screens */
	@media (max-width: 576px) {
	  .hero-content {
		flex-direction: column;
		gap: 0.75rem;
	  }

	  .hero-turtle {
		width: 100px;
		height: 100px;
	  }
	}