:root{
  --ui-bg: #f4f7f5;
  --ui-surface: rgba(255,255,255,.86);
  --ui-surface-solid: #fff;
  --ui-border: rgba(15,42,31,.09);

  --ui-green: #19734b;
  --ui-green-dark: #0d5235;
  --ui-green-soft: #e6f3ec;

  --ui-blue: #1f5f78;
  --ui-blue-soft: #e7f1f5;

  --ui-ink: #13251d;
  --ui-muted: #66766e;

  --ui-radius-sm: 12px;
  --ui-radius: 20px;
  --ui-radius-lg: 30px;

  --ui-shadow-sm:
    0 2px 4px rgba(19,37,29,.02),
    0 8px 22px rgba(19,37,29,.05);

  --ui-shadow:
    0 2px 4px rgba(19,37,29,.025),
    0 16px 45px rgba(19,37,29,.075);

  --ui-shadow-hover:
    0 6px 12px rgba(19,37,29,.05),
    0 24px 60px rgba(19,37,29,.12);
}

[data-theme="dark"]{
  --ui-bg:#0e1512;
  --ui-surface:rgba(22,32,27,.88);
  --ui-surface-solid:#161f1b;
  --ui-border:rgba(255,255,255,.08);

  --ui-green:#59b987;
  --ui-green-dark:#3c986a;
  --ui-green-soft:rgba(89,185,135,.12);

  --ui-blue:#62a9c5;
  --ui-blue-soft:rgba(98,169,197,.12);

  --ui-ink:#eef5f1;
  --ui-muted:#a5b4ac;

  --ui-shadow-sm:0 8px 24px rgba(0,0,0,.18);
  --ui-shadow:0 20px 50px rgba(0,0,0,.25);
  --ui-shadow-hover:0 28px 70px rgba(0,0,0,.35);
}

body{
  background:
    radial-gradient(
      circle at 10% 0%,
      color-mix(in srgb,var(--ui-green) 6%,transparent),
      transparent 32rem
    ),
    var(--ui-bg) !important;
}

.ui-surface{
  background:var(--ui-surface);
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius);
  box-shadow:var(--ui-shadow-sm);
  backdrop-filter:blur(14px);
}

.ui-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;

  font-family:system-ui,sans-serif;
  font-size:.73rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--ui-green);
}

.ui-title{
  margin:0;
  color:var(--ui-ink);
  font-size:clamp(2.1rem,5vw,4.4rem);
  line-height:.98;
  letter-spacing:-.04em;
}

.ui-subtitle{
  max-width:650px;
  margin:18px 0 0;

  color:var(--ui-muted);

  font-family:system-ui,sans-serif;
  font-size:clamp(.98rem,1.5vw,1.12rem);
  line-height:1.7;
}

.ui-button{
  min-height:46px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  padding:0 18px;

  border:1px solid transparent;
  border-radius:13px;

  font-family:system-ui,sans-serif;
  font-size:.92rem;
  font-weight:750;

  text-decoration:none !important;
  cursor:pointer;

  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease;
}

.ui-button:hover{
  transform:translateY(-2px);
}

.ui-button-primary{
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      var(--ui-green),
      var(--ui-green-dark)
    );

  box-shadow:
    0 10px 24px
    color-mix(in srgb,var(--ui-green) 23%,transparent);
}

.ui-button-secondary{
  color:var(--ui-ink) !important;
  background:var(--ui-surface-solid);
  border-color:var(--ui-border);
}

.ui-input,
.ui-select{
  min-height:48px;
  padding:0 14px;

  border:1px solid var(--ui-border);
  border-radius:13px;

  outline:none;

  background:var(--ui-surface-solid);
  color:var(--ui-ink);

  font-family:system-ui,sans-serif;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.ui-input:focus,
.ui-select:focus{
  border-color:
    color-mix(in srgb,var(--ui-green) 60%,transparent);

  box-shadow:
    0 0 0 4px
    color-mix(in srgb,var(--ui-green) 10%,transparent);
}

@keyframes uiRise{
  from{
    opacity:0;
    transform:translateY(18px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

.ui-enter{
  animation:
    uiRise .65s cubic-bezier(.2,.8,.2,1) both;
}

.ui-enter:nth-child(2){ animation-delay:.06s; }
.ui-enter:nth-child(3){ animation-delay:.12s; }
.ui-enter:nth-child(4){ animation-delay:.18s; }

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}