:root {
  --forest-950: #06291d;
  --forest-900: #083824;
  --forest-800: #0d4a34;
  --forest-700: #145d41;
  --green-500: #5de486;
  --green-400: #7cf09d;
  --green-300: #9bf5b6;
  --ink: #10231a;
  --muted: #66736d;
  --paper: #f7f8f5;
  --white: #ffffff;
  --line: rgba(13, 74, 52, .10);
  --shadow: 0 12px 30px rgba(17, 41, 30, .08), 0 2px 8px rgba(17, 41, 30, .05);
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -10%, rgba(124,240,157,.11), transparent 32rem),
    linear-gradient(180deg, #fbfcfa 0%, #f5f7f4 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
.page-shell { min-height: 100vh; display: flex; flex-direction: column; }
.link-page {
  width: min(100% - 32px, 720px);
  margin: 0 auto;
  padding: 54px 0 28px;
  flex: 1;
}
.profile { text-align: center; }
.avatar {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 5px rgba(255,255,255,.9), 0 10px 28px rgba(13,74,52,.12);
}
h1 {
  margin: 18px 0 6px;
  font-size: clamp(2rem, 6vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}
.tagline {
  margin: 0 auto;
  max-width: 590px;
  color: #33443b;
  font-size: 1.05rem;
  line-height: 1.55;
}
.socials {
  display: flex;
  justify-content: center;
  gap: 17px;
  margin: 20px 0 34px;
}
.socials a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  transition: transform .18s ease, background .18s ease;
}
.socials a:hover,
.socials a:focus-visible { background: #e9f4ed; transform: translateY(-2px); outline: none; }
.socials svg { width: 25px; height: 25px; fill: var(--forest-900); }

.blueprint-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 22px;
  padding: 30px 34px;
  border-radius: 22px;
  color: white;
  background:
    linear-gradient(120deg, rgba(255,255,255,.04), transparent 48%),
    radial-gradient(circle at 88% 20%, rgba(124,240,157,.10), transparent 18rem),
    linear-gradient(145deg, var(--forest-700), var(--forest-950));
  box-shadow: 0 18px 40px rgba(6,41,29,.18);
}
.blueprint-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.12) 23px, transparent 24px);
}
.growth-mark { position: relative; height: 122px; z-index: 1; display: flex; align-items: end; gap: 9px; padding: 8px 12px 10px; }
.growth-mark span {
  width: 25px;
  height: var(--h);
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, var(--green-400), #2f8f59);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.growth-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.growth-mark path { fill: none; stroke: #8be63f; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.blueprint-copy { position: relative; z-index: 1; }
.eyebrow {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(123, 240, 94, .20);
  border: 1px solid rgba(157,255,127,.28);
  color: #baf78d;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.blueprint-copy h2 { margin: 10px 0 3px; font-size: clamp(2rem, 6vw, 2.65rem); letter-spacing: -.045em; line-height: 1; }
.blueprint-copy p { margin: 0 0 18px; color: rgba(255,255,255,.84); font-size: 1rem; }
.primary-cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 13px 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, #7eed47, #59cf28);
  color: #102814;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(95,220,50,.18), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .18s ease, filter .18s ease;
}
.primary-cta:hover, .primary-cta:focus-visible { transform: translateY(-2px); filter: brightness(1.04); outline: 3px solid rgba(124,240,157,.25); }
.primary-cta span { font-size: 1.3rem; line-height: 1; }

.links { display: grid; gap: 11px; margin-top: 14px; }
.link-card {
  min-height: 78px;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 14px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.link-card:hover,
.link-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(13,74,52,.22);
  box-shadow: 0 16px 34px rgba(17, 41, 30, .11), 0 3px 10px rgba(17, 41, 30, .06);
  outline: none;
}
.link-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--forest-900);
}
.link-icon svg { width: 23px; height: 23px; fill: white; }
.link-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.link-copy strong { font-size: 1.02rem; letter-spacing: -.01em; }
.link-copy small { color: var(--muted); font-size: .84rem; line-height: 1.3; }
.chevron { color: var(--forest-800); font-size: 1.8rem; line-height: 1; font-weight: 300; }
.helper { text-align: center; color: #45554c; margin: 24px 0 0; font-size: .88rem; }
.helper span { color: #67d96d; }

.site-footer {
  margin-top: auto;
  color: rgba(255,255,255,.88);
  background: linear-gradient(120deg, var(--forest-900), var(--forest-950));
  padding: 24px max(24px, env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));
}
.footer-inner {
  width: min(100%, 920px);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: .85rem;
}
.mini-brand { display: flex; align-items: center; gap: 12px; }
.bars { height: 28px; display: flex; align-items: end; gap: 3px; }
.bars i { display: block; width: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--green-300), #3ebc66); }
.bars i:nth-child(1){height: 8px}.bars i:nth-child(2){height: 14px}.bars i:nth-child(3){height: 21px}.bars i:nth-child(4){height: 27px}
.domain { color: rgba(255,255,255,.72); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 30;
  translate: -50% 20px;
  opacity: 0;
  pointer-events: none;
  background: #101b16;
  color: white;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 12px 35px rgba(0,0,0,.24);
  font-size: .88rem;
  transition: opacity .2s ease, translate .2s ease;
}
.toast.show { opacity: 1; translate: -50% 0; }

@media (max-width: 650px) {
  .link-page { width: min(100% - 24px, 560px); padding-top: 30px; }
  .avatar { width: 104px; height: 104px; }
  h1 { margin-top: 14px; font-size: 1.9rem; }
  .tagline { font-size: .93rem; line-height: 1.45; }
  .wide-only { display: none; }
  .socials { margin: 16px 0 26px; gap: 12px; }
  .socials a { width: 34px; height: 34px; }
  .socials svg { width: 22px; height: 22px; }
  .blueprint-card { grid-template-columns: 92px 1fr; min-height: 174px; gap: 12px; padding: 22px 18px; border-radius: 17px; }
  .growth-mark { height: 92px; gap: 5px; padding: 8px 4px 8px; }
  .growth-mark span { width: 13px; border-radius: 5px 5px 2px 2px; }
  .growth-mark path { stroke-width: 4; }
  .eyebrow { padding: 4px 7px; font-size: .58rem; }
  .blueprint-copy h2 { font-size: 1.72rem; margin-top: 8px; }
  .blueprint-copy p { font-size: .82rem; margin-bottom: 12px; }
  .primary-cta { font-size: .79rem; padding: 10px 12px; gap: 10px; }
  .links { gap: 9px; margin-top: 12px; }
  .link-card { min-height: 63px; grid-template-columns: 38px 1fr auto; padding: 9px 13px 9px 10px; gap: 11px; border-radius: 13px; }
  .link-icon { width: 36px; height: 36px; }
  .link-icon svg { width: 19px; height: 19px; }
  .link-copy strong { font-size: .92rem; }
  .link-copy small { display: none; }
  .helper { margin-top: 19px; font-size: .8rem; }
  .footer-inner { flex-direction: column; gap: 8px; text-align: center; }
  .mini-brand { flex-direction: column; gap: 6px; }
  .bars { height: 23px; }
  .bars i:nth-child(1){height:7px}.bars i:nth-child(2){height:11px}.bars i:nth-child(3){height:17px}.bars i:nth-child(4){height:22px}
}

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