:root {
  --accent: #76f000;
  --accent-strong: #61d800;
  --ios-blue: #007aff;
  --text: #111113;
  --secondary: #6e6e73;
  --surface: rgba(255, 255, 255, 0.82);
  --line: rgba(60, 60, 67, 0.13);
}

* { box-sizing: border-box; }

html { background: #f2f2f7; }

body {
  margin: 0;
  color: var(--text);
  background: #f2f2f7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.page-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: 44px 20px 36px;
  isolation: isolate;
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(8px);
  opacity: .24;
  pointer-events: none;
}

.ambient-one { top: -240px; left: calc(50% - 340px); background: radial-gradient(circle, #a7ff58, transparent 68%); }
.ambient-two { right: calc(50% - 390px); bottom: -260px; background: radial-gradient(circle, #83b9ff, transparent 68%); opacity: .18; }

.profile-card {
  width: min(100%, 460px);
  margin: 0 auto;
}

.profile-header { text-align: center; }

.avatar-wrap {
  position: relative;
  width: 176px;
  height: 176px;
  margin: 0 auto 24px;
}

.avatar {
  display: block;
  width: 100%;
  height: 100%;
  border: 5px solid rgba(255,255,255,.86);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 16px 42px rgba(31, 52, 17, .2), 0 2px 6px rgba(0,0,0,.08);
}

h1 {
  margin: 0;
  font-size: clamp(30px, 8vw, 38px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 740;
}

.profession {
  margin: 9px 0 24px;
  color: var(--secondary);
  font-size: 17px;
  line-height: 1.35;
}

.primary-button, .share-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 18px;
  font: inherit;
  font-size: 17px;
  font-weight: 650;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}

.primary-button {
  color: #102000;
  background: linear-gradient(180deg, #86ff13, #70ed00);
  box-shadow: 0 12px 26px rgba(92, 204, 0, .24), inset 0 1px rgba(255,255,255,.45);
}

.primary-button:active, .share-button:active, .social-card:active, .contact-row:active { transform: scale(.982); }
.primary-button:hover { filter: brightness(.97); }

.button-icon { width: 22px; height: 22px; margin-right: 9px; }
.button-icon svg, .social-icon img, .contact-icon img, .chevron svg, .toast svg { display: block; width: 100%; height: 100%; }

.section { margin-top: 30px; }

h2 {
  margin: 0 0 10px 17px;
  color: var(--secondary);
  font-size: 13px;
  font-weight: 560;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.social-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 86px;
  padding: 16px 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 7px 25px rgba(0,0,0,.055);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  transition: transform .18s ease, background .18s ease;
}

.social-card:hover { background: rgba(255,255,255,.94); }
.social-icon { flex: 0 0 auto; width: 40px; height: 40px; margin-right: 16px; border-radius: 14px; }
.social-card strong, .social-card small { display: block; }
.social-card strong { font-size: 15px; letter-spacing: -.015em; }
.social-card small { margin-top: 3px; color: var(--secondary); font-size: 12px; }
.social-card .chevron { display: none; }

.contact-list {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 7px 25px rgba(0,0,0,.055);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
}

.contact-row {
  display: grid;
  grid-template-columns: 52px 1fr 15px;
  align-items: center;
  min-height: 76px;
  padding: 10px 16px;
  transition: transform .18s ease, background .18s ease;
}

.contact-row:hover { background: rgba(255,255,255,.48); }
.contact-icon { width: 38px; height: 38px; border-radius: 13px; }
.contact-row small, .contact-row strong { display: block; }
.contact-row small { margin-bottom: 4px; color: var(--secondary); font-size: 12px; }
.contact-row strong { font-size: 16px; font-weight: 560; letter-spacing: -.01em; }
.chevron { width: 15px; height: 15px; color: #b7b7bc; }
.row-separator { height: 1px; margin-left: 68px; background: var(--line); }

.share-button {
  margin-top: 24px;
  color: var(--ios-blue);
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 7px 25px rgba(0,0,0,.045);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

footer { padding: 25px 0 4px; color: #9a9a9f; font-size: 12px; text-align: center; }

.toast {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  color: white;
  border-radius: 14px;
  background: rgba(28,28,30,.92);
  box-shadow: 0 10px 35px rgba(0,0,0,.22);
  font-size: 14px;
  font-weight: 560;
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 18px; height: 18px; color: var(--accent); }

@media (max-width: 390px) {
  .page-shell { padding: 32px 16px 26px; }
  .avatar-wrap { width: 152px; height: 152px; }
  .social-grid { grid-template-columns: 1fr; gap: 9px; }
  .social-card { min-height: 72px; }
  .social-card .chevron { display: block; margin-left: auto; }
}

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