@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root { --red: #e30613; --ink: #171717; --muted: #777; --paper: #fff; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; font-family: "DM Sans", Arial, sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 12% 10%, rgba(227,6,19,.12), transparent 32rem),
              linear-gradient(135deg, #171717, #303030);
}
.page { min-height: 100vh; display: flex; justify-content: center; padding: 28px 16px; }
.profile {
  width: min(100%, 510px); align-self: flex-start; background: var(--paper);
  border-radius: 26px; padding: 34px 28px 24px; text-align: center;
  box-shadow: 0 22px 70px rgba(0,0,0,.24);
}
.logo-wrap { width: 176px; height: 126px; margin: 0 auto 20px; display: grid; place-items: center; overflow: hidden; }
.logo { width: 100%; height: 100%; object-fit: contain; }
.eyebrow { margin: 0 0 5px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .2em; }
h1 { margin: 0; font-size: clamp(2.1rem, 8vw, 3rem); font-weight: 800; letter-spacing: -.06em; }
h1 span { color: var(--red); }
.intro { margin: 10px auto 28px; max-width: 330px; color: #666; line-height: 1.55; font-size: .96rem; }
.links { display: grid; gap: 12px; }
.link {
  min-height: 70px; display: grid; grid-template-columns: 44px 1fr 20px;
  align-items: center; gap: 13px; padding: 12px 16px; border: 1px solid #ececec;
  border-radius: 18px; color: var(--ink); text-align: left; text-decoration: none;
  background: #fff; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.link:hover { transform: translateY(-2px); border-color: rgba(227,6,19,.4); box-shadow: 0 8px 22px rgba(0,0,0,.07); }
.link.primary { background: #171717; color: white; border-color: #171717; }
.link-icon {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px;
  background: #f3f3f3; color: var(--ink); font-size: 1.45rem; font-weight: 800;
}
.link-icon img { width: 27px; height: 27px; display: block; }
.primary .link-icon { background: #333; color: white; }
.link strong { display: block; font-size: .98rem; font-weight: 700; }
.link small { display: block; margin-top: 3px; color: #999; font-size: .76rem; }
.primary small { color: #c7c7c7; }
.arrow { color: var(--red); font-size: 1.1rem; }
.primary .arrow { color: #fff; }
.footer { margin: 25px 0 0; color: #999; font-size: .75rem; }
.footer span { color: var(--red); padding: 0 5px; }
@media (max-width: 420px) {
  .page { padding: 12px 10px; }
  .profile { padding: 26px 17px 20px; border-radius: 22px; }
  .link { min-height: 66px; padding: 10px 12px; }
}