:root {
  --green: #18b64b;
  --green-dark: #0d6a3d;
  --green-deep: #073f2d;
  --mist: #f4f5f7;
  --ink: #17352d;
  --muted: #718079;
  --white: #fff;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #e8eeeb;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: radial-gradient(circle at 50% 0%, #fff 0, #e8efeb 65%, #dbe5df 100%); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: start center;
  opacity: 0;
  animation: page-in .7s ease-out forwards;
}

button, a { -webkit-tap-highlight-color: transparent; }

.app-shell {
  width: min(100%, 430px);
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: var(--green-deep);
  box-shadow: 0 24px 70px rgba(5, 49, 34, .22);
}

.hero { height: clamp(300px, 45svh, 390px); position: relative; overflow: hidden; }
.hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; transform: scale(1.025); }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,22,17,.05) 18%, rgba(3,28,20,.18) 54%, rgba(3,34,24,.74) 100%); }
.hero__eyebrow {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  color: rgba(255,255,255,.88); font-size: 9px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.hero__eyebrow span { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px #6bff98; }
.hero__wave { position: absolute; z-index: 2; left: -1px; bottom: -1px; width: calc(100% + 2px); height: 42px; fill: var(--green-deep); }

.content {
  position: relative; min-height: calc(100svh - 330px); padding: 82px 18px 20px;
  background:
    radial-gradient(circle at -5% 20%, rgba(24,182,75,.18), transparent 32%),
    radial-gradient(circle at 110% 68%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(155deg, var(--green-deep) 0%, #0a5138 48%, #edf2ef 150%);
}

.ambient { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.06); pointer-events: none; }
.ambient--one { width: 230px; height: 230px; right: -150px; top: 140px; }
.ambient--two { width: 145px; height: 145px; left: -105px; bottom: 120px; }

.brand-mark {
  position: absolute; z-index: 4; width: 124px; height: 124px; left: 50%; top: -66px;
  transform: translateX(-50%) scale(.65); opacity: 0;
  animation: logo-in .85s cubic-bezier(.2,.9,.25,1.2) .18s forwards;
}
.brand-mark__glow { position: absolute; inset: -10px; border-radius: 50%; background: rgba(69,255,124,.14); filter: blur(16px); }
.brand-mark__glass {
  position: relative; width: 100%; height: 100%; border: 5px solid rgba(255,255,255,.96); border-radius: 50%; overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 30px rgba(0,28,18,.34), 0 0 0 1px rgba(255,255,255,.35);
}
.brand-mark__glass::after { content: ""; position: absolute; inset: 3px 10px 56%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.25), transparent); transform: rotate(-12deg); pointer-events: none; }
.brand-mark img { display: block; width: 100%; height: 100%; padding: 4px; object-fit: contain; object-position: center; }

.intro { position: relative; z-index: 1; text-align: center; color: white; margin-bottom: 22px; }
.intro__label { margin: 0 0 8px; color: #59d67f; font-size: 8px; font-weight: 800; letter-spacing: .2em; }
.intro h1 { margin: 0; font-size: clamp(25px, 7.8vw, 33px); line-height: 1; font-weight: 800; letter-spacing: -.045em; }
.intro h1 span { font-weight: 300; color: rgba(255,255,255,.94); }
.intro__subtitle { margin: 9px 0 0; color: rgba(255,255,255,.68); font-size: 12px; letter-spacing: .01em; }

.links { position: relative; z-index: 1; display: grid; gap: 11px; }
.link-card {
  --delay: 0s; position: relative; overflow: hidden; display: grid; grid-template-columns: 50px 1fr 27px; align-items: center; gap: 12px;
  min-height: 76px; padding: 11px 13px 11px 12px; color: var(--ink); text-decoration: none;
  background: linear-gradient(105deg, #fff, #f7f9f8); border: 1px solid rgba(255,255,255,.8); border-radius: 25px;
  box-shadow: 0 9px 24px rgba(0,30,20,.22), inset 0 1px 0 white;
  opacity: 0; transform: translateY(16px); animation: card-in .6s cubic-bezier(.2,.8,.2,1) var(--delay) forwards;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.link-card:hover { transform: translateY(-4px); box-shadow: 0 15px 32px rgba(0,30,20,.28), inset 0 1px 0 white; border-color: rgba(24,182,75,.32); }
.link-card:focus-visible { outline: 3px solid rgba(95,255,145,.8); outline-offset: 3px; }
.link-card__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: var(--green); background: linear-gradient(145deg, #f2f7f4, #e5ede9); box-shadow: inset 0 1px 2px white; }
.link-card__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.link-card__text { min-width: 0; }
.link-card__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
.link-card__description { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.link-card__arrow { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #60716b; transition: background .25s, color .25s, transform .25s; }
.link-card:hover .link-card__arrow { color: white; background: var(--green); transform: translateX(2px); }
.link-card__arrow svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.ripple { position: absolute; border-radius: 50%; background: rgba(24,182,75,.18); pointer-events: none; transform: scale(0); animation: ripple .65s ease-out; }

.footer {
  position: relative; z-index: 1; margin-top: 20px; padding: 14px 16px; display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 2px 9px;
  color: white; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; background: rgba(3,38,27,.32); backdrop-filter: blur(12px);
}
.footer__icon { grid-row: span 3; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(24,182,75,.14); }
.footer__icon svg { width: 14px; fill: var(--green); }
.footer p { margin: 0; font-size: 9px; letter-spacing: .08em; }
.footer strong { color: #54d678; }
.footer__rule { width: 100%; height: 1px; margin: 5px 0 4px; background: linear-gradient(90deg, rgba(255,255,255,.15), transparent); }
.footer small { color: rgba(255,255,255,.5); font-size: 8px; letter-spacing: .08em; }

@keyframes page-in { to { opacity: 1; } }
@keyframes logo-in { to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes card-in { to { opacity: 1; transform: translateY(0); } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

@media (min-width: 520px) {
  body { padding: 24px 0; }
  .app-shell { min-height: calc(100svh - 48px); border-radius: 34px; }
}

@media (max-width: 360px) {
  .content { padding-inline: 12px; }
  .link-card { grid-template-columns: 44px 1fr 24px; gap: 9px; min-height: 70px; border-radius: 22px; }
  .link-card__icon { width: 44px; height: 44px; }
  .link-card__title { font-size: 13px; }
}

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