:root{
      /* Adapted to the new logo (soft green + neutral black/white) */
      --bg: #ffffff;
      --ink: #0b0b0b;
      --muted: #5b5f66;
      --line: #e6e8ec;

      --green: #9fc76d;        /* logo-like green */
      --green-2: #7fb24d;      /* darker accent */
      --green-3: #c7dfaa;      /* pale tint */

      --hero-overlay: rgba(14, 18, 12, .55);
      --card: #ffffff;

      --dark: #0f1110;         /* deep neutral for About/Footers */
      --dark-2: #0a0b0a;
      --dark-ink: rgba(255,255,255,.92);
      --dark-muted: rgba(255,255,255,.68);
      --shadow: 0 18px 40px rgba(0,0,0,.10);
      --radius: 18px;

      --max: 1120px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color: var(--ink);
      background: var(--bg);
      line-height: 1.5;
    }
    a{ color:inherit; text-decoration:none; }
    img{ max-width:100%; display:block; }
    .container{ width:min(var(--max), calc(100% - 2rem)); margin-inline:auto; }

    /* ---------- Header ---------- */
    .header{
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
    }
    .header-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 1rem;
      padding: 1rem 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap: .75rem;
      min-width: 220px;
    }
    .brand img{
      height: 44px; width: auto;
    }

    #navToggle{ display:none; }
    .burger{
      display:none;
      padding: .55rem .65rem;
      border-radius: 14px;
      border: 1px solid var(--line);
      background:#fff;
      cursor:pointer;
    }
    .burger span{
      display:block;
      width:22px; height:2px;
      background: var(--ink);
      margin: 4px 0;
      border-radius: 2px;
    }

    .nav{
      display:flex;
      gap: 1rem;
      align-items:center;
      color: #2f3136;
      font-weight: 600;
      font-size: .95rem;
    }
    .nav a{
      padding: .55rem .75rem;
      border-radius: 999px;
      transition: background .15s ease, color .15s ease;
    }
    .nav a:hover{
      background: #f3f6f2;
      color: #1e201f;
    }
    .nav a.cta{
      background: linear-gradient(180deg, var(--green) 0%, var(--green-2) 100%);
      color: #0b0b0b;
      box-shadow: 0 10px 20px rgba(159,199,109,.25);
    }
    .nav a.cta:hover{ filter: brightness(1.02); }

    /* ---------- Hero ---------- */
    .hero{
      position:relative;
      overflow:hidden;
      border-bottom: 1px solid var(--line);
    }
    .hero-media{
      position:absolute;
      inset:0;
      /* Replace with your real hero image (local file) */
      background:
        linear-gradient(var(--hero-overlay), rgba(14,18,12,.35)),
        url("hero.webp") center/cover no-repeat;
      transform: scale(1.02);
    }
    /* If hero.jpg missing, this still looks good (no external assets) */
    .hero-media::after{
      content:"";
      position:absolute;
      inset: -40px;
      background:
        radial-gradient(700px 420px at 10% 10%, rgba(159,199,109,.35), transparent 60%),
        radial-gradient(520px 320px at 90% 25%, rgba(199,223,170,.25), transparent 55%),
        radial-gradient(560px 360px at 55% 95%, rgba(127,178,77,.18), transparent 60%);
      mix-blend-mode: screen;
      pointer-events:none;
    }
    .hero-inner{
      position:relative;
      padding: clamp(3.8rem, 8vw, 6.2rem) 0;
      color: #fff;
      text-align:center;
    }
    .hero-eyebrow{
      display:inline-flex;
      align-items:center;
      gap: .55rem;
      padding: .35rem .75rem;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.18);
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: .75rem;
      color: rgba(255,255,255,.92);
    }
    .dot{
      width: 10px; height: 10px;
      border-radius: 999px;
      background: var(--green);
      box-shadow: 0 0 0 4px rgba(159,199,109,.18);
    }
    .hero h1{
      margin: 1.1rem auto 0.9rem;
      max-width: 26ch;
      font-size: clamp(1.9rem, 4.4vw, 3.2rem);
      font-weight: 900;
      letter-spacing: .02em;
      line-height: 1.08;
      text-transform: uppercase;
      text-shadow: 0 18px 40px rgba(0,0,0,.35);
    }
    .hero p{
      margin: 0 auto 1.6rem;
      max-width: 68ch;
      color: rgba(255,255,255,.80);
      font-size: clamp(1rem, 1.4vw, 1.12rem);
    }
    .hero-actions{
      display:flex;
      justify-content:center;
      gap: .85rem;
      flex-wrap:wrap;
      margin-top: .9rem;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: .55rem;
      padding: .85rem 1.15rem;
      border-radius: 14px;
      font-weight: 800;
      font-size: .95rem;
      border: 1px solid transparent;
      cursor:pointer;
      user-select:none;
      transition: transform .12s ease, filter .12s ease, background .12s ease;
      box-shadow: 0 16px 40px rgba(0,0,0,.22);
    }
    .btn:active{ transform: translateY(1px); }
    .btn-primary{
      background: linear-gradient(180deg, var(--green) 0%, var(--green-2) 100%);
      color: #0a0a0a;
    }
    .btn-primary:hover{ filter: brightness(1.03); }
    .btn-ghost{
      background: rgba(255,255,255,.10);
      color: #fff;
      border-color: rgba(255,255,255,.22);
      box-shadow: 0 16px 40px rgba(0,0,0,.14);
    }
    .btn-ghost:hover{ background: rgba(255,255,255,.14); }
    .btn svg{ width:18px; height:18px; }

    /* ---------- Section base ---------- */
    .section{ padding: clamp(2.8rem, 6vw, 4.4rem) 0; }
    .section-title{
      text-align:center;
      margin:0 0 2.2rem;
      font-size: clamp(1.35rem, 2.8vw, 2.1rem);
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .section-subtitle{
      text-align:center;
      margin: -1.4rem auto 2.6rem;
      max-width: 70ch;
      color: var(--muted);
    }

    /* ---------- Practical Info cards ---------- */
    .cards{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.2rem;
    }
    .card{
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 1.25rem 1.1rem;
      box-shadow: 0 10px 26px rgba(0,0,0,.06);
      transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    }
    .card:hover{
      transform: translateY(-2px);
      border-color: rgba(159,199,109,.55);
      box-shadow: 0 18px 44px rgba(0,0,0,.10);
    }
    .card-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 1rem;
      margin-bottom: .9rem;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding: .35rem .6rem;
      border-radius: 999px;
      background: #f3f6f2;
      border: 1px solid #e7eee1;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .06em;
      font-size: .75rem;
      color: #2a2d2a;
    }
    .pill .mini{
      width:10px;height:10px;border-radius:999px;background: var(--green);
      box-shadow: 0 0 0 4px rgba(159,199,109,.18);
    }
    .icon{
      width: 46px;
      height: 46px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(159,199,109,.26), rgba(159,199,109,.10));
      border: 1px solid rgba(159,199,109,.35);
      display:grid;
      place-items:center;
      flex:0 0 auto;
    }
    .icon svg{ width:24px; height:24px; }
    .card h3{
      margin:0 0 .35rem;
      font-size: 1.05rem;
      font-weight: 900;
      letter-spacing: .03em;
    }
    .card p{
      margin:0;
      color: var(--muted);
    }
    .card a.card-link{
      margin-top: 1rem;
      display:inline-flex;
      align-items:center;
      gap: .45rem;
      font-weight: 900;
      color: #1b1d1b;
      text-decoration: none;
      padding: .55rem .75rem;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #fff;
      width: fit-content;
    }
    .card a.card-link:hover{
      border-color: rgba(159,199,109,.55);
      background: #f6fbf2;
    }

    /* ---------- About ---------- */
    .about{
      background: radial-gradient(900px 500px at 10% 10%, rgba(159,199,109,.22), transparent 55%),
                  radial-gradient(700px 420px at 90% 30%, rgba(199,223,170,.14), transparent 55%),
                  linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
      color: var(--dark-ink);
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .about-grid{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 2.2rem;
      align-items:start;
    }
    .big-statement{
      font-size: clamp(1.8rem, 3.8vw, 3rem);
      font-weight: 300;
      line-height: 1.06;
      margin: 0 0 1.3rem;
    }
    .big-statement strong{
      font-weight: 900;
      color: var(--green);
    }
    .about-text{
      color: var(--dark-muted);
      max-width: 72ch;
      font-size: 1rem;
    }
    .about-text p{ margin: 0 0 1rem; }
    .features{
      display:flex;
      flex-direction:column;
      gap: .75rem;
    }
    .feature{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.05);
      padding: .95rem 1rem;
      display:grid;
      grid-template-columns: 44px 1fr;
      gap: .85rem;
      align-items:start;
    }
    .feature .num{
      width: 38px; height: 38px;
      border-radius: 14px;
      display:grid;
      place-items:center;
      font-weight: 900;
      color: #0b0b0b;
      background: linear-gradient(180deg, var(--green) 0%, var(--green-2) 100%);
      box-shadow: 0 10px 22px rgba(159,199,109,.18);
    }
    .feature h4{
      margin:0;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .05em;
      font-size: .92rem;
    }
    .feature p{
      margin:.25rem 0 0;
      color: rgba(255,255,255,.72);
      font-size: .95rem;
    }

    /* ---------- Footer ---------- */
    footer{
      background:#070807;
      color: rgba(255,255,255,.70);
      padding: 2.4rem 0;
    }
    .footer-grid{
      display:grid;
      grid-template-columns: 1.3fr 1fr 1fr;
      gap: 1.2rem;
      align-items:start;
    }
    .foot{
      display:flex;
      gap: .75rem;
      align-items:flex-start;
      font-size: .95rem;
    }
    .foot .fi{
      width: 42px; height: 42px;
      border-radius: 16px;
      display:grid;
      place-items:center;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      flex:0 0 auto;
    }
    .foot .fi svg{ width: 20px; height: 20px; }
    .foot small{
      display:block;
      margin-top: .25rem;
      color: rgba(255,255,255,.55);
    }
    .footer-bottom{
      margin-top: 1.4rem;
      padding-top: 1.2rem;
      border-top: 1px solid rgba(255,255,255,.10);
      display:flex;
      justify-content:space-between;
      flex-wrap:wrap;
      gap: .75rem;
      font-size: .88rem;
      color: rgba(255,255,255,.55);
    }
    .footer-bottom a{
      text-decoration: underline;
      text-underline-offset: 3px;
      color: rgba(255,255,255,.72);
    }
    .footer-bottom a:hover{ color: #fff; }

    /* ---------- Responsive ---------- */
    @media (max-width: 980px){
      .cards{ grid-template-columns: 1fr; }
      .about-grid{ grid-template-columns: 1fr; }
      .footer-grid{ grid-template-columns: 1fr; }
      .brand{ min-width: unset; }
    }
    @media (max-width: 760px){
      .burger{ display:inline-block; }
      .nav{
        position:absolute;
        top: 100%;
        left: 1rem;
        right: 1rem;
        margin-top: .6rem;
        padding: .6rem;
        border-radius: 18px;
        border: 1px solid var(--line);
        background:#fff;
        box-shadow: var(--shadow);
        display:none;
        flex-direction:column;
        align-items:stretch;
      }
      .nav a{ border-radius: 14px; }
      #navToggle:checked ~ nav.nav{ display:flex; }
    }

    /* Accessibility */
    :focus-visible{
      outline: 3px solid rgba(159,199,109,.65);
      outline-offset: 2px;
      border-radius: 12px;
    }

    /* Optional: smooth anchors (CSS only) */
    html{ scroll-behavior:smooth; }

.content-page main {
  padding-bottom: 4rem;
}
    
/* ==============================
   FORM ELEMENT STYLING
============================== */

form {
  max-width: 720px;
}

/* Labels */
label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: #1e1e1e;
}

/* Inputs, selects, textarea */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font-size: 0.95rem;
  border-radius: 10px;
  border: 1px solid #d6d9dc;
  background: #fff;
  color: #111;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
}

/* Focus state */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #9fc76d;
  box-shadow: 0 0 0 3px rgba(159,199,109,.25);
}

/* Textarea specifics */
textarea {
  min-height: 140px;
  resize: vertical;
}

/* Field groups */
.form-group {
  margin-bottom: 1.4rem;
}

/* Help text */
.form-hint {
  font-size: 0.85rem;
  color: #6b6f72;
  margin-top: 0.25rem;
}

/* Buttons */
button,
input[type="submit"] {
  appearance: none;
  border: none;
  border-radius: 12px;
  padding: 0.75rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(180deg, #9fc76d 0%, #7fb24d 100%);
  color: #0b0b0b;
  box-shadow: 0 10px 24px rgba(159,199,109,.35);
  transition: transform .12s ease, box-shadow .12s ease;
}

button:hover,
input[type="submit"]:hover {
  box-shadow: 0 14px 30px rgba(159,199,109,.45);
}

button:active,
input[type="submit"]:active {
  transform: translateY(1px);
}

/* Secondary button */
.button-secondary {
  background: #f4f6f3;
  color: #222;
  border: 1px solid #d8dcd8;
}

/* Checkbox / radio */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #9fc76d;
  width: 16px;
  height: 16px;
}

/* Form spacing helper */
.form-row {
  margin-bottom: 1.4rem;
}